Foundations
Colors
Near-monochrome with a single blue accent. The system ships full dark and
light themes; dark is the default. Tokens are CSS custom properties
(--c-*) that flip with the theme.
| Token | Dark | Light | Role |
|---|---|---|---|
| bg-primary | #0A0A0A | #FFFFFF | Page background |
| bg-surface | #111111 | #FAFAFA | Cards, panels |
| bg-elevated | #1F1F1F | #F2F2F2 | Raised surfaces, hovers |
| text-primary | #EDEDED | #171717 | Headings, body |
| text-secondary | #A1A1A1 | #666666 | Supporting text |
| text-tertiary | #757575 | #8F8F8F | Captions, hints |
| accent | #52A8FF | #0070F3 | Links, accent text |
| accent-hover | #83C3FF | #0761D1 | Accent hover state |
| border | #2E2E2E | #E2E2E2 | Control borders |
| separator | #1C1C1C | #EFEFEF | Hairline dividers |
| success | #62C073 | #297A3B | Status: positive |
| warning | #F5A623 | #A35200 | Status: caution |
| error | #FF6166 | #CB2A2F | Status: failure |
| info | #BF7AF0 | #8E4EC6 | Status: neutral notice |
Rules
- — One accent. Blue marks interaction; nothing else gets a hue.
- —
success/warning/error/infoare for status, never decoration. - — Surfaces step bg-primary → bg-surface → bg-elevated; don't skip levels.
- — Solid interactive fills use
--primary: #0070F3in both themes;accentis the per-theme text blue.
Swatches with print values (RGB, CMYK, PMS) live on the brand page; tokens ship as CSS + JSON in the color swatches download.
Markdown for agents: /design/colors.md · spec: /design.md