/design-system

Design system

The visual and behavioural rules of Anamnesis. Every token below is a CSS custom property read live from the page; every component shown is the one the screens use.

Principles

01
Patient identity first
Name, DOB, ID and allergies are on screen at all times, and repeated on every form that writes.
02
Never colour alone
Every clinical colour comes with a word, letter or icon: H, L, MAJOR, Signed.
03
Explicit, never silent
No silent overwrite, no silent override. Conflicts and justifications are shown and recorded.
04
Dense, calm, legible
14 px base, tabular figures, small radii, no decoration. Alerts are loud because the rest is quiet.

Color

Contrast is measured against each token's intended background (WCAG 2.1 AA: 4.5:1 text, 3:1 UI boundaries).

Neutrals

--anm-bgApp background
--anm-surfaceCards, forms, dialogs
--anm-surface-sunkenTable heads, previews, footers
--anm-borderCard and divider lines (decorative)
--anm-border-controlInput and button outlines
--anm-textPrimary text, values
--anm-text-2Secondary text, units
--anm-text-3Meta, captions — lightest text allowed

Identity & action

--anm-identityPatient banner only
--anm-actionPrimary buttons, links, selection
--anm-action-hoverHover and pressed
--anm-action-subtleCurrent nav item, selected row
--anm-focus3 px ring, 2 px offset, every element

Clinical semantics — always paired with a label

--anm-criticalHigh-criticality allergy, contraindicated, critical result
--anm-majorMajor interaction, H flag, unsaved changes
--anm-moderateModerate interaction, renal or age dose caution
--anm-infoL flag, minor interaction, Active status, amendments
--anm-okSigned, check passed — never “normal” for a result
--anm-demoDemo banner only

Typography

Three families, self-hosted (OFL): Atkinson Hyperlegible Next, Atkinson Hyperlegible Mono, Newsreader.

text-page	Summary
text-patient	LEFEBVRE, Claire
text-section	Latest lab results
text-body	Repeat potassium in 48 h. Nephrology informed.
text-small	Dr A. Moreau · 05-Nov-2026 09:12
text-meta	Abnormal points are drawn as triangles
text-overline	Allergies & intolerances
text-value	148/92 mmHg
text-note	Feels less breathless than yesterday. Slept well.

Clinical display rules

Enforced in code by the model's format functions, unit-tested. Components never format by hand.

Rule	Always	Never
Leading zero	✓ 0.5 mg	.5 mg
No trailing zero	✓ 5 mg	5.0 mg
Units spelled out	✓ 100 microgram	100 µg
Unambiguous date	✓ 05-Nov-2026 09:12	05/11/2026 9:12 AM
Patient name	✓ LEFEBVRE, Claire	Claire Lefebvre
Result	✓ 5.8 H mmol/L (3.5 – 5.0)	5.8 (red only)

Severity & flags

Contraindicated · Drug interaction

Blocks signing; the only way forward is another drug.

Major · Drug interaction

Override with a coded reason and a plan; recorded on the order.

Moderate · Drug interaction

Shown inline; signing counts as acknowledgement.

Minor · Drug interaction

Collapsed under “minor notes”. Never interrupts.

H L HH LL N

Controls

A disabled button always says why.

DurationEnter a duration in days.

ActiveResolvedDraftSignedAmendedEntered in errorIn progressFinishedCompletedStoppedOn holdOverrideFictitious catalog

Accessibility & keyboard

Target WCAG 2.1 AA. Single-key shortcuts never fire inside a field and can be turned off.

/: Search patients
?: Show this list
g s: Go to Summary
g t: Go to Timeline
g m: Go to Medications
g r: Go to Lab results
g n: Go to Clinical notes
g v: Go to Vitals