A calm, coastal palette drawn from sage and greyish-blue, paired with an elegant serif and a clean grotesque. Every token below maps directly to Tailwind utilities.
WCAG AA checked. Ink on Mist 12.4:1 · Muted on white 5.4:1 · White on Sage 5.3:1 · White on Forest 9.1:1 · Ink on Mint 9.6:1 — all pass AA for normal text.
Live hover (try it):Book a call
The small setup gaps that keep great products from getting discovered.
Read more →The small setup gaps that keep great products from getting discovered.
Read more →An 8px base grid (with a 4px half-step). Tailwind's spacing scale matches one-to-one — the number below is the Tailwind token.
Drop these tokens into tailwind.config (or a Tailwind v4 @theme block), then every component above is plain utilities — no custom CSS, no JavaScript.
sage: '#3F6F5C', sage-700:'#345C4C', slate: '#3E5566', slate-700:'#2F4150', mint: '#BBDAC7', forest: '#2C4A40', mist: '#F4F7F4', ink: '#26302C', muted: '#5E6B64',
// Primary button bg-sage hover:bg-sage-700 text-white uppercase tracking-wide px-7 py-4 rounded-sm // Blog card hover hover:-translate-y-1.5 hover:border-mint hover:shadow-xl transition
serif: ['Cormorant Garamond'] sans: ['Hanken Grotesk'] script: ['Sacramento'] // Stacking packages (no JS) sticky top-24 / top-32 / top-40 z-10 / z-20 / z-30