Landing type
The public page's voice at display size: the dotted eyebrow, the display heading and its lede, a card's title and body, the tag, the badge, the text link, the line icon, and the heading whose words rise one after another.
What it is
Why not the app's type roles. The app sets a heading at --type-head and never larger, because inside a task the number is the biggest thing on screen. This page argues, and its headings are up to seven times that, scaled with the width through clamp(). So these roles are this page's alone, one file of small atoms rather than nine files of one rule each, and nothing in .app reads them.
One file, registered as one component. Every rule in it is a type role or the one glyph the roles carry (.lp-ico); none contains another. It is filed as a single row in the atom group, the way destination icon is one row for four masks.
Live, pinned light
How it works
Three steps, a few minutes. You are in control the whole way.
Everything in one place
Every subscription and recurring charge, pulled together and grouped by category. One calm list instead of a dozen forgotten logins.
Example, not your data Active Trial Cancelled
.lp-eyebrowuppercase at .75rem and .14em tracking, muted, with a petrol dot in a 12% petrol halo. The same dot the locked block borrowed on 2026-09-29 (P34).lp-displaythe section heading: 700, -.04em, .95 line height,clamp(2.6rem, 6.2vw, 6.25rem), balanced. A block may resize it (the FAQ and the close do) and never re-weight it.lp-ledethe sentence beside a heading, fluid 1.0625 to 1.25rem at 38ch.lp-h3a card's title.lp-bodya card's muted body.lp-accpetrol ink on a word or a figure: "Calmly." and the two example figures.lp-taga small caption pill with a warm dot in--text-attention: "Example, not your data", which is the page's honesty about its numbers.lp-badgea row's status in the example list:.lp-b-actselected petrol,.lp-b-trialattention,.lp-b-offthe failure wash, each a role pair.lp-linkthe text link with a 35% petrol underline and an arrow that advances under a pointer.lp-icothe line icon every block draws: 1.7 stroke, round caps,currentColor.lp-w .lp-wia heading split into words, each in a window a little larger than itself so no descender is clipped, rising in order through--i. The heading keeps its whole sentence asaria-labeland every word isaria-hidden
The rise is not on this stand, on purpose. The words are hidden only when the boot script has marked the page lp-js and motion is allowed (landing-shell.css). This specimen carries no script, which is the page's own no-script state: every word stands where it lands.
Behaviour on width
Fluid, with no point of its own: every size is a clamp() of the width. One container step, below 40rem, where a badge shrinks to .6875rem so a row of the example list keeps its figure.
Limits
Never inside .app. The app's biggest thing is the monthly total (design principle 2); a display heading beside it would be two headlines. The locked block took the eyebrow's look on 2026-09-29 and wrote it into locked-list.css at the app's own sizes (P34, "the landing's display type size" rejected), rather than reading this file.
The badges are the one place the landing shows status colour, and they stay the role pairs the app's tones read: attention for a trial, the failure wash for cancelled, never red (D-Concept).
Where it comes from
Drawn by design/system/components/landing-type.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 every block and in 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.