Design System

Canonical UI inventory — only use elements shown here.

Day / Night

1 · Theme + Tokens

ThemeToggle (@/components/ThemeToggle)
--lens-blue
--lens-amber
--lens-green
--lens-sky
--lens-rose
--lens-violet
--sev-red
--action
--action-fg
--text-bright
--text-primary
--text-muted
--text-faint
--surface-floor
--surface-panel
--surface-elevated
--surface-overlay
--border-default
--border-strong
--border-subtle

2 · Headings & Breadcrumb

← AMBER/Example Sub-page

Example Sub-page

PageTitle + LensBreadcrumb · lens=AMBER
← BLUE/Example Sub-page

Example Sub-page

PageTitle + LensBreadcrumb · lens=BLUE
← GREEN/Example Sub-page

Example Sub-page

PageTitle + LensBreadcrumb · lens=GREEN

Heading 1 · fg-bright

Heading 2 · fg

Heading 3 · fg-muted

Raw heading scale (text-fg-bright / text-fg / text-fg-muted)

3 · Buttons (patterns — there is no single Button component)

Primary action — var(--action) / var(--action-fg)
Lens-filled (solid — area primary, e.g. ↺ Re-scan): bg var(--lens-*) / white bold label
Lens-tinted (soft / secondary — amber / blue / green)
Danger — var(--sev-red)
Ghost / secondary — border-hair + text-fg-muted
Disabled state
Segmented toggle (MCS tier-picker pattern)
Secondary link button

4 · Status Chips & Badges

bluepurplegreenorangeredtealslate
Tag (primitives) — every supported color
fncT?
SymbolKindBadge (primitives)
functioncomponentqueryconfig-usagetable-usageexport
SnippetKindBadge (primitives)
△ High Risk~ Medium Risk✓ Low Risk
INSPECTOR_RISK_BADGE (primitives) — high / medium / low
AMBER PILLBLUE PILLGREEN PILL
.lens-pill (CSS class) — set --pill per lens
highmediumlow
.sev-badge (CSS class) — high / medium / low
red 87orange 87yellow 87
.heat-badge (CSS class) — red / orange / yellow
verifiedinferredunknownrejectedcontradicted
MCS status chips (verified / inferred / unknown / rejected / contradicted)
validating…
ValidityBadge (@/components/shared/ValidityBadge) — calls /api/fact-validator on mount

5 · Containers / Cards / Panels

Panel card

bg-surface-panel · border-hair

surface-panel card

Elevated card

bg-surface-elevated · border-hair

surface-elevated card

Lens-tinted card

amber 8% fill · 30% border

Lens-tinted card (amber 8% over surface-panel)

42

Capabilities

81%

Coverage

3

Drift

SummaryCard (primitives)
Tests passing
128
Coverage %
81%
Open drift
3
MetricRow (primitives) — plain + with trend (hover for MiniSpark popup)

Nested Section heading

Section body content.

Section (primitives) — this entire page uses it

6 · Data Viz

MiniSpark (primitives) — up-good (hover for trend popup)
MiniSpark — down-good
MiniSpark — neutral

7 · Inputs

JsonField (@/components/shared/JsonField) — controlled, validate on blur
Working… 0s
Elapsed (@/components/shared/Elapsed) — live seconds counter

8 · Tooltips

Tooltip (@/components/shared/Tooltip) — hover / focus the trigger
Watch the Heat and Coverage metrics.
GlossaryTerm — dotted-underline jargon explainer

9 · Icons (curated Lucide set — @/lib/prism/ui/icons)

detection
capabilities
files
coverage
drift
tests
graph
knowledge-graph
zones
app
wire
flow
fitness
list
cycles
churn
recommendations
sessions
rcs
mcs
ask
interview
cognitive-load
capability-deps
coverage-matrix
cross-cutting
claude-code
okrs
insights
predictions
chat
todos
roi
radio
time-capsule
self-heal
consensus
mcp
remediation
achievements
cross-layer
cross-repo
queries
counterfactual
heatmap
shared-coherence
onboarding
reference
architecture-map
google-workspace
copilot-extension
vercel-gate
c4
ddd
clean-architecture
hexagonal
solid
twelve-factor
dora
conways-law
wardley
iso25010
eip
eda
monorepo
well-architected
cat:component
cat:page
cat:lib
cat:api
cat:hook
cat:config
cat:test
cat:app
cat:file
framework-analyzers
extended-thinking
aha-moment
fleet
alert
pr-badge
jira
azure-gate
teams-app
pwa
rest-api
blueprint
coherence-score
vscode
github-action
database
folder
insights_generic
settings
package
activity
branch
code
compass
lock
warning
document
users
clipboard
build
pin
rocket
note
ruler
palette
dot
dot-filled
archive
home
wizard
key
save
download
celebrate
shuffle
plus
monitor
scroll
tag
component
atom
filters
edit
help
unknown
tabs
table
toggle
checkbox
info
pending
chart
trending
broadcast
hook
target
link
globe
shield
book
bot
repeat
refresh
wrench
hexagon
dna
puzzle
search
sparkles
flame
zap
sun
moon
achv:first-analysis
achv:drift-buster-1
achv:drift-buster-5
achv:drift-master
achv:cycle-breaker
achv:cycle-slayer
achv:streak-3
achv:streak-7
achv:streak-30
achv:snapshot
achv:platinum