Skip to the collection

Intent®

Intent-based
styling system

Status

v0.2.0 — experimental
FSL-1.1-MIT

Capabilities

44 semantic roles
OKLCH theme engine
Design linter

Audit

52/52 contrast checks
31 tests passing
0 runtime dependencies

Scheme

A styling system that speaks in roles

Say what it is.
Not what it looks like.

Markup declares what an element is — a card, the primary action, a related stack — and a compiled theme decides what that means in pixels. One OKLCH hue seeds the palette. Relationships derive the spacing. A linter audits the result, in both schemes, before anything ships.

Get started View source
44 roles 0 runtime dependencies WCAG-audited, light + dark MIT after two years

The permanent collection

Live renders — not screenshots

Surfaces

№ 01

surface

surface-raised

surface-overlay

Elevation as meaning. Every plane keeps its ink readable — audited.

Actions

№ 02

One primary per scope. The linter counts, so you don't have to.

Type

№ 03

Aa

Title carries the page

Heading holds a section

Body does the reading.

Caption keeps the records.

One ratio derives five sizes — six with the fluid hero above.

Rhythm

№ 04

related

related

separate begins here

No pixel values. Siblings are related, separate, or sectioned.

Notes

№ 05

Draft saved a moment ago.

Published. The audit passed.

Two primaries in one card.

Inline style — the system can't see it.

Four voices, eight color pairs, every one contrast-checked.

Controls

№ 06

This form watches its own width, not the viewport's. Narrow the frame and the row stacks.

Chips

№ 07

Filter by family

Surfaces Actions Text Notes

Metadata at caption scale. Exactly one wears selected.

Ink

№ 08

Primary ink carries the argument.

Muted ink supports it — still 4.5:1.

Faint ink decorates, nothing more.

Brand ink is for leaving.

Three inks and a link. Every pair audited on every plane.

Manifesto

Roles, not values.

A class is either meaningful or it is an error. There is no mt-[13px], so drift has nowhere to live.

Relationships, not numbers.

Siblings are related, separate, or sectioned. One base and one ratio derive every distance on this page — including these.

Modern CSS, no legacy tail.

Container queries are the responsive model. light-dark() carries both schemes. The palette is OKLCH math. The output is layered.

A linter that reads meaning.

Because classes carry intent, design review becomes mechanical: duplicate primaries, contrast failures, and typos fail the build — not the user.

The argument

Utility CSS — nine decisions, every call site

<div class="bg-white dark:bg-zinc-900
  rounded-xl shadow p-6
  flex flex-col gap-3">

Intent — two decisions of meaning

<div class="card stack-related">

Dark mode, density, and a rebrand become theme swaps, not codemods. Change brand: { hue: 264 } and this entire page follows — with its contrast guarantees intact.

Quality control

$ intent check

12:8 unknown-intent — "surface-rased" is not a role. Did you mean "surface-raised"?

40:6 duplicate-primary — 2 primary actions in one form scope. Demote one.

0 errors · 52/52 contrast checks pass · exit 0

Exit code 1 blocks the merge. Design review, mechanized.

For the machines

A vocabulary a model cannot drift from

Utility CSS hands a coding agent an infinite class space to hallucinate in. Intent hands it a closed contract: 44 roles, machine-readable diagnostics, and a loop it can run until the design system says yes.

AGENTS.md intent check --json intent vocab --json llms.txt 
# Styling instructions — Intent

1. Class attributes may only contain
   Intent roles. Never invent names,
   never add inline styles.
2. Spacing comes from stack-* / row-*.
   Do not add margins.
3. One action-primary per scope.

npx intent check --json
# fix every "error", re-run to exit 0

Terms of engagement

Use it freely

Internal tools, client work, commercial products that use Intent for their own interface — all covered by the grant.

One reservation

Selling Intent itself — or a substitute for it — as a product or service stays with the licensor.

Time-boxed

Every release converts to plain MIT two years after it ships. The newest work is protected; the old work is free.

FSL-1.1-MIT · full text in the repository · commercial licensing: dataswarmproject@gmail.com