Tokens, type, color, motion, iconography and the primitive components shared across the member app and the clinician workbench. Built on the existing @doro/design-tokens contract, extended with a unified alert system, dense table primitives and clinical-trend chart marks.
Sand carries the surfaces. Forest anchors trust and action. Ochre is the warmth dial — bright in the member app, muted to status-only in the clinician tool. Rose and the supporting hues (sky, amber, red) round out semantic meaning.
Every component reads from these — never raw scale values. Pairs flip automatically in dark mode.
Low-chroma tinted fills for badges, banners, and callouts. Each base ships a trio — --*-subtle, --*-subtle-foreground, --*-subtle-border — shown together in each chip.
A theme-invariant scrim — the same near-black in light and dark — dropped behind modals and sheets at an alpha, e.g. bg-scrim/50.
Contrasting fills so outgoing, care-team, and system messages read distinctly. Each role has a matching --bubble-*-border.
Serif headings give the product its calm, book-like authority. Body and UI sit on a single sans face. Mono carries eyebrows, metadata, timestamps — anywhere the writing should feel like a measurement instead of a sentence. Code references: --font-serif · --font-sans · --font-mono.
Code references: --space-1 … --space-24 · --radius-xs … --radius-full.
Default --radius-lg on cards, buttons, inputs. --radius-full on chips, badges and avatars only.
Three durations, three easings. Reduced-motion users get instant transitions automatically. Code references: --duration-fast/base/slow · --ease-out · --ease-in-out · --ease-spring.
1.5 px stroke, round caps and joins, 24 px viewBox. Icons inherit currentColor. Filled variants are reserved for selected and active states. Source: @doro/design-icons.
A flat warm tint stands in for a member photo — drop in an <img> or initials to populate it. The Doro brand mark stands alone as the assistant avatar; it never gets the warm tint. Code: <Avatar appearance="halo" | "doro" size="sm|md|lg|xl" />.
The default (primary) button follows the --primary token: forest-800 in light and ochre in dark, so the CTA stays legible on each surface instead of sinking into the dark forest UI. The ochre variant stays available for warm member moments. Code: <Button variant="default | secondary | ghost | ochre | destructive | link" size="sm | default | lg | icon" />.
Use sparingly. Default to forest unless the moment is a warm invitation.
Always confirms in a modal. Never a single-click in a list.
1.5 px borders that pick up a teal focus ring on tab-in. All controls share a 42 px comfortable height and drop to 36 px in compact density. Code: <Input /> · <Textarea /> · <Checkbox /> · <Switch /> · <Chip /> · <SegmentedControl />.
Color is meaningful. Forest = on track, ochre = needs attention soon, rose / red = needs attention now, sky = informational, neutral = routine. Code: <Badge variant="ochre | forest | rose | sky | red | solid-forest | solid-ochre | mono" />.
Every alert in the product reads from this palette. Color is meaningful — never decorative — and pairs with an icon and a verb-led title so the meaning survives in monochrome printouts and screen readers. Code: <Alert variant="crisis | crisis-solid | medication | clinical | appointment | care | system" form="default | compact | inline" />.
Self-harm risk indicators detected in this morning's reflection. Care team has been paged.
Maya didn't log her evening dose. Reach out via chat or wait for tonight's check-in?
Up 5 points from last week (was 9, mild). Consider adjusting cadence or scheduling a touchpoint.
30-minute review session. Maya has flagged sleep as a topic to discuss.
"Picking up your refill on the way home. Want me to grab dinner too?"
Your reflections will sync once you're back online.
Solid-fill crisis only when a human must look immediately. All other types stay tinted to keep the page legible at a glance.
Every alert pairs a tint with an icon and a verb-led title. Mono printouts and screen readers still convey the meaning.
Same component, calmer copy on the member side. The member never sees a crisis flag about themselves — they see a "checking in" message.
Code: <Card variant="default | lg | flat | elevated" /> · <EmptyState /> · <Skeleton shape="line | header | block" /> · <Popover /> · <Tooltip />.
Aim for 15 minutes outside, no phone. Last week you found this helped settle the morning racing-mind days.
Nothing needs your attention right now. New messages and tasks will land here.
Tiny, dense, legible. Used inline in tables for scores at a glance, and a slightly larger version on the patient overview for the last 12 weeks. Code: <Sparkline tone="default | warn | danger" values={[…]} /> · <KPI>…</KPI>.
Numbers run tabular, header row stays sticky, hover tints the whole row. Toggle the density control in the topbar to see the compact variant. Code: <Table> with <TableCell numeric right /> for clinical columns.
| Member | Risk | PHQ-9 | GAD-7 | Adherence | Last touch | Next |
|---|---|---|---|---|---|---|
Maya Lin MRN 04812 |
Watch | 12 ↑3 | 11 ↑2 | 5 / 7 | 3 hr ago | Thu 2:30 pm |
Jordan Ahmadi MRN 05210 |
On track | 7 ↓2 | 5 ↓1 | 7 / 7 | Yesterday | Fri 10:00 am |
Priya Devarajan MRN 05744 |
Crisis | 19 ↑6 | 16 ↑4 | 2 / 7 | 12 min ago | Today 4:15 pm |
Sam Whittaker MRN 06119 |
Routine | 4 ±0 | 3 ±0 | 6 / 7 | 2 days ago | Next Tue |
The complete inventory of @doro/design-tokens — every custom property and pattern rule, parsed from the shipped CSS at build time. Nothing here is curated by hand, so this section cannot drift from the source of truth. The sections above tell the story; this is the index.