Design system
Assurance components
The tokens, components, and AI review patterns behind the Assurance module.
Color tokens
Every value comes from the CSS variables at runtime, so this page always matches the app.
Teal deep
... / var(--teal-deep)
Primary text, sidebar, dark buttons
Teal mid
... / var(--teal-mid)
Focus ring base, hover on dark, guide lines
Lime
... / var(--lime)
Primary action, active nav, live badges
Cream
... / var(--cream)
Page background, quiet surfaces
Cream deep
... / var(--cream-deep)
Card headers, keycaps, neutral pills
Pink
... / var(--pink)
Flags, conflicts, needs review
Pink soft
... / var(--pink-soft)
Replaced code rows, flag tint
Mint
... / var(--mint)
Supports, approved, resolved
Mint soft
... / var(--mint-soft)
Suggested code rows, audio tint
Foreground
... / var(--foreground)
Body and heading text
Muted foreground
... / var(--muted-foreground)
Secondary text, mono labels
Border
... / var(--border)
Card and row dividers
Contrast pairings
WCAG ratio computed from the hex values above. AA needs 4.5, AA large needs 3.
- Aa
Foreground on cream
...
- Aa
Foreground on card
...
- Aa
Teal deep on lime
...
- Aa
Teal deep on pink
...
- Aa
Teal deep on mint
...
- Aa
Cream on teal deep
...
- Aa
Lime on teal deep
...
Typography
Fraunces for display and headings, Inter for body, a mono uppercase style for labels.
Display, page titles
font-serif text-4xl
Section headings
font-serif text-2xl
Card headings
font-serif text-xl
Body large, page intros
text-base
Body, table rows, statements
text-sm
Helper and meta text
text-xs
Mono label
font-mono text-[10px] uppercase tracking-[0.14em]
Spacing, radius, and elevation
Generous padding, round shapes, and one soft shadow.
Pill
rounded-full
Card
surface-card (rounded-2xl, border, shadow-soft)
Row and dialog
rounded-2xl
Card padding px-5 to px-6, py-4 to py-6. Section gap mt-6. Dividers use border-border.
Components
Shared building blocks, shown live with their states.
Buttons
Status pills
Mono labels and keycaps
Evidence (2 sources)
KPI card
Notes reviewed
1,200
Home health, across 3 agencies
Confidence bar
Filter tabs with counts
Search and select
Checkbox, radio, and toast
AI review patterns
How Assurance shows its work so a human can decide quickly and safely.
Provenance
Every flagged statement shows the source evidence and a verdict per source.
- Visit audioTranscript 06:42Supports
ClinicianHow is the leg feeling today?
PatientLess sore than last week.
- Visit audioNo matching statement in transcriptNot found
(No mention of wound size or drainage during the visit.)
- Prior visit notePrior visit, 7 days agoConflicts
Bathing: requires assistance of one for tub transfer.
- ReferralReferral, received 12 days agoSupports
Skilled nursing for wound care, left lower leg.
- History and physicalH&P, hospital dischargeSupports
Diabetic ulcer of the left lower leg, fat layer exposed.
Confidence
A note level score, the share of statements that trace to evidence.
Note confidence
80%
8 of 10 statements traced to evidence
Correction
A flagged statement moves from unresolved to a resolved state, then collects feedback for the model.
Assistance level for bathing recorded as independent.
Flagged: Prior chart recorded this as needing assistance.
Assistance level for bathing recorded as independent.
QueriedFlagged: Prior chart recorded this as needing assistance.
Clinician query
Sample ReviewerJust now
Could you confirm the bathing assistance level observed at this visit?
R. Sample, RNJust now
Patient still needs one person for tub transfers. I will correct it.
Transfers bed to chair with standby assistance.
EditedFlagged: Prior chart recorded this as needing assistance.
Wound left lower leg healing, less sore per patient.
AcceptedFlagged: Prior chart recorded this as needing assistance.
Bathing: requires assistance of one for tub transfer.
Clarified by clinicianFlagged: Prior chart recorded this as needing assistance.
Coding
Documented and suggested diagnosis codes side by side, in sequence, with the reason.
Documented
- 1E11.9Type 2 diabetes mellitus without complications
- 2I10Essential (primary) hypertension
Suggested
- 1E11.622Type 2 diabetes mellitus with other skin ulcer
- 2I10Essential (primary) hypertension
Why this suggestion
The H&P documents the leg wound as a diabetic ulcer, so the combination code is sequenced first.
Sign off
A human attests and signs before a note is approved. Static preview.
Sign and approve note
Signing as Sample Reviewer, QA Lead
Accessibility notes
What the module does so everyone can review notes reliably.
- Visible focus rings in dark teal that meet contrast on cream and white.
- Keyboard shortcuts for queue and note work, paused while typing or while a dialog is open.
- Dialogs trap focus, close on Escape, and return focus to the button that opened them.
- Status always uses a text label alongside color, never color alone.
- Layouts work at 390px wide with no sideways scrolling.