WERKHub — Design System

governed MCP control plane · component reference

Color tokens · active theme

One job per accent · interaction = --interact · brand = mark only · status colors always paired with icon/label, never color-only.

Typography
Inter 590 — display
Inter 510 — UI label (the signature tell)
Inter 400 — body / prose.
IBM Plex Mono — 14,820 tok · pid 4012 · 99.4% · 2026-06-27
Buttons · variants × states
Default
Hover
Focus
Active
Disabled
Primary
Secondary
Ghost
Danger
Sizes & live (try hover / Tab / click)

Primary --interact + --on-accent ink (AA). One primary per surface · focus ring on Tab · scale .98 on press · 0.4 opacity + not-allowed when disabled · destructive separated & danger-colored. "Emergency stop" = the connector kill / NOT-AUS, gated + confirmed.

Stats elements
⧉ Connectors live
8/ 11
▲ +2 today
◷ Context cost
14.8k tok
▼ −5.8k after tune
≣ Ledger events
1,204
✓ Chain integrity
99.4%
Trust posture
▣ Security-Scanned655%
▣ Official327%
▲ Unverified218%

KPI cards: mono tabular value + uppercase label + delta/spark/bar. Donut keeps its accessible percentage-table fallback (color never alone).

Badges
Identity · model / cli / harness (neutral)
claude opus claude sonnet gpt 5.5 gemini
Access posture · WERKHub real role axis
ADMIN BALANCED READ-ONLY
Expert role families · color = family (portable → WERKAgent)
PLANNER FRONTEND CODE-REVIEWER TDD-GUIDE SECURITY RESEARCHER DATABASE
Signature elements
✓ CHAIN VERIFIED ● LIVE .werk-notch · selection a3caef8c · hash