CanonCSS
GitHub
Open source · v0.1

One right way
to do each thing.

Canon is a pure-CSS framework with a closed vocabulary,
designed so humans and LLMs produce the same markup.

Get the promptView on GitHub

Try it in 60 seconds

1 · Copy the prompt
Grab the ~600-token system prompt from For LLMs with one click.
2 · Ask your LLM
Paste it into Claude, Cursor or ChatGPT and ask for any page or component.
3 · See it live
Paste the result into the Playground - rendered instantly, light or dark.

Install

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

That's the whole install - 19kb raw, 3.8kb gzipped, zero JavaScript, zero build step. In Next.js it's one import in your root layout:

import 'canoncss'

Write intent, not implementation

<div data-layout="grid" data-cols="3" data-gap="lg">
  <article data-component="card">
    <div data-slot="header">Title</div>
    <div data-slot="body">Content</div>
  </article>
</div>

Elements declare what they are via data-layout and data-component. There are no utility classes to compose and no alternatives to choose between. The attributes work identically in HTML and JSX.

Why a closed vocabulary

6 spacing values
7 text sizes. 4 radii. 3 shadows. When a dimension has six options instead of sixty, choosing correctly stops being a matter of taste.
One canonical form
An LLM picks between valid alternatives by statistical distribution, not reasoning. Canon removes the alternatives.
Prompts ship with it
A ~600-token system prompt makes any model generate valid, consistent Canon markup. Tested: zero rule violations.

The rules

1 - Only defined tokens. If a value has no token, it does not exist.

2 - No inline styles, no extra CSS.

3 - An element gets data-layout or data-component, never both.

4 - data-slot only as a direct child of its parent.

5 - Dark mode is data-theme="dark" on <html>.