07 · Start

Built to be read by people and machines.

One CSS file for humans building by hand. One text file for the agents building alongside them. Most Cadence surfaces will be written by both.

For people

Two files, no build step.

The system is custom CSS on custom tokens — no Tailwind, no component framework, no icon library, no animation library. Link the tokens, write components that read roles.

<link rel="stylesheet" href="https://design.cadencework.ai/tokens.css">

<!-- fonts: Fraunces · Inter · JetBrains Mono -->
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Inter:wght@400..600&family=JetBrains+Mono:wght@400..600&display=swap" rel="stylesheet">

/* components read roles, never hex — dark mode is free */
.confirm{ background:var(--brand); color:var(--on-brand); border-radius:var(--r-control); }
.confirm:hover{ background:var(--brand-hover); }   /* color deepens; nothing moves */

/* dark theme: one attribute, zero component changes */
<html data-theme="dark">

TOKENS.CSS

25 color roles × 2 themes, plus type, space, radius, shadow, and motion.

Download ↓ TOKENS.JSON

W3C design-tokens source of truth. Generate Swift, Kotlin, or CSS.

Download ↓

STARTER SHELL

This site is the starter — view source on any page. Shell bar, cards, chips, tables, all plain HTML + tokens.

⌘U on any page

For agents

The system is a prompt.

Every page has Copy for LLM in the header — clean markdown, no chrome. Point a coding agent at the exports below and it builds on-system by default.

LLMS.TXT

The index. What the system is, where each section lives, what to fetch.

Open ↗ LLMS-FULL.TXT

The entire system in one file — tokens, rules, voice, patterns. Paste it and go.

Open ↗ CLAUDE.MD

Drop into any repo. Your agent reads it before writing a line of UI.

Download ↓

# point your agent at the system
curl -s https://design.cadencework.ai/llms-full.txt

# or fetch just the tokens
curl -s https://design.cadencework.ai/tokens.json

Ground rules

Deliberate non-goals.

NO FRAMEWORKS

No Tailwind, shadcn, Material, Chakra, or Radix. Custom CSS on custom tokens keeps the system exactly this and nothing else.

NO ICON LIBRARY

Inline SVG, 1.8 stroke, round caps, currentColor. The four-point spark is reserved for the agent.

NO ANIMATION LIBRARY

CSS transitions and keyframes only. 140–240ms ease-out. Nothing moves unless it means something.

ONE JADE PER SURFACE

The committing action. If two things are jade, neither commits. Purple only when the agent acts.