Test insert subtitle here.
- The palette is earthy and warm — greens, golds, clay, cream. No cool greys, no blue. Neutrals (
--ink-*) are warm near-blacks, not pure black. - Status colors stay in the earthy family (mossy success green, ochre warning, brick danger, muted teal info) — see
tokens/colors.css. - Gradients are used sparingly and softly: Forest (hero dark panels), Gold and Harvest (gold→clay CTA bands), Sage and Dawn (cream washes). Never a harsh or neon gradient.
Typography
- Display — Young Serif (chunky, warm, slightly rustic): hero & brand-moment headlines. Echoes the rounded warmth of the wordmark. Letter-spacing
0. - Headings — Bitter: section titles, card titles, UI headings; 400–800 + italics.
- Body / UI — Hanken Grotesk: humanist sans, 300–800. Calm and legible.
- Mono — IBM Plex Mono: prices, SKUs, stats, eyebrow numerics.
.ring-text { font-size: 11.2px; font-family: sans-serif; fill: currentColor; letter-spacing: 1.5px; } .spin-group { transform-origin: 64px 64px; animation: spin 8s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } cozy by design · free by choice ·
Leave a Reply