Build

For agents

The doctrine as rules, tokens and specs as data, and copy-in starter files.

Machine-readable exports

Generated live, so they never drift. Open or fetch any of them.

/design-system.jsonTokens, doctrine, rules & component specs /agents.mdThis rulebook as Markdown /starter/globals.cssToken + component stylesheet /starter/tailwind.config.tsTailwind token mapping /starter/cn.tscn() class-merge helper

curl http://localhost:3005/design-system.json
curl http://localhost:3005/agents.md

Doctrine

Squared by default

Zero radius in the base variant; only avatars and dots round. An opt-in Soft variant relaxes it.

Flat & hairline

1px borders carry structure; a yellow keyline marks state.

Electric-yellow accent

One accent, #FFE600. Meaning comes from state colour and icons.

Arial type

Arial, bold and tight. No web fonts; mono for numbers.

Glass & aurora depth

Depth from glass, an aurora wash, and a soft glow — not shadows.

Signature motifs

The eyebrow and spectrum keyline make every surface recognizable.

Rules

Shape & structure

Keep corners square in the base variant — every rounded-* utility resolves to the --radius-* tokens, which are 0 by default. Use hairline 1px borders to separate surfaces.
To round, opt into the Soft variant (set data-variant="soft") — never hard-code a border-radius. The variant re-shapes the whole tree from the --radius-* tokens.
Round only true circles: avatars, status dots, scrollbar thumbs (rounded-full) — these stay round in every variant.
Hard-code border-radius, reach for drop shadows for elevation, or use chunky 2px+ borders to ‘soften’ the UI.

Colour

Use exactly one brand accent — electric yellow (--accent). Carry meaning with state colour (info/ok/severity) and icons.
Use --accent for fills/borders/keylines and --accent-fg for accent text/icons (it stays readable on light surfaces).
Reference tokens only (bg-surface, text-text2, border-border…) so everything re-skins for light and dark automatically.
Introduce a second brand hue, hard-code hex values, or put bright-yellow text on a light background.

Typography

Use Arial (the sans stack) with tight negative tracking on headings; make headings bold and large.
Use the mono stack with tabular-nums for numbers, codes, IDs, and timestamps.
Load a custom web font or use light/thin weights for headings.

Depth & elevation

Build depth from frosted glass (.panel/.glass), the aurora wash (.bg-aurora), and the accent glow (.glow-accent).
Use .glass-chrome for bars/nav, .glass-modal for dialogs, .popover for opaque menus over busy content.
Reach for large box-shadows or coloured glows other than the accent halo.

Motion

Use the provided keyframes (card-in, row-in, fade-rise, pulse-accent) and spring transitions for overlays.
Respect prefers-reduced-motion — it is already honoured globally; don't override it.
Add long, bouncy, or attention-grabbing animations to routine state changes.

Layout & spacing

Use the default Tailwind spacing scale; lean on flex and grid layouts with consistent gaps.
Design up to the 3xl/4xl breakpoints so wide desktop consoles fill the canvas.
Strand content at a narrow max-width on large screens.

Components & states

Compose from the primitive library (Button, Field, Panel, Card, Chip, Stat…) before writing new markup.
Signal hover/active with the yellow keyline (border-accent / left keyline), not a fill change.
Mark provenance and state with chips and status dots; use skeletons for loading.
Re-implement a primitive's look with ad-hoc classes when a component already exists.

Accessibility

Keep the accent focus keyline visible; ensure interactive targets are at least ~28px tall.
Pair colour with an icon or text label so meaning never relies on hue alone.
Remove focus styles or rely on the yellow accent as text colour on light surfaces.

Shape variants

An axis orthogonal to light/dark. data-variant re-declares only the --radius-* shape tokens (plus a couple of structural deltas) — the palette is unchanged. Set it on <html> or scope it to any subtree, just like the theme. Toggle it from the top bar to preview.

Confident — squared

default

The default shape language: zero radius everywhere; depth comes from glass, the aurora wash, and the accent glow, never from rounding.

Select(default — no data-variant needed)

--radius-chip0

--radius-field0

--radius-btn0

--radius-panel0

--radius-popover0

Soft — rounded

The same Confident + Glass palette with a relaxed shape — a soft radius scale, slightly stronger hairlines, and an accent focus ring on inputs. Mirrors the rounded product surfaces of the Client Emulator app.

Selectdata-variant="soft"

--radius-chip6px

--radius-field8px

--radius-btn8px

--radius-panel12px

--radius-popover16px

--border-strong#7E7E8A / #757585

--focus-shadow0 0 0 3px rgba(255,230,0,0.30) / 0 0 0 3px rgba(255,230,0,0.20)

Build a new on-brand app

1Start a Tailwind v3 project (Next.js App Router recommended).
2Drop /starter/globals.css into app/globals.css — it imports Tailwind and declares every token + component class.
3Add /starter/tailwind.config.ts (token → utility mapping, rounded-* → --radius-* shape tokens, Arial/mono fonts) and /starter/cn.ts.
4Set data-theme="dark" and data-variant="confident" (or "soft") on <html>, and add an anti-flash script that applies both before hydration.
5Compose UI from the component classes and the documented components — never hard-code colours or radii; shape follows the active variant.

Dependencies

# In a Tailwind v3 + Next.js app
npm i clsx tailwind-merge lucide-react

Compose with tokens

import { cn } from "@/lib/cn";

export function Example() {
  return (
    <section className="panel p-5">
      <span className="eyebrow accent">Section</span>
      <h3 className="mt-3 text-[15px] font-bold tracking-[-0.01em]">Confident by default</h3>
      <p className="mt-1 text-[12.5px] text-text2">Squared, hairline, one accent.</p>
      <div className="mt-4 flex gap-2">
        <button className="btn-primary">Primary</button>
        <button className="btn-ghost">Ghost</button>
      </div>
    </section>
  );
}

Open the JSON export