Entry screens: hub, sign-in, 404

Three screens every app has, and each one is a rendering of something the system already knows.

The hub — examples/hub-page.tsx, wrapped in HubShell

The workspace's front door: the tools as tiles, from the same PRODUCTS array the rail's switcher and the 404 read.

A tile is: the icon in accent ink, the name in mono caps, an ↗ mark, and one sentence saying what question the tool answers. The sentence is the point — a grid of names is a menu, and a reader choosing a tool is choosing a question.

• Tile: 16 px radius, 1px border, card fill, 24 px padding, 12 px internal gap.
• Grid: 1 / 2 / 3 columns at base / md / lg, 16 px gap.
• Hover: border steps to --border-strong and the fill to the accent tint. The icon animates only on a tile that goes somewhere.
• soon: no link, 60% opacity, still icon in secondary ink, a mono-caps SOON — the same signal the rail gives.
• adminOnly: absent for a member; present on an unconfigured deploy, because the route really is open and hiding the tile would hide that fact.

The h1 may carry one to three accented words, and only when they are the subject.

Sign-in — examples/login-page.tsx

A split card, centred, max-w-4xl (max-w-sm on a phone).

• Left, the action: accent eyebrow, one <h1>, one sentence, one button, and under it the constraint that would otherwise be discovered as a failure ("@domain accounts only") in caption ink.
• The button is quiet, full width, lg — not the accent fill. There is only one action on the page, so nothing needs to out-shout anything, and a full-width emerald bar reads as marketing. The provider's mark keeps the provider's colours; never recolour a Google or Microsoft logo.
• Right, the brand: data-theme="dark" on that half alone — the system's subtree rule made visible — with the vertical fade, one off-screen accent glow on its own layer, the wordmark at 160 px, and three claim rows. Hidden below md, where the action is the whole screen.
• Not configured: the button is replaced by a warning Alert listing the exact environment variables. Not a disabled button — a control that cannot work should not be offered, and the reader needs the fix, not a refusal.

404 — examples/not-found.tsx

There are no redirects, and that is the decision. A stale link lands here and the page names the moves: old path struck through, arrow, new path as a link, all in mono at caption size, inside a bracket Callout. A redirect table silently keeps stale links working and nobody ever updates one.

Under it, "Go to" and the same PRODUCTS list as exits, two columns, in the smaller 16 px-padding tile.

It wears SiteHeader, not the rail: a reader who mistyped a URL is not inside a tool. A tool may add its own 404 that KEEPS its rail, for wrong addresses inside it.