Primary palette — match design.md §1.

Geist for UI; Noto Serif italic for emphasis.

Right-edge stripe on Today's Patient List card. PHS pushed (pink) / PHS received (purple) / None / Red / Orange / Yellow / Green.

Six semantic variants, three sizes, with leading/trailing icons and loading + disabled states. See design.md §4.5 for the action verb → variant map.

Header (white circle), ghost (toolbar), solid (primary action), danger (end call).

Underlined primary-green; ink and warn tones for inline links inside body copy.

Underline-style label above, rounded input. Required marker, icon slot, password toggle, hint text.

Vitals fields — `unit` slot for Cms / Kg / mmHg, `outOfRange` flips value to red and warns the hint.

Soft cream surface, no focus ring — used for auto-calculated fields (BMI, BMI Category, Iron Suchrose Required, Trimester).

Native date input with leading calendar icon. DOB / Visit Date / Expiry Date all share this primitive.

Three-field composite for the manual's `Age (Y / M / D)` triplet — keeps each component aligned and labelled.

Native select, styled to match Field. Placeholder option renders as disabled. Used by 'Search criteria ▾' on patient list.

Single primary-filled checkbox; supports any label content.

Inline radio rows — manual pattern: ( ) Yes ( ) No, ( ) Own ( ) Rented. Selected state is a filled green dot.

Used in Referral / Health Advice Required / Consult Type. Green track with white knob; state is conveyed by color + position — the field label tells the user what's being toggled.

Six face emoticons mapped to 0–10 — No Hurt → Hurts Worst. Active step gets a green ring + light fill.

Search field + optional criteria dropdown — the manual's `Search Patient:` row paired with `Search criteria ▾` (Name / FID / Phone).

Small uppercase label, with optional pulsing yellow dot.

Soft, solid, and outline variants across the seven status tones.

Multi-select / dismissable chips — manual flow: tap an underlined symptom to append `× Excessive Bleeding` chip.

Circle avatar — image, initials fallback, silhouette fallback. Optional status ring color.

Square white tile with line-art primary-green icon centered above its label. Locked variant for HE/Nurse subset.

Avatar + 4-field grid + right-edge status stripe. Each status drives a different stripe color (§foundations-status).

Family list variant — group icon + name (green), Family Count, Category letter, last visit.

Default density — Billing layout. Compact density — Inventory list. Cell tones support `warn` for out-of-range and `numeric` for tabular numbers.

Underline tab strip (default), compact pill variant, and tone-coded status pills. Underline = top-of-page section switches; pill = inline filter rows; status-pill = queue / status filters where each option carries a count and a status color.

R-Clinic green band header with chevron (§4.3 — Vitals, Social, Clinical History…). Optional summary line under header on expand.

Three drafts side-by-side — empty, partial (Vitals + Social complete; Score Card partial), full (every visible section complete). Demonstrates the duotone leading icon and the three-state right-side status badge.

Multi-step indicator for Registration → Family Members → Consultation → Summary → Bill.

Patient History trend chart — switch metric via the dropdown, healthy range drawn as a soft mint band, out-of-range points flip warn red.

Used by the splash screen ('Initial Data Download is in progress…') and any pending sync state.

Inline alert for forms; warn-tinted, hidden when `show` is false.

Inline notification — info / success / warn / error tones. Use for sync status and tele-consult prompts.

Centered modal — `CANCEL OK` text-buttons. Used for logout, mandatory-fields error, range-violation error, tele-consult prompts.

Two tones: `green` (default) is the brand gradient band used as workspace chrome; `light` is a quieter white surface with a thin mint accent strip — for embedded panels (drawers, modals, secondary screens) where the heavy green band would compete with surrounding chrome. Both tones share the same title (18 / 600 Inter) + sub-banner + right-side icon cluster.

Each block below renders one of the new section components against a fresh draft. Editing here is throw-away — the showcase doesn't persist.

Default (light) tone — white surface, mint-soft active fill, primary accent bar. The standard workspace chrome. Each frame is rendered at full sidebar height so the whole header → sections → footer stack reads naturally.