Color
Components reference --color-* semantic tokens. Never raw hex. Light and dark variants live in app/globals.css, ship as Tailwind utilities through the @theme inline bridge, and mirror in lib/tokens.ts.
Semantic tokens
--background
Page surface
L #FFFFFFD #0F0A14
--foreground
Default text
L #0F0A14D #FAFAFA
--surface
Cards, sheets
L #FBF7F4D #1A1320
--surface-elevated
Modals, dropdowns
L #FFFFFFD #241A2D
--brand
Single-color brand use
L #F2452FD #FF6B4A
--brand-foreground
Text on brand surfaces
L #FFFFFFD #FFFFFF
--accent
Soft warm accent surface
L #FBEEEAD #2D1F2A
--accent-foreground
Text on accent
L #4A1F17D #FFD8CD
--muted
Quiet backgrounds
L #F4F1EED #1F1828
--muted-foreground
Secondary text
L #6B6770D #A8A2B0
--border
Hairlines, dividers
L #E8E2DCD #2D2438
--ring
Focus rings
L #F2452FD #FF6B4A
--success
Confirmed, admitted
L #1E8E5FD #34D399
--warning
Deadline / caution
L #D97706D #FBBF24
--danger
Destructive actions
L #D63031D #FB7185
--info
Neutral information
L #2563EBD #60A5FA
On-brand surface check
The same content rendered on each major surface.
background
Find your college community.
Body copy sits comfortably at 15px on every surface.
surface
Find your college community.
Body copy sits comfortably at 15px on every surface.
surface-elevated
Find your college community.
Body copy sits comfortably at 15px on every surface.
accent
Find your college community.
Body copy sits comfortably at 15px on every surface.
gradient-brand
Find your college community.
Body copy sits comfortably at 15px on every surface.
gradient-dark
Find your college community.
Body copy sits comfortably at 15px on every surface.
What this replaces
The audit flags three primary-action color conflicts in the existing app. Deep blue NEXT buttons. Yellow selected topic chips. An orange-text-only Take Quiz CTA. All three collapse onto a single brand layer. bg-brand covers single-color use. bg-gradient-brand earns the celebratory primary CTAs.