# Design System Explorer — agent rules Squared, flat, hairline, one electric-yellow accent; depth from glass and motion, not rounding. Generated from the live design system. Machine-readable data: `/design-system.json`. Starter files: `/starter/globals.css`, `/starter/tailwind.config.ts`, `/starter/cn.ts`. ## 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 - **DO** — Keep corners square — every rounded-* utility resolves to 0 radius. Use hairline 1px borders to separate surfaces. - **DO** — Round only true circles: avatars, status dots, scrollbar thumbs (rounded-full). - **DON'T** — Add border-radius, drop shadows for elevation, or chunky 2px+ borders to ‘soften’ the UI. ### Colour - **DO** — Use exactly one brand accent — electric yellow (--accent). Carry meaning with state colour (info/ok/severity) and icons. - **DO** — Use --accent for fills/borders/keylines and --accent-fg for accent text/icons (it stays readable on light surfaces). - **DO** — Reference tokens only (bg-surface, text-text2, border-border…) so everything re-skins for light and dark automatically. - **DON'T** — Introduce a second brand hue, hard-code hex values, or put bright-yellow text on a light background. ### Typography - **DO** — Use Arial (the sans stack) with tight negative tracking on headings; make headings bold and large. - **DO** — Use the mono stack with tabular-nums for numbers, codes, IDs, and timestamps. - **DON'T** — Load a custom web font or use light/thin weights for headings. ### Depth & elevation - **DO** — Build depth from frosted glass (.panel/.glass), the aurora wash (.bg-aurora), and the accent glow (.glow-accent). - **DO** — Use .glass-chrome for bars/nav, .glass-modal for dialogs, .popover for opaque menus over busy content. - **DON'T** — Reach for large box-shadows or coloured glows other than the accent halo. ### Motion - **DO** — Use the provided keyframes (card-in, row-in, fade-rise, pulse-accent) and spring transitions for overlays. - **DO** — Respect prefers-reduced-motion — it is already honoured globally; don't override it. - **DON'T** — Add long, bouncy, or attention-grabbing animations to routine state changes. ### Layout & spacing - **DO** — Use the default Tailwind spacing scale; lean on flex and grid layouts with consistent gaps. - **DO** — Design up to the 3xl/4xl breakpoints so wide desktop consoles fill the canvas. - **DON'T** — Strand content at a narrow max-width on large screens. ### Components & states - **DO** — Compose from the primitive library (Button, Field, Panel, Card, Chip, Stat…) before writing new markup. - **DO** — Signal hover/active with the yellow keyline (border-accent / left keyline), not a fill change. - **DO** — Mark provenance and state with chips and status dots; use skeletons for loading. - **DON'T** — Re-implement a primitive's look with ad-hoc classes when a component already exists. ### Accessibility - **DO** — Keep the accent focus keyline visible; ensure interactive targets are at least ~28px tall. - **DO** — Pair colour with an icon or text label so meaning never relies on hue alone. - **DON'T** — Remove focus styles or rely on the yellow accent as text colour on light surfaces. ## Theming Light and dark are driven by a `data-theme` attribute ("light" | "dark"), normally on ``. Every token is a CSS variable and every Tailwind utility (`bg-surface`, `text-text2`, `border-border`…) reads it, so the UI re-skins automatically. To lock a subtree to one theme (e.g. a preview), set `data-theme` on that element. ## Tokens | token | light | dark | tailwind | | --- | --- | --- | --- | | `--bg` | #F1F1F5 | #0B0B0F | `bg-bg` | | `--surface` | #FFFFFF | #16161D | `bg-surface` | | `--surface-2` | #FAFAFC | #1C1C25 | `bg-surface2` | | `--surface-hover` | #F1F1F5 | #23232E | `bg-surfaceHover` | | `--surface-sunk` | #F6F6FA | #101016 | `bg-sunk` | | `--elevated` | #FFFFFF | #23232E | `bg-elevated` | | `--border` | #E4E4EA | #2A2A34 | `border-border` | | `--border-strong` | #CFCFD8 | #3A3A47 | `border-borderStrong` | | `--hair` | #ECECF1 | #22222B | `border-hair` | | `--text` | #1A1A24 | #F7F7F8 | `text-text` | | `--text-2` | #5A5A63 | #A7A7B2 | `text-text2` | | `--text-3` | #8C8C96 | #6C6C78 | `text-text3` | | `--accent` | #FFE600 | #FFE600 | `bg-accent` | | `--accent-2` | #FFD000 | #FFD000 | `bg-accent-2` | | `--accent-press` | #E6CF00 | #FFEF4D | `bg-accent-press` | | `--accent-ink` | #1A1A24 | #1A1A24 | `text-accent-ink` | | `--accent-soft` | #FBF6CC | #2A2810 | `bg-accent-soft` | | `--accent-fg` | #8A7400 | #FFE600 | `text-accent-fg` | | `--accent-glow` | rgba(255,230,0,0.28) | rgba(255,230,0,0.16) | | | `--info` | #0E8C88 | #2EC5C0 | `text-info` | | `--info-bg` | #E2F3F2 | #0E2422 | `bg-info-bg` | | `--info-line` | #B8E0DE | #1C463F | `border-info-line` | | `--ok` | #157F35 | #39D98A | `text-ok` | | `--ok-bg` | #E6F2E9 | #11241A | `bg-ok-bg` | | `--ok-line` | #BFE0C8 | #1E4030 | `border-ok-line` | | `--sev-critical` | #CC2A1E | #FF5263 | `text-sev-critical` | | `--sev-critical-bg` | #FBE9E7 | #2A1318 | `bg-sev-critical-bg` | | `--sev-critical-line` | #F2C4BE | #52222B | `border-sev-critical-line` | | `--sev-high` | #D9620A | #FF9A4D | `text-sev-high` | | `--sev-high-bg` | #FCEFE2 | #271C10 | `bg-sev-high-bg` | | `--sev-high-line` | #F2D4B6 | #4D3415 | `border-sev-high-line` | | `--sev-medium` | #A06A00 | #E8B43A | `text-sev-medium` | | `--sev-medium-bg` | #F8F1DC | #23200F | `bg-sev-medium-bg` | | `--sev-medium-line` | #EAD8A6 | #473C18 | `border-sev-medium-line` | | `--sev-low` | #5A5A63 | #9A9AA6 | `text-sev-low` | | `--sev-low-bg` | #ECECF0 | #20202A | `bg-sev-low-bg` | | `--sev-low-line` | #D8D8DE | #34343F | `border-sev-low-line` | | `--glass-1` | rgba(255,255,255,0.86) | rgba(28,28,37,0.72) | | | `--glass-2` | rgba(248,248,252,0.70) | rgba(16,16,22,0.55) | | | `--glass-chrome` | rgba(255,255,255,0.78) | rgba(18,18,24,0.62) | | | `--glass-modal-1` | rgba(255,255,255,0.985) | rgba(30,30,40,0.975) | | | `--glass-modal-2` | rgba(250,250,253,0.975) | rgba(20,20,28,0.965) | | | `--aurora-1` | rgba(255,230,0,0.12) | rgba(255,230,0,0.10) | | | `--aurora-2` | rgba(46,197,192,0.06) | rgba(46,197,192,0.07) | | | `--aurora-3` | rgba(255,208,0,0.06) | rgba(255,208,0,0.06) | | | `--dot` | rgba(0,0,0,0.04) | rgba(255,255,255,0.04) | | ## Set up a new app 1. Use Tailwind v3 (with Next.js or any framework). 2. Copy `/starter/globals.css` into your `app/globals.css` — it imports Tailwind and declares every token + component class. 3. Copy `/starter/tailwind.config.ts` — it maps tokens to utilities, zeroes the radius scale, and sets the Arial / mono fonts. 4. Copy `/starter/cn.ts` — the `cn()` class-merge helper (clsx + tailwind-merge). 5. Set `data-theme="dark"` (or `"light"`) on `` and add an anti-flash script that applies the saved theme before hydration. 6. Build UI from the component classes (`.panel`, `.btn-primary`, `.btn-ghost`, `.field`, `.chip`, `.eyebrow`, `.card`, `.navitem`) and the documented components. ## Components - **Button** (Actions) — Squared, bold action. Primary inverts to a yellow keyline on hover; ghost and danger carry the same shape. - **Input & Field** (Inputs) — Hairline form controls that focus to the accent, with a labelled Field wrapper for inputs, textareas, and selects. - **Panel** (Surfaces) — The workhorse surface — a frosted glass panel with an optional eyebrow header and actions. - **Card** (Surfaces) — An interactive surface whose hairline lights to the accent on hover — for grids of clickable items. - **Popover & Menu** (Surfaces) — A click popover over an opaque surface; fill it with MenuItems for dropdown menus. Closes on outside click or Escape. - **Overlay (Modal & Drawer)** (Surfaces) — A modal or edge drawer over a frosted scrim, animated with a spring. Escape and scrim-click dismiss it. - **Chip** (Data display) — A palette-aware pill. Meaning is carried by state colour; each variant re-skins per theme. Optional dot and pulse. - **Tag** (Data display) — An uppercase monospace tag for codes, IDs, and versions. - **Severity pill** (Data display) — An inline severity chip — icon + band label, with an optional count. Backed by the four-step severity ramp. - **Stat** (Data display) — A severity stat card with a top accent rule and a big tabular number. - **Stat pill** (Data display) — A compact KPI cell — a labelled value with a tone keyline down the left edge. - **Status dot** (Data display) — A small status dot in a tone, with an optional pulse for live states. - **Skeleton** (Feedback) — Shimmering placeholders for loading states — single blocks, text lines, rows, or a whole panel. - **Spinner** (Feedback) — An inline loading ring that inherits the current colour, so it shows on any surface — including the yellow button. - **Empty state** (Feedback) — A centered placeholder with an icon, title, optional sub-line, and an action — for empty lists and zero states. - **Tooltip** (Feedback) — A minimal hover/focus tooltip over an opaque surface. - **Eyebrow** (Signatures) — The signature kicker — a yellow square plus an uppercase micro-label. The system's most recognizable mark. - **Spectrum line** (Signatures) — A thin gradient keyline — used as a rule or divider only, never as a fill. - **Nav item** (Navigation) — A vertical nav row with a glass hover and a yellow keyline when active. - **Prose** (Typography) — A typographic container that styles nested headings, paragraphs, lists, code, and links to the system scale. - **Tabs** (Navigation) — Squared tabs with a yellow underline keyline marking the active tab. - **Switch** (Inputs) — A squared on/off toggle — on is a filled yellow track. Controlled or uncontrolled. - **Avatar** (Data display) — A round avatar — one of the few rounded shapes — with an image or initials fallback. - **Breadcrumb** (Navigation) — A hairline breadcrumb trail; the final item is the current page. - **Toast** (Feedback) — Transient notifications that spring in from the corner. Fire them with useToast(); mount ToastProvider once.