FOUNDATION · BRAND
Logo system
The original client-approved asset is used unchanged in every specimen.
Original proportions preserved
XX
Clear spaceKeep 1× symbol height on all sidesXApproved digital sizes
128 × 40 pxMobile / minimum160 × 50 pxTablet / compact header200 × 63 pxDesktop header240 × 76 pxLarge desktopFOUNDATION · COLOR
Color with a job to do
Brand turquoise expresses identity. Accessible teal carries text and primary actions.
Success
#278644Information
#2D62B4Warning
#FD9900Error
#B83A3AFOUNDATION · TYPE
Public Sans, tuned for care
DISPLAY / 40
Patient overview
H1 / 32 · 40
Patient overview
H2 / 28 · 36
Clinical summary
H3 / 24 · 32
Recent observations
BODY / 16 · 24
Readable interface copy with explicit units, calm hierarchy, and predictable rhythm.
LABEL / 14 · 20
FOUNDATION · LAYOUT
A 4-pixel spatial rhythm
FOUNDATION · ICONS
One consistent visual language
Simple 2px strokes. Icons support text; they do not replace critical labels.
Select an icon to copy its name. Symbols shown are consistent inline SVG-style representations.
COMPONENT · ACTION
Buttons
Hierarchy, size, and state communicate the weight of an action.
COMPONENT · INPUT
Forms and selectors
Labels remain visible. Errors explain what happened and how to recover.
COMPONENT · FEEDBACK
Status and feedback
ⓘ InformationUpdated scheduling guidance is available.
✓ CompleteThe fictional record was saved.
⚠ Review neededConfirm the unit before continuing.
⨯ Critical resultDemonstration only. Acknowledge before leaving this view.
COMPONENT · DATA
Clinical data tables
Values carry explicit units; abnormal results use text and icon indicators as well as color.
0 selected
| Reference display | Status | Collected |
|---|
RESOURCE
One canonical token source
src/tokens.json generates CSS variables and the machine-readable export.
:root {
--color-brand-500: #30D5C8;
--color-teal-700: #18877F;
--space-4: 16px;
--radius-md: 8px;
}Semantic mapping
--action-primary-bg → --color-teal-700
--focus-ring → --color-warning
--surface-subtle → --color-gray-100
RESOURCE
Developer documentation
RESOURCE
Changelog
Version 1.0
Foundations, core components, healthcare patterns, token exports, and public-safe fictional demonstrations.