Design system
Warm paper, one green.
A small CSS system for pages that read like documents: serif display, sans body, flat surfaces, and one accent at a time.
Browse the examples Tokens and values
5
Accents
2
Modes
17
Body, px
Modes
Paper by default. Slate when the light goes.
The dark mode is a second material, not an inversion: the neutrals stay warm and the accent keeps its hue. The five accents compose with both modes.
-
Mode
Paper
Parchment, near-black ink, and ink green that darkens on hover. No attribute needed.
-
Mode
Slate
Warm graphite, chalk text, and the same green lifted until it clears 7:1. Hover lightens.