For agents
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

Zero radius everywhere; only avatars and dots round.

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 — every rounded-* utility resolves to 0 radius. Use hairline 1px borders to separate surfaces.
  • Round only true circles: avatars, status dots, scrollbar thumbs (rounded-full).
  • Add border-radius, drop shadows for elevation, or 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.

Build a new on-brand app

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