Theme — colour roles
Purple is reserved for actions: buttons, links, tappable things. Ink anchors. Green means provenance and good news. Gold means check first. Red-orange is reserved for true urgency and emergencies, and never appears in marketing.
#2e1f4d#6b5ecb#f4f3fa / #e9e6f5#2e6b2e on #dff0df#8a6d1a on #faf0d0#c0533eBUILD NOTE
These are declared once in assets/v12/tokens.css. Every legacy variable in the older pages is aliased onto them in the same file, so the four palettes that used to compete across this site now resolve to one.
Logo
The mark and the wordmark are chosen. The four tool icons form one visual family with them, so a feature icon always looks like it came from the same hand as the app icon.
Type — Archivo
A sturdy grotesque: civic, institutional trust, strong dark-mode headlines. Heavy 800 for headlines, regular for body, monospace strictly for data fields.
Voice — five answers in shorthand
How Chat sounds when it is working. Short, specific, and always followed by what to do next.
This looks like a balance bill — not your responsibility when the provider or lab is in network. Your plan already negotiated the price for you.
Your $0 physical turned into a bill because it was coded diagnostic, not preventive. Common, fixable — I will draft the correction request.
That $100 is your plan's flat urgent-care copay. Next time: same-day is $0, a video visit is $10.
Theo's inhaler is covered — $10 — but it bills on the fund's drug card, not the medical card. Show the one ending 3858.
An explanation of benefits is not a bill. Nothing to pay — the plan is just showing its math, and I have already checked it against your claim.
Components
The pieces every screen is assembled from. All of them read from the tokens above.
Badges
Buttons
Provenance lines
Progress rail
Navigation — R6, decided
The bar shows everywhere, in one of two forms. Seven buckets, one hub.
| Form | Where | What it carries |
|---|---|---|
| Full bar | Home and every bucket landing — places you choose from | All seven doors visible, the current one lit, Home raised in the centre: Advocate · Rx · Care · Home · Benefits · Family · Forecast |
| Simplified bar | Task screens — writing a letter, picking a time, sending a receipt | One Home button, the profile avatar with its alert count, and the line of reassurance: “You’re in the middle of something. Nothing is lost if you leave.” |
| No bar | The full-screen camera flow only | A plain Cancel. A nav bar reads as clutter on a camera screen. |
Seven icons under a half-finished task is an invitation to abandon it; one clearly-marked way out is not. Hiding the bar entirely would trap people, so it is never hidden on a task. Home is the only destination on the simplified bar — no bucket jumps mid-task — and the avatar keeps its alert count everywhere, so the badge is never out of reach.
Motion — the four numbers
One rule behind all of it: motion explains where you are and what just changed. It is never decoration. If an animation does not answer “where did this come from?” or “what did my tap do?”, cut it.
| Token | Value | For |
|---|---|---|
--t-instant | 120ms | Taps, toggles, chips, checkboxes. Fast enough that the member never waits on us to acknowledge them. |
--t-standard | 240ms | Pushing to a new page, opening a sheet, expanding a dropdown. The workhorse. |
--t-deliberate | 400ms | Anything that changes money or state — a letter sending, a status bar advancing, a scoreboard ticking up. Slow on purpose so it registers. |
--ease-in | cubic-bezier(0.2, 0, 0, 1) | Entering. Never linear, never bouncy — this is a health plan, not a game. |
--ease-out | cubic-bezier(0.4, 0, 1, 1) | Leaving. |
Rules that override all of the above: respect prefers-reduced-motion — slides become cross-fades, count-ups become the final number, the connector animation shows its end state; never animate a member into waiting; the second time through is faster; nothing loops in the member’s way; and in retiree and large-type mode durations go up about 30% — the same motion, given time to be followed.
Two button weights
“Book cleaning” (free, undoable) must not look identical to “Send my 2 receipts” (goes to the City).
| Weight | Class | Rule |
|---|---|---|
| Safe & reversible | .btn | Action purple. Booking, asking, drafting — anything the member can undo or that only sends a request. |
| Official & irreversible | .btn.official | Ink with an action-purple ring, and it always carries a confirm line naming who receives it. The line is part of the control, so a later edit cannot drop it. |
And one money rule under both: always what you pay. Never the charge, never a bare figure we cannot stand behind. A number we know is exact; a number we estimated says “about”.
The tokens
Change a value here and it propagates everywhere. This is the whole point of the file.
| Token | Value | Used for |
|---|---|---|
| --color-ink | #2e1f4d | Logo, chat home, hero surfaces, footer, site rail |
| --color-action | #6b5ecb | Every button, link and tappable thing |
| --color-surface | #f4f3fa | Cards, panels, inset areas |
| --color-surface-deep | #e9e6f5 | Page background |
| --color-provenance | #2e6b2e | Source chips, covered states, $0 |
| --color-caution | #8a6d1a | To-dos, deadlines, attested values, build notes |
| --color-emergency | #c0533e | The 911 rule and nothing else |
| --font-display | Archivo 800 | Headlines, labels, buttons, nav |
| --font-body | Archivo 400 | All prose |
| --font-data | Archivo Code | Card numbers, codes, table figures |
| --glow-action | 0 6px 18px rgba(107,94,203,.55) | The neon glow on hero surfaces and primary buttons |