Your design system
Seed it with your brand — up to five colors: a primary, a secondary, an accent, and optionally your own text and background. Add a mood, a font pairing, and a type scale. The rest — neutrals, surfaces, the fluid type sizes, variants, status colors — is derived by math. Colors you pick are used exactly as picked; the readout warns if a pair falls below WCAG AA. The result applies to this whole site and follows you from page to page; when it looks right, copy the tokens.
Your primary — neutrals and surfaces tint from it. Click the swatch to open the picker; saved colors remove with a right-click.
Harmonies derive it from your primary, so the pair can't clash. Used by secondary buttons, badges, and tint bands.
A third brand color for highlights, tags,
and the occasional call-out. Powers --k-accent-3,
.k-btn--tertiary, and .k-badge--tertiary.
Leave on Auto to let the mood set your text and background. Pick them yourself and the tool respects your exact colors — and warns in the contrast readout if the pair falls below WCAG AA.
The first six are system stacks — zero requests, but they render with whatever your OS has. The self-hosted six ship with the site as woff2 files and look identical everywhere; the export includes a Google Fonts link alternative.
Body text sits here; every other size is measured from it — drag to taste.
Headings step up from the base by this
ratio and grow fluidly on wider screens — all seven
--k-text-* sizes generated as clamp(),
no math on your end.
contrast —
Take your system with you
Start here. Paste this block right after your keel.css
link and it re-themes the whole page. This is all most projects need.
More formats
Every keel token with your seeds inlined; derived shades stay
live color-mix(), so they keep following any token you retune.
The design-token standard — for Figma and design-token tools.
Colors and type sizes for tailwind.config.js.
$k-* variables for a Sass build.
Plain key/value pairs — for anything else.
Preview the token CSS
Make the classes yours
Download keel
with your own class prefix — .k-btn becomes
.yours-btn throughout. Tokens stay --k-*,
so your own --black and friends are never touched.
Live preview
Everything follows your seeds
Body text with a link, some
weight, and inline code — set in
your pairing, on your surfaces. Small print takes the
soft text tone.
An alert, edged with your status green. Every shade here derived from your seeds.
Using what you made
- Click Copy tokens CSS above.
- Paste it into your stylesheet after the keel
<link>tag — it replaces the default tokens layer. - That's the entire theming story. Every keel page you build now renders in your system.
Wondering where the numbers come from? Derived neutrals are held to WCAG AA — body text to 7:1 against the background, accent pairs to 4.5:1 — nudged in code before anything reaches the screen. Colors you pick yourself are kept exactly as chosen; the readout warns if a pair falls short. Browse the components or the example page to see your system at work.