Design tokens
Graphite Mono / QA surface
Every token below resolves through Tailwind utilities backed by CSS variables in src/assets/styles/base.css, which mirror the canonical palette at src/theme/palette.ts. Change one hex there and both surfaces below repaint.
light mode
Graphite Mono tokens
:rootSurface
canvasPage backgroundsurfaceCard / sectionsurface.mutedNested card / hoverText
Aa
inkPrimary body textAa
ink.mutedSecondary body textAa
ink.subtleFootnotes, timestampsBorder
hairlineDividers, card edgesBrand
brandPrimary action / brand accentbrand.lightGradient highlight / chipbrand.deepGradient end / hover pressbrand.softSelected row tintSemantic (status)
liveActive / healthy / successwarningTrialing / attentiondangerErrors / destructive actionsComponents
Active Trialing Pendinglive / warning / danger
NameStatusOwnerMRR
Ridgeline CapitalActiveS. Alvarez$12,450
Harbor & FinchTrialingM. Patel$1,880
Kite & Compass Co.PendingJ. Okafor$640
dark mode
Graphite Mono tokens
.darkSurface
canvasPage backgroundsurfaceCard / sectionsurface.mutedNested card / hoverText
Aa
inkPrimary body textAa
ink.mutedSecondary body textAa
ink.subtleFootnotes, timestampsBorder
hairlineDividers, card edgesBrand
brandPrimary action / brand accentbrand.lightGradient highlight / chipbrand.deepGradient end / hover pressbrand.softSelected row tintSemantic (status)
liveActive / healthy / successwarningTrialing / attentiondangerErrors / destructive actionsComponents
Active Trialing Pendinglive / warning / danger
NameStatusOwnerMRR
Ridgeline CapitalActiveS. Alvarez$12,450
Harbor & FinchTrialingM. Patel$1,880
Kite & Compass Co.PendingJ. Okafor$640
Phase 5 — primitives
Form primitives
Imported from ~/components/primitives. Every site form (contact, comments, newsletter, future CRUD app) consumes this set.
Standard text input.
Required field — try focusing me.
Buttons — variants & sizes