Reference page for every v2 token and component. This page is not linked from the app; visit /styleguide.html directly. Update this page whenever you add a component to theme.css.
Motion tokens: --motion-fast (.12s) · --motion (.15s) · --motion-mod (.18s ease-out) · --motion-slow (.28s ease-out). No animation demo here — see Modal (Task 12) and Toast (Task 15) for in-context motion.
Used for section headings, table column headers, form labels, divider text, and the customer-context overline on the portal. Always uppercase; always --ink-4 unless placed on a coloured background.
.btn-primary-v2 is Navy (single most important action per screen). .btn-secondary-v2 for Cancel/Close equivalents. .btn-ghost-v2 for tertiary links and toast actions.
We'll send a sign-in link to this address.
A subject line helps us triage — a short sentence is fine.
Focus state is Sky ring (--sky-ring). Error state is red ring. .field-help and .field-error sit directly below the input.
Top: request-type picker (5-up). Bottom: priority picker with the red "Urgent" variant. Active states use Sky washes (--sky-wash); Urgent uses a muted red so severity reads before you click.
Used for 2–4 mutually-exclusive options where a native radio would be too small. Add/remove the .checked class in JS when a user selects.
All pills have white-space: nowrap — they never wrap to two lines even in tight table columns. The Draft variant uses a dashed border to read as a transient state.
Top row: top-nav tab strip (anchors). Bottom row: in-panel tab strip (buttons with counts). Both use the same .tab-btn class — active state is Sky-washed with Navy text.
Centered 720px card with soft scrim + 2px backdrop blur + 180ms pop-in. Click the overlay or the × to close. Sticky footer is separated by a 1px line.
| Ref | Subject | Type | Status | Priority | Submitted |
|---|---|---|---|---|---|
| #042 | Outlook won't sync on my new laptop | Support | In progress | High | 2h ago |
| #041 | Xero licence for Jess Liu | Software | Awaiting you | Normal | Yesterday |
| — | New printer quote | Hardware | Draft | — | Saved 3m ago |
Column headers use the overline convention; rows hover to --sky-wash-soft. Draft rows use muted ink and a dashed pill to read as transient. Numeric refs use tabular figures so columns align.
Used at the top of the page when a system-wide condition needs surfacing. .warn is the default; .err only for critical outages.
Toasts appear bottom-right, stack newest on top, auto-dismiss (6s for .ok, 10s for .warn, sticky for .err).
When you submit a support ticket, software request, or onboarding, you'll see its status here — and we'll email you as it progresses.
There was a problem reaching the server. Your data is safe — this is usually a brief network blip. PGRST500 · support_requests
Drop files here
or choose a source · up to 25 MB each
Used inside the new-request modal. Hovering or dragging a file over the zone shifts it to Sky-tinted (.drop:hover and .drop.dragover).