Phosra Design System · v1.0
Phosphor — the sealed visual standard.
Every token, surface, and motion vocabulary used across phosra.com lives here. Page rendered in dark canvas (the default). Toggle to light by adding data-theme="light" on any wrapper.
01 · Foundations
Type
Display — Instrument Serif
Aa
One spec.
87 statutes. 96 rules.
Every surface a child touches.
Become an Implementer.
Body — Public Sans
XL — civic-infrastructure type.
LG — paragraph lead.
MD — default body.
SM — caption text.
XS — fine print.
Mono — JetBrains Mono
PHOSRA · OPEN PROTOCOL
RULE.CATEGORY.LABEL
1,284 enforcement events / hr
phosra check --rule algo_feed_control
02 · Color
Ink ramp · canvas + surfaces
Deepest
--ink-0
#02060B
Canvas
--ink-1
#050B14
Surface band
--ink-2
#0A1422
Card on canvas
--ink-3
#0F1D30
Card on card
--ink-4
#14253D
Hover surface
--ink-5
#1B3050
03 · Color · Brand
Phosphor signal
100
200
300
400
500
600
700
800
900
04 · Color · Accent
Network accents · capability tints / chart series
--net-cyan
--net-violet
--net-magenta
--net-amber
--net-coral
05 · Color · State
State vocabulary — the only roles that matter
--state-live
--state-attest
--state-queue
--state-stale
--state-deny
06 · Layout
Surfaces
surface-canvas
The default page background.
surface-band
Section-band — one notch up from canvas.
surface-card
Default card. Two notches up.
surface-card--raised
Card-on-card (inputs, raised tiles).
07 · Components
Buttons
08 · Iconography
Capability glyphs · the 9 atoms
Charter
Age
Tier
Consent
Block
Alert
Privacy
Audit
Receipt
09 · Backgrounds
Signature backgrounds
bg-network-grid
bg-network-dots
bg-radial-signal
bg-conic-mesh
10 · Motion
Motion · always-on indicators
live-dot — phosphor pulse + ring sweep
anim-pulse
anim-shimmer
scan-overlay
11 · Motion
Scroll reveals · [data-reveal]
Delay 0ms
rises into place on scroll.
Delay 100ms
rises into place on scroll.
Delay 200ms
rises into place on scroll.
Delay 300ms
rises into place on scroll.