Landing auth
The way in, as the public page draws it: the sign-in panel in three steps, the two doors of Get started in the same card, the dialog that holds either over the landing, and the page that holds them everywhere else.
What it is
The founder found the sign-in screen dull and wordy and asked for the action in front: Google first, with its mark, email as a second button that leads to the field, in a dialog rather than a separate page, and the explanations moved to the privacy policy and the terms (P17). The panel is node 1.6 in three steps, choose, email and sent; the start panel is node 1.2, two doors drawn identically (D2) with a picture on each.
One card, two hosts. On the landing a plain click on any link to sign in or to get started opens a native <dialog> over the page, which holds still under it. The links stay links, so a new tab or a page with no script reaches /sign-in and /path-choice, where the same card stands on .lp-gate: the lockup above, a pale wash and two dotted orbits behind. Those are sign-in and path choice in this repository.
Pinned light like the page it opens over, and scoped to .landing: the panel is light in both themes.
Live, pinned light
The page form: the gate, on step one
Sign in
New to Tendd? Either way starts your account.
By continuing you agree to our Terms and Privacy Policy.
.lp-gate-barthe lockup at the bar's size, no signature: the arrival plays on the landing's bar only (U14).lp-gate-mainthe centre, with two dotted orbits drawn still behind the card: the close of the public page, quoted.lp-modal-cardthe card, 27rem, the landing's large radius, a selected wash from the top, shadows in--tone-shade. It rises once on arrival.lp-auth-orbitthe mark on a dotted ring with six of the fourteen marks circling it: two sines, one for depth and one for the sweep, a sixth of a turn apart. CSS keyframes, so the stand shows them moving.lp-auth-googlethe page's pill at full width, with the provider's mark in a white disc.lp-auth-g, and a light that crosses it once.lp-auth-mailthe quiet twin,.lp-ghost, with the envelope.lp-auth-legalthe one legal line, where the account is made
The Google mark is not on this stand. It is Google's own file, public/auth/google.svg in the product, and this repository holds no copy of it, so the white disc stands empty here. The button exists only where the provider does (P11).
Step two, the field, and step three, sent
Sign in
We'll email you a link. There is no password.
By continuing you agree to our Terms and Privacy Policy.
Check your email
A link is on its way to emma@example.com.
Give it a minute, and look in your spam folder.
.lp-auth-backthe way back to step one, top left of the card.lp-auth-fieldone pill whose label rises out of the way on focus or once there is a value; it takes petrol on focus.lp-auth-sendthe full-width send, disabled until the address is plausibledata-step="sent"the mark turns into an envelope.lp-auth-envand two waves leave it; the orbit goes on.lp-auth-againthe resend, disabled for a minute with.lp-auth-coolfilling under it;.lp-auth-textis the text button beside it
Get started, the two doors (node 1.2)
Step 1 of 3
How do you want to start?
Adding them yourself is free and unlimited. The first bank scan is free too, and seeing every name it finds is Tendd Pro.
Connect your bank
Read-only, through Plaid, and about a minute. Tendd cannot move your money.
Choose this pathAdd them yourself
Start with one and add more later. No bank is involved, and nothing leaves your control.
Choose this pathAlready have an account? Sign in
.lp-modal-card.lp-widethe same card at 48rem, for two doors.lp-startstep one of three, the heading and the D-Gate promise.lp-doors .lp-doortwo doors drawn identically (D2), each a link to sign in with the door carried.lp-art-bankthe bank sending what it reads along a locked wire.lp-art-wire.lp-art-listthe manual door's picture: a short list with the next row being written,.lp-art-new.lp-start-footDo this later, and the way back for somebody who already has an account
Behaviour on width
One container point, 40rem. Below it the dialog becomes a sheet that rises from the foot, the card loses width and padding, the orbit tightens, the two doors stack and their pictures scale to .78. The panel's height is measured by the component and written as a transition, so a taller step opens the card and a shorter one closes it; on this stand each step is drawn at its own height.
Limits
The dialog is not a route. A modal that owns a URL costs the root layout a parallel slot and gives a sign-in form a history entry nobody asked for (P17, rejected). Guards, expired links and the doors of node 1.2 land on the page form because they arrive by address.
The keyframes are this file's, because the orbit runs on its own clock, which a transition cannot. Under reduced motion base.css ends each at once: the tiles stand still at their declared places and every arrival is already arrived.
No divider reading "or" between the two buttons: no line owns it, and two stacked buttons of different weight already read as a choice (P17, rejected).
Where it comes from
Drawn by design/system/components/landing-auth.css through ../system/index.css, the same entry point a product screen loads, and synced byte for byte from the product on 2026-09-30. It stands on the coloured landing inside the dialog, and on sign-in and path choice as the gate. The grey wireframes/index.html is frozen at the structure before Light 2 and does not carry it: a component that arrived with a founder's decision after the grey closed, like the brand mark before it. Registered in docs/inventory.md and in _nav.js, in the organism group.