Loading… / Cargando…

Still loading… check your connection Try again

Component gallery

Material 3 Expressive — every apps/web/src/components primitive, light and dark.

Theme

Color roles

primary
primary-container
secondary-container
tertiary-container
error
error-container
warning-container
surface-container-high

Type scale (Roboto Flex)

Display small

Headline large

Title large

Body large — how much has each symptom bothered you?

Label large

Buttons

Connected button group

Chips

Icon button / FAB / avatar / search bar (P15-UI-08)

Mockup classes .ibtn, .fab, .avatar (FrontDesk.dc.html, AuditLog.dc.html) and the M3 search bar, each once, with its states. Full-screen mockup renders sit alongside (regenerate with pnpm parity:mockups).

P

Text field / DOB field

Date of birth

Language toggle

PIN pad

Personal PIN2 of 6 digits entered

Scale question (RPQ 0-4)

Headaches

HIT-6 question

How often does pain limit your ability to do usual daily activities?

Progress

Rivermead5/16

Expressive shapes

Ccookie
Ssunny
Cclover
Fflower

Status badges

IssuedIssuedIssuedIssuedIssued

Empty & feedback states (StatesCatalogue)

Reference board for Phase 1 lists and forms — use these primitives consistently (EmptyState, LoadingState, ErrorState, InlineAlert, Snackbar).

Empty states

No patients yet. Add via the Upload tab.

No patients match the current filters.

Try changing the date or location filter above.

Nothing scheduled yet

Today's schedule appears here once it's imported.

Loading

Loading today's schedule…

Error

Inline alerts

Success & feedback

“Copied!” means PHI is on the clipboard — the Copy note path on the encounter notes panel (SPEC §8.1). Restore feedback matches the note-history snackbar after Restore version.

Navigation rail

Dialog / bottom sheet / side sheet / snackbar / idle overlay