Metagem
Foundations

Colors

Always reach for a token — never a raw color. Magenta means documents, violet means structured data.

Semantic tokens

Aa — Page surface
bg-background--background · on text-foreground
Aa — Raised surface
bg-card--card · on text-card-foreground
Aa — Primary action
bg-primary--primary · on text-primary-foreground
Aa — Brand violet
bg-brand--brand · on text-brand-foreground
Aa — Quiet surface
bg-secondary--secondary · on text-secondary-foreground
Aa — Muted surface & captions
bg-muted--muted · on text-muted-foreground
Aa — Highlight / selected
bg-accent--accent · on text-accent-foreground
Aa — Errors & danger
bg-destructive--destructive · on text-destructive-foreground
Aa — Documents (magenta)
bg-documents--documents · on text-brand-foreground
Aa — Structured data (violet)
bg-data--data · on text-brand-foreground
Aa — Story section ink
bg-story-mid--story-mid · on text-brand-foreground
Aa — Hairlines & inputs
bg-border--border · on text-foreground
Aa — Neutral product workspace
bg-platform-base--platform-base · on text-platform-foreground
Aa — Product panel / overlay base
bg-platform-panel--platform-panel · on text-platform-foreground
Aa — Lavender navigation tint
bg-platform-nav--platform-nav · on text-platform-foreground
Aa — Selected product navigation
bg-platform-nav-active--platform-nav-active · on text-platform-nav-active-foreground
Aa — Product separators
bg-platform-border--platform-border · on text-platform-foreground
Aa — Product secondary text
bg-platform-base--platform-base · on text-platform-muted
Aa — Quiet violet ambient corner
bg-platform-glow--platform-glow · on text-platform-foreground
Aa — Subtle blush ambient corner
bg-platform-tint--platform-tint · on text-platform-foreground
Aa — Product links & action text
bg-platform-base--platform-base · on text-platform-action
Aa — Critical severity
bg-level-critical-soft--level-critical-soft · on text-level-critical
Aa — Important severity
bg-level-important-soft--level-important-soft · on text-level-important
Aa — Minor severity
bg-level-minor-soft--level-minor-soft · on text-level-minor
Aa — Confirmed / resolved
bg-success-soft--success-soft · on text-success
Aa — Low confidence icon
bg-platform-base--platform-base · on text-conf-low
Aa — Medium confidence icon
bg-platform-base--platform-base · on text-conf-medium
Aa — High confidence icon
bg-platform-base--platform-base · on text-conf-high

Story gradient

Deep violet story section
story-bg · --story-from → --story-mid → --story-tohero-bgquote-bg

violet

Brand · structured data
50mg-violet-50
100mg-violet-100
200mg-violet-200
300mg-violet-300
400mg-violet-400
500mg-violet-500
600mg-violet-600
700mg-violet-700
800mg-violet-800
900mg-violet-900
950mg-violet-950

magenta

Accent · documents
50mg-magenta-50
100mg-magenta-100
200mg-magenta-200
300mg-magenta-300
400mg-magenta-400
500mg-magenta-500
600mg-magenta-600
700mg-magenta-700
800mg-magenta-800
900mg-magenta-900
950mg-magenta-950

slate

Neutrals
50mg-slate-50
100mg-slate-100
200mg-slate-200
300mg-slate-300
400mg-slate-400
500mg-slate-500
600mg-slate-600
700mg-slate-700
800mg-slate-800
900mg-slate-900
950mg-slate-950