CivicDirect · Foundation
CivicComms Design Tokens
Every surface, status and role color in the system, rendered from the semantic token layer for the active theme.
Typography
Page title · clamp(22–28px) / 740
Section heading · 15.5px / 600
Body · 14px regular
Small · 13px
Extra small · 12.5px
Micro eyebrow label · 11px uppercase
Brand
cd-blue
--cd-blue
cd-blue-hover
--cd-blue-hover
cd-navy
--cd-navy
Surfaces
bg
--bg
surface
--surface
surface-2
--surface-2
surface-3
--surface-3
sunken
--sunken
border
--border
border-strong
--border-strong
Text
text
--text
text-2
--text-2
text-3
--text-3
Status
ok
--ok
ok-bg
--ok-bg
ok-border
--ok-border
warn
--warn
warn-bg
--warn-bg
warn-border
--warn-border
risk
--risk
risk-bg
--risk-bg
risk-border
--risk-border
crit
--crit
crit-bg
--crit-bg
crit-border
--crit-border
info
--info
info-bg
--info-bg
info-border
--info-border
accent
--accent
accent-bg
--accent-bg
accent-border
--accent-border
neutral
--neutral
neutral-bg
--neutral-bg
neutral-border
--neutral-border
Roles
ally
--ally
mode-mayor
--mode-mayor
mode-control
--mode-control
Radii & elevation
--r-sm
--r-md
--r-lg
--r-xl
shadow-lg