The editorial base of the design system. Warm off-white, ink-dark type, and the vibrant eight carried by the brush highlight. Everything below is the real component set on light tokens.
The vibrant eight sit on a warm off-white, never pure white. The warmth keeps the accents from feeling clinical, and pairs with the brush highlight for the hand-made, editorial feel.
Body text is ink-dark on the warm paper for a comfortable, editorial read. Secondary text softens to a muted gray. Emphasis stays ink, not colored. The through-line accent (teal) carries the hero and primary links; each section can take its own accent as identity.
On light, tint fills stay pale and the accent text darkens — the inverse of the dark theme's deep-tint-with-lighter-text.
Callouts and cards sit on pure white, one step brighter than the warm paper, so they lift off the page with only a hairline border.
The light theme flips the usual: the page is warm and bright, so code drops onto a dark surface to stand out and stay easy on the eyes.
# light page, dark code well --paper: #FBFAF7 # warm off-white --surface: #FFFFFF # cards --surface-2: #20232A # code wells accent: vibrant eight
Principle cards on white, each with its accent top-border. Identical in structure to the dark theme; only the surface layer changes.
The paper is off-white with warmth in it, which reads editorial and easy rather than clinical.
The eight hues need no lifting on light; they sit at full saturation against the paper.
The tint-and-text pairing: pale fill, darkened accent text, for contrast on the bright ground.
Where the dark theme's signature is the cursive hero, the light theme's is the brush highlight.
Light and dark are a token remap of each other. Same accents, same components, same voice. The light theme is the editorial default; the dark theme is its charcoal counterpart.
See the dark theme →