CSS is Awesome

a short history

Where this system came from.

A small design system, started because every other one I tried was too big, too buggy, and too slow to update. This is the one I wish I'd had.

Why I built it

Every design system on the market has two problems: they ship with bugs, and they're painful to update. You pull in a framework and spend the next month fighting it. You patch. You override. You write CSS to undo CSS.

I wanted the opposite. Something small enough that if a token needed changing, I could change it in a minute. Something honest enough that it didn't pretend to be a framework when all I needed was tokens and mixins. Something that got out of my way.

So I built it.

The joke that gave it a name

In 2009, a designer named Steven Frank posted a now-legendary image: the words CSS IS AWESOME stacked inside a crisp black square, with AWESOME spilling honestly past the right edge. The joke was affectionate. Everyone who had ever written a stylesheet recognized it instantly — a box that was slightly too small, a word that refused to stay put.

Most design systems hide that. They patch, clip, ellipsize, or pretend overflow never happens. This one keeps it. That's the spirit of the whole thing — honest about what it is, and about what it can't do.

The principles that followed

1

Tiny by default

A handful of tokens and a handful of mixins. If you can't read the system in an afternoon, it's too big.

2

Honest about limits

Keep the overflow. Don't hide imperfection — dimension it, annotate it, ship it.

3

Skins are themes

One HTML. Many stylesheets. Zen, Bricks, Brutalist, Terminal, Blueprint, Sketchbook — same system, different voices.

4

Tools, not stock

Don't ship finished products. Ship the pieces. The designer decides the shape.

5

Bring your own components

Bring your own components. Bring your own selectors. cia provides the design system — not React, not Vue, not a specific framework's shape. That's what keeps it useful in Angular, Svelte, Web Components, Razor, SharePoint, and plain HTML, not just wherever the component library happens to already work.

Milestones, so far

  1. 2009 — the origin

    A meme is posted.

    Steven Frank ships the now-famous CSS IS AWESOME image. The internet keeps it forever.

  2. 2025 — the package

    v0.1.0 is cut.

    A token-driven SCSS design system takes shape. Light and dark themes, semantic tokens, an ~800-LOC mixin API, Figma tokens auto-generated from Tokens Studio.

  3. 2026 — the themes

    Five voices, one system.

    Zen, Bricks, Brutalist, Terminal, Blueprint — each a full skin, each honoring the overflow. Sketchbook arrives later in the year.

  4. 2026 — for agents

    An MCP server, shipped.

    The MCP server ships inside the npm package and hands agents like Claude, Cursor, and Gemini a set of tools to reason about the system directly, no repo grep-walking required.

  5. now — zero install

    A dedicated MCP package.

    npx css-is-awesome-mcp — a standalone companion package, so wiring an agent up to cia takes one line in .mcp.json and no manual dependency install. Same 35 tools, always resolves your installed cia version's real source.

  6. 2026 — the launch

    Published, public, live.

    The first release lands on npm — npm install css-is-awesome is real, jsDelivr and unpkg mirror it, the GitHub repo is public, and this docs site is live at cssisawesome.com.

What it isn't

This isn't Tailwind. It isn't Bootstrap. It isn't a component library with 80 prebuilt headers. It's a box of primitives — bricks, if you prefer — that hand you a palette, a grid, and the honest freedom to build the rest yourself.

The theme editor uses real UI components to validate a theme against something concrete, but those components aren't a product cia ships — they're test fixtures. cia doesn't have an opinion on your markup or your framework. You own your components; cia provides the styling system underneath them.

If you want a system that looks like every other site, reach for something else. If you want one that gives you the tools and gets out of the way, this is it.

What's happening right now

This page is the history. For the present tense there are two other surfaces. /now is generated from the repository when the site builds — the latest release, what is part-finished, what is next in the current wave, and what is blocked and why. Nothing on it is typed by hand except one paragraph and the blocked list, because every hand-maintained status claim in this project has eventually gone stale.

Working notes are the other half: short dated entries about what was being done and what it taught. Lighter than a blog post, heavier than a commit message. There are gaps in them, and the gaps are not a problem.

Approved · v1.21.0

Theme