design system
v1.0Build →

Characteristics

The look, made explicit.

Four principles, the foundation tokens you'll use every day, and applied site examples that show the system in production. If you can read this page, you can ship in the system.

01 — PrinciplesFour rules for every surface.

001
Fail closed.
If the answer isn't yes, the action doesn't run. The brand reflects this. No marketing maybes, no animated reassurances, no 'could', 'might', 'will eventually'. A denial is the headline, not a footnote.
In practice — denials use the deny color, no qualifying copy, and appear above their reason.
002
Show the boundary.
Every layout makes the decision moment legible. Render the verify call where you can, name the boundary explicitly, and place the decision next to the request that triggered it. The boundary is the brand asset.
In practice — the indigo divider strip ("behalfid · decision boundary") is the only branded element repeated across surfaces.
003
One color is enough.
Indigo for the brand. Status colors only when a decision must be read at a glance. Everything else is greyscale. Color is information, not decoration. A reader on a phone in sunlight should still be able to tell allowed from denied.
In practice — never use indigo for status, never use status colors for emphasis, and never introduce a fifth hue.
004
Truth, not theater.
"Preview", "planned", "MVP", "best-effort" appear in marketing because they appear in the product. The system favors honest words over confident ones. If a feature is half-built, that fact is written in the same type as the headline.
In practice — stage labels (preview, planned, MVP, manual guidance) get the standard badge, not a custom callout.

02 — FoundationsTokens you'll use every day.All tokens →

SurfaceBackground & ink
canvas--bg#000000 — pure black, the only page background
panel--panel#0a0a0a — code shells, sidebars, the logo mark
text--text#fafafa — primary type. Never #fff.
muted--muted#707070 — captions, labels, hairline metadata
border--borderrgba(255,255,255,0.08) — every divider on the site
TypeTwo families
sans--font-sansInter — prose, headings, labels
mono--font-monoJetBrains Mono — IDs, tokens, code
DecisionStatus palette
allow--okallowed  agent_ollie · access_data · gmail.com
deny--denydenied  agent_ollie · purchase · coachella.com
warn--warnneeds approval  agent_ollie · send_email · 38 recipients
BrandOne accent
accent--accent#6366F1 — only on the boundary divider, focus rings, and selection.
accent-glow--accent-glowrgba(99,102,241,0.18) — fill behind the boundary divider strip.

03 — AppliedSite examples. The system, deployed.

— Site / Home
Homepage
Hero, decision packet, four-step model, developer enforcement, secondary surfaces.
/↗
— Site / Sandbox
Sandbox
Interactive enforcement demo. Switch the simulated request, watch the trace fire.
/sandbox↗
— Site / Security
Security
Long-form content surface. Numbered sections, fail-closed code, honest limitations.
/security↗

04 — ImplementationCompose with tokens, never raw values.

New page in 8 lines

Import tokens, primitives, and (for marketing surfaces) site chrome. Stack everything else on top. The system gives you ~80% of the surface for free.

page.tsxtsx · globals.css
import s from "./page.module.css";

// tokens come from globals.css — no imports needed
// use var(--bg), var(--accent), var(--font-mono) etc.

export default function Page() {
  return (
    <main>
      <p className="ui-kicker">Permission infrastructure</p>
      <h1>Verify before the agent acts.</h1>
      <a className="ui-button ui-button--primary">Start building</a>
    </main>
  );
}