Landing button

What it is

Not .btn, and the file says why. The app's button is a 44px control with a control radius, because inside a task a button is one of several and never the point. On the public page there is one action, and it is the largest control on screen: 3.25rem tall, fully round, with a petrol glow under it. Two buttons with two jobs are two components; a modifier of .btn would have to undo most of what .btn is.

The swap button is one component wherever it stands (the founder, round four: "одинаковая анимация"). Under a pointer its circle travels to the left end; each letter of "Get started free" is erased as the circle reaches it, each letter of "Sign in" appears as it uncovers it, and the arrow becomes a person. The pill itself never moves. It stands in the hero and in the close.

It travelled into the app once, as a modifier and not as this class. The locked block sells Tendd Pro inside Home and the reveal, and on 2026-09-29 it took the pill shape and the travelling arrow as .btn.pill and .btn.go (P34), so the app's own states and ring still hold. See Button.

Live, pinned light

Rendered by the real landing-button.css inside a .landing pinned to data-theme="light", so it is white in the dark stand too, as node 1.1 is for a person who chose dark in Settings.

• .lp-btn the pill: petrol fill, the ink on action, a 999px radius, an inset highlight and a petrol glow. Two locals, --bg and --fg, so the ghost and the hover change one variable each
• .lp-ghost the quiet twin on the surface, with a hairline edge and a shadow cast in --tone-shade
• .lp-sm the bar's size, 2.5rem. Below 23.75rem of container it tightens once more, so the bar never wraps
• .lp-arw the swap button: .lp-l1 and .lp-l2 are the two labels as rows of .lp-ch letters, .lp-arw-ic the white circle holding the arrow .lp-aa and the person .lp-pp. The accessible name is the aria-label; the letters are aria-hidden

What this stand cannot show. The swap needs two numbers the page script measures from where each letter falls: --travel, the circle's distance, and a --di/--db delay per letter, inverted from the curve. They arrive as inline properties at runtime, and a stand page carries no inline style, so here the circle stays at the right end and the second label appears all at once under a pointer. The motion is read on the landing.

Behaviour on width

The hover lift, the glow ring and the advancing arrow sit behind @media (hover: hover) and (pointer: fine) and a container of at least 47.5rem; the swap additionally behind prefers-reduced-motion: no-preference. On a phone the pill is a plain pill, and in the hero it takes the full width of the column below 40rem (landing-hero.css).

Limits

U13, context, read on the landing. The lift is one nudge, 2px, and the arrow advances 3px toward where it points, so the distances are the app's. The durations are not: the landing's hover is --lp-hover-t, .85s on --lp-ease, slow and soft by the founder's note on round two, because the landing is the one fluid surface and declares its motion as locals of its own (landing-shell.css). Inside the app a button still answers in --dur-state. Full table: Usage rules.

U1 holds on the page. One filled pill per zone: the bar, the hero and the close each carry one, and the pricing row carries the filled pill only on the year. Every colour is a role or a share of one through color-mix; no alpha of a colour is written twice.

Where it comes from

Drawn by design/system/components/landing-button.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, in the bar, the hero, the pricing row and the close, and inside the sign-in panel. 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 atom group.