ds
Foundations
Color

Color

Neutrals, the accent, amber, and contrast in both themes.

Each swatch shows light on the left and dark on the right, then the contrast of the colour as text on --bg in each theme. Ratios are computed at build time from the tokens, so this page can never drift from ds.css.

Neutrals

Warm greys. --bg is the page, --surface sits on it (cards, figures, inputs in fin1te), --bg-sunk sits below it (footer, segmented tracks, hover fills).

--bg#f6f5f1#0e0e0dPage background.

--bg-sunk#efede7#0a0a09Recessed areas and hover fills.

--surface#fdfcfa#151514Raised surfaces: cards, figures, menus.

--ink#141413#eeede816.9 AAA16.5 AAAHeadlines and primary text.

--ink-2#3d3d3a#c9c8c110.0 AAA11.5 AAABody text and prose.

--muted#6b6a65#94928b5.0 AA6.2 AASecondary text, labels, meta.

--faint#9c9a93#65645f2.6 decorative3.3 AA largePlaceholders and disabled text. Not for anything that must be read.

--rule#dfddd6#262624Hairlines between things.

--rule-strong#c9c6bd#393935Borders on controls, and rules that must show.

Accent and amber

--accent fills and strokes. --accent-ink is the text version, tuned for contrast. --accent-wash is the tinted background behind selected things. Amber follows the same three-part pattern.

--accent#6e56cf#9b85f54.9 AA6.5 AALinks on hover, focus rings, flow on data links.

--accent-ink#5b3fc4#b8a7ff6.5 AA9.2 AAAKickers, current page, selected text.

--accent-wash#eeeafc#1f1a33Selected backgrounds.

--amber#d97706#fbbf242.9 decorative11.6 AAAStorage outlines, personal series.

--amber-ink#b45309#fcd34d4.6 AA13.4 AAAAmber text: improved values, Rust chips.

--amber-wash#fbf0dc#2a2111Amber backgrounds.

--pink#d6409f#f472b63.8 AA large7.3 AAAOnly inside the gradient phrase.

Data and effects

--s-work#6e56cf#8a73ee4.9 AA5.3 AAChart series one.

--s-personal#c96a04#c07a1c3.5 AA large5.6 AAChart series two. Checked with s-work for colour-vision deficiency.

Token	Light	Dark
`--grid-line`	rgba(20, 20, 19, 0.06)	rgba(238, 237, 232, 0.055)
`--grid-dot`	rgba(20, 20, 19, 0.07)	rgba(238, 237, 232, 0.06)
`--shadow`	0 1px 2px rgba(20, 20, 19, 0.04), 0 6px 20px -8px rgba(20, 20, 19, 0.14)	0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.6)
`--shadow-lg`	0 1.5rem 3.75rem -0.75rem rgba(0, 0, 0, 0.35)	0 1.5rem 3.75rem -0.75rem rgba(0, 0, 0, 0.7)

Text contrast

Text	On	Light	Dark
`--ink`	`--bg`	16.90 · AAA	16.48 · AAA
`--ink-2`	`--bg`	9.99 · AAA	11.51 · AAA
`--muted`	`--bg`	4.97 · AA	6.20 · AA
`--muted`	`--surface`	5.29 · AA	5.87 · AA
`--faint`	`--bg`	2.58 · decorative	3.26 · AA large
`--accent-ink`	`--bg`	6.52 · AA	9.21 · AAA
`--accent-ink`	`--accent-wash`	6.03 · AA	7.98 · AAA
`--amber-ink`	`--amber-wash`	4.45 · AA large	11.00 · AAA
`--bg`	`--ink`	16.90 · AAA	16.48 · AAA

In use

Case study

Checkout rewrite, 3.1x faster

Published 12 Aug 2026 · 8 min

Code

<p class="label kicker">Case study</p>
<p style="font-size:1.25rem;font-weight:600">Checkout rewrite, <span class="accent">3.1x faster</span></p>
<p class="muted">Published 12 Aug 2026 · <span class="warm">8 min</span></p>

Use --accent-ink and --amber-ink for text, never --accent or --amber.
Keep one accented phrase per block.
Use tokens in your own CSS so dark mode comes for free.

Don't

Put body text in --faint.
Use amber for buttons or links.
Hard-code hex values from this page.