Two brand colors — dark green (primary) and burgundy (secondary, used sparingly) — over a neutral gray scale. The five status colors are reserved exclusively for state; never use them for branding, decoration, or hover.

One family, tight scale, maximum weight 600. Hierarchy comes from size, spacing, and color — not from heavier weights.

4px base grid. Screens wrap in dl-v2 with p-6 and space-y-6 between page-level blocks; inside cards the rhythm tightens to 16px and below.

Two working radii — 8px for controls, 12px for surfaces — kept concentric (a control inside a card visually nests). Depth comes from soft shadows plus a hairline ring, never hard borders.

Fast and purposeful: 150ms for micro-interactions, 300ms ceiling for anything structural. Transitions name their properties explicitly (no transition-all), buttons press with scale(0.96), and dl-v2 respects prefers-reduced-motion.

The core cva button. All variants share one 8px radius, named-property transitions, and a scale(0.96) press. loading swaps in a spinner and disables the button; pass loadingText for the gerund label.

Compatibility shim — the gradient set is gone. It keeps the old prop contract (variant, text, iconLeft/iconRight) but delegates to Button with a variant map. Existing callers keep working; new code imports Button directly.

The drawer-form text primitives. The focus ring lives on a wrapper div via focus-within, so the green stroke holds while typing — writing the ring on the <input> itself is the bug these exist to prevent.

Custom popover dropdown that accepts native <option> children and a native-shaped onChange, so call sites read like a <select>. Per the design language we never render system dropdowns.

FormSection is the white section card with an overline title that groups related fields in drawers; FieldLabel is the quiet 11.5px label that sits above every field.

The FIELD_BASE family: h-9 fields with a calm shape-matched focus ring, used in table toolbars and inline filters. Field wraps any of them with label, hint, and error handling. FIELD_BASE itself is exported for custom triggers that must line up with fields (the DatePicker uses it).

FilterRow lays out a register's filter toolbar and shows its Clear button automatically when hasFilters is true. FilterChip is the removable applied-filter token. For multi-select filter groups with counts, use FilterBar (Data display) instead.

The canonical date field for drawer forms — string in, string out (yyyy-MM-dd), with a clear affordance on the trigger. Known constraint: don’t put it inside an overflow-y-auto container in a dialog; the popover clips.

FIELD_BASE-styled date trigger for toolbar contexts — h-9, lines up exactly with Input and Select. Emits full ISO strings (unlike CalendarDatePicker’s yyyy-MM-dd). No screen consumes it yet; prefer CalendarDatePicker in drawers until this is blessed.

24h time picker with a two-column hour/minute popover (5-minute steps). Value is an HH:mm string.

Searchable IANA timezone picker with a curated zone list. Used alongside TimePickerField in scheduling settings.

Flush-edge table in a 12px ring card. Columns declare header, cell, alignment, and a numeric flag (right-aligned tabular figures automatically). Built-in index column, skeleton rows while loading, empty state with optional CTA, and pagination when pageSize is set. This demo is live — search and filter above the table.

Search + multi-select filter dropdowns + applied-filter chips + automatic Clear all. State lives in the caller as a Record<string, string[]>. It's shown live in the DataTable toolbar above; SelectDropdown from the same module is the single-select variant for sort orders and views.

The register-screen KPI: overline label, 32px tabular number, toned sub-line, optional href that makes the whole card a link with a hover lift. Lives in dashboard-shared today — candidate for promotion into surface-v2.

Metric card with a brand-green number and a semantic trend line — the trend prop encodes direction and goodness separately (up-bad exists: rising risk counts are up and bad).

The generic value-driven badge. Pass any status string — color, dot, and human label are looked up from the master spec (80+ known values, roles included; unknown values fall back to neutral gray). Pass label to override display text.

RiskLevelBadge renders the severity spectrum, optionally prefixed with the numeric score. RiskStatusBadge wraps StatusBadge with riskDomainStatusLabel so legacy backend states map to the six canonical display labels.

Domain-specific wrappers: GapStatusBadge collapses all backend gap states to the five canonical labels; TreatmentBadge maps treatment options (TREAT displays as Mitigate); SourceBadge canonicalises origin aliases; ActionBadge labels audit-log CRUD actions.

The older tone-token pill kept for prop-contract parity with surface v1 (2 consumers). Same name, different module — this is the known naming collision. Canonical badge is StatusBadge from badges.tsx; migrate the remaining consumers and retire this file.

One feedback surface, two uses: rendered inline as a toned callout, and rendered by the toast engine as the card for every surfaceToast.* call in the app — so transient notifications and inline alerts speak the same visual language. Fire toasts through surfaceToast (from @/lib/surface-toast), not by mounting Alert yourself.

Shimmer placeholders for every page archetype. The four full-page compositions (SkeletonTablePage, SkeletonDashboard, SkeletonFormPage, SkeletonDetailPage) go in loading.tsx files and isLoading branches; the building blocks below (SkeletonPageHeader, SkeletonKpiRow, SkeletonTable) compose custom layouts. All accept slowLoad to reveal a 'taking longer than usual' pill.

One confirm dialog for all destructive intents. Set a PendingAction in state to open it; title, body, and running labels derive from the type. The async action runs with a busy state, then the dialog closes itself.

Guards controlled Sheets/Dialogs against accidental data loss. Every close vector (click-outside, Esc, ✕) funnels through onOpenChange; when the form is dirty the guard swaps the close for a confirm. Clean forms still dismiss instantly. Wire it into every new form drawer.

Every content screen starts with PageHeader — title, optional description, actions on the right. SectionLabel is the overline-plus-rule divider between page blocks. size='md' renders an h2 for nested contexts.

The plain white surface: 12px radius, soft card shadow, hairline ring, p-4. flush removes padding so tables meet the edges. StatCard builds on it internally; no screen imports it directly yet — most screens compose the same recipe inline.

Token-native dashboard primitives: Panel is the titled container; inside it, PanelListItem (clickable rows with optional progress), PanelStatRow (label/value), PanelProgressRow, PanelEmpty, and ActivityRow (avatar feed line). Built as the v2 replacement for the legacy dashboard-primitives — ready to adopt.

Connected horizontal step track (1-indexed activeStep, completed steps become clickable when onStepChange is provided) plus the gray content shell. The v2 wizard shell — ready to adopt in risk creation and onboarding flows.

The default anatomy for every list screen: PageHeader with the one primary action, a KpiCard row that deep-links into filtered views, then DataTable with the filter toolbar in its toolbar slot. Loading state is SkeletonTablePage in loading.tsx.

Create/edit flows live in a right-side Sheet: FormSection groups with FieldLabel + Field* primitives, CalendarDatePicker for dates, footer actions right-aligned, and the unsaved guard on every close vector. The panel below is a static miniature of the anatomy — the guard itself is demoed live under Overlays.