Landing bar

The public page's header and its curtain: the lockup, three section links and the two ways in, floating over the first card with no ground of its own until the page moves.

Organism .lp-nav 1 grey page, before Light 2 ground: none / frosted once scrolled. links: shown / gone at 60rem added 2026-08-14, rewritten 2026-09-26 for Light 2 (P16)

Since Light 2

Synced from the product, 2026-09-30 (P16). The bar was rewritten whole with the page. It is fixed over the first card, inside the landing's inset, and it has no ground while the page is at its top, so the promise under it reads through nothing; the moment the page moves it gains .is-scrolled, a frosted surface at 80% with a hairline and a shadow cast in --tone-shade, and its corners round to 1.25rem. The curtain is this file's too: once per load, only when the boot script ran, a pale sheet with the lockup, a count from 000 to 100 and a petrol line, which then lifts off the top.

Live below, rendered by the real css inside a .landing pinned to data-theme="light", white in the dark stand too, as node 1.1 is for a person who chose dark in Settings (P16).

For people who are not into finance

Tendd shows every subscription and recurring charge in one calm view, so you always know what is going out. No spreadsheets, no judgment, no surprises.

See how it works

No bank connection needed to start. Read-only, we cannot move your money.

Once the page has moved: .is-scrolled

Tendd shows every subscription and recurring charge in one calm view, so you always know what is going out. No spreadsheets, no judgment, no surprises.

The curtain is not on this stand. It exists only when the boot script has run (.landing.lp-js), and a stand specimen carries no script; under reduced motion it is never drawn at all.

Behaviour on width

Container points, all of this file: at 68.75rem the links close up, at 60rem they leave rather than fold into a menu (they point at blocks a phone reaches by scrolling), and under 40rem "Sign in" leaves the bar too, the bar shortens to 56px and the lockup steps down. The small pill tightens once more under 23.75rem (landing-button.css). The bar never wraps. On this stand the three links never show: the widest stage the stand builds is about 926px of container (_page.css, "a stage that has to cross 900"), under the 60rem at which they arrive. They are read on the landing from a 960px window up.

U3, composition and context. Exactly one .appbar per screen, and none on the landing: the landing carries this header instead. U14, context. The brand moves once on arrival and only here, on the public page's bar; the 54 app pages that carry a lockup do not carry .signature. Full table: Usage rules.

It stopped being sticky and opaque. Until 2026-09-26 the bar was the one sticky thing in the product with an opaque fill and no blur "because this system has no blur". Light 2 is cards floating over paper, and the frosted ground is the landing's own glass (--lp-glass family, landing-shell.css). Blur stays out of the app.

What it was, until 2026-09-26

Synced from the product, 2026-09-30 (P16). This section and every one after it, down to "Where it comes from", describe this component as it stood before Light 2 replaced the public page on 2026-09-26. Its classes then were .lp-links, .signin and a .btn.primary, an opaque sticky bar with the links appearing at 47.5rem. None of it is a present-tense claim about the product any more; what is true now is Since Light 2 above. It is kept as the record, because a stand amends its history and does not delete it.

It is not the app bar. .appbar holds one screen's identity and at most two slots, and past the tablet point it leaves the top of the glass entirely and becomes the head of the rail. This one stays a bar at every width, holds a set of anchors, and never moves: a public page has no rail to move into.

It is the one sticky thing in this product. Inside the app nothing sticks to the top, because the content is what the person came for. Here the one action is what the page is for, and a visitor who has read as far as the pricing should not have to scroll back up to take it. The fill is opaque, so nothing shows through and no blur is needed; this system has no blur and gains none here.

Anatomy, until 2026-09-26

Behaviour on width

One point, the registered 47.5rem: the section links appear and the bar grows from 64px to 72. The links use display: none and not visibility, so they leave the accessibility tree with the pixels. On a phone the page is the navigation.

Limits, until 2026-09-26

The bar wraps, and that is the reader's text size taken seriously. At a 24px root the two actions alone measure 263px, and with the lockup beside them the bar ran past a 390 screen. The alternatives were hiding Sign in on a phone, which removes a control somebody may be looking for, and shrinking the button, which is a size the button component owns. Wrapping costs one row of height at a text size most people never set.

Where it comes from

Drawn by design/system/components/landing-bar.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, fixed over its first card. 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.