The interface has to fully work in Stage 1 — pure structure, neutral greys, system type. Brand fonts arrive in Stage 2, teal touch points in Stage 3. If removing the brand layer breaks legibility or meaning, the underlying design was leaning on it. Walk the stages above.
And it's mobile-first: the phone shell below is the primary design, desktop is the adaptation — a minimal icon rail that drawers open, not a permanent sidebar. Tone references: Claude Console's drawer nav and Cal.com mobile's bottom tabs — both neutral-first products where brand colour is nearly absent from the chrome.
#f5faf9 / #edf7f5 / #daeee9) and teal-grey text (#8caaaa, 2.5:1) are retired. Every grey is now a true neutral chosen for its contrast ratio. Dark mode was already neutral in v3.4 — light mode catches up. This also matches the original prototype lineage: concepts/app-v34.html on this branch was white-first before the token file re-tinted.
Six surfaces, four text greys, all AA-verified. Teal is only permitted in the four accent slots — and only at Stage 3.
Old muted grey lives on as --text-faint, restricted to disabled and decorative elements (WCAG-exempt). Status must always read from the label — colour is Stage-3 reinforcement, never the sole carrier (1.4.1).
Primary nav is a bottom tab bar (thumb-reachable); secondary nav is a drawer behind the menu button — tap ☰. Everything ≥44px touch targets. The web app and a future native app share this one shell.
No permanent 220px sidebar. Desktop gets a 56px icon rail; the menu button expands it in place — same items, same order as the mobile drawer. Click ☰ in the mock.
| User | Handle | Tier | Status | Joined |
|---|---|---|---|---|
| Mara Osei | @mara | EAP | approved | 2026-06-28 |
| Dev Patel | @devp | free | pending | 2026-07-01 |
| Lena Fischer | @lenaf | EAP | denied | 2026-07-02 |
Erik shared a session handoff with you. Claim it with the Code below, or open it in your agent.
KIT-9F2QRecomputed from the rendered tokens on every toggle. AA = 4.5:1 text, 3:1 large text & non-text.
| Pair | Sample | Ratio | Verdict | Used for |
|---|---|---|---|---|
| text / bg | Body copy | |||
| text-2 / surface | Labels, metadata | |||
| text-muted / panel | Placeholders, captions | |||
| accent-text / bg | Links, Codes | |||
| on-accent / accent-fill | Primary button label | |||
| accent-ui / bg (non-text) | Focus rings, icons, mark | |||
| input border / bg (non-text) | Form control boundary | |||
| ok-text / surface | "Received" status text | |||
| warn-text / surface | "Expiring" status text | |||
| err-text / surface | "Failed" status text |
The one deliberate trade-off: Brand-hue buttons (#0d9488 + white) sit at 3.7:1 — AA for large text only. The AA fill (#0f766e) is one shade deeper and fully compliant. Flip the toggle and judge.
ui / text / fill / on — no more single overloaded --teal:focus-visible + prefers-reduced-motion added to @relay/ui