Style Guide

Component gallery for the REV.health PRD v2 documentation site. Every example below is rendered against the v2 design tokens (var(--color-*)) and re-themes automatically when the active theme changes. See the Theme Matrix to verify the full component set across all four themes.

Locked direction. Variant A (Healthcare Clinical, Refined) is the chosen base style for every page in the PRD: serif display headings paired with a sans body, a clinical teal/gold palette, and dark muted status pills that stay constant across themes for semantic stability.

Design principles

Serif display, sans body — Source Serif Pro headings paired with Inter body for clinical literature feel without sacrificing density.
Clinical palette — teal anchors, warm gold accents, sage greens. No primary-saturated chips; no Material clone.
Dark muted status pills — firebrick, dark amber, dark blue, dark green. Pills work in every theme without re-tinting.
Subtle character — gradient background-clip text on hero headings; restrained personality, not busy.
Generous whitespace — readable at a glance; clean hierarchy above all.

Typography hierarchy

Module Heading

Section Heading

Subsection Heading

Detail Heading

Body copy uses Inter for readability while headings use Source Serif Pro to evoke clinical care literature. The clinical palette anchors on the theme accent (var(--color-accent)) and dark green (var(--color-success)).

Buttons

Form inputs

Patient ID (Short GUID)

Eligibility status

Notes

Cards

Eligibility

Real-time payer eligibility with X12 270/271 and prior auth.

Scheduling

Provider availability, slots, and self-service booking.

Clinical Documentation

Native ambient AI scribe; clinician keeps the pen.

Priority tags · dark muted tones

P0 · critical P1 · v1.0 launch P2 P3

Firebrick (--color-danger) · dark amber (--color-warn) · dark blue (--color-info) · dark green (--color-success). No bright Material chips — pills carry weight without shouting.

Status pills (shared registry)

Default Accent Critical Warning Info OK

AMI schema table

Encounter (org-scoped)
Field	Type	Notes
PatientID	GUID	FK → User/Patient (global)
ProviderID	GUID	FK → Provider
EncounterID	GUID	PK · Short GUID
EncounterEncounterTypeCodeString50	String50	USCDI v3
EncounterStartDateTimeUTC	DateTime	Required
OrganizationID	GUID	Audit · org-scoped
UpdatedDateTimeUTC	DateTime	Audit
UpdatedByUserID	GUID	Audit
DeletedDateTimeUTC	DateTime	Audit

Color swatches · clinical palette

Swatches bind to the active theme’s tokens, so they re-render whenever the theme changes.

--color-bgpage background

--color-surfacecard surface

--color-surface-2raised

--color-accentclinical teal

--color-successdark green

--color-warnwarm gold

--color-dangerfirebrick

--color-infodark blue

--color-textprimary text

--color-borderdivider

Mermaid diagram

flowchart LR
  A[Order Entry] --> B[Validate USCDI]
  B --> C{Valid?}
  C -- yes --> D[Direct Trust transmit]
  C -- no --> E[Return errors]
  D --> F[Specialist receives]
  F --> G[ReferralResponse]

Referral lifecycle · clinical palette · re-themes on theme switch

Callouts

Note. Default callout uses the accent color and a quiet surface.

Implementation note. Pills, callouts, and AMI tables share the same theme tokens. Switching themes never re-tints status pills — firebrick/amber/blue/green stay constant for semantic clarity, while surrounding chrome adapts.

Heads up. Manual eligibility lookup is required during Phase 1.

Critical. EPCS hardware token must be plugged in before signing controlled prescriptions.

Done. Encounter signed and routed to coding.