Style guide
Design system v1

Design System

Describe your visual language here. The default is calm neutrals, a confident blue and a green accent — tuned for information density at a low cognitive load. Use the Style Lab below to retheme it, then write the result back. Tokens are defined once inglobals.css and consumed everywhere.

Principles

  • Information dense, low load

    Show what matters; never make the clinician hunt.

  • Accessibility first

    WCAG AA+ contrast, visible focus, reduced-motion respected.

  • Token-driven

    No hard-coded colors in components — semantic tokens only.

  • Calm & clinical

    Trustworthy and human, never corporate or loud.

Color tokens

Semantic tokens map to CSS variables; use the Tailwind utility, not the hex.

Background

--background

#F8FAFC

Foreground

--foreground

#0F172A

Primary

--primary

#2563EB

Accent

--accent

#047857

Secondary

--secondary

#EFF4FF

Muted

--muted

#F1F5FD

Border

--border

#E4ECFC

Destructive

--destructive

#DC2626

Warning

--warning

#D97706

Typography

Figtree — medical, clean, accessible. Tight tracking on large headings.

Display / H1The quick brown fox
Heading / H2The quick brown fox
Title / H3The quick brown fox
BodyThe quick brown fox
Small / mutedThe quick brown fox

Buttons

One primary action per view. Accent is reserved for positive/confirming actions.

Status badges

Map domain statuses to a consistent variant (see statusVariant()).

DefaultScheduledPaidRefundedCancelledOutline

Form controls

Consistent 40px height, clear focus ring, muted placeholders.

Cards

The default surface for grouped content. Subtle border + shadow.

Card title

A short supporting description.

Cards sit on the muted background and hold one logical unit of content.

Radius & spacing

Radius scales from the --radius token; spacing uses Tailwind's 4px scale.

radius-sm

radius-md

radius-lg

radius-xl