Colors.
Ten tokens, named for what they are on a drawing. Every surface uses them and never a literal, so a page printed on the reversed stock swaps their values and nothing else.
On paper.
The stock every page prints on unless it asks for another. Select a swatch to copy its hex.
paper#F7F4EC
Page ground. Warm off-white stock, so a page reads as paper rather than a screen.
bg-paper · text-paper · var(--color-paper)
paper-deep#EFEADE
The bottom stop of a band's fill.
bg-paper-deep · text-paper-deep · var(--color-paper-deep)
vellum#FFF6E7
Sheet fills and drawing grounds. The logo's cut for dark grounds.
bg-vellum · text-vellum · var(--color-vellum)
ink#1A1B1E
Type, plates and linework. The logo's cut for light grounds.
bg-ink · text-ink · var(--color-ink)
graphite#5D5A53
Secondary type.
bg-graphite · text-graphite · var(--color-graphite)
faint#8B877E
Mono labels and tertiary type.
bg-faint · text-faint · var(--color-faint)
hairline#E7E1D4
Rules, grids and borders.
bg-hairline · text-hairline · var(--color-hairline)
crosshair#B9B29F
The crosshair motif's plus marks.
bg-crosshair · text-crosshair · var(--color-crosshair)
redline#EA580C
The one accent: primary calls to action, links and markup. One redline per visual.
bg-redline · text-redline · var(--color-redline)
redline-deep#C2410C
Redline text where contrast needs it, and every hover.
bg-redline-deep · text-redline-deep · var(--color-redline-deep)
On the reversed stock.
Not a dark mode: the same drawing printed as a negative. The ground takes the pen’s color and the pen takes the paper’s. A page opts in with one class, and every token takes the value below. The redline is the constant.
paper#F7F4EC (same)
paper-deep#EFEADE (same)
vellum#FFF6E7 (same)
ink#1A1B1E (same)
graphite#5D5A53 (same)
faint#8B877E (same)
hairline#E7E1D4 (same)
crosshair#B9B29F (same)
redline#EA580C (same)
redline-deep#C2410C (same)
Rules.
- Color is never decoration. Orange marks what matters, the way a checker's red pen does: a primary action, a link, one redline per visual.
- Tokens, never literals. A reversed page swaps the values, and a literal cannot follow it.
- Type is ink and graphite. Faint is for mono labels at annotation size, not for sentences.
- Charts that need more than one hue stay in the redline's warm family, so the page keeps its one color.