Docs Foundations
Colorstable
Print Desk color: warm paper grounds, sumi-ink text and rules, one vermillion accent used like a hanko stamp, and four status hues tuned to the paper family. Values live in tokens/color.tokens.json; the sumi (dark) theme overrides only semantic slots.
Principles
Warmth is the neutral
Every gray is warm — the neutral ramp runs washi paper to sumi ink. Cool grays do not exist in this system; the only cool hue is indigo, reserved for information and focus so it always reads as signal.
Vermillion is a stamp, not a paint
The hanko accent marks — danger outlines, selection underlines, meter fills, deltas that demand attention. It never fills buttons, large areas, or decorative surfaces; primary actions are ink plates. Scarcity is what keeps red legible as 'destructive or urgent'.
Ink and paper trade places in the dark
The sumi theme is not an inversion. Paper text warms (neutral-250), rules flip to paper-cream, vermillion lifts one step (hanko-400) and switches to ink-colored text, and status washes become translucent tints of their text color.
Contrast is a contract, not a hope
Every foreground/background pairing the system permits is declared in tokens/contrast.pairs.json and machine-verified in both themes on every build. A pairing that is not declared is not part of the system.
Guidelines
- mustReference only semantic tokens (color.bg.*, color.text.*, color.border.*, color.accent.*, color.status.*, color.focus.*) in component code.
- must-notDo not use color.accent.base for text below 18px; use color.accent.text.
- must-notNever spend the danger trio on something that is neither destructive nor prohibited — documentation chrome included. A requirement is not a hazard.
- mustConvey status with the full trio — wash fill, edge border, and text — plus a label, never color alone.
- shouldNew status-like colors (e.g. a future 'experimental' state) extend the ramp files with a full wash/edge/text trio in both themes.
Accessibility WCAG AA
| Foreground | Background | Context |
|---|---|---|
color-text-primary | color-bg-surface | Body and heading text on cards and tables; 17.2:1 paper / 14.2:1 sumi. |
color-text-muted | color-bg-surface | Secondary text, captions, labels; 5.5:1 paper / 6.3:1 sumi. |
color-text-inverse | color-bg-inverse | Primary (ink) button label and inverse blocks; 15.8:1 paper / 14.2:1 sumi. |
color-accent-on-accent | color-accent-base | Text on filled vermillion marks (reserved; no button uses this); 4.5:1 paper / 6.0:1 sumi. |
color-accent-text | color-bg-surface | Vermillion links and accent prose; 6.2:1 paper / 5.9:1 sumi. |