Paths

A path is a continuation of keel, not part of the install. keel's defaults are deliberately quiet; a path steers the whole framework toward a stronger design direction — link one after keel.css if that's where your site is heading, or link none at all. Think of it this way: your tokens decide the colors, type, and spacing; a path decides the shape-and-decoration language they're expressed in — inflated clay, hard brutalism, frosted glass, or loud maximal.

How a path works

Each path is one optional stylesheet. It restyles keel's surfaces, controls, and shape tokens — and because everything in it derives from your tokens, a path follows your design system, not a preset. Two things every path keeps intact:

Your contrast is guaranteed. A path restyles shape, shadow, and decoration and keeps your text and background colors exactly as keel set them — so the AA contrast holds right through the makeover. That's the guardrail every path rides along.
Your CSS still wins. Path styles live in @layer path, above keel's layers and below your own unlayered CSS — overriding a path is just writing CSS.

<link rel="stylesheet" href="keel.css">
<!-- one path, or none — your call -->
<link rel="stylesheet" href="keel-path-clay.css">

Paths are directions, so pick one — that single direction is what gives a site its through-line.

Try them

The page below is one fixed piece of markup — a nav, cards, controls, a table. Switch the path and watch the same HTML head a different way. (The switcher is this website's JavaScript, not keel's — a real site just links the file.)

Open the demo page on its own → (add ?path=brutal — the page reads the query and links that stylesheet).

Add a path to your site

Three steps, no build, no configuration.

Get the file. Download the path you want — clay, brutal, liquid, or maximal — and put it next to your keel.css. (Each also ships as a .min.css.)
Link it after keel. Order matters — the path continues keel, so it comes second:
```
<link rel="stylesheet" href="keel.css">
<link rel="stylesheet" href="keel-path-clay.css">
```
That's it. Reload — every surface, control, and shadow on the page takes the direction. Your own tokens block (if you pasted one from the design page) keeps working: paths derive from whatever tokens are live, so the direction wears your colors.

Tuning a path is the same as tuning keel — write plain CSS after it. Your unlayered styles beat the path's layer automatically:

/* your stylesheet, linked last */
.k-card { box-shadow: none; }        /* calm one component back down */
:root { --k-radius: 12px; }          /* re-round a brutal corner */

Changing direction later is a one-line diff: swap which path file the link points at, or delete the line to return to keel's defaults. Markup never changes — that's the point.

The four directions

Open one to see what it changes and the exact line to add. The switcher above shows them side by side; each is a complete page in templates.

clay — claymorphism

Inflated, soft-shadowed surfaces with generous corners: pill buttons that press, puffy cards, borderless fields. The colored shadows derive from your accent, so the clay is always your brand's clay — soft and readable, because the guardrail rides along.

Best for: friendly, tactile, approachable products — bakeries, consumer apps, playful or warm brands.

Changes: cards, panels, alerts and stats puff up; buttons become pressable pills; inputs go borderless; corners round up.

<link rel="stylesheet" href="keel.css">
<link rel="stylesheet" href="keel-path-clay.css">

See it as a page — Sundough, a bakery →

brutal — brutalism

Zero radius, thick ink borders, hard offset block shadows, uppercase headings, and buttons that physically collapse their shadow when pressed. It runs on your text/background pair — the loudest direction, and a sturdy one.

Best for: bold, editorial, confident work — type foundries, portfolios, zines, statement sites.

Changes: everything squares off; cards, dialogs and menus get a 2px ink border + block shadow; h1/h2 go uppercase; buttons collapse on :active; tables get ruled.

<link rel="stylesheet" href="keel.css">
<link rel="stylesheet" href="keel-path-brutal.css">

See it as a page — Blunt Type Co., a foundry →

liquid — glass, everywhere

The .k-glass treatment promoted to a direction: cards, panels, menus, dialogs, and the nav become frosted panes with a specular top edge, all in pure CSS. Fills stay near-opaque behind text so contrast holds.

Best for: sleek apps and product pages, especially on dark or gradient backgrounds — music and media, dashboards, modern SaaS.

Changes: surfaces turn translucent with backdrop blur; ghost and soft buttons frost too. Works best over a gradient or image background; where backdrop-filter is available it frosts, and everywhere else it renders as clean solid surfaces — so the page looks intentional on every browser.

<link rel="stylesheet" href="keel.css">
<link rel="stylesheet" href="keel-path-liquid.css">

See it as a page — Glasswater, a music app →

maximal — maximalism

The display end of the type ramp scaled up, gradient edges on cards, gradient-filled primary buttons, mesh-washed alt sections, heavier weights. Decoration turned up — but gradients decorate the furniture, never the text color, so the guardrail holds.

Best for: loud, expressive, high-energy sites — festivals, launches, campaigns, entertainment.

Changes: bigger, tighter display type; cards gain a gradient top edge; primary buttons fill with the gradient; h2 gets a gradient underline; --alt bands get a soft mesh wash.

<link rel="stylesheet" href="keel.css">
<link rel="stylesheet" href="keel-path-maximal.css">

See it as a page — Neon Harvest, a festival →

What's already in core

Two looks are built in — no path needed. Minimalism is keel's data-k-flat setting plus your own tokens: flip it on and surfaces go flat, borders-only. And the bento grid is plain layout — .k-bento with __wide / __tall / __hero spans, documented on layout.