keel · a css framework
The first timber.
Everything is built on it.
keel starts with your design system, not ours. One file, zero dependencies, five native cascade layers. Semantic HTML looks designed before you write a single class — and every color the generator produces has already passed WCAG AA.
Link one CSS file — that's the whole install. Then write plain HTML and keel designs it. For terminals and AI agents, there's a CLI and an MCP server too.
No build step · no JavaScript runtime · MIT licensed
This page is the demo
Everything you're looking at is keel with its default tokens. The floating button in the bottom-right corner opens the design-system page: seed it with your own colors and fonts, and this whole site — docs, templates, this sentence — re-renders in your system as you browse.
Nothing here is a screenshot — the components below are live.
Four things keel holds to
Not features — commitments. Each one shapes what the framework is.
01
Design-system-first
You seed a system — colors, mood, fonts — and 61 tokens derive from it by math: neutrals, surfaces, shades, status colors. Override one token and everything follows.
02
Zero JavaScript
A full component library, no scripts. Interactivity starts with
what the platform already ships — native dialog,
popover, details — and stops there.
03
Fluid by default
Type and spacing scale with the viewport through
clamp(). There are no breakpoints to manage,
because there are almost none in the file.
04
Honest by design
The generator enforces WCAG AA in code — an unreadable palette never reaches your screen, and the docs stay just as plain about every trade-off.
A full component library, a design-system generator, templates, a CLI, and an MCP server for AI tools — the core is one small CSS file. MIT.
Write HTML. It's already designed.
The markup on the left renders as the result on the right — no classes, no wrappers. This is what makes keel a natural fit for markdown-generated sites: content needs nothing added.
<h3>Shipping update</h3>
<p>Orders placed before <strong>2pm</strong>
ship the same day. Track them with your
<a href="#">order number</a>.</p>
<blockquote>
<p>No classes were written for this.</p>
</blockquote>
<table>
<tr><th>Zone</th><th>Time</th></tr>
<tr><td>Metro</td><td>1–2 days</td></tr>
</table>Shipping update
Orders placed before 2pm ship the same day. Track them with your order number.
No classes were written for this.
| Zone | Time |
|---|---|
| Metro | 1–2 days |
The framework an AI can actually use
Ask an assistant to build you a website and it writes HTML and CSS — the two things keel already is. Nothing to install, no component API to learn, no build to run. What comes back is accessible and on-brand by default, because keel derives a whole design system from one seed and enforces contrast in code.
01
It's just HTML & CSS
An assistant already knows how to write semantic HTML. keel styles that — no framework idioms to get wrong, no toolchain to configure.
02
Hands-off with MCP
The keel MCP server lets an agent generate a themed system, add icons, and drop in whole sections on its own — the person configures nothing.
03
Written to be read
An llms.txt map, plus machine-readable icons and sections, let a tool learn keel without scraping the docs.
One framework, many products
The same file reads as a dark SaaS product, a bold studio, a
warm magazine, a quiet local business, a page-builder, or an
analytics dashboard — because each template is just a different
@layer tokens block in its head.
Nautical Ledger
A dark SaaS landing — hero, proof row, features, pricing, FAQ.
Harbor & Pine
A bold studio site — editorial type at full size, work as plain confident blocks.
The Long Form
A warm magazine article — serif display, one narrow column, nothing competing with it.
Helm
Helm — a page-builder app UI: toolbar, layers, artboard, inspector.
Pick a direction
keel's defaults are quiet on purpose. A path is one
optional stylesheet that steers the whole framework toward a stronger
look — clay, brutal, liquid glass, maximal. Same markup, one
extra <link> — watch the page below change
direction.
Don't start from scratch
Beyond components, keel ships two libraries you build with — complete sections you can copy, and a large icon set.
Sections
A running pattern library
47 complete page sections — heroes, features, pricing, calls to action, footers and more. Click any one to preview it full-width in your own design system, arrow through the rest, and copy the exact markup. Every section is live, not a screenshot — it re-themes with your tokens.
Icons
Icons that weigh nothing
326 mask-based
icons in currentColor — zero requests, categorized
and searchable. Add just the ones you use and build
a custom file a few KB in size, from the page, the CLI, or the
MCP server.
The workflow
From seed to shipped, no toolchain in between.
-
step 1
Seed your system on the design page — a primary and secondary color, a mood, a font pairing. Every shade derives from it.
-
step 2
Copy the tokens when it looks right — as a CSS tokens block or as DTCG JSON for your other tools.
-
step 3
Build the page from complete sections — heroes, pricing, FAQs, footers — and semantic HTML that's already designed.
-
step 4
Ship flat files. One stylesheet, your HTML, nothing to compile and nothing to run.
What keel is not
Knowing the edges is part of trusting a tool.
- Not a utility-first framework. There is a small utility layer, but every value is a token and there are no arbitrary values or responsive prefixes. Structure gets a class; content is semantic HTML; utilities are the escape hatch, not the language.
- Not a component library with JavaScript.
keel ships zero scripts. Interactivity starts with what HTML and
CSS already do —
details,dialog, states — and anything beyond that is your call, not ours. - Not themable by override. You don't fight defaults with more CSS; you replace the tokens layer. That is the whole theming story, and it's ~30 lines.
- Not 1.0 yet. keel is young. What ships today works today, and the contract — layers, tokens, class names — is meant to hold; but pre-1.0, small things may still tighten. When that happens it lands in the changelog, not as a surprise.
Lay the keel.
Download one file, seed your design system, and build on it.