Design systems

Attach a design language and the agent is bound to it. (Pro)

A design system in Codey is a portable package: a written spec describing what the product should feel like, plus a machine-readable token contract holding the exact values. Attach one to a prompt and every artifact built in that conversation consumes its tokens — the difference between a style guide and a constraint. (Pro feature — $10/mo flat.)

#Catalog

34 systems ship with Codey, spread across Professional & Corporate, Modern & Minimal, Bold & Expressive, Morphism & Effects, AI & LLM, Editorial & Print, Developer Tools, and the starters. Each is its own package folder:

manifest.json   # id, name, category, summary, file pointers
DESIGN.md       # the written spec an agent follows
tokens.css      # the token contract, as a :root block
USAGE.md        # when and how to apply it

• The folder name is the id. No registry, no database — the catalog is the filesystem.
• Pattern and palette only. The catalog ships no brand-named systems. It teaches a taste — density, corners, contrast, motion — not someone else's identity.

#Panel

Open the launcher in the side panel and pick Design systems — or press 6 while the launcher has focus.

• Rail and surface. The catalog rail carries search and category filters; everything left shows the selected system rendered as itself.
• A specimen, not a spec sheet. Typography, Color, Actions, Surfaces, and Scale — the type set, the palette, real buttons and inputs, surfaces and elevation, the spacing and radius scales.
• Drawn from its own tokens. The preview is generated from tokens.css, so it cannot drift from the system it names and there is no second, stale copy of the truth.
• Add to prompt attaches it. Your own systems can be deleted from here; the bundled ones cannot be touched.

#Attach one

An attached system drops a chip carrying its own four-color mark into the prompt. Autopilot and Workpilot sessions get the same shortcut directly in the prompt dock.

• The chip is a reference. Only the catalog id travels to Codey. The server re-reads the package every turn — edit or regenerate a system and the next turn carries the new one, and a tampered chip cannot smuggle a different spec.
• Attached means binding. The agent is told the system is authoritative for color, type, spacing, radius, elevation, and motion in that turn — no alternative direction, no question back to you about what the design should look like.
• Long specs are capped, not dropped. 30,000 characters of prose and 8,000 of tokens, truncated with an explicit marker. A missing package says so in the turn instead of failing quietly.

#The contract the model receives

### Token contract
Paste this `:root` block verbatim into the first `<style>` of every artifact,
then reference everything through `var(--name)`. Do not invent token names and
do not write raw hex outside this block.

#Token vocabulary

Every package exposes the same semantic slots, so any artifact can bind any system without guessing what that system happens to call its primary color.

• Minimum set — every package declares at least --bg, --surface, --fg, --accent, --font-display, --font-body, and --radius-md.
• Body is --font-body — headings are --font-display. There is no --font-ui slot to invent.

#Author one with the agent

The design_system tool lets an agent maintain the catalog, not just read it.

• Permission per action. Every call asks — including list. The catalog is the paid surface, so reading it is approval-gated like writing it.
• User packages land in the project at .codey/design-systems/<id>. Bundled packages can never be edited or deleted.
• Global folders are scanned first. Drop a package into ~/.codey/design-systems/ and every project sees it — no rebuild, no install step.
• Local CLIs get the same tool — an agent running through Claude Code or Codex calls codey_design_system and reads the identical catalog.

#What a good spec looks like

Ask for a system the way an engineer would document one, and the agent writes the package itself: a character summary in three sentences, then sections that each make a falsifiable claim — colors, surfaces and elevation, typography, layout and spacing, corners and borders, components, states, motion, responsive behaviour, accessibility.

• Numbers, not adjectives. "Warm neutral gray" is a non-decision; #f5f5f7 is a decision.
• Both modes. Light and dark, with one named as the default.
• Prose and tokens in sync. A value that disagrees between the two is a bug in the package.

#Pro

Design systems are Pro end to end. Every route is gated including reads, so a free client cannot pull the catalog out of a running local server; the panel, the launcher entry, the prompt-dock shortcut, the tool, and the API all enforce the same tier.

#See also

• Browser
• Autopilot
• Toolset
• Configuration