Design System

Clinical Brutalism — design system

Hairline borders. IBM Plex Mono with tabular numerals on every value. Warm-gray neutrals with one deep teal accent. A desaturated sage / dijon / rust triad reserved strictly for clinical status — color paired with icon paired with label, never alone.

01 · Color tokens

bg--bg
bg-muted--bg-muted
bg-elevated--bg-elevated
text--text
text-muted--text-muted
text-faint--text-faint
border--border
border-strong--border-strong
accent--accent
status-normal--status-normal
status-borderline--status-borderline
status-abnormal--status-abnormal
status-critical--status-critical
flag-high--flag-high
flag-low--flag-low
pattern-tag--pattern-tag

02 · Typography

Display · 32 · Sans semibold
Yuri Achermann
H1 · 28 · Sans semibold
Painel clínico
H2 · 18 · Sans semibold
Linha do tempo
Body · 14 · Sans regular
Bilirrubina total elevada (3,09 mg/dL) com TGO/TGP normais.
Value · 22 · Mono semibold tabular
3,09 mg/dL
Caption · 10 · Mono uppercase
Coletado em 05 Mai 2026

03 · Status chips

WCAG: color + icon + label, never color alone
NormalLimítrofeBaixoAltoCríticoSem ref.
NormalLimítrofeBaixoAltoCríticoSem ref.
NormalLimítrofeBaixoAltoCríticoSem ref.

04 · Range strips

1D positional plot — value relative to reference band
Two-sided · in normal range (creatinine 1.01 in 0.90–1.30)
0,60,91,31,7
Two-sided · high-normal (TGP 52 in 7–52)
-4,575299,2
Two-sided · above (bilirubin 3.09 in 0.2–1.2)
-0,10,21,23,1
Upper-only · borderline (calprotectin 71.7 < 50)
-2,550102,5
Lower-only · below (HDL 34 > 40)
264081
Critical · bilirubin 6.5 > 5.0 critical
-0,10,21,26,5

05 · Trend arrows

Encodes clinical direction — rising hemoglobin is good, rising bilirubin is bad
Bilirubin ↑ — worse+0,69
TGO ↓ — better−14
Hemoglobin ↑ — better+1,1
Hemoglobin ↓ — worse−2,4
Sodium flat — either±0
No prior — neutral

06 · Sparklines

Bilirubin total · 1,73 → 2,40 → 3,09
TGP · 52 → 19 → 13
Vitamin D · 21 → 26 → 34

07 · Metric cards

The dashboard watchlist primitive

08 · States

No data

Nenhum exame cadastrado ainda.

Nothing to flag

Todos os valores dentro da faixa.

Parsing in progress

Processando o PDF…