Concept prototype. All data is illustrative and fictional.
Enzo Health
QA Lead

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

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

Needs reviewEscalatedApprovedAuto approvedRuleset in placeOpen questionDraft rulesetCoding

Mono labels and keycaps

Evidence (2 sources)

JKEnterShift+A?

KPI card

Notes reviewed

1,200

Home health, across 3 agencies

Confidence bar

60%80%100%

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

80%

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.

Queried

Flagged: 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.

Edited

Flagged: Prior chart recorded this as needing assistance.

Was this flag useful?

Wound left lower leg healing, less sore per patient.

Accepted

Flagged: Prior chart recorded this as needing assistance.

Was this flag useful?

Bathing: requires assistance of one for tub transfer.

Clarified by clinician

Flagged: Prior chart recorded this as needing assistance.

Was this flag useful?

Coding

Documented and suggested diagnosis codes side by side, in sequence, with the reason.

Documented

  1. 1E11.9Type 2 diabetes mellitus without complications
  2. 2I10Essential (primary) hypertension

Suggested

  1. 1E11.622Type 2 diabetes mellitus with other skin ulcer
  2. 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.