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.
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" />.
Forest 800 is the default primary across both surfaces — the same button on the member home and the clinician inbox. Ochre stays available for moments that need to feel warm and human. 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 |