Guidelines / Color
Black & white, end to end.
Pure achromatic OKLCH neutrals: every token has chroma 0, no hue in the system. Color arrives through the work, never the chrome. Dark mode is a true lightness inversion. These swatches read live from the active theme.
01 · Tokens
Achromatic neutrals
Every semantic token below is chroma 0; only the lightness changes. Use a token, never a hardcoded hex. --destructive is the lone chromatic value, reserved for error states and never for brand.
02 · Dark mode
A true lightness inversion
Dark mode flips lightness with no hue shift, keeping the system achromatic in both modes. Default is light; both are wired via the theme provider, and every surface must read correctly in each. Toggle the theme and watch the swatches above re-paint.
03 · The accent
One, optional: and never gold
The shipped set carries no accent. If an interactive / AI moment ever earns one, it’s a new explicitly-approved token (never a remapped neutral, never behind text, never in the chrome). There is no gold, no champagne, no chromatic brand color of any kind.
- Color is carried by work imagery, not the interface.
- An accent (if added) is for a single hover / focus / hero beat only.
--destructive/ state colors exist for feedback, not decoration.
04 · Surfaces
Flat fills, depth without shadow
No shadows, no gradients. Separation comes from surface contrast, the hairline border, opacity and motion. An image placeholder is a light neutral, never white.
Border
A single hairline at --border is the only structural line.
Surface contrast
A panel lifts by sitting on --muted, not by floating on a shadow.
Placeholder
Source of truth: design/color.md + src/app/globals.css.