Get started

One file, no build step. Link it, write semantic HTML, and keel does the rest.

terminal

npm i keelcss

index.html

<link rel="stylesheet" href="keel.css">

No CDN required and no bundler either — keel.css is a single file: download it, link it, forget it.

Install

Download keel.css, or run npm i keelcss.

Link

One <link> tag in your <head> — no config file.

Build

Write semantic HTML. Buttons, cards, forms — already styled.

Get the file

keel is one stylesheet — download it and put it next to your HTML. Readable ~92 KB; minified ~64 KB (about 11 KB over the wire with gzip). The named icon set (326 icons) is a separate optional file (keel-icons.css) — link it only if you use icons, or build a smaller subset with the package builder.

Download keel.css keel.min.css keel-icons.css

Prefer the terminal? The repo ships a zero-dependency CLI (tools/cli.mjs): node tools/cli.mjs init scaffolds keel and a starter page; add <icon>, system and more build the rest. Publishing to npm — so npx keelcss init works anywhere — is coming. There's also a keel MCP server so AI tools can generate a system, add icons, and drop in sections.

Compose your setup

keel is always the base. Add the icon set and a design path only if you need them — the exact links, in the right order, build below. Copy them into your <head>.

Icon set keel-icons.css — 326 named icons Minified smaller .min.css files

Design path — one, or none

<link rel="stylesheet" href="keel.css">

Order is the whole trick: keel first, then icons, then a path — each one continues the last. Prefer a CDN? Once keel is on npm, jsDelivr serves every file at cdn.jsdelivr.net/npm/keelcss/… in the same order.

Link it

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My site</title>
  <link rel="stylesheet" href="keel.css">
  <!-- optional: the named icon set -->
  <link rel="stylesheet" href="keel-icons.css">
</head>

On Astro, Vite/React, Next, 11ty/Hugo, WordPress, or a server framework? The framework guides show the one-line way to link keel in each.

Write a page

Pages are full-width bands with an inner container; content inside needs no classes — the base layer designs semantic HTML for you.

<body>

  <section class="k-hero">
    <div class="k-container">
      <h1>Daiven Woodworks</h1>
      <p class="k-hero__lead">Furniture built to be kept.</p>
      <a class="k-btn" href="#contact">Get a quote</a>
    </div>
  </section>

  <section class="k-section k-section--alt">
    <div class="k-container--narrow k-container">
      <h2>About the shop</h2>
      <p>Plain paragraphs, links, lists and tables
      are already styled. Just write.</p>
    </div>
  </section>

</body>

See a complete page assembled this way on the example page.

Make it yours

The defaults you're looking at are just keel's starting tokens. Generate your own on the design system page — pick a color, a mood, and a font pairing — then paste the exported tokens after the keel link tag:

<link rel="stylesheet" href="keel.css">
<style>
  /* pasted from the design system page */
  @layer tokens {
    :root { --k-accent: hsl(160 84% 32%); /* … */ }
  }
</style>

Because tokens live in their own cascade layer, this replaces keel's defaults cleanly — why that works, and why your CSS always wins, is on concepts.

Shades derive: override --k-accent alone and the strong, light, soft, and transparent variants follow — see design-system-first.

Extend it

.btn-sale {
  --k-btn-bg: var(--k-warn);
  --k-btn-bg-hover: color-mix(in oklab, var(--k-warn), black 15%);
}

Components read local knobs with token defaults, so a custom variant is a few lines of plain CSS. The grammar behind it, and a worked recipe, are on components.

What's in the box

tokens: ~30 custom properties — every visual decision, in one place.
base: Semantic HTML styled: prose, forms, tables, dialogs, details.
layout: Full-bleed bands, three container widths, six structural arrangements.
components: A full component library, organized into categories: buttons and groups, cards, badges, alerts, banners, nav, tabs, dropdowns (rich menus), drawers, tooltips, popovers, toasts, modals, accordions, lists, data tables, pagination, avatars, stats, timelines, empty states, a scroll-snap carousel, spinners, skeletons, switches, rating, combobox, token multi-select, value+unit and stepper fields, form groups, a code editor, an application/builder tier, and a 326-icon set with .k-icon-box framing.
utilities: A small token-bound utility surface — spacing, text, display, flex — with no arbitrary values.

Honest notes

keel needs a browser with @layer support — every major browser since 2022. No fallback, by design.
keel is pre-1.0. Class names and tokens may still tighten; changes land in the changelog.
keel ships no JavaScript. The design-system tool on this site is part of the site, not the framework.
More on all three in concepts.