Migrated from Claude Design

README.md

@@ -0,0 +1,225 @@
+# Cybersteel Design System
+
+## Overview
+
+**Cybersteel** is a retrofuturist design system built in direct opposition to modern "fluffy, bloated, web slop" software. It channels the excitement and optimism of early computing — the era when a computer felt like a portal to the future, not a distraction machine.
+
+The system is grounded in three technical principles:
+- **Rock-solid reliability** — nothing crashes, flickers, or stutters
+- **High performance** — things load instantly, no layout shifts, no spinner theatre
+- **Radical directness** — do not waste the user's time; get the job done and get out of the way
+
+The visual language is a direct expression of these values. It is not decoration for its own sake — every visual choice maps to a technical or philosophical intent.
+
+**Retrofuturist inspirations:**
+- Art Deco (1920s–40s): geometric precision, gold ornament, symmetry, angular forms
+- Gruvbox color theme: warm dark backgrounds, muted earth tones, vivid accent colors
+- Fallout game series: amber CRT glow, terminal aesthetics, atomic-age optimism
+
+**Sources provided:** None (this design system was created from description only). No Figma links, codebases, or existing assets were supplied.
+
+---
+
+## CONTENT FUNDAMENTALS
+
+### Voice & Tone
+- **Direct, imperative, technical.** Address the user as a capable adult. No hand-holding.
+- **Second person ("you"), present tense.** "Your build failed." Not "It looks like there may have been an issue with your build."
+- **No filler words, no exclamation points, no emoji.** Cybersteel copy never says "Great job!" or "Looks like something went wrong 😬"
+- **Sparse.** Every word must earn its place. Delete the adjectives. Delete "currently." Delete "simply."
+- **Confident.** No hedging ("might," "perhaps," "it seems"). State facts.
+- **Technical vocabulary is welcomed**, not dumbed down. Users are professionals.
+
+### Casing
+- UI labels: **Title Case** for navigation, **Sentence case** for body, **ALL CAPS** for status indicators and section headers
+- Headings: Title Case preferred at H1/H2, sentence case for H3+
+- Buttons: ALL CAPS or Title Case, never mixed
+
+### Examples of Good Cybersteel Copy
+- `BUILD COMPLETE — 1.4s` ✓ vs. `Your build finished successfully!` ✗
+- `No results.` ✓ vs. `Hmm, we couldn't find anything matching that query 🔍` ✗
+- `Access denied.` ✓ vs. `Oops! It looks like you don't have permission to view this.` ✗
+- `47 errors. Fix them.` ✓ vs. `There are some issues we need to address together 😅` ✗
+
+### What Cybersteel Never Says
+- "Oops", "Whoops", "Uh oh", "Hmm"
+- "We're working on it", "Bear with us"
+- "Looks like...", "It seems like..."
+- "Please don't hesitate to..."
+- Emoji of any kind in product UI
+
+---
+
+## VISUAL FOUNDATIONS
+
+### Color
+Based on the Gruvbox palette — warm, dark, earthy. Not cool blue-grey like modern dark modes. The warmth evokes old paper, amber screens, and aged metal.
+
+- **Backgrounds:** Very dark warm browns/blacks. Not pure `#000000` — always warm.
+- **Foreground:** Warm cream/ivory, never pure white
+- **Accent — Gold:** The signature color. Art Deco gold, amber terminal glow. Used sparingly: borders, highlights, interactive states.
+- **Accent — Red:** Danger, errors, critical alerts
+- **Accent — Green:** Success, safe, complete
+- **Accent — Blue/Teal:** Info, links, cool technical elements
+- **Accent — Orange:** Warnings, in-progress, hot paths
+- **All accent colors** have a dim (bg-facing) and bright (fg-facing) variant
+
+See `styles.css` for all tokens.
+
+### Typography
+**Primary brand typeface: IBM Plex Sans.** Used for display, body, and condensed roles by default. Self-hosted from `/fonts` (woff2). Weights available: 300, 400, 500, 600, 700 (plus 300/400/500 italic). SIL OFL — free for commercial and embedded use.
+
+**Primary monospace: IBM Plex Mono.** Used for `--font-mono` — code, terminal output, data values, timestamps, and any tabular or log-like content where character alignment matters. Same designer, same skeletal proportions, so it sits cleanly next to Plex Sans on the same screen. Same weights, same license, same self-hosting.
+
+Three semantic roles:
+- **Display (`--font-display`):** Titles, hero text, section headers. → Plex Sans, 600–700 weight, ALL CAPS with wide tracking at H1/H2.
+- **Body (`--font-body`, also `--font-condensed`):** UI text, labels, descriptions, prose. → Plex Sans, 400–500.
+- **Mono (`--font-mono`):** Code, terminal output, data values, timestamps. → Plex Mono.
+
+#### Mono mode (opt-in)
+
+For surfaces where the terminal aesthetic IS the point — consoles, status dashboards, IDE-like internal tools, hardware-grade hero moments — flip the whole surface into Plex Mono with the `.mono-mode` class. Display, body, and condensed all resolve to Plex Mono; structural CSS is unchanged.
+
+```html
+<body class="mono-mode"> … </body>
+```
+
+Or scope it manually:
+```css
+:root { --font-display: var(--font-mono); --font-body: var(--font-mono); --font-condensed: var(--font-mono); }
+```
+
+Do not introduce Orbitron, Barlow, Share Tech Mono, or any other family. If something looks like it needs a different typeface, the answer is weight, size, tracking, casing — or a deliberate switch to Mono mode for the whole surface.
+
+Type scale is based on a 1.25 modular ratio. Minimum body size: 14px (web), 12pt (print).
+
+### Spacing
+8px base grid. All spacing tokens are multiples of 4px, with the main scale in multiples of 8px.
+
+### Backgrounds
+- Default: dark warm bg, no images
+- Feature sections: translucent gradient overlays (warm amber/gold tints at low opacity, ~5–12%)
+- Cards: slightly lighter bg than page, with a 1px warm border
+- NO full-bleed photography unless explicitly specified
+- Subtle geometric Art Deco texture possible via CSS (repeating-linear-gradient patterns)
+- Scan line overlays at very low opacity (~3–5%) acceptable for terminal-style elements
+
+### Gradients
+- Simple, translucent, warm-toned
+- Direction: top-to-bottom or diagonal (135deg)
+- Used as overlays, not solid fills
+- Colors: gold/amber → transparent, or bg-dark → bg-darker
+- Never rainbow, never cool-toned, never noisy
+
+### Borders
+- **1px solid** is the standard — always visible, always crisp
+- Color: `--border` (warm mid-grey) for structural, `--gold-dim` for decorative/Art Deco accents
+- **Hairline Art Deco ornament:** thin double-line borders (`border-bottom: 1px + offset`) for headings
+- Corner radius: **0–4px** max. Sharp corners preferred. Cybersteel does not round its corners like a toy.
+
+### Cards
+- `background: --bg-active` (one step lighter than page)
+- `border: 1px solid --border`
+- `border-radius: 2px`
+- Subtle inner shadow on hover: `inset 0 0 0 1px --gold-dim`
+- No drop shadows — flat, structural, mechanical
+
+### Animation & Motion
+- **Fast and purposeful.** No decorative animations.
+- Transitions: `150ms ease-out` (UI state changes), `80ms linear` (cursor/immediate)
+- No bounce, no spring, no elastic
+- No enter/exit animations on simple UI elements
+- Allowed: fade-in on modals/overlays (`200ms ease`), scanline flicker on terminal elements
+- Hover: color shift only — no scale, no float, no glow explosion
+
+### Hover & Press States
+- **Hover:** text/icon brightens (fg2 → fg1 → fg0 progression), border lightens
+- **Press/Active:** slight background darken (`bg1 → bg0`), border becomes gold
+- **Focus:** 1px gold outline, 2px offset — crisp, not blurry
+- No `box-shadow: 0 0 20px gold` glow effects
+
+### Iconography
+- Geometric, minimal, monochromatic
+- Stroke-based (not filled)
+- Lucide Icons (CDN) as primary icon set — closest to the aesthetic
+- No emoji in UI; unicode geometric characters (▶ ■ ◆ ▲) acceptable as decorative elements
+- See ICONOGRAPHY section below
+
+### Imagery
+- Minimal imagery in UI
+- When used: high contrast, desaturated or warm-toned, grain optional
+- No stock photo cheerfulness
+- Amber/sepia toning preferred
+
+### Transparency & Blur
+- `backdrop-filter: blur()` used sparingly — overlays/modals only
+- Translucent surfaces: `background: rgba(var(--bg-surface-rgb), 0.85)`
+- Never used purely decoratively
+
+### Layout
+- Fixed sidebar widths (e.g. 240px, 280px)
+- 8-column or 12-column grid for content areas
+- Generous whitespace within dense information — breathe between groups, not within them
+- Fixed header/nav is acceptable; sticky sidebars acceptable
+- No carousels, no infinite scroll decorativeness
+
+---
+
+## ICONOGRAPHY
+
+**Primary set:** Lucide Icons (`https://unpkg.com/lucide@latest/dist/umd/lucide.min.js`)
+- Stroke-based, 24px grid, 1.5px stroke weight by default
+- Matches the precise, geometric character of the design system
+- Scale to 16px (compact), 20px (default), 24px (prominent)
+- Color: inherit from text context — no separate icon colors unless semantic (red for error, etc.)
+
+**Substitution flag:** No custom icon font was provided. Lucide is used as the nearest available match. If Cybersteel has a proprietary icon set, replace Lucide references in `ui_kits/` and update this section.
+
+**Supplementary unicode glyphs (Art Deco ornament):**
+- `◆` `◇` — diamond separator
+- `▸` `▾` — directional indicators
+- `■` `□` — toggle/status squares
+- `═` `║` `╔` `╗` `╚` `╝` — box-drawing for terminal chrome
+- `·` — interpunct as list separator
+
+**Never use emoji in product UI.**
+
+---
+
+## FILE INDEX
+
+```
+README.md                        ← This file
+SKILL.md                         ← Agent skill definition
+styles.css              ← All CSS custom properties (colors, type, spacing, effects)
+
+assets/
+  texture-scanline.svg           ← Scanline texture overlay
+
+preview/
+  colors-base.html               ← Base background/foreground palette
+  colors-accents.html            ← Accent color swatches
+  colors-semantic.html          ← Semantic color roles
+  type-display.html              ← Display typeface specimen (Plex Sans)
+  type-body.html                 ← Body type scale (Plex Sans)
+  type-mono.html                 ← Monospace / terminal specimen (Plex Mono)
+  type-sans.html                 ← Sans vs. Mono mode comparison
+  spacing-tokens.html            ← Spacing scale
+  borders-radius.html            ← Border styles and radius tokens
+  shadows-elevation.html         ← Shadow system
+  components-buttons.html        ← Button variants and states
+  components-inputs.html         ← Form input states
+  components-cards.html          ← Card components
+  components-badges.html         ← Badges and status indicators
+  components-nav.html            ← Navigation patterns
+
+ui_kits/
+  app/
+    README.md                    ← UI kit notes and component list
+    index.html                   ← Interactive app prototype
+    Layout.jsx                   ← Shell: sidebar + topbar + content area
+    Terminal.jsx                 ← Terminal/console component
+    DataTable.jsx                ← Dense data table
+    StatusBar.jsx                ← Bottom status bar
+    CommandPalette.jsx           ← Keyboard-driven command palette
+```

assets/texture-scanline.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4">
+  <rect width="4" height="4" fill="transparent"></rect>
+  <rect width="4" height="1" y="0" fill="rgba(0,0,0,0.04)"></rect>
+</svg>

preview/borders-radius.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Borders & Radius" subtitle="6px default (medium) — shape comparison across button/card/input" viewport="800x360" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 20px 24px; background: var(--bg-page); font-family: var(--font-body); }
+
+  .section-label {
+    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
+    text-transform: uppercase; color: var(--fg-muted);
+    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
+  }
+  .section { margin-bottom: 28px; }
+
+  /* ── RADIUS COMPARISON GRID ── */
+  .radius-grid {
+    display: grid;
+    grid-template-columns: 80px repeat(5, 1fr);
+    gap: 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden;
+  }
+  .rg-header {
+    background: var(--bg-shell); border-bottom: 1px solid var(--border);
+    padding: 7px 12px; font-family: var(--font-mono); font-size: 9px;
+    letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim);
+    display: flex; align-items: center;
+  }
+  .rg-cell {
+    padding: 14px 12px; border-right: 1px solid var(--border);
+    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
+    background: var(--bg-surface);
+  }
+  .rg-cell:last-child { border-right: none; }
+  .rg-label { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); letter-spacing: 0.06em; }
+  .rg-row-label { background: var(--bg-shell); padding: 0 12px; display: flex; align-items: center;
+    font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); letter-spacing: 0.06em;
+    border-right: 1px solid var(--border); }
+
+  /* Base component styles */
+  .btn {
+    font-family: var(--font-body); font-size: 12px; font-weight: 700;
+    letter-spacing: 0.06em; text-transform: uppercase;
+    padding: 8px 18px; border: 1px solid var(--gold-dim);
+    background: var(--gold-dim); color: var(--bg-shell);
+    cursor: default; display: inline-block;
+  }
+  .btn-ghost {
+    background: transparent; color: var(--fg-secondary); border-color: var(--border);
+  }
+  .card-sample {
+    background: var(--bg-active); border: 1px solid var(--border);
+    padding: 10px 12px; width: 100%;
+  }
+  .card-sample-title { font-size: 12px; font-weight: 700; color: var(--fg-body); margin-bottom: 2px; }
+  .card-sample-sub { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); }
+  .input-sample {
+    background: var(--bg-shell); border: 1px solid var(--border);
+    padding: 7px 10px; font-family: var(--font-mono); font-size: 11px;
+    color: var(--fg-caption); width: 100%;
+  }
+
+  /* ── STATES GRID ── */
+  .states-grid {
+    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
+  }
+  .state-cell {
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: 2px; padding: 14px;
+  }
+  .state-cell-label {
+    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
+    text-transform: uppercase; color: var(--gold-dim); margin-bottom: 10px;
+  }
+  .state-btn {
+    font-family: var(--font-body); font-size: 12px; font-weight: 700;
+    letter-spacing: 0.06em; text-transform: uppercase;
+    padding: 8px 18px; border-radius: 2px; cursor: default; display: inline-block;
+    margin-bottom: 8px;
+  }
+  .note { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); line-height: 1.5; }
+</style>
+</head>
+<body>
+
+<!-- SECTION 1: RADIUS COMPARISON -->
+<div class="section">
+  <div class="section-label">Section 1 — Shape exploration · buttons · cards · inputs</div>
+
+  <div class="radius-grid">
+    <!-- Headers -->
+    <div class="rg-header"></div>
+    <div class="rg-header">Sharp<br><span style="color:var(--fg-muted)">0px</span></div>
+    <div class="rg-header">Slight<br><span style="color:var(--fg-muted)">2px</span></div>
+    <div class="rg-header">Medium<br><span style="color:var(--fg-muted)">6px</span></div>
+    <div class="rg-header">Round<br><span style="color:var(--fg-muted)">12px</span></div>
+    <div class="rg-header">Pill<br><span style="color:var(--fg-muted)">999px</span></div>
+
+    <!-- Buttons row -->
+    <div class="rg-row-label" style="border-bottom:1px solid var(--border)">Button</div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="btn" style="border-radius:0">Execute</div>
+      <div class="btn btn-ghost" style="border-radius:0;margin-top:4px">Cancel</div>
+    </div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="btn" style="border-radius:2px">Execute</div>
+      <div class="btn btn-ghost" style="border-radius:2px;margin-top:4px">Cancel</div>
+    </div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="btn" style="border-radius:6px">Execute</div>
+      <div class="btn btn-ghost" style="border-radius:6px;margin-top:4px">Cancel</div>
+    </div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="btn" style="border-radius:12px">Execute</div>
+      <div class="btn btn-ghost" style="border-radius:12px;margin-top:4px">Cancel</div>
+    </div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="btn" style="border-radius:999px">Execute</div>
+      <div class="btn btn-ghost" style="border-radius:999px;margin-top:4px">Cancel</div>
+    </div>
+
+    <!-- Cards row -->
+    <div class="rg-row-label" style="border-bottom:1px solid var(--border)">Card</div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="card-sample" style="border-radius:0"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
+    </div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="card-sample" style="border-radius:2px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
+    </div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="card-sample" style="border-radius:6px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
+    </div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="card-sample" style="border-radius:12px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
+    </div>
+    <div class="rg-cell" style="border-bottom:1px solid var(--border)">
+      <div class="card-sample" style="border-radius:16px"><div class="card-sample-title">Node Alpha</div><div class="card-sample-sub">99.97% uptime</div></div>
+    </div>
+
+    <!-- Input row -->
+    <div class="rg-row-label">Input</div>
+    <div class="rg-cell"><div class="input-sample" style="border-radius:0">192.168.1.1</div></div>
+    <div class="rg-cell"><div class="input-sample" style="border-radius:2px">192.168.1.1</div></div>
+    <div class="rg-cell"><div class="input-sample" style="border-radius:6px">192.168.1.1</div></div>
+    <div class="rg-cell"><div class="input-sample" style="border-radius:12px">192.168.1.1</div></div>
+    <div class="rg-cell"><div class="input-sample" style="border-radius:999px">192.168.1.1</div></div>
+  </div>
+</div>
+
+<style>
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>
+
+</body>
+</html>

preview/colors-accents.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Accent Colors" subtitle="Gold, red, green, blue, orange, aqua, purple" viewport="700x140" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 16px; background: var(--bg-page); font-family: var(--font-mono); }
+  .row { display: flex; gap: 6px; margin-bottom: 10px; }
+  .swatch { width: 80px; flex-shrink: 0; }
+  .swatch-block { height: 44px; border-radius:6px; margin-bottom: 3px; }
+  .swatch span { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); display: block; }
+  .group-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 4px; }
+</style>
+</head>
+<body>
+<div class="row">
+  <div class="swatch">
+    <div class="swatch-block" style="background:#fabd2f"></div>
+    <span>gold-bright</span><span style="color:var(--fg-muted)">#fabd2f</span>
+  </div>
+  <div class="swatch">
+    <div class="swatch-block" style="background:#d79921"></div>
+    <span>gold-dim</span><span style="color:var(--fg-muted)">#d79921</span>
+  </div>
+  <div class="swatch">
+    <div class="swatch-block" style="background:#b57614"></div>
+    <span>gold-muted</span><span style="color:var(--fg-muted)">#b57614</span>
+  </div>
+  <div class="swatch">
+    <div class="swatch-block" style="background:#ffb000; border: 1px solid #d79921"></div>
+    <span>amber</span><span style="color:var(--fg-muted)">#ffb000</span>
+  </div>
+</div>
+<div class="row">
+  <div class="swatch"><div class="swatch-block" style="background:#fb4934"></div><span>red-bright</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#cc241d"></div><span>red-dim</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#b8bb26"></div><span>green-bright</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#98971a"></div><span>green-dim</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#83a598"></div><span>blue-bright</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#458588"></div><span>blue-dim</span></div>
+</div>
+<div class="row">
+  <div class="swatch"><div class="swatch-block" style="background:#fe8019"></div><span>orange-bright</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#d65d0e"></div><span>orange-dim</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#8ec07c"></div><span>aqua-bright</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#689d6a"></div><span>aqua-dim</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#d3869b"></div><span>purple-bright</span></div>
+  <div class="swatch"><div class="swatch-block" style="background:#b16286"></div><span>purple-dim</span></div>
+</div>
+</body>
+</html>

preview/colors-base.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Base Palette" subtitle="Default pairing (bg0+fg1) + palette swatches + contextual text + surface pairings" viewport="800x440" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css?v=2">
+<style>
+  body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); }
+  .section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
+  .section { margin-bottom: 14px; }
+  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+
+  /* Palette swatches */
+  .swatch-row { display: flex; gap: 4px; }
+  .swatch {
+    flex: 1; height: 36px; border-radius: var(--radius-sm);
+    display: flex; align-items: flex-end; padding: 3px 6px;
+  }
+  .swatch span { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.02em; color: rgba(255,255,255,0.45); white-space: nowrap; }
+
+  /* Contextual text samples */
+  .text-row { display: flex; flex-direction: column; gap: 3px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
+  .text-sample { display: flex; align-items: baseline; gap: 10px; }
+  .text-label { font-family: var(--font-mono); font-size: 8px; color: var(--fg-muted); width: 72px; flex-shrink: 0; }
+
+  /* Default pairing */
+  .default-pair {
+    display: flex; align-items: stretch; border: 1.5px solid var(--gold-dim);
+    border-radius: var(--radius-md); overflow: hidden;
+  }
+  .default-bg { background: #313131; padding: 10px 14px; flex: 1; }
+  .default-fg { background: #313131; padding: 10px 14px; border-left: 1px solid var(--border); flex: 1; }
+  .default-label { font-family: var(--font-mono); font-size: 8px; color: var(--gold-dim); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
+  .default-swatch { display: flex; align-items: center; gap: 8px; }
+  .dot { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; }
+  .dot-label { font-family: var(--font-mono); font-size: 10px; color: var(--fg-secondary); }
+
+  /* Pairings grid */
+  .pairings { display: flex; gap: 6px; }
+  .pair { flex: 1; border-radius: var(--radius-md); padding: 8px 10px; border: 1px solid var(--border); }
+  .pair-text { font-size: 12px; font-weight: 500; margin-bottom: 1px; }
+  .pair-sub { font-family: var(--font-mono); font-size: 8px; }
+  .pair-token { font-family: var(--font-mono); font-size: 7px; color: #b8a98e; margin-top: 4px; letter-spacing: 0.04em; }
+  .badge { display: inline-block; font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--gold-dim); color: var(--bg-shell); margin-bottom: 4px; }
+</style>
+</head>
+<body>
+
+<!-- DEFAULT PAIRING -->
+<div class="section">
+  <div class="section-label">Default pairing</div>
+  <div class="default-pair">
+    <div class="default-bg">
+      <div class="default-label">Background</div>
+      <div class="default-swatch">
+        <div class="dot" style="background:#313131;border:1px solid #504945"></div>
+        <div class="dot-label">bg-page · #313131</div>
+      </div>
+      <div style="font-family:var(--font-mono);font-size:8px;color:var(--fg-muted);margin-top:3px">Page, content area</div>
+    </div>
+    <div class="default-fg">
+      <div class="default-label">Foreground</div>
+      <div class="default-swatch">
+        <div class="dot" style="background:#f2e2ba"></div>
+        <div class="dot-label">fg-body · #f2e2ba</div>
+      </div>
+      <div style="font-family:var(--font-mono);font-size:8px;color:var(--fg-muted);margin-top:3px">Primary body text</div>
+    </div>
+    <div style="background:#313131;padding:10px 14px;border-left:1px solid var(--border);flex:1.5;display:flex;flex-direction:column;justify-content:center">
+      <div style="font-size:14px;font-weight:500;color:#f2e2ba;margin-bottom:2px">Deploy pipeline ready</div>
+      <div style="font-family:var(--font-mono);font-size:10px;color:#b8a98e">Node 07 offline — failover active</div>
+    </div>
+  </div>
+</div>
+
+<!-- PALETTE + CONTEXT SIDE BY SIDE -->
+<div class="two-col">
+  <!-- Palette -->
+  <div>
+    <div class="section-label">Backgrounds</div>
+    <div class="swatch-row" style="margin-bottom:6px">
+      <div class="swatch" style="background:#1d2021"><span>bg-shell</span></div>
+      <div class="swatch" style="background:#313131"><span>bg-page</span></div>
+      <div class="swatch" style="background:#3c3836"><span>bg-surface</span></div>
+      <div class="swatch" style="background:#504945"><span>bg-active</span></div>
+      <div class="swatch" style="background:#665c54"><span>bg-disabled</span></div>
+      <div class="swatch" style="background:#7c6f64"><span>bg-border</span></div>
+    </div>
+    <div class="section-label" style="margin-top:10px">Foregrounds</div>
+    <div class="swatch-row">
+      <div class="swatch" style="background:#fbf1c7"><span style="color:rgba(0,0,0,0.4)">fg-heading</span></div>
+      <div class="swatch" style="background:#f2e2ba"><span style="color:rgba(0,0,0,0.4)">fg-body</span></div>
+      <div class="swatch" style="background:#e0d0a8"><span style="color:rgba(0,0,0,0.4)">fg-secondary</span></div>
+      <div class="swatch" style="background:#cebd9e"><span style="color:rgba(0,0,0,0.35)">fg-caption</span></div>
+      <div class="swatch" style="background:#b8a98e"><span style="color:rgba(0,0,0,0.35)">fg-muted</span></div>
+    </div>
+  </div>
+
+  <!-- Contextual -->
+  <div>
+    <div class="section-label">Text in context</div>
+    <div class="text-row">
+      <div class="text-sample"><div class="text-label">fg-heading</div><div style="font-size:15px;font-weight:700;color:#fbf1c7">Heading text</div></div>
+      <div class="text-sample"><div class="text-label">fg-body</div><div style="font-size:13px;color:#f2e2ba">Primary body — the system is operational</div></div>
+      <div class="text-sample"><div class="text-label">fg-secondary</div><div style="font-size:13px;color:#e0d0a8">Secondary body — node 07 offline</div></div>
+      <div class="text-sample"><div class="text-label">fg-caption</div><div style="font-size:12px;color:#cebd9e">Caption — cluster-01 · us-east-1</div></div>
+      <div class="text-sample"><div class="text-label">fg-muted</div><div style="font-family:var(--font-mono);font-size:10px;color:#b8a98e">LABEL · STATUS · TIMESTAMP</div></div>
+    </div>
+  </div>
+</div>
+
+<!-- PAIRINGS -->
+<div class="section" style="margin-top:12px;">
+  <div class="section-label">Surface pairings</div>
+  <div class="pairings">
+    <div class="pair" style="background:#1d2021">
+      <div style="display:flex;align-items:baseline;gap:6px"><div class="pair-text" style="color:#fbf1c7">Overview</div><div class="pair-token">fg-heading</div></div>
+      <div style="display:flex;align-items:baseline;gap:6px"><div class="pair-sub" style="color:#b8a98e">Topbar / sidebar</div><div class="pair-token">fg-muted</div></div>
+      <div class="pair-token" style="margin-top:4px">bg-shell</div>
+    </div>
+    <div class="pair" style="background:#313131">
+      <div class="badge">default</div>
+      <div style="display:flex;align-items:baseline;gap:6px"><div class="pair-text" style="color:#f2e2ba">Dashboard</div><div class="pair-token">fg-body</div></div>
+      <div style="display:flex;align-items:baseline;gap:6px"><div class="pair-sub" style="color:#e0d0a8">Page content</div><div class="pair-token">fg-secondary</div></div>
+      <div class="pair-token" style="margin-top:4px">bg-page</div>
+    </div>
+    <div class="pair" style="background:#3c3836">
+      <div style="display:flex;align-items:baseline;gap:6px"><div class="pair-text" style="color:#e0d0a8">Node Alpha</div><div class="pair-token">fg-secondary</div></div>
+      <div style="display:flex;align-items:baseline;gap:6px"><div class="pair-sub" style="color:#cebd9e">Cards, panels</div><div class="pair-token">fg-caption</div></div>
+      <div class="pair-token" style="margin-top:4px">bg-surface</div>
+    </div>
+    <div class="pair" style="background:#504945">
+      <div style="display:flex;align-items:baseline;gap:6px"><div class="pair-text" style="color:#f2e2ba">Selected row</div><div class="pair-token">fg-body</div></div>
+      <div style="display:flex;align-items:baseline;gap:6px"><div class="pair-sub" style="color:#e0d0a8">Hover / active</div><div class="pair-token">fg-secondary</div></div>
+      <div class="pair-token" style="margin-top:4px">bg-active</div>
+    </div>
+  </div>
+</div>
+
+<!-- BG3 / BG4 SPECIAL USE -->
+<div class="section" style="margin-bottom:0">
+  <div class="section-label">Edge cases — bg3 &amp; bg4</div>
+  <div class="pairings">
+
+    <div class="pair" style="background:#665c54; flex:2; border-color:#665c54">
+      <div style="font-family:var(--font-mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;color:#b8a98e;margin-bottom:6px">bg-disabled · Disabled surface</div>
+      <div style="font-size:12px;font-weight:500;color:#b8a98e;opacity:0.6;margin-bottom:2px;text-decoration:line-through">Deploy pipeline</div>
+      <div style="font-family:var(--font-mono);font-size:8px;color:#b8a98e;opacity:0.5">Node offline — action unavailable</div>
+      <div style="font-family:var(--font-mono);font-size:7px;color:#b8a98e;opacity:0.4;margin-top:6px">fg4 only · intentionally muted</div>
+    </div>
+
+    <div class="pair" style="background:#313131; flex:2; border-color:#504945; display:flex; flex-direction:column; gap:6px;">
+      <div style="font-family:var(--font-mono);font-size:7px;letter-spacing:0.1em;text-transform:uppercase;color:#b8a98e;margin-bottom:2px">bg-border · Borders &amp; dividers only</div>
+      <div style="height:1px;background:#7c6f64;width:100%"></div>
+      <div style="display:flex;gap:8px;align-items:center">
+        <div style="width:28px;height:28px;border:1px solid #7c6f64;border-radius:3px;background:transparent"></div>
+        <div style="font-size:11px;color:#f2e2ba">Input field border</div>
+      </div>
+      <div style="height:1px;background:#7c6f64;width:100%"></div>
+      <div style="font-family:var(--font-mono);font-size:7px;color:#b8a98e;opacity:0.55;margin-top:2px">Never use as a text container background</div>
+    </div>
+
+  </div>
+</div>
+
+</body>
+</html>

preview/colors-semantic.html

@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Semantic Colors" subtitle="Button matrix + semantic text colors: success, danger, warning, info, primary, disabled" viewport="800x560" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 14px 16px; background: var(--bg-page); font-family: var(--font-mono); font-size: 10px; }
+
+  table { width: 100%; border-collapse: collapse; }
+  th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle); }
+  th { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); background: var(--bg-shell); border-bottom: 1px solid var(--border); font-weight: 600; }
+  tr:last-child td { border-bottom: none; }
+  tr:nth-child(even) td { background: rgba(60,56,54,0.2); }
+
+  .variant-header td {
+    font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--fg-muted); background: var(--bg-shell);
+    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+    padding: 5px 10px;
+  }
+
+  .swatch {
+    display: inline-flex; align-items: center; gap: 6px;
+  }
+  .dot {
+    width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
+    border: 1px solid rgba(255,255,255,0.1);
+  }
+  .token { color: var(--fg-secondary); }
+  .hex { color: var(--fg-muted); font-size: 9px; margin-left: 2px; }
+
+  .state-col { color: var(--fg-caption); width: 70px; }
+  .prop-col  { color: var(--fg-muted); width: 60px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
+</style>
+</head>
+<body>
+<table>
+  <thead>
+    <tr>
+      <th style="width:70px">State</th>
+      <th style="width:60px">Property</th>
+      <th>Primary</th>
+      <th>Secondary</th>
+      <th>Danger</th>
+      <th>Success</th>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- DEFAULT -->
+    <tr class="variant-header"><td colspan="6">Default</td></tr>
+    <tr>
+      <td class="state-col" rowspan="3">Default</td>
+      <td class="prop-col">BG</td>
+      <td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:transparent;border:1px solid #7c6f64"></div><span class="token">transparent</span></div></td>
+    </tr>
+    <tr>
+      <td class="prop-col">Border</td>
+      <td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#7c6f64"></div><span class="token">--border</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#cc241d"></div><span class="token">--red-dim</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#98971a"></div><span class="token">--green-dim</span></div></td>
+    </tr>
+    <tr>
+      <td class="prop-col">Text</td>
+      <td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#d5c4a1"></div><span class="token">--fg-secondary</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
+    </tr>
+
+    <!-- HOVER -->
+    <tr class="variant-header"><td colspan="6">Hover</td></tr>
+    <tr>
+      <td class="state-col" rowspan="3">Hover</td>
+      <td class="prop-col">BG</td>
+      <td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:rgba(215,153,33,0.2)"></div><span class="token">gold 20% tint</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:rgba(204,36,29,0.2)"></div><span class="token">red 20% tint</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:rgba(152,151,26,0.2)"></div><span class="token">green 20% tint</span></div></td>
+    </tr>
+    <tr>
+      <td class="prop-col">Border</td>
+      <td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#d79921"></div><span class="token">--gold-dim</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
+    </tr>
+    <tr>
+      <td class="prop-col">Text</td>
+      <td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#ebdbb2"></div><span class="token">--fg-body</span></div></td>
+    </tr>
+
+    <!-- PRESS -->
+    <tr class="variant-header"><td colspan="6">Press</td></tr>
+    <tr>
+      <td class="state-col" rowspan="3">Press</td>
+      <td class="prop-col">BG</td>
+      <td><div class="swatch"><div class="dot" style="background:#fbf1c7"></div><span class="token">--fg-heading</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
+    </tr>
+    <tr>
+      <td class="prop-col">Border</td>
+      <td><div class="swatch"><div class="dot" style="background:#fbf1c7"></div><span class="token">--fg-heading</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#fabd2f"></div><span class="token">--gold-bright</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#fb4934"></div><span class="token">--red-bright</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#b8bb26"></div><span class="token">--green-bright</span></div></td>
+    </tr>
+    <tr>
+      <td class="prop-col">Text</td>
+      <td><div class="swatch"><div class="dot" style="background:#1d2021;border:1px solid #504945"></div><span class="token">--bg-shell</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
+      <td><div class="swatch"><div class="dot" style="background:#ffffff;border:1px solid #504945"></div><span class="token">#ffffff</span></div></td>
+    </tr>
+  </tbody>
+</table>
+
+<div style="margin-top:14px;padding-top:10px;border-top:1px solid var(--border)">
+  <div style="font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:10px">Semantic text colors</div>
+  <div style="display:flex;flex-direction:column;gap:5px">
+    <div style="display:flex;align-items:center;gap:10px">
+      <div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Success</div>
+      <div style="display:flex;gap:16px">
+        <span style="color:var(--green-bright)">● Online</span>
+        <span style="color:var(--green-bright)">✓ Verified</span>
+        <span style="color:var(--green-bright)">Build complete</span>
+        <span style="color:var(--green-dim)">--green-bright</span>
+      </div>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px">
+      <div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Danger</div>
+      <div style="display:flex;gap:16px">
+        <span style="color:var(--red-bright)">● Error</span>
+        <span style="color:var(--red-bright)">✕ Failed</span>
+        <span style="color:var(--red-bright)">Connection timeout</span>
+        <span style="color:var(--fg-muted)">--red-bright</span>
+      </div>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px">
+      <div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Warning</div>
+      <div style="display:flex;gap:16px">
+        <span style="color:var(--orange-bright)">● Degraded</span>
+        <span style="color:var(--orange-bright)">Disk usage 84%</span>
+        <span style="color:var(--orange-bright)">Threshold exceeded</span>
+        <span style="color:var(--fg-muted)">--orange-bright</span>
+      </div>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px">
+      <div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Info</div>
+      <div style="display:flex;gap:16px">
+        <span style="color:var(--blue-bright)">● Running</span>
+        <span style="color:var(--blue-bright)">Heartbeat OK</span>
+        <span style="color:var(--blue-bright)">node-01</span>
+        <span style="color:var(--fg-muted)">--blue-bright</span>
+      </div>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px">
+      <div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Primary</div>
+      <div style="display:flex;gap:16px">
+        <span style="color:var(--gold-bright)">● Active</span>
+        <span style="color:var(--gold-bright)">Build #441</span>
+        <span style="color:var(--gold-bright)">v2.4.1-stable</span>
+        <span style="color:var(--fg-muted)">--gold-bright</span>
+      </div>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px">
+      <div style="width:64px;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-muted)">Disabled</div>
+      <div style="display:flex;gap:16px">
+        <span style="color:var(--fg-muted)">● Offline</span>
+        <span style="color:var(--fg-muted)">Unavailable</span>
+        <span style="color:var(--fg-muted)">No data</span>
+        <span style="color:var(--fg-muted)">--fg-muted</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

preview/components-badges.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Badges & Status" subtitle="System (online/offline/degraded/error) · Process (running/complete/failed) · Labels" viewport="700x200" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); display: flex; flex-direction: column; gap: 12px; }
+  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+  .section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
+
+  .badge {
+    display: inline-flex; align-items: center; gap: 5px;
+    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid transparent;
+    white-space: nowrap;
+  }
+  .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
+
+  /* System / connectivity status */
+  .b-online   { color: var(--green-bright);  border-color: var(--green-dim);  background: rgba(152,151,26,0.1); }
+  .b-offline  { color: var(--fg-muted);           border-color: var(--border);     background: var(--bg-surface); }
+  .b-degraded { color: var(--orange-bright); border-color: var(--orange-dim); background: rgba(214,93,14,0.1); }
+  .b-error    { color: var(--red-bright);    border-color: var(--red-dim);    background: rgba(204,36,29,0.1); }
+
+  /* Process / job status */
+  .b-running  { color: var(--gold-bright);   border-color: var(--gold-dim);   background: rgba(215,153,33,0.1); }
+  .b-complete { color: var(--green-bright);  border-color: var(--green-dim);  background: rgba(152,151,26,0.1); }
+  .b-failed   { color: var(--red-bright);    border-color: var(--red-dim);    background: rgba(204,36,29,0.1); }
+  .b-pending  { color: var(--fg-caption);           border-color: var(--border);     background: var(--bg-surface); }
+  .b-warning  { color: var(--orange-bright); border-color: var(--orange-dim); background: rgba(214,93,14,0.1); }
+
+  /* Labels / tags */
+  .b-info     { color: var(--blue-bright);   border-color: var(--blue-dim);   background: rgba(69,133,136,0.1); }
+  .b-version  { color: var(--gold-bright);   border-color: var(--gold-dim);   background: rgba(215,153,33,0.1); }
+  .b-neutral  { color: var(--fg-caption);           border-color: var(--border);     background: var(--bg-surface); }
+
+  .def { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted); }
+</style>
+</head>
+<body>
+
+  <div>
+    <div class="section-label">System / connectivity</div>
+    <div class="row">
+      <div class="badge b-online"><div class="dot" style="background:var(--green-bright)"></div>Online</div>
+      <div class="badge b-offline"><div class="dot" style="background:var(--fg-muted)"></div>Offline</div>
+      <div class="badge b-degraded"><div class="dot" style="background:var(--orange-bright)"></div>Degraded</div>
+      <div class="badge b-error"><div class="dot" style="background:var(--red-bright)"></div>Error</div>
+    </div>
+    <div class="def" style="margin-top:5px">Online = reachable and responding · Offline = unreachable · Degraded = reachable but unhealthy · Error = fault condition</div>
+  </div>
+
+  <div>
+    <div class="section-label">Process / job</div>
+    <div class="row">
+      <div class="badge b-running">Running</div>
+      <div class="badge b-complete">✓ Complete</div>
+      <div class="badge b-failed">✕ Failed</div>
+      <div class="badge b-pending">Pending</div>
+      <div class="badge b-warning">Warning</div>
+    </div>
+    <div class="def" style="margin-top:5px">Running = in progress · Complete = finished successfully · Failed = finished with error · Pending = queued · Warning = finished with caveats</div>
+  </div>
+
+  <div>
+    <div class="section-label">Labels / tags</div>
+    <div class="row">
+      <div class="badge b-info">Info</div>
+      <div class="badge b-version">v2.4.1</div>
+      <div class="badge b-neutral">Staging</div>
+      <div class="badge b-neutral">Beta</div>
+      <div class="badge b-neutral">Read-only</div>
+    </div>
+  </div>
+
+</body>
+</html>

preview/components-buttons.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Buttons" subtitle="3-step interaction: transparent → 20% tint → full flood + white" viewport="700x110" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; flex-direction: column; }
+
+  .btn {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-family: var(--font-body); font-size: 12px; font-weight: 700;
+    letter-spacing: 0.07em; text-transform: uppercase;
+    padding: 8px 18px; border-radius: var(--radius-md); border: 1px solid transparent;
+    cursor: pointer;
+    transition: background var(--transition-hover), color var(--transition-hover), border-color var(--transition-hover);
+  }
+  .btn:active {
+    transition: background var(--transition-press), color var(--transition-press), border-color var(--transition-press);
+  }
+
+  /* Primary */
+  .btn-primary { background: var(--gold-dim); color: var(--bg-shell); border-color: var(--gold-dim); }
+  .btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
+  .btn-primary:active { background: var(--fg-heading); color: var(--bg-shell); border-color: var(--fg-heading); }
+
+  /* Secondary */
+  .btn-secondary { background: transparent; color: var(--fg-secondary); border-color: var(--border); }
+  .btn-secondary:hover { background: rgba(215,153,33,0.2); border-color: var(--gold-dim); color: var(--fg-body); }
+  .btn-secondary:active { background: var(--gold-bright); color: #fff; border-color: var(--gold-bright); }
+
+  /* Ghost */
+  .btn-ghost { background: transparent; color: var(--fg-caption); border-color: transparent; }
+  .btn-ghost:hover { background: var(--bg-active); color: var(--fg-body); }
+  .btn-ghost:active { background: var(--gold-dim); color: #fff; }
+
+  /* Danger */
+  .btn-danger { background: transparent; color: var(--red-bright); border-color: var(--red-dim); }
+  .btn-danger:hover { background: rgba(204,36,29,0.2); border-color: var(--red-bright); color: var(--fg-body); }
+  .btn-danger:active { background: var(--red-bright); color: #fff; border-color: var(--red-bright); }
+
+  /* Success */
+  .btn-success { background: transparent; color: var(--green-bright); border-color: var(--green-dim); }
+  .btn-success:hover { background: rgba(152,151,26,0.2); border-color: var(--green-bright); color: var(--fg-body); }
+  .btn-success:active { background: var(--green-bright); color: #fff; border-color: var(--green-bright); }
+
+  /* Disabled */
+  .btn-disabled { background: var(--bg-active); color: var(--fg-muted); border-color: var(--border); opacity: 0.5; cursor: not-allowed; pointer-events: none; }
+
+  /* Sizes */
+  .btn-sm { font-size: 10px; padding: 5px 12px; }
+  .btn-lg { font-size: 14px; padding: 11px 24px; }
+
+  .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .row-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
+</style>
+</head>
+<body>
+  <div><div class="row-label">variants</div>
+  <div class="row">
+    <button class="btn btn-primary">Execute</button>
+    <button class="btn btn-secondary">Configure</button>
+    <button class="btn btn-secondary">Dismiss</button>
+    <button class="btn btn-danger">Terminate</button>
+    <button class="btn btn-success">Deploy</button>
+    <button class="btn btn-disabled" disabled>Locked</button>
+  </div></div>
+  <div><div class="row-label">sizes</div>
+  <div class="row">
+    <button class="btn btn-primary btn-sm">Run</button>
+    <button class="btn btn-primary">Execute</button>
+    <button class="btn btn-primary btn-lg">Initialize System</button>
+  </div></div>
+</body>
+</html>

preview/components-cards.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Cards" subtitle="Stat, deploy, alert cards — flat, 6px radius" viewport="700x150" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css?v=2">
+<style>
+  body { margin: 0; padding: 24px; background: var(--bg-page); font-family: var(--font-body); display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
+
+  /* Base card — a SURFACE. Static by default: no hover, no cursor, no halo. */
+  .card {
+    background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
+    padding: 14px 16px; width: 200px;
+    background-image: var(--gradient-card);
+  }
+
+  /* Clickable card — opts into the interactive treatment. Use .card.clickable, role="button", or wrap in <a>/<button>. */
+  .card.clickable,
+  a.card,
+  button.card {
+    cursor: pointer;
+    text-decoration: none; text-align: left;
+    transition: background var(--transition-hover), color var(--transition-hover), border-color var(--transition-hover), box-shadow var(--transition-hover);
+  }
+  .card.clickable:active,
+  a.card:active,
+  button.card:active {
+    transition: background var(--transition-press), color var(--transition-press), border-color var(--transition-press), box-shadow var(--transition-press);
+  }
+
+  /* Hover — outward gold halo, only on clickable cards. */
+  .card.clickable:hover,
+  a.card:hover,
+  button.card:hover {
+    border-color: var(--gold-dim);
+    box-shadow: 0 0 0 3px rgba(215, 153, 33, 0.35);
+  }
+
+  /* Active/Press — full gold-bright fill, white text. Mirrors .btn-secondary:active. */
+  .card.clickable:active,
+  a.card:active,
+  button.card:active {
+    background: var(--gold-bright);
+    border-color: var(--gold-bright);
+    color: #fff;
+    box-shadow: none;
+  }
+  .card.clickable:active *,
+  a.card:active *,
+  button.card:active * {
+    color: #fff !important;
+  }
+
+  .card-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-heading); margin-bottom: 4px; }
+  .card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-caption); letter-spacing: 0.06em; margin-bottom: 8px; }
+  .card-body { font-size: 13px; color: var(--fg-body); line-height: 1.5; }
+  .card-stat { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--gold-bright); }
+  .card-stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-caption); }
+  .card-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
+  .dot { width: 6px; height: 6px; border-radius: 50%; }
+
+  .group-label { flex-basis: 100%; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-caption); margin: 4px 0 -4px; }
+
+  /* Spec block */
+  .spec {
+    flex-basis: 100%; margin-top: 8px;
+    border-top: 1px solid var(--gold-dim);
+    padding-top: 14px;
+    font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--fg-secondary);
+  }
+  .spec-title { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 8px; }
+  .spec-row { display: flex; gap: 12px; margin-bottom: 4px; }
+  .spec-key  { color: var(--fg-caption); width: 110px; flex-shrink: 0; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
+  .spec-val  { color: var(--fg-heading); }
+  .spec-note { color: var(--fg-muted); margin-top: 8px; font-style: italic; max-width: 640px; }
+  .spec-section { margin-top: 14px; }
+</style>
+</head>
+<body>
+  <div class="group-label">Static cards (display only)</div>
+  <div class="card">
+    <div class="card-title">Node Alpha</div>
+    <div class="card-meta">cluster-01 · us-east-1</div>
+    <div class="card-stat">99.97%</div>
+    <div class="card-stat-label">Uptime — 30d</div>
+  </div>
+  <div class="card">
+    <div class="card-title">Alert</div>
+    <div class="card-meta">node-07 · 09:41:02Z</div>
+    <div class="card-body">Connection timeout. Failover initiated.</div>
+    <div style="margin-top:8px" class="card-status"><div class="dot" style="background:var(--red-bright)"></div><span style="color:var(--red-bright)">Critical</span></div>
+  </div>
+
+  <div class="group-label">Clickable cards (hover + press)</div>
+  <a href="#" class="card">
+    <div class="card-title">Deploy #441</div>
+    <div class="card-meta">main · a3f9c12e · 14s ago</div>
+    <div class="card-body">Production build deployed. 0 errors.</div>
+    <div style="margin-top:8px" class="card-status"><div class="dot" style="background:var(--green-bright)"></div><span style="color:var(--green-bright)">Complete</span></div>
+  </a>
+  <div class="card clickable" role="button" tabindex="0">
+    <div class="card-title">Open Console</div>
+    <div class="card-meta">cluster-01 · 12 active sessions</div>
+    <div class="card-body">Launch terminal session in this cluster.</div>
+  </div>
+
+  <div class="spec">
+    <div class="spec-title">Card states</div>
+
+    <div class="spec-section">
+      <div class="spec-row"><div class="spec-key">Default</div><div class="spec-val">Static surface — no hover effect, no cursor change.</div></div>
+      <div class="spec-row"><div class="spec-key">Background</div><div class="spec-val"><code>--bg-surface</code> + <code>--gradient-card</code></div></div>
+      <div class="spec-row"><div class="spec-key">Border</div><div class="spec-val">1px solid <code>--border</code></div></div>
+    </div>
+
+    <div class="spec-section">
+      <div class="spec-row"><div class="spec-key">Clickable</div><div class="spec-val">Apply <code>.clickable</code>, <code>role="button"</code>, or use <code>&lt;a&gt;</code>/<code>&lt;button&gt;</code> — opts the card into hover + press.</div></div>
+    </div>
+
+    <div class="spec-section">
+      <div class="spec-row"><div class="spec-key">Hover</div><div class="spec-val">border <code>--gold-dim</code>&nbsp;·&nbsp;halo <code>0 0 0 3px rgba(215, 153, 33, 0.35)</code></div></div>
+      <div class="spec-row"><div class="spec-key">— width</div><div class="spec-val">3px, grows OUTWARD from card edge</div></div>
+      <div class="spec-row"><div class="spec-key">— opacity</div><div class="spec-val">35% — translucent so the halo reads as a soft accent, not a hard second ring</div></div>
+      <div class="spec-row"><div class="spec-key">— transition</div><div class="spec-val"><code>--transition-hover</code> (150ms ease-out)</div></div>
+    </div>
+
+    <div class="spec-section">
+      <div class="spec-row"><div class="spec-key">Press</div><div class="spec-val">background + border <code>--gold-bright</code>&nbsp;·&nbsp;text <code>#fff</code>&nbsp;·&nbsp;halo cleared</div></div>
+      <div class="spec-row"><div class="spec-key">— transition</div><div class="spec-val"><code>--transition-press</code> (55ms ease-out) on enter, <code>--transition-hover</code> on release</div></div>
+      <div class="spec-row"><div class="spec-key">— mirrors</div><div class="spec-val"><code>.btn-secondary:active</code> — same press treatment as ghost-style buttons</div></div>
+    </div>
+
+    <div class="spec-note">The hover halo only appears when a card is actually interactive. Surface cards (data display) get no hover effect at all — clickable cards opt in via class or semantic element. Press fills with gold-bright to match the secondary-button click pattern, so a clicked card reads consistently with the rest of the interactive system.</div>
+  </div>
+</body>
+</html>

preview/components-inputs.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Form Inputs" subtitle="Text input, select, error, success — 6px radius" viewport="700x120" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css?v=2">
+<style>
+  body { margin: 0; padding: 24px; background: var(--bg-page); font-family: var(--font-body); display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
+  .field-group { width: 220px; }
+  label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-caption); margin-bottom: 4px; }
+  input, select, textarea {
+    width: 100%; background: var(--bg-shell); color: var(--fg-body);
+    border: 1px solid var(--border); border-radius: var(--radius-md);
+    padding: 7px 10px; font-family: var(--font-mono); font-size: 13px;
+    outline: none;
+    transition: border-color var(--transition-hover), box-shadow var(--transition-hover);
+    box-sizing: border-box;
+  }
+  /* Focus halo — grows OUTWARD, 3px wide. Per-state colors so meaning doesn't flip on focus.
+     Gold @ 35% (matches card hover). Red & Green @ 50% — stronger because the dim variants are
+     visually quieter than gold-dim, so they need more opacity to read at the same intensity. */
+  input:focus, select:focus, textarea:focus {
+    border-color: var(--gold-bright);
+    box-shadow: 0 0 0 3px rgba(215, 153, 33, 0.35);  /* --gold-dim @ 35% */
+    outline: none;
+  }
+  input.error { border-color: var(--red-dim); }
+  input.error:focus {
+    border-color: var(--red-bright);
+    box-shadow: 0 0 0 3px rgba(204, 36, 29, 0.5);  /* --red-dim @ 50% */
+  }
+  input.success { border-color: var(--green-dim); }
+  input.success:focus {
+    border-color: var(--green-bright);
+    box-shadow: 0 0 0 3px rgba(152, 151, 26, 0.5);  /* --green-dim @ 50% */
+  }
+  .hint { font-size: 11px; color: var(--fg-caption); margin-top: 3px; font-family: var(--font-mono); }
+  .hint.err { color: var(--red-bright); }
+  select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a89984'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer; }
+
+  /* Spec block — documents the focus halo so the demo is self-describing. */
+  .spec {
+    flex-basis: 100%; margin-top: 8px;
+    border-top: 1px solid var(--gold-dim);
+    padding-top: 14px;
+    font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--fg-secondary);
+  }
+  .spec-title {
+    font-family: var(--font-display); font-size: 10px; font-weight: 700;
+    letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright);
+    margin-bottom: 8px;
+  }
+  .spec-row { display: flex; gap: 12px; margin-bottom: 4px; }
+  .spec-key  { color: var(--fg-caption); width: 110px; flex-shrink: 0; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
+  .spec-val  { color: var(--fg-heading); }
+  .spec-sub  { color: var(--fg-muted); margin-left: 122px; font-size: 10px; margin-bottom: 6px; }
+  .spec-note { color: var(--fg-muted); margin-top: 8px; font-style: italic; max-width: 640px; }
+  .spec-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; }
+</style>
+</head>
+<body>
+  <div class="field-group">
+    <label>Target Host</label>
+    <input type="text" placeholder="192.168.1.1">
+    <div class="hint">IPv4 or hostname</div>
+  </div>
+  <div class="field-group">
+    <label>Protocol</label>
+    <select><option>SSH</option><option>HTTPS</option><option>TCP/IP</option></select>
+  </div>
+  <div class="field-group">
+    <label>API Key</label>
+    <input type="text" class="error" value="invalid-key-xx">
+    <div class="hint err">Key format invalid.</div>
+  </div>
+  <div class="field-group">
+    <label>Build Hash</label>
+    <input type="text" class="success" value="a3f9c12e">
+    <div class="hint" style="color:var(--green-bright)">Verified.</div>
+  </div>
+
+  <div class="spec">
+    <div class="spec-title">Focus state — outward halo, semantic color</div>
+    <div class="spec-row"><div class="spec-key">Width</div><div class="spec-val">3px, expands outward from field edge</div></div>
+    <div class="spec-row"><div class="spec-key">Outline</div><div class="spec-val">suppressed (<code>outline: none</code>) to prevent stacking with global <code>:focus-visible</code> ring</div></div>
+    <div class="spec-row"><div class="spec-key">Transition</div><div class="spec-val"><code>--transition-hover</code> (150ms ease-out) on border-color + box-shadow</div></div>
+
+    <div style="margin-top:14px">
+      <div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#fabd2f"></span>Default</div><div class="spec-val">border <code>--gold-bright</code>&nbsp;· halo <code>rgba(215, 153, 33, 0.35)</code></div></div>
+      <div class="spec-sub">35% opacity — matches card hover. Used for neutral fields with no semantic state.</div>
+
+      <div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#fb4934"></span>Invalid</div><div class="spec-val">border <code>--red-bright</code>&nbsp;· halo <code>rgba(204, 36, 29, 0.5)</code></div></div>
+      <div class="spec-sub">50% opacity — keeps the red signal on focus rather than overriding to gold.</div>
+
+      <div class="spec-row"><div class="spec-key"><span class="spec-swatch" style="background:#b8bb26"></span>Verified</div><div class="spec-val">border <code>--green-bright</code>&nbsp;· halo <code>rgba(152, 151, 26, 0.5)</code></div></div>
+      <div class="spec-sub">50% opacity — keeps the green signal on focus rather than overriding to gold.</div>
+    </div>
+
+    <div class="spec-note">Semantic states (invalid/verified) preserve their color through focus so meaning doesn't flip on interaction. Their dim variants read quieter than gold-dim at the same opacity, so they're bumped to 50% to match perceived intensity.</div>
+  </div>
+</body>
+</html>

preview/components-nav.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Navigation" subtitle="T10 Lit Divider locked for top tabs; side nav pending" viewport="960x160" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Navigation — Cybersteel</title>
+<link rel="stylesheet" href="../styles.css">
+<style>
+  /* ────────────────────────────────────────────────────────────
+     Token usage rule for this file:
+     Use var(--token, #hexfallback) AT EVERY USE SITE — never
+     redeclare design-system tokens here. Redeclaring them on
+     :root creates circular references (e.g.
+       --bg-shell: var(--bg-shell, #1d2021);
+     ) which CSS treats as invalid and which wipes the token,
+     leaving every consumer with the initial value (transparent
+     for backgrounds). The fallback in var() is the resilience
+     layer; it kicks in only when the stylesheet fails to load
+     and never collides with the loaded values.
+     ──────────────────────────────────────────────────────────── */
+
+  html, body {
+    margin: 0; padding: 0;
+    background: var(--bg-page, #313131);
+  }
+  body {
+    font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
+    color: var(--fg-body, #f2e2ba);
+    padding: 24px 24px 64px;
+    display: flex; flex-direction: column; gap: 32px;
+  }
+
+  /* ── Page header ─────────────────────────────────────────── */
+  .page-head {
+    display: flex; flex-direction: column; gap: 6px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border-subtle, #665c54);
+  }
+  .page-head .eyebrow {
+    font-size: 11px; color: var(--fg-muted, #b8a98e);
+    letter-spacing: 0.2em; text-transform: uppercase;
+  }
+  .page-head h1 {
+    margin: 0; font-size: 28px; color: var(--fg-heading, #fbf1c7);
+    font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
+    font-weight: 700;
+    letter-spacing: 0.1em; text-transform: uppercase;
+  }
+  .page-head p {
+    margin: 0; font-size: 13px; color: var(--fg-caption, #cebd9e);
+    max-width: 720px;
+  }
+
+  /* ── Pattern header ──────────────────────────────────────── */
+  .pattern { display: flex; flex-direction: column; gap: 12px; }
+  .pattern-head {
+    display: flex; align-items: baseline; gap: 16px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--border-subtle, #665c54);
+  }
+  .pattern-num {
+    font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
+    font-size: 11px;
+    color: var(--gold-dim, #d79921); letter-spacing: 0.2em;
+  }
+  .pattern-title {
+    font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
+    font-size: 18px;
+    font-weight: 700; letter-spacing: 0.1em;
+    text-transform: uppercase; color: var(--fg-heading, #fbf1c7);
+  }
+  .pattern-desc {
+    font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
+    font-size: 11px;
+    color: var(--fg-caption, #cebd9e); letter-spacing: 0.05em;
+  }
+  .pattern-status {
+    font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
+    font-size: 10px;
+    letter-spacing: 0.18em; text-transform: uppercase;
+    margin-left: auto;
+  }
+  .status-locked { color: var(--gold-bright, #fabd2f); }
+  .status-pending { color: var(--fg-muted, #b8a98e); }
+
+  .frame {
+    border: 1px solid var(--border, #7c6f64);
+    background: var(--bg-page, #313131);
+    overflow: hidden;
+    border-radius: 2px;
+  }
+
+  .product-name {
+    font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
+    font-size: 13px;
+    font-weight: 700; letter-spacing: 0.18em;
+    text-transform: uppercase; color: var(--gold-dim, #d79921);
+  }
+
+  .stub-content {
+    padding: 24px;
+    font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
+    font-size: 11px;
+    color: var(--fg-muted, #b8a98e); letter-spacing: 0.2em;
+    background-image:
+      linear-gradient(var(--bg-surface, #3c3836) 1px, transparent 1px),
+      linear-gradient(90deg, var(--bg-surface, #3c3836) 1px, transparent 1px);
+    background-size: 32px 32px;
+    background-position: -1px -1px;
+    opacity: 0.55;
+  }
+
+  /* ────────────────────────────────────────────────────────────
+     T10 · LIT DIVIDER — locked top tab pattern.
+     The topbar's bottom divider already exists. Under the active
+     tab, that segment of divider lights up in gold-bright. Cream
+     text. No extra rules, no gradients.
+     ──────────────────────────────────────────────────────────── */
+  .topframe {
+    display: grid; grid-template-rows: 44px 1fr;
+    min-height: 280px;
+  }
+  .topnav {
+    display: flex; align-items: stretch;
+    background: var(--bg-shell, #1d2021);
+    border-bottom: 1px solid var(--border, #7c6f64);
+    padding: 0 12px;
+  }
+  .topnav .product-name {
+    display: flex; align-items: center;
+    padding: 0 16px 0 8px;
+    margin-right: 8px;
+    border-right: 1px solid var(--border, #7c6f64);
+  }
+  .tab {
+    position: relative;
+    display: flex; align-items: center;
+    padding: 0 18px;
+    font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
+    font-size: 12px;
+    font-weight: 600; letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--fg-caption, #cebd9e);
+    cursor: pointer;
+    transition: color var(--transition-hover, 150ms ease-out);
+    height: 100%;
+  }
+  .tab:hover { color: var(--fg-body, #f2e2ba); }
+  .tab.active { color: var(--fg-heading, #fbf1c7); }
+  .tab.active::after {
+    content: ""; position: absolute;
+    left: 0; right: 0; bottom: -1px;
+    height: 1px; background: var(--gold-bright, #fabd2f);
+  }
+
+  /* ────────────────────────────────────────────────────────────
+     S1 · BARE BRIGHTNESS — locked side-nav pattern.
+     No fills, no markers, no rules. Active = cream + 600 weight.
+     Resting = muted. Selection is purely typographic.
+     ──────────────────────────────────────────────────────────── */
+  .sideframe {
+    display: grid; grid-template-columns: 200px 1fr;
+    min-height: 360px;
+  }
+  .sidebar {
+    background: var(--bg-shell, #1d2021);
+    border-right: 1px solid var(--border, #7c6f64);
+    padding: 12px 0;
+    display: flex; flex-direction: column;
+  }
+  .sb-product-name {
+    padding: 4px 20px 16px;
+    border-bottom: 1px solid var(--border-subtle, #665c54);
+    margin-bottom: 8px;
+  }
+  .sb-section {
+    padding: 14px 20px 6px;
+    font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
+    color: var(--fg-muted, #b8a98e); font-size: 9px;
+    letter-spacing: 0.22em; text-transform: uppercase;
+  }
+  .sb-item {
+    display: flex; align-items: center;
+    height: 30px; padding: 0 20px;
+    color: var(--fg-muted, #b8a98e);
+    cursor: pointer;
+    font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
+    font-size: 13px;
+    font-weight: 500; letter-spacing: 0.04em;
+    transition: color var(--transition-hover, 150ms ease-out);
+  }
+  .sb-item:hover { color: var(--fg-body, #f2e2ba); }
+  .sb-item.active { color: var(--fg-heading, #fbf1c7); font-weight: 600; }
+</style>
+</head>
+<body>
+
+  <header class="page-head">
+    <div class="eyebrow">Component · Navigation</div>
+    <h1>Navigation</h1>
+    <p>Selection lights up the existing structural rule rather than introducing new chrome. The topbar's bottom divider becomes gold under the active tab; the sidebar leans entirely on typographic contrast — cream &amp; bold for active, muted for the rest.</p>
+  </header>
+
+  <!-- ─────────────────────────── TOP TABS — LOCKED ─────────────────────────── -->
+  <section class="pattern">
+    <div class="pattern-head">
+      <div class="pattern-num">01</div>
+      <div class="pattern-title">Top Tabs</div>
+      <div class="pattern-desc">Lit divider — the bottom rule glows gold under the active tab.</div>
+      <div class="pattern-status status-locked">✓ Locked</div>
+    </div>
+    <div class="frame">
+      <div class="topframe">
+        <div class="topnav">
+          <div class="product-name">Cybersteel</div>
+          <div class="tab active">Dashboard</div>
+          <div class="tab">Nodes</div>
+          <div class="tab">Builds</div>
+          <div class="tab">Alerts</div>
+          <div class="tab">Logs</div>
+          <div class="tab">Settings</div>
+        </div>
+        <div class="stub-content">CONTENT</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ─────────────────────────── SIDE NAV — LOCKED ─────────────────────────── -->
+  <section class="pattern">
+    <div class="pattern-head">
+      <div class="pattern-num">02</div>
+      <div class="pattern-title">Side Nav</div>
+      <div class="pattern-desc">Bare brightness — active item is cream &amp; bold; rest are muted.</div>
+      <div class="pattern-status status-locked">✓ Locked</div>
+    </div>
+    <div class="frame">
+      <div class="sideframe">
+        <nav class="sidebar">
+          <div class="sb-product-name product-name">Cybersteel</div>
+          <div class="sb-section">Operate</div>
+          <div class="sb-item active">Dashboard</div>
+          <div class="sb-item">Nodes</div>
+          <div class="sb-item">Builds</div>
+          <div class="sb-item">Alerts</div>
+          <div class="sb-section">Inspect</div>
+          <div class="sb-item">Logs</div>
+          <div class="sb-item">Metrics</div>
+          <div class="sb-item">Traces</div>
+          <div class="sb-section">Configure</div>
+          <div class="sb-item">Settings</div>
+          <div class="sb-item">Members</div>
+        </nav>
+        <div class="stub-content">CONTENT</div>
+      </div>
+    </div>
+  </section>
+
+</body>
+</html>

preview/components-states.html

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Component States" subtitle="Flat 3-step states — locked in" viewport="800x380" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 24px 28px; background: var(--bg-page); font-family: var(--font-body); }
+
+  .section-label {
+    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
+    text-transform: uppercase; color: var(--fg-muted);
+    margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle);
+  }
+  .section { margin-bottom: 28px; }
+
+  /* ── BASE BUTTON ── */
+  .btn {
+    font-family: var(--font-body); font-size: 13px; font-weight: 700;
+    letter-spacing: 0.07em; text-transform: uppercase;
+    padding: 10px 22px; border-radius: var(--radius-md);
+    border: 1px solid transparent;
+    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
+    /* RELEASE transition — slightly slower, ease-out */
+    transition:
+      background  180ms ease-out,
+      color       180ms ease-out,
+      border-color 180ms ease-out,
+      outline-color 180ms ease-out;
+    -webkit-user-select: none; user-select: none;
+  }
+
+  /* ── PRIMARY ── */
+  .btn-primary {
+    background: var(--gold-dim);
+    color: var(--bg-shell);
+    border-color: var(--gold-dim);
+  }
+  .btn-primary:hover {
+    background: var(--gold-bright);
+    border-color: var(--gold-bright);
+  }
+  .btn-primary:focus-visible {
+    outline: 2px solid var(--gold-bright);
+    outline-offset: 3px;
+  }
+  .btn-primary:active {
+    /* PRESS transition — fast */
+    transition:
+      background  55ms ease-out,
+      color       55ms ease-out,
+      border-color 55ms ease-out;
+    background: var(--fg-heading);        /* nearly white-warm cream */
+    color: var(--bg-shell);         /* very dark — stays readable */
+    border-color: var(--fg-heading);
+  }
+
+  /* ── SECONDARY (ghost) ── */
+  .btn-secondary {
+    background: transparent;
+    color: var(--fg-secondary);
+    border-color: var(--border);
+  }
+  .btn-secondary:hover {
+    background: rgba(215,153,33,0.2);  /* subtle gold tint */
+    border-color: var(--gold-dim);
+    color: var(--fg-body);                  /* text lightens — step 1 */
+  }
+  .btn-secondary:focus-visible {
+    outline: 2px solid var(--gold-bright);
+    outline-offset: 3px;
+  }
+  .btn-secondary:active {
+    transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
+    background: var(--gold-bright);     /* full bright fill */
+    color: #ffffff;                     /* pure white */
+    border-color: var(--gold-bright);
+  }
+
+  /* ── DANGER ── */
+  .btn-danger {
+    background: transparent;
+    color: var(--red-bright);
+    border-color: var(--red-dim);
+  }
+  .btn-danger:hover {
+    background: rgba(204,36,29,0.2);   /* subtle red tint */
+    border-color: var(--red-bright);
+    color: var(--fg-body);                  /* text lightens — step 1 */
+  }
+  .btn-danger:focus-visible {
+    outline: 2px solid var(--red-bright);
+    outline-offset: 3px;
+  }
+  .btn-danger:active {
+    transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
+    background: var(--red-bright);      /* full bright fill */
+    color: #ffffff;                     /* pure white */
+    border-color: var(--red-bright);
+  }
+
+  /* ── SUCCESS ── */
+  .btn-success {
+    background: transparent;
+    color: var(--green-bright);
+    border-color: var(--green-dim);
+  }
+  .btn-success:hover {
+    background: rgba(152,151,26,0.2);  /* subtle green tint */
+    border-color: var(--green-bright);
+    color: var(--fg-body);                  /* text lightens — step 1 */
+  }
+  .btn-success:focus-visible {
+    outline: 2px solid var(--green-bright);
+    outline-offset: 3px;
+  }
+  .btn-success:active {
+    transition: background 55ms ease-out, color 55ms ease-out, border-color 55ms ease-out;
+    background: var(--green-bright);    /* full bright fill */
+    color: #ffffff;                     /* pure white */
+    border-color: var(--green-bright);
+  }
+
+  /* ── DISABLED ── */
+  .btn-disabled {
+    background: var(--bg-active);
+    color: var(--fg-muted);
+    border-color: var(--border);
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── LOADING ── */
+  .btn-loading {
+    background: var(--bg-active);
+    color: var(--fg-muted);
+    border-color: var(--border);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  .spinner {
+    width: 9px; height: 9px;
+    border: 1.5px solid var(--gold-dim);
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin 0.65s linear infinite;
+    flex-shrink: 0;
+  }
+
+  /* ── DEMO LAYOUT ── */
+  .demo-row {
+    display: flex; align-items: center; gap: 12px;
+    padding: 14px 16px; background: var(--bg-surface);
+    border: 1px solid var(--border); border-radius: var(--radius-md);
+    margin-bottom: 8px;
+  }
+  .demo-label {
+    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
+    text-transform: uppercase; color: var(--fg-muted); width: 90px; flex-shrink: 0;
+  }
+  .demo-note {
+    font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
+    margin-left: auto; text-align: right; line-height: 1.4;
+  }
+
+  /* SIZE VARIANTS */
+  .btn-sm { font-size: 11px; padding: 6px 14px; }
+  .btn-lg { font-size: 14px; padding: 12px 28px; }
+</style>
+</head>
+<body>
+
+<div class="section">
+  <div class="section-label">Interactive states — press and hold any button to see lit state</div>
+
+  <div class="demo-row">
+    <div class="demo-label">Primary</div>
+    <button class="btn btn-primary">Execute</button>
+    <button class="btn btn-primary btn-sm">Run</button>
+    <button class="btn btn-primary btn-lg">Initialize</button>
+    <div class="demo-note">Press: --fg-heading fill (warm cream)<br>Text stays dark — readable</div>
+  </div>
+
+  <div class="demo-row">
+    <div class="demo-label">Secondary</div>
+    <button class="btn btn-secondary">Configure</button>
+    <button class="btn btn-secondary btn-sm">Edit</button>
+    <button class="btn btn-secondary btn-lg">Open Settings</button>
+    <div class="demo-note">Hover: gold tint + text brightens<br>Press: gold-bright fill + white text</div>
+  </div>
+
+  <div class="demo-row">
+    <div class="demo-label">Danger</div>
+    <button class="btn btn-danger">Terminate</button>
+    <button class="btn btn-danger btn-sm">Delete</button>
+    <div class="demo-note">Hover: red tint + text brightens<br>Press: red-bright fill + white text</div>
+  </div>
+
+  <div class="demo-row">
+    <div class="demo-label">Success</div>
+    <button class="btn btn-success">Deploy</button>
+    <button class="btn btn-success btn-sm">Confirm</button>
+    <div class="demo-note">Hover: green tint + text brightens<br>Press: green-bright fill + white text</div>
+  </div>
+
+  <div class="demo-row">
+    <div class="demo-label">Disabled</div>
+    <button class="btn btn-disabled" disabled>Execute</button>
+    <div class="demo-note">Opacity 0.5<br>pointer-events: none</div>
+  </div>
+
+  <div class="demo-row" style="margin:0">
+    <div class="demo-label">Loading</div>
+    <button class="btn btn-loading"><span class="spinner"></span>Working</button>
+    <div class="demo-note">Spinner + neutral<br>cursor: not-allowed</div>
+  </div>
+</div>
+
+<div class="section" style="margin:0">
+  <div class="section-label">Timing — press: 55ms ease-out · release: 180ms ease-out</div>
+  <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
+    <div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-caption);padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)">
+      <span style="color:var(--gold-dim)">:active</span>  → transition: 55ms ease-out<br>
+      <span style="color:var(--fg-muted)">release</span> → transition: 180ms ease-out<br>
+      <span style="color:var(--fg-muted)">:hover </span> → transition: 150ms ease-out
+    </div>
+    <div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-caption);padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)">
+      <span style="color:var(--gold-dim)">Lit color</span> = --fg-heading (#fbf1c7)<br>
+      <span style="color:var(--fg-muted)">Text   </span> = --bg-shell (#1d2021)<br>
+      <span style="color:var(--fg-muted)">Ratio  </span> ≈ 12:1 — passes AAA
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

preview/index.html

@@ -0,0 +1,965 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="Browse the Cybersteel design-system reference gallery.">
+<title>Preview Index — Cybersteel</title>
+<link rel="stylesheet" href="../styles.css">
+<style>
+  :root {
+    --gallery-width: 1240px;
+    --gallery-gutter: clamp(20px, 5vw, 72px);
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    min-width: 320px;
+    min-height: 100vh;
+    margin: 0;
+    background:
+      var(--gradient-scanline),
+      radial-gradient(circle at 82% 0%, rgba(250, 189, 47, 0.08), transparent 31rem),
+      var(--bg-page);
+  }
+
+  a {
+    color: inherit;
+  }
+
+  .skip-link {
+    position: fixed;
+    top: 12px;
+    left: 12px;
+    z-index: 100;
+    padding: 8px 12px;
+    background: var(--gold-bright);
+    color: var(--bg-shell);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-weight: var(--weight-semibold);
+    transform: translateY(-160%);
+    transition: transform var(--transition-ui);
+  }
+
+  .skip-link:focus {
+    transform: translateY(0);
+  }
+
+  .shell {
+    width: min(100%, calc(var(--gallery-width) + (var(--gallery-gutter) * 2)));
+    margin: 0 auto;
+    padding-inline: var(--gallery-gutter);
+  }
+
+  .masthead {
+    background: rgba(29, 32, 33, 0.94);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .masthead-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 68px;
+    gap: var(--space-panel);
+  }
+
+  .brand {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--space-component);
+    color: var(--fg-heading);
+  }
+
+  .brand-name {
+    font-family: var(--font-display);
+    font-size: var(--text-lg);
+    font-weight: var(--weight-bold);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+  }
+
+  .brand-context {
+    padding-left: var(--space-component);
+    border-left: 1px solid var(--gold-dim);
+    color: var(--fg-muted);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    letter-spacing: var(--tracking-widest);
+    text-transform: uppercase;
+  }
+
+  .system-state {
+    display: flex;
+    align-items: center;
+    gap: var(--space-element);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+    color: var(--fg-caption);
+  }
+
+  .state-light {
+    width: 7px;
+    height: 7px;
+    border-radius: var(--radius-pill);
+    background: var(--green-bright);
+    box-shadow: 0 0 0 3px rgba(184, 187, 38, 0.12);
+  }
+
+  .hero {
+    display: grid;
+    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
+    gap: clamp(40px, 8vw, 108px);
+    align-items: end;
+    padding-block: clamp(64px, 9vw, 112px) clamp(52px, 7vw, 88px);
+  }
+
+  .eyebrow,
+  .section-index,
+  .card-index,
+  .search-label,
+  .meta-label {
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+  }
+
+  .eyebrow {
+    display: flex;
+    align-items: center;
+    gap: var(--space-component);
+    margin-bottom: var(--space-cluster);
+    color: var(--gold-bright);
+    font-size: var(--text-xs);
+    letter-spacing: var(--tracking-widest);
+  }
+
+  .eyebrow::before {
+    content: "";
+    width: 34px;
+    height: 1px;
+    background: var(--gold-dim);
+  }
+
+  .hero h1 {
+    max-width: 760px;
+    margin-bottom: var(--space-panel);
+    font-size: clamp(44px, 7vw, 84px);
+    line-height: 0.94;
+    letter-spacing: -0.025em;
+  }
+
+  .hero-copy {
+    max-width: 680px;
+    margin: 0;
+    color: var(--fg-secondary);
+    font-size: clamp(16px, 2vw, 19px);
+    line-height: var(--leading-loose);
+  }
+
+  .hero-copy strong {
+    color: var(--fg-heading);
+    font-weight: var(--weight-medium);
+  }
+
+  .stats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    border: 1px solid var(--border);
+    border-top-color: var(--gold-dim);
+    background: rgba(60, 56, 54, 0.58);
+  }
+
+  .stat {
+    min-height: 112px;
+    padding: var(--space-cluster);
+    border-right: 1px solid var(--border-subtle);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .stat:nth-child(2n) {
+    border-right: 0;
+  }
+
+  .stat:nth-last-child(-n + 2) {
+    border-bottom: 0;
+  }
+
+  .stat-value {
+    display: block;
+    margin-bottom: var(--space-element);
+    color: var(--fg-heading);
+    font-family: var(--font-mono);
+    font-size: var(--text-2xl);
+    font-weight: var(--weight-semibold);
+    line-height: 1;
+  }
+
+  .stat-label {
+    color: var(--fg-muted);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    letter-spacing: var(--tracking-wider);
+    line-height: var(--leading-normal);
+    text-transform: uppercase;
+  }
+
+  .explorer-bar {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    background: rgba(29, 32, 33, 0.97);
+    border-block: 1px solid var(--border);
+  }
+
+  .explorer-controls {
+    display: grid;
+    grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
+    gap: var(--space-panel);
+    align-items: center;
+    min-height: 86px;
+  }
+
+  .search-wrap {
+    position: relative;
+  }
+
+  .search-label {
+    position: absolute;
+    top: 50%;
+    left: var(--space-group);
+    color: var(--gold-dim);
+    font-size: 10px;
+    font-weight: var(--weight-semibold);
+    letter-spacing: var(--tracking-widest);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    min-height: 46px;
+    padding: 11px 48px 11px 104px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--bg-page);
+    color: var(--fg-body);
+    font-family: var(--font-body);
+    font-size: var(--text-sm);
+    outline: none;
+    transition: border-color var(--transition-hover), box-shadow var(--transition-hover);
+  }
+
+  .search-input::placeholder {
+    color: var(--fg-muted);
+  }
+
+  .search-input:focus {
+    border-color: var(--gold-bright);
+    box-shadow: var(--shadow-gold);
+  }
+
+  .search-key {
+    position: absolute;
+    top: 50%;
+    right: var(--space-component);
+    padding: 2px 6px;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--fg-muted);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .category-nav {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-element);
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .category-nav a {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--space-element);
+    min-height: 38px;
+    padding: 7px 10px;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--fg-caption);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    transition: color var(--transition-hover), border-color var(--transition-hover), background var(--transition-hover);
+  }
+
+  .category-nav a:hover {
+    border-color: var(--gold-dim);
+    background: rgba(215, 153, 33, 0.12);
+    color: var(--fg-heading);
+  }
+
+  .category-count {
+    color: var(--gold-bright);
+  }
+
+  main {
+    padding-block: var(--space-region) var(--space-canvas);
+  }
+
+  .gallery-section {
+    scroll-margin-top: 116px;
+    padding-block: 0 var(--space-zone);
+  }
+
+  .gallery-section + .gallery-section {
+    padding-top: var(--space-region);
+    border-top: 1px solid var(--border-subtle);
+  }
+
+  .section-heading {
+    display: grid;
+    grid-template-columns: 70px minmax(220px, 0.75fr) minmax(280px, 1fr);
+    gap: var(--space-panel);
+    align-items: start;
+    margin-bottom: var(--space-block);
+  }
+
+  .section-index {
+    padding-top: 6px;
+    color: var(--gold-dim);
+    font-size: var(--text-xs);
+    letter-spacing: var(--tracking-widest);
+  }
+
+  .section-heading h2 {
+    margin: 0;
+    font-size: clamp(24px, 3vw, 36px);
+    letter-spacing: var(--tracking-wide);
+  }
+
+  .section-heading p {
+    max-width: 610px;
+    margin: 3px 0 0;
+    color: var(--fg-caption);
+    font-size: var(--text-sm);
+    line-height: var(--leading-loose);
+  }
+
+  .card-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-group);
+  }
+
+  .preview-card {
+    position: relative;
+    display: flex;
+    min-height: 226px;
+    flex-direction: column;
+    padding: var(--space-panel);
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background:
+      linear-gradient(135deg, rgba(250, 189, 47, 0.045), transparent 48%),
+      var(--bg-surface);
+    transition:
+      background var(--transition-hover),
+      border-color var(--transition-hover),
+      box-shadow var(--transition-hover),
+      color var(--transition-hover);
+  }
+
+  .preview-card::after {
+    content: "";
+    position: absolute;
+    right: -64px;
+    bottom: -86px;
+    width: 190px;
+    height: 190px;
+    border: 1px solid rgba(215, 153, 33, 0.13);
+    transform: rotate(45deg);
+    transition: border-color var(--transition-hover), transform var(--transition-hover);
+  }
+
+  .preview-card:hover {
+    border-color: var(--gold-dim);
+    box-shadow: 0 0 0 3px rgba(215, 153, 33, 0.2);
+  }
+
+  .preview-card:hover::after {
+    border-color: rgba(250, 189, 47, 0.42);
+    transform: rotate(45deg) translate(-4px, -4px);
+  }
+
+  .preview-card:active {
+    border-color: var(--gold-bright);
+    background: rgba(215, 153, 33, 0.19);
+    box-shadow: none;
+    transition-duration: 55ms;
+  }
+
+  .card-topline {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-component);
+    margin-bottom: var(--space-block);
+  }
+
+  .card-index {
+    color: var(--fg-muted);
+    font-size: 10px;
+    letter-spacing: var(--tracking-widest);
+  }
+
+  .card-badge {
+    padding: 3px 7px;
+    border: 1px solid var(--gold-dim);
+    border-radius: var(--radius-sm);
+    color: var(--gold-bright);
+    font-family: var(--font-mono);
+    font-size: 8px;
+    letter-spacing: var(--tracking-wider);
+    line-height: 1.4;
+    text-transform: uppercase;
+  }
+
+  .preview-card h3 {
+    position: relative;
+    z-index: 1;
+    margin-bottom: var(--space-component);
+    color: var(--fg-heading);
+    font-size: var(--text-xl);
+  }
+
+  .preview-card p {
+    position: relative;
+    z-index: 1;
+    max-width: 520px;
+    margin-bottom: var(--space-panel);
+    color: var(--fg-secondary);
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+  }
+
+  .card-footer {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--space-group);
+    margin-top: auto;
+  }
+
+  .card-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-element);
+  }
+
+  .meta-item {
+    color: var(--fg-muted);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+  }
+
+  .meta-item + .meta-item::before {
+    content: "◆";
+    margin-right: var(--space-element);
+    color: var(--gold-muted);
+    font-size: 6px;
+    vertical-align: 1px;
+  }
+
+  .card-arrow {
+    display: grid;
+    width: 34px;
+    height: 34px;
+    flex: 0 0 auto;
+    place-items: center;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--gold-bright);
+    font-family: var(--font-mono);
+    transition: background var(--transition-hover), border-color var(--transition-hover), color var(--transition-hover);
+  }
+
+  .preview-card:hover .card-arrow {
+    border-color: var(--gold-bright);
+    background: var(--gold-bright);
+    color: var(--bg-shell);
+  }
+
+  .empty-state {
+    display: none;
+    padding: var(--space-region) var(--space-panel);
+    border: 1px solid var(--border);
+    border-left: 2px solid var(--gold-dim);
+    background: var(--bg-surface);
+  }
+
+  .empty-state strong {
+    display: block;
+    margin-bottom: var(--space-element);
+    color: var(--fg-heading);
+    font-family: var(--font-display);
+    font-size: var(--text-lg);
+  }
+
+  .empty-state span {
+    color: var(--fg-caption);
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+  }
+
+  .footer {
+    border-top: 1px solid var(--border);
+    background: var(--bg-shell);
+  }
+
+  .footer-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 116px;
+    gap: var(--space-panel);
+  }
+
+  .footer-note {
+    margin: 0;
+    color: var(--fg-caption);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+  }
+
+  .footer-note strong {
+    color: var(--fg-heading);
+    font-weight: var(--weight-medium);
+  }
+
+  .to-top {
+    color: var(--gold-bright);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  @media (max-width: 980px) {
+    .hero {
+      grid-template-columns: 1fr;
+    }
+
+    .stats {
+      max-width: 600px;
+    }
+
+    .explorer-controls {
+      grid-template-columns: 1fr;
+      gap: var(--space-component);
+      padding-block: var(--space-group);
+    }
+
+    .category-nav {
+      justify-content: flex-start;
+      padding-bottom: 2px;
+    }
+
+    .section-heading {
+      grid-template-columns: 50px 1fr;
+    }
+
+    .section-heading p {
+      grid-column: 2;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .shell {
+      padding-inline: 18px;
+    }
+
+    .system-state {
+      display: none;
+    }
+
+    .hero h1 {
+      font-size: clamp(42px, 15vw, 64px);
+    }
+
+    .stats {
+      width: 100%;
+    }
+
+    .section-heading {
+      display: block;
+    }
+
+    .section-index {
+      display: block;
+      margin-bottom: var(--space-element);
+    }
+
+    .section-heading p {
+      margin-top: var(--space-component);
+    }
+
+    .card-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .preview-card {
+      min-height: 214px;
+    }
+
+    .footer-inner {
+      align-items: flex-start;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+
+    *, *::before, *::after {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+</style>
+</head>
+<body id="top">
+<a class="skip-link" href="#gallery">Skip to gallery</a>
+
+<header class="masthead">
+  <div class="shell masthead-bar">
+    <a class="brand" href="index.html" aria-label="Cybersteel preview index">
+      <span class="brand-name">Cybersteel</span>
+      <span class="brand-context">Preview Index</span>
+    </a>
+    <div class="system-state" aria-label="Reference gallery status">
+      <span class="state-light" aria-hidden="true"></span>
+      Reference set online
+    </div>
+  </div>
+
+  <div class="shell hero">
+    <div>
+      <div class="eyebrow">Design system reference</div>
+      <h1>Preview<br>Index</h1>
+      <p class="hero-copy">
+        Explore the complete visual language through <strong>16 focused references</strong>.
+        Start with the foundations, inspect the type system, then move through structure,
+        effects, components, and live interaction states.
+      </p>
+    </div>
+
+    <div class="stats" aria-label="Gallery summary">
+      <div class="stat"><span class="stat-value">16</span><span class="stat-label">Reference pages</span></div>
+      <div class="stat"><span class="stat-value">04</span><span class="stat-label">System groups</span></div>
+      <div class="stat"><span class="stat-value">07</span><span class="stat-label">Live demos</span></div>
+      <div class="stat"><span class="stat-value">00</span><span class="stat-label">Remote assets</span></div>
+    </div>
+  </div>
+</header>
+
+<div class="explorer-bar">
+  <div class="shell explorer-controls">
+    <div class="search-wrap">
+      <label class="search-label" for="preview-search">Search</label>
+      <input class="search-input" id="preview-search" type="search" placeholder="Color, type, states…" autocomplete="off" spellcheck="false">
+      <span class="search-key" aria-hidden="true">/</span>
+    </div>
+
+    <nav class="category-nav" aria-label="Preview categories">
+      <a href="#foundations">Foundations <span class="category-count">03</span></a>
+      <a href="#typography">Typography <span class="category-count">04</span></a>
+      <a href="#structure">Structure <span class="category-count">03</span></a>
+      <a href="#components">Components <span class="category-count">06</span></a>
+    </nav>
+  </div>
+</div>
+
+<main class="shell" id="gallery">
+  <section class="gallery-section" id="foundations" data-section>
+    <div class="section-heading">
+      <span class="section-index">01 / 04</span>
+      <h2>Foundations</h2>
+      <p>Core color primitives. Review the base surfaces, accent ramps, and semantic roles before applying the system.</p>
+    </div>
+
+    <div class="card-grid">
+      <a class="preview-card" href="colors-base.html" data-card data-search="foundations color base palette background foreground surfaces text pairings gruvbox">
+        <div class="card-topline"><span class="card-index">REF—01</span></div>
+        <h3>Base Palette</h3>
+        <p>Background and foreground ramps, default pairings, contextual text, and surface combinations.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Color</span><span class="meta-item">Surfaces</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="colors-accents.html" data-card data-search="foundations color accent gold red green blue teal orange aqua purple swatches ramps">
+        <div class="card-topline"><span class="card-index">REF—02</span></div>
+        <h3>Accent Colors</h3>
+        <p>Bright, dim, and muted ramps for gold, red, green, blue, orange, aqua, and purple.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Color</span><span class="meta-item">Ramps</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="colors-semantic.html" data-card data-search="foundations semantic color primary success danger warning info disabled buttons text roles">
+        <div class="card-topline"><span class="card-index">REF—03</span></div>
+        <h3>Semantic Colors</h3>
+        <p>Primary, success, danger, warning, info, and disabled roles shown across text and controls.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Color</span><span class="meta-item">Roles</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+    </div>
+  </section>
+
+  <section class="gallery-section" id="typography" data-section>
+    <div class="section-heading">
+      <span class="section-index">02 / 04</span>
+      <h2>Typography</h2>
+      <p>IBM Plex Sans carries the primary hierarchy. IBM Plex Mono handles code, logs, aligned data, and opt-in terminal surfaces.</p>
+    </div>
+
+    <div class="card-grid">
+      <a class="preview-card" href="type-display.html" data-card data-search="typography display ibm plex sans hero heading subheading hierarchy scale">
+        <div class="card-topline"><span class="card-index">REF—04</span></div>
+        <h3>Display Type</h3>
+        <p>Plex Sans display hierarchy across hero, heading, subheading, body, and light text treatments.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Plex Sans</span><span class="meta-item">Display</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="type-body.html" data-card data-search="typography body ibm plex sans scale prose paragraph labels captions">
+        <div class="card-topline"><span class="card-index">REF—05</span></div>
+        <h3>Body Type</h3>
+        <p>Readable body sizing, weights, labels, captions, and supporting text within the core type scale.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Plex Sans</span><span class="meta-item">Body</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="type-mono.html" data-card data-search="typography mono terminal ibm plex mono code logs data timestamps console">
+        <div class="card-topline"><span class="card-index">REF—06</span></div>
+        <h3>Mono / Terminal</h3>
+        <p>Plex Mono specimens for terminal output, code, logs, timestamps, and aligned operational data.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Plex Mono</span><span class="meta-item">Data</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="type-sans.html" data-card data-search="typography sans mono mode comparison opt-in terminal default hierarchy">
+        <div class="card-topline"><span class="card-index">REF—07</span></div>
+        <h3>Sans vs. Mono Mode</h3>
+        <p>Side-by-side comparison of the default Sans system and the opt-in, fully terminal-styled Mono mode.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Modes</span><span class="meta-item">Comparison</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+    </div>
+  </section>
+
+  <section class="gallery-section" id="structure" data-section>
+    <div class="section-heading">
+      <span class="section-index">03 / 04</span>
+      <h2>Structure &amp; Effects</h2>
+      <p>Layout rhythm and surface construction: the spacing scale, crisp border geometry, radius choices, and flat elevation model.</p>
+    </div>
+
+    <div class="card-grid">
+      <a class="preview-card" href="spacing-tokens.html" data-card data-search="structure spacing tokens grid rhythm 4px 8px chip element component group panel section">
+        <div class="card-topline"><span class="card-index">REF—08</span></div>
+        <h3>Spacing Tokens</h3>
+        <p>The complete 4–96px spacing scale, labeled by token and demonstrated in practical layout contexts.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Spacing</span><span class="meta-item">8px Grid</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="borders-radius.html" data-card data-search="structure effects border borders radius radii corners 6px spinner animation shape">
+        <div class="card-topline"><span class="card-index">REF—09</span><span class="card-badge">Animated</span></div>
+        <h3>Borders &amp; Radius</h3>
+        <p>Structural and semantic borders plus the radius scale across buttons, cards, inputs, and a loading spinner.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Borders</span><span class="meta-item">Shape</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="shadows-elevation.html" data-card data-search="structure effects shadows elevation flat surfaces hover press interactive cards border background">
+        <div class="card-topline"><span class="card-index">REF—10</span><span class="card-badge">Interactive</span></div>
+        <h3>Shadows &amp; Elevation</h3>
+        <p>Flat elevation through background and border changes, with interactive card hover and press behavior.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Elevation</span><span class="meta-item">Effects</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+    </div>
+  </section>
+
+  <section class="gallery-section" id="components" data-section>
+    <div class="section-heading">
+      <span class="section-index">04 / 04</span>
+      <h2>Components &amp; States</h2>
+      <p>Reusable interface patterns and their behavior. Hover, focus, press, validation, loading, and disabled states are live where marked.</p>
+    </div>
+
+    <div class="card-grid">
+      <a class="preview-card" href="components-buttons.html" data-card data-search="components buttons primary secondary danger ghost hover press interactive states controls">
+        <div class="card-topline"><span class="card-index">REF—11</span><span class="card-badge">Interactive</span></div>
+        <h3>Buttons</h3>
+        <p>Primary, secondary, and danger controls with the three-step default, hover, and press treatment.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Controls</span><span class="meta-item">Motion</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="components-inputs.html" data-card data-search="components forms inputs select focus error success validation interactive halo fields">
+        <div class="card-topline"><span class="card-index">REF—12</span><span class="card-badge">Interactive</span></div>
+        <h3>Form Inputs</h3>
+        <p>Text and select controls with focus, error, success, validation, and transition behavior.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Forms</span><span class="meta-item">Validation</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="components-cards.html" data-card data-search="components cards stat deploy alert surface clickable hover halo press interactive">
+        <div class="card-topline"><span class="card-index">REF—13</span><span class="card-badge">Interactive</span></div>
+        <h3>Cards</h3>
+        <p>Static data surfaces and clickable cards, including stat, alert, deploy, hover, and press treatments.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Surfaces</span><span class="meta-item">States</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="components-badges.html" data-card data-search="components badges status online offline degraded error running complete failed labels indicators">
+        <div class="card-topline"><span class="card-index">REF—14</span></div>
+        <h3>Badges &amp; Status</h3>
+        <p>System, process, and neutral indicators for online, degraded, running, complete, failed, and labeled states.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Status</span><span class="meta-item">Labels</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="components-nav.html" data-card data-search="components navigation nav tabs top side hover active divider interactive states">
+        <div class="card-topline"><span class="card-index">REF—15</span><span class="card-badge">Interactive</span></div>
+        <h3>Navigation</h3>
+        <p>Top-tab and side-navigation explorations with active selection, divider, and hover behavior.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">Navigation</span><span class="meta-item">Patterns</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+
+      <a class="preview-card" href="components-states.html" data-card data-search="components states hover focus press release transition spinner loading disabled interactive motion buttons">
+        <div class="card-topline"><span class="card-index">REF—16</span><span class="card-badge">Interactive</span></div>
+        <h3>Component States</h3>
+        <p>Live hover, focus, press, release, disabled, loading, spinner, and timing references in one matrix.</p>
+        <div class="card-footer">
+          <div class="card-meta"><span class="meta-item">States</span><span class="meta-item">Motion</span></div>
+          <span class="card-arrow" aria-hidden="true">↗</span>
+        </div>
+      </a>
+    </div>
+  </section>
+
+  <div class="empty-state" id="empty-state" role="status" aria-live="polite">
+    <strong>No matching references.</strong>
+    <span>Clear the search or use another system term.</span>
+  </div>
+</main>
+
+<footer class="footer">
+  <div class="shell footer-inner">
+    <p class="footer-note"><strong>Cybersteel</strong> / Local reference gallery / No remote dependencies</p>
+    <a class="to-top" href="#top">Return to top ↑</a>
+  </div>
+</footer>
+
+<script>
+  (function () {
+    var input = document.getElementById('preview-search');
+    var cards = Array.prototype.slice.call(document.querySelectorAll('[data-card]'));
+    var sections = Array.prototype.slice.call(document.querySelectorAll('[data-section]'));
+    var emptyState = document.getElementById('empty-state');
+
+    function filterGallery() {
+      var query = input.value.trim().toLowerCase();
+      var visibleCount = 0;
+
+      cards.forEach(function (card) {
+        var matches = !query || card.getAttribute('data-search').indexOf(query) !== -1 || card.textContent.toLowerCase().indexOf(query) !== -1;
+        card.hidden = !matches;
+        if (matches) visibleCount += 1;
+      });
+
+      sections.forEach(function (section) {
+        var hasVisibleCards = section.querySelector('[data-card]:not([hidden])');
+        section.hidden = !hasVisibleCards;
+      });
+
+      emptyState.style.display = visibleCount ? 'none' : 'block';
+    }
+
+    input.addEventListener('input', filterGallery);
+
+    document.addEventListener('keydown', function (event) {
+      if (event.key === '/' && document.activeElement !== input) {
+        event.preventDefault();
+        input.focus();
+      }
+      if (event.key === 'Escape' && document.activeElement === input) {
+        input.value = '';
+        filterGallery();
+        input.blur();
+      }
+    });
+  }());
+</script>
+</body>
+</html>

preview/shadows-elevation.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Shadows & Elevation" subtitle="Flat — bg+border elevation, interactive card demo" viewport="700x220" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); }
+  .section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
+  .section { margin-bottom: 20px; }
+  .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
+
+  /* Elevation via bg + border only */
+  .surface {
+    border-radius: var(--radius-md); padding: 12px 14px;
+    font-family: var(--font-mono); font-size: 10px; width: 120px;
+    transition: background var(--transition-hover), border-color var(--transition-hover);
+  }
+  .surface-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
+  .surface-token { color: var(--fg-caption); }
+
+  .elev-page     { background: var(--bg-page);    border: none; }
+  .elev-card     { background: var(--bg-surface);    border: 1px solid var(--border); }
+  .elev-hover    { background: var(--bg-surface);    border: 1px solid var(--gold-dim); cursor: pointer; }
+  .elev-active   { background: var(--bg-active);    border: 1px solid var(--gold-dim); cursor: pointer; }
+  .elev-overlay  { background: var(--bg-shell);border: 1px solid var(--gold-dim); }
+
+  /* Interactive card demo */
+  .demo-card {
+    background: var(--bg-surface); border: 1px solid var(--border);
+    border-radius: var(--radius-md); padding: 14px 16px; width: 160px;
+    cursor: pointer;
+    transition: background var(--transition-hover), border-color var(--transition-hover);
+  }
+  .demo-card:hover  { border-color: var(--gold-dim); background: var(--bg-surface); }
+  .demo-card:active {
+    background: var(--bg-active); border-color: var(--gold-dim);
+    transition: background var(--transition-press), border-color var(--transition-press);
+  }
+  .demo-card-title { font-weight: 700; font-size: 13px; color: var(--fg-heading); margin-bottom: 3px; }
+  .demo-card-sub   { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); }
+</style>
+</head>
+<body>
+
+<div class="section">
+  <div class="section-label">Elevation — bg + border only · no drop shadows</div>
+  <div class="row">
+    <div>
+      <div class="surface elev-page"><div class="surface-label">Page</div><div class="surface-token">bg0 · no border</div></div>
+    </div>
+    <div>
+      <div class="surface elev-card"><div class="surface-label">Card / raised</div><div class="surface-token">bg1 · --border</div></div>
+    </div>
+    <div>
+      <div class="surface elev-hover"><div class="surface-label">Hover</div><div class="surface-token">bg1 · gold-dim</div></div>
+    </div>
+    <div>
+      <div class="surface elev-active"><div class="surface-label">Active / press</div><div class="surface-token">bg2 · gold-dim</div></div>
+    </div>
+    <div>
+      <div class="surface elev-overlay"><div class="surface-label">Overlay / modal</div><div class="surface-token">bg-hard · gold-dim</div></div>
+    </div>
+  </div>
+</div>
+
+<div class="section" style="margin:0">
+  <div class="section-label">Interactive card — hover and press to see state changes</div>
+  <div class="row">
+    <div class="demo-card">
+      <div class="demo-card-title">Node Alpha</div>
+      <div class="demo-card-sub">99.97% · us-east-1</div>
+    </div>
+    <div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-muted);line-height:1.8;padding-top:4px">
+      Default: bg1 + --border<br>
+      Hover:&nbsp;&nbsp; bg1 + gold-dim border<br>
+      Press:&nbsp;&nbsp; bg2 + gold-dim border<br>
+      <br>
+      No shadow at any state.<br>
+      Focus: 2px gold outline.
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

preview/spacing-tokens.html

@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Spacing Tokens" subtitle="8px base grid — space-1 through space-24" viewport="700x200" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css?v=2">
+<style>
+  body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-mono); color: var(--fg-body); }
+
+  .section-label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; }
+
+  /* Token rows */
+  .token-row {
+    display: grid;
+    grid-template-columns: 160px 40px 1fr 220px;
+    align-items: center;
+    gap: 12px;
+    padding: 7px 0;
+    border-bottom: 1px solid var(--bg-surface);
+  }
+  .token-row:last-child { border-bottom: none; }
+  .token-name { font-size: 10px; color: var(--fg-body); letter-spacing: 0.04em; }
+  .token-val  { font-size: 10px; color: var(--fg-muted); text-align: right; }
+  .bar-track  { height: 6px; background: var(--bg-surface); border-radius: 1px; position: relative; }
+  .bar-fill   { height: 100%; background: var(--gold-dim); border-radius: 1px; }
+  .use-cases  { font-size: 8px; color: var(--fg-muted); line-height: 1.5; letter-spacing: 0.02em; }
+
+  /* Demo area */
+  .demo-section { margin-top: 16px; border-top: 1px solid var(--bg-surface); padding-top: 14px; }
+  .demo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+  .demo-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--bg-active);
+    border-radius: 4px;
+    padding: 10px 12px;
+  }
+  .demo-label { font-size: 8px; color: var(--gold-dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; }
+
+  /* Chip demo */
+  .chip { display: inline-flex; align-items: center; gap: var(--space-chip); background: var(--bg-active); border-radius: 3px; padding: 2px var(--space-element); font-size: 9px; color: var(--fg-body); }
+  .chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); flex-shrink: 0; }
+
+  /* Button demo */
+  .btn { display: inline-flex; align-items: center; gap: var(--space-element); border: 1px solid var(--gold-dim); border-radius: 3px; padding: var(--space-component) var(--space-group); font-size: 10px; font-family: var(--font-mono); color: var(--fg-body); background: transparent; cursor: pointer; }
+
+  /* Form field demo */
+  .field { display: flex; flex-direction: column; gap: var(--space-component); }
+  .field-label { font-size: 8px; color: var(--fg-muted); letter-spacing: 0.1em; text-transform: uppercase; }
+  .field-input { background: var(--bg-shell); border: 1px solid var(--bg-border); border-radius: 3px; padding: var(--space-component) var(--space-group); font-size: 10px; font-family: var(--font-mono); color: var(--fg-body); }
+
+  /* Card demo */
+  .demo-card-inner { background: var(--bg-shell); border: 1px solid var(--bg-active); border-radius: 4px; padding: var(--space-group); display: flex; flex-direction: column; gap: var(--space-component); }
+  .card-title { font-size: 11px; font-weight: 600; color: var(--fg-heading); }
+  .card-sub   { font-size: 9px; color: var(--fg-muted); }
+
+  /* Panel demo */
+  .demo-panel { background: var(--bg-shell); border-left: 2px solid var(--gold-dim); padding: var(--space-panel); display: flex; flex-direction: column; gap: var(--space-element); border-radius: 0 3px 3px 0; }
+  .panel-header { font-size: 10px; font-weight: 600; color: var(--fg-heading); letter-spacing: 0.08em; text-transform: uppercase; }
+  .panel-row { display: flex; justify-content: space-between; font-size: 9px; color: var(--fg-secondary); }
+
+  /* Section demo */
+  .demo-sections { display: flex; flex-direction: column; gap: var(--space-section); }
+  .section-block { background: var(--bg-shell); border-radius: 3px; padding: var(--space-group); border: 1px solid var(--bg-active); }
+  .section-title { font-size: 10px; font-weight: 600; color: var(--fg-secondary); letter-spacing: 0.08em; }
+
+  /* Spacing indicator overlay */
+  .space-indicator {
+    display: inline-block;
+    background: rgba(250,189,47,0.15);
+    border: 1px dashed rgba(250,189,47,0.4);
+    vertical-align: middle;
+  }
+</style>
+</head>
+<body>
+
+<div class="section-label">Spacing tokens</div>
+
+<!-- TOKEN TABLE -->
+<div style="margin-bottom: 16px;">
+  <!-- MICRO -->
+  <div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:2px;">Micro — component internals</div>
+
+  <div class="token-row">
+    <div class="token-name">--space-chip</div>
+    <div class="token-val">4px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:4%"></div></div>
+    <div class="use-cases">badge padding · icon–label gap · border offsets · micro nudges</div>
+  </div>
+  <div class="token-row">
+    <div class="token-name">--space-element</div>
+    <div class="token-val">8px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:8%"></div></div>
+    <div class="use-cases">chip/pill padding · inline gaps · icon inset · tight row spacing</div>
+  </div>
+  <div class="token-row">
+    <div class="token-name">--space-component</div>
+    <div class="token-val">12px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:12%"></div></div>
+    <div class="use-cases">button vertical padding · input inset · list row gap · label-to-field</div>
+  </div>
+
+  <!-- COMPONENT -->
+  <div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Component — internal layout</div>
+
+  <div class="token-row">
+    <div class="token-name">--space-group</div>
+    <div class="token-val">16px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:16%"></div></div>
+    <div class="use-cases">card inset · input horizontal padding · form field gap · default gap</div>
+  </div>
+  <div class="token-row">
+    <div class="token-name">--space-cluster</div>
+    <div class="token-val">20px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:20%"></div></div>
+    <div class="use-cases">grouped nav items · related form sections · compact panel inset</div>
+  </div>
+  <div class="token-row">
+    <div class="token-name">--space-panel</div>
+    <div class="token-val">24px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:24%"></div></div>
+    <div class="use-cases">sidebar/panel inset · modal body · drawer padding · section subheader gap</div>
+  </div>
+
+  <!-- LAYOUT -->
+  <div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Layout — between components &amp; sections</div>
+
+  <div class="token-row">
+    <div class="token-name">--space-block</div>
+    <div class="token-val">32px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:32%"></div></div>
+    <div class="use-cases">content block gaps · card grid gutter · toolbar height</div>
+  </div>
+  <div class="token-row">
+    <div class="token-name">--space-content</div>
+    <div class="token-val">40px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:40%"></div></div>
+    <div class="use-cases">major content group spacing · dialog padding · sub-section gap</div>
+  </div>
+  <div class="token-row">
+    <div class="token-name">--space-section</div>
+    <div class="token-val">48px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:48%"></div></div>
+    <div class="use-cases">page section breaks · feature group dividers · hero subheading gap</div>
+  </div>
+
+  <!-- PAGE -->
+  <div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:4px;margin-top:10px;">Page — large layout &amp; full-bleed</div>
+
+  <div class="token-row">
+    <div class="token-name">--space-region</div>
+    <div class="token-val">64px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:64%; background:var(--bg-active)"></div></div>
+    <div class="use-cases">hero vertical padding · layout area spacing · large feature gaps</div>
+  </div>
+  <div class="token-row">
+    <div class="token-name">--space-zone</div>
+    <div class="token-val">80px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:80%; background:var(--bg-active)"></div></div>
+    <div class="use-cases">page-scale layout spacing · full-width section vertical rhythm</div>
+  </div>
+  <div class="token-row">
+    <div class="token-name">--space-canvas</div>
+    <div class="token-val">96px</div>
+    <div class="bar-track"><div class="bar-fill" style="width:96%; background:var(--bg-active)"></div></div>
+    <div class="use-cases">page margins · full-bleed hero top padding · maximum layout gutter</div>
+  </div>
+</div>
+
+<!-- LIVE DEMOS -->
+<div class="demo-section">
+  <div class="section-label">In use</div>
+  <div class="demo-grid">
+
+    <!-- Chip + button using micro spacing -->
+    <div class="demo-card">
+      <div class="demo-label">chip · space-chip + space-element</div>
+      <div style="display:flex;flex-direction:column;gap:var(--space-element);">
+
+        <!-- space-chip annotated -->
+        <div style="display:flex;align-items:center;font-size:8px;color:var(--fg-muted);gap:0;">
+          <span style="white-space:nowrap">space-chip</span>
+          <span style="margin:0 3px;color:var(--fg-muted)">→</span>
+          <div class="chip-dot" style="width:5px;height:5px;border-radius:50%;background:var(--gold-bright);flex-shrink:0"></div>
+          <div class="space-indicator" style="width:var(--space-chip);height:10px;"></div>
+          <span style="font-size:9px;color:var(--fg-body)">ONLINE</span>
+        </div>
+
+        <!-- space-element annotated -->
+        <div style="display:flex;align-items:center;font-size:8px;color:var(--fg-muted);gap:0;">
+          <span style="white-space:nowrap">space-element</span>
+          <span style="margin:0 3px;color:var(--fg-muted)">→</span>
+          <div class="chip" style="gap:0;padding:0 var(--space-element);">▶</div>
+          <div class="space-indicator" style="width:var(--space-element);height:10px;"></div>
+          <span style="font-size:9px;color:var(--fg-body)">Deploy</span>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- Form field using component spacing -->
+    <div class="demo-card">
+      <div class="demo-label">input · space-component label→field</div>
+      <div style="display:flex;flex-direction:column;align-items:flex-start;gap:0;">
+        <div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.1em;text-transform:uppercase;background:var(--bg-active);padding:2px 6px;border-radius:2px;">Target node</div>
+        <div style="display:flex;align-items:center;gap:6px;padding:0 4px;">
+          <div class="space-indicator" style="width:8px;height:var(--space-component);"></div>
+          <span style="font-size:8px;color:var(--fg-muted);">← space-component (12px)</span>
+        </div>
+        <div class="field-input" style="width:100%;box-sizing:border-box;">cluster-01 · us-east-1</div>
+      </div>
+    </div>
+
+    <!-- Card vs Panel inset comparison -->
+    <div class="demo-card" style="grid-column: span 2">
+      <div class="demo-label">inset comparison · space-group (16px) vs space-panel (24px)</div>
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
+
+        <!-- space-group -->
+        <div>
+          <div style="font-size:8px;color:var(--fg-muted);margin-bottom:4px;">space-group · compact card</div>
+          <div style="position:relative;background:var(--bg-shell);border:1px solid var(--bg-active);border-radius:4px;display:flex;">
+            <div class="space-indicator" style="width:var(--space-group);align-self:stretch;"></div>
+            <div style="padding:var(--space-group) var(--space-group) var(--space-group) 0;flex:1;display:flex;flex-direction:column;gap:0;">
+              <div class="space-indicator" style="height:var(--space-group);width:100%;margin-bottom:0;"></div>
+              <div style="padding-bottom:var(--space-group);">
+                <div class="card-title">Node Alpha — 07</div>
+                <div class="card-sub" style="margin-top:var(--space-component);">CPU 34% · MEM 61%</div>
+              </div>
+              <div class="space-indicator" style="height:var(--space-group);width:100%;"></div>
+            </div>
+          </div>
+          <div style="font-size:8px;color:var(--fg-muted);margin-top:4px;">← 16px on all sides</div>
+        </div>
+
+        <!-- space-panel -->
+        <div>
+          <div style="font-size:8px;color:var(--fg-muted);margin-bottom:4px;">space-panel · open panel</div>
+          <div style="position:relative;background:var(--bg-shell);border-left:2px solid var(--gold-dim);border-radius:0 4px 4px 0;display:flex;">
+            <div class="space-indicator" style="width:var(--space-panel);align-self:stretch;"></div>
+            <div style="padding:0 var(--space-panel) 0 0;flex:1;display:flex;flex-direction:column;gap:0;">
+              <div class="space-indicator" style="height:var(--space-panel);width:100%;"></div>
+              <div style="padding-bottom:var(--space-panel);">
+                <div class="panel-header">System status</div>
+                <div class="panel-row" style="margin-top:var(--space-element);"><span>Pipeline</span><span style="color:var(--gold-bright)">READY</span></div>
+                <div class="panel-row"><span>Node 07</span><span style="color:var(--red-bright)">OFFLINE</span></div>
+              </div>
+              <div class="space-indicator" style="height:var(--space-panel);width:100%;"></div>
+            </div>
+          </div>
+          <div style="font-size:8px;color:var(--fg-muted);margin-top:4px;">← 24px on all sides</div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- Two sections separated by space-section -->
+    <div class="demo-card" style="grid-column: span 2">
+      <div class="demo-label">page sections · space-section (48px between blocks)</div>
+      <div style="display:flex;flex-direction:column;gap:0;">
+        <div class="section-block">
+          <div class="section-title">Overview</div>
+          <div style="font-size:9px;color:var(--fg-muted);margin-top:4px">Cluster health · 12 nodes active</div>
+        </div>
+        <div style="display:flex;align-items:center;gap:8px;padding:0 8px;">
+          <div class="space-indicator" style="width:8px;height:var(--space-section);"></div>
+          <div style="font-size:8px;color:var(--fg-muted);letter-spacing:0.08em;">space-section · 48px</div>
+        </div>
+        <div class="section-block">
+          <div class="section-title">Deploy log</div>
+          <div style="font-size:9px;color:var(--fg-muted);margin-top:4px">Last deploy 14 min ago · pipeline v2.4.1</div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+</body>
+</html>

preview/type-body.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Body Type" subtitle="IBM Plex Mono body scale" viewport="700x160" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 16px 20px; background: var(--bg-page); }
+  .row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px;
+         border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; }
+  .row:last-child { border: none; }
+  .meta { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted);
+          letter-spacing: 0.1em; width: 110px; flex-shrink: 0; }
+</style>
+</head>
+<body>
+  <div class="row"><div class="meta">15px / 400 sans</div><div style="font-family:var(--font-body);font-size:15px;color:var(--fg-body)">The system is operational. All services nominal.</div></div>
+  <div class="row"><div class="meta">13px / 400 sans</div><div style="font-family:var(--font-body);font-size:13px;color:var(--fg-caption)">Secondary labels, captions, helper text.</div></div>
+  <div class="row"><div class="meta">18px / 600 sans</div><div style="font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--fg-body)">Section Title</div></div>
+  <div class="row"><div class="meta">11px / 600 / caps mono</div><div style="font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-muted)">Status · Active · Module · Online</div></div>
+  <div class="row"><div class="meta">13px / 300 sans</div><div style="font-family:var(--font-body);font-size:13px;font-weight:300;color:var(--fg-muted)">Fine print, timestamps, version strings — v2.4.1-stable</div></div>
+</body>
+</html>

preview/type-display.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Display Type" subtitle="IBM Plex Mono — 48px, 28px, 18px, 14px, 13px" viewport="700x200" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 18px 20px; background: var(--bg-page); }
+  .specimen { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
+  .specimen:last-child { border: none; margin: 0; padding: 0; }
+  .meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
+          text-transform: uppercase; color: var(--fg-muted); margin-bottom: 5px; }
+  .note {
+    margin-top: 18px;
+    padding: 10px 12px;
+    border: 1px solid var(--border-subtle);
+    border-left: 2px solid var(--gold-dim);
+    background: rgba(var(--bg-surface-rgb), 0.4);
+  }
+  .note .label {
+    font-family: var(--font-mono);
+    font-size: 9px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--gold-bright);
+    margin-bottom: 6px;
+  }
+  .note p {
+    margin: 0;
+    font-family: var(--font-sans);
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--fg-secondary);
+  }
+  .note code {
+    color: var(--fg-heading);
+    font-weight: 500;
+  }
+</style>
+</head>
+<body>
+  <div class="specimen">
+    <div class="meta">Display · 48px · 700 · IBM Plex Sans</div>
+    <div style="font-family:var(--font-display);font-size:48px;font-weight:700;color:var(--fg-heading);line-height:1.05;letter-spacing:-0.02em">Cybersteel</div>
+  </div>
+  <div class="specimen">
+    <div class="meta">Display · 28px · 700 · uppercase</div>
+    <div style="font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--fg-heading);letter-spacing:0.06em;text-transform:uppercase">Build Complete</div>
+  </div>
+  <div class="specimen">
+    <div class="meta">Subheading · 18px · 600</div>
+    <div style="font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--fg-body)">Deploy pipeline ready</div>
+  </div>
+  <div class="specimen">
+    <div class="meta">Body · 14px · 400 · Plex Sans</div>
+    <div style="font-family:var(--font-body);font-size:14px;font-weight:400;color:var(--fg-secondary);line-height:1.6">Node 07 offline — failover to node 08 complete. All traffic rerouted.</div>
+  </div>
+  <div class="specimen" style="border:none;margin:0;padding:0">
+    <div class="meta">Light · 13px · 300</div>
+    <div style="font-family:var(--font-body);font-size:13px;font-weight:300;color:var(--fg-caption)">Secondary labels, helper text, timestamps</div>
+  </div>
+
+  <div class="note">
+    <div class="label">◆ Display · IBM Plex Sans</div>
+    <p>
+      Display, body, and condensed roles all resolve to <code>IBM Plex Sans</code> by default.
+      For console / status / hardware-grade surfaces, flip to Mono mode with
+      <code>class="mono-mode"</code> on the surface root — see <code>type-sans.html</code>.
+      <code>--font-mono</code> is always Plex Mono for code, data, and timestamps.
+    </p>
+  </div>
+</body>
+</html>

preview/type-mono.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="Mono / Terminal Type" subtitle="IBM Plex Mono — terminal, logs, data" viewport="700x150" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { margin: 0; padding: 16px 20px; background: var(--bg-shell); }
+  .block { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
+  .block:last-child { border: none; margin: 0; padding: 0; }
+  .label { font-family: var(--font-mono); font-size: 9px; color: var(--fg-muted);
+           letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 5px; }
+  .line  { font-family: var(--font-mono); line-height: 1.7; font-size: 12px; }
+</style>
+</head>
+<body>
+  <div class="block">
+    <div class="label">IBM Plex Mono — terminal / build output</div>
+    <div class="line" style="color:var(--green-bright)">$ cybersteel build --release</div>
+    <div class="line" style="color:var(--fg-caption)">  compiling core    [████████████] 100%</div>
+    <div class="line" style="color:var(--fg-secondary)">  linking           1.4s</div>
+    <div class="line" style="color:var(--gold-bright)">  BUILD COMPLETE — 0 errors · 0 warnings</div>
+  </div>
+  <div class="block">
+    <div class="label">Log levels · timestamps · data values</div>
+    <div class="line" style="color:var(--fg-secondary)">09:41:00  <span style="color:var(--blue-bright)">INFO </span>  node-01  heartbeat OK · 2ms</div>
+    <div class="line" style="color:var(--fg-secondary)">09:41:01  <span style="color:var(--orange-bright)">WARN </span>  node-03  disk usage 84%</div>
+    <div class="line" style="color:var(--fg-secondary)">09:41:02  <span style="color:var(--red-bright)">ERR  </span>  node-07  connection timeout</div>
+  </div>
+</body>
+</html>

preview/type-sans.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<!-- @dsCard group="Brand" name="type-sans" subtitle="Sans (default) vs. Mono mode (opt-in)" viewport="720x1100" -->
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body {
+    margin: 0;
+    padding: 22px 24px;
+    background: var(--bg-page);
+  }
+
+  .header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--gold-dim);
+    box-shadow: 0 1px 0 var(--border);
+    padding-bottom: 10px;
+    margin-bottom: 18px;
+  }
+  .header h1 {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--gold-bright);
+    margin: 0;
+  }
+  .header .meta {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--fg-muted);
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    border: 1px solid var(--border);
+  }
+  .col {
+    padding: 18px 20px;
+  }
+  .col + .col { border-left: 1px solid var(--border); }
+  .col-head {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--fg-muted);
+    margin-bottom: 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+  .col-head .tag {
+    font-size: 9px;
+    color: var(--gold-bright);
+    letter-spacing: 0.2em;
+  }
+
+  .specimen {
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px dashed var(--border-subtle);
+  }
+  .specimen:last-child { border: none; margin: 0; padding: 0; }
+  .label {
+    font-family: var(--font-mono);
+    font-size: 9px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--fg-muted);
+    margin-bottom: 4px;
+  }
+
+  .note {
+    margin-top: 22px;
+    padding: 12px 14px;
+    border: 1px solid var(--border-subtle);
+    border-left: 2px solid var(--gold-dim);
+    background: rgba(var(--bg-surface-rgb), 0.4);
+  }
+  .note .label {
+    color: var(--gold-bright);
+    margin-bottom: 6px;
+    letter-spacing: 0.2em;
+    font-size: 10px;
+  }
+  .note p {
+    margin: 0 0 8px;
+    font-family: var(--font-sans);
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--fg-secondary);
+  }
+  .note p:last-child { margin: 0; }
+  .note code {
+    color: var(--fg-heading);
+    font-weight: 500;
+    font-family: var(--font-mono);
+    font-size: 11px;
+  }
+  .note ul {
+    margin: 0;
+    padding-left: 18px;
+    font-family: var(--font-sans);
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--fg-secondary);
+  }
+  .note li::marker { color: var(--gold-dim); }
+  .note strong { color: var(--fg-heading); font-weight: 600; }
+
+  .swap {
+    margin-top: 14px;
+    padding: 10px 12px;
+    background: var(--bg-shell);
+    border: 1px solid var(--border);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--fg-body);
+    overflow-x: auto;
+  }
+  .swap .c { color: var(--fg-muted); }
+  .swap .k { color: var(--blue-bright); }
+  .swap .v { color: var(--gold-bright); }
+</style>
+</head>
+<body>
+
+  <div class="header">
+    <h1>◆ Type Modes · Sans vs Mono</h1>
+    <div class="meta">Sans · Default · Mono · Opt-in</div>
+  </div>
+
+  <div class="grid">
+
+    <div class="col">
+      <div class="col-head">
+        <span style="font-family:var(--font-sans);text-transform:none;letter-spacing:0.04em;font-weight:600">Plex Sans · default</span>
+        <span class="tag">DEFAULT</span>
+      </div>
+
+      <div class="specimen">
+        <div class="label">Display · 32 / 700</div>
+        <div style="font-family:var(--font-sans);font-size:32px;font-weight:700;color:var(--fg-heading);letter-spacing:-0.01em;line-height:1.05">Build Complete</div>
+      </div>
+      <div class="specimen">
+        <div class="label">H2 · 22 / 600 · caps</div>
+        <div style="font-family:var(--font-sans);font-size:22px;font-weight:600;color:var(--fg-heading);letter-spacing:0.06em;text-transform:uppercase">Deploy Pipeline</div>
+      </div>
+      <div class="specimen">
+        <div class="label">Body · 15 / 400</div>
+        <div style="font-family:var(--font-sans);font-size:15px;font-weight:400;color:var(--fg-body);line-height:1.55">Node 07 offline. Failover to node 08 complete. All inbound traffic rerouted within 1.4 seconds. No data loss recorded.</div>
+      </div>
+      <div class="specimen">
+        <div class="label">Caption · 11 / 600 · caps · mono</div>
+        <div style="font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-bright)">Status · Active · 1.4s</div>
+      </div>
+    </div>
+
+    <div class="col mono-mode">
+      <div class="col-head">
+        <span>Plex Mono · alt</span>
+        <span class="tag">OPT-IN</span>
+      </div>
+
+      <div class="specimen">
+        <div class="label">Display · 32 / 700</div>
+        <div style="font-family:var(--font-mono);font-size:32px;font-weight:700;color:var(--fg-heading);letter-spacing:-0.01em;line-height:1.05">Build Complete</div>
+      </div>
+      <div class="specimen">
+        <div class="label">H2 · 22 / 600 · caps</div>
+        <div style="font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--fg-heading);letter-spacing:0.06em;text-transform:uppercase">Deploy Pipeline</div>
+      </div>
+      <div class="specimen">
+        <div class="label">Body · 14 / 400</div>
+        <div style="font-family:var(--font-mono);font-size:14px;font-weight:400;color:var(--fg-body);line-height:1.55">Node 07 offline. Failover to node 08 complete. All inbound traffic rerouted within 1.4 seconds. No data loss recorded.</div>
+      </div>
+      <div class="specimen">
+        <div class="label">Caption · 11 / 600 · caps</div>
+        <div style="font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-bright)">Status · Active · 1.4s</div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="note">
+    <div class="label">◇ Default (Sans)</div>
+    <p><strong>IBM Plex Sans</strong> is the primary face. Display, body, and condensed roles all resolve to it by default. Use it for documentation, dashboards, settings, forms, marketing pages, and any prose-heavy or proportional-label-heavy surface.</p>
+    <p><code>--font-mono</code> is always <strong>IBM Plex Mono</strong> — code blocks, terminal output, data values, and timestamps stay monospaced regardless of mode.</p>
+  </div>
+
+  <div class="note">
+    <div class="label">◇ When to switch to Mono mode</div>
+    <ul>
+      <li><strong>Console / terminal / IDE-like</strong> internal tools where the terminal aesthetic IS the point.</li>
+      <li><strong>Status dashboards</strong> dominated by tabular, log-like, or numeric data.</li>
+      <li><strong>Hero / masthead</strong> moments meant to feel hardware-grade and mechanical.</li>
+    </ul>
+  </div>
+
+  <div class="note">
+    <div class="label">◇ How to switch</div>
+    <p>Apply <code>.mono-mode</code> at the surface root. Children inherit. Display, body, and condensed all flip to Plex Mono.</p>
+    <div class="swap"><span class="c">// whole app</span>
+&lt;<span class="k">body</span> <span class="k">class</span>=<span class="v">"mono-mode"</span>&gt; … &lt;/<span class="k">body</span>&gt;
+
+<span class="c">// or scope manually</span>
+:root {
+  <span class="k">--font-display</span>:   <span class="v">var(--font-mono)</span>;
+  <span class="k">--font-body</span>:      <span class="v">var(--font-mono)</span>;
+  <span class="k">--font-condensed</span>: <span class="v">var(--font-mono)</span>;
+}</div>
+  </div>
+
+  <div class="note">
+    <div class="label">◇ Rule</div>
+    <p>One mode per application (or per major surface). <strong>Do not mix Sans and Mono body text on the same screen</strong> — the rhythm clash breaks the system. Mono for code, data, status badges, and timestamps is always allowed and expected, even in Sans surfaces.</p>
+  </div>
+
+</body>
+</html>

styles.css

@@ -0,0 +1,519 @@
+/* ============================================================
+   CYBERSTEEL DESIGN SYSTEM — styles.css
+   Retrofuturist. Technical. Direct.
+   Gruvbox-derived palette + Art Deco type system.
+   ============================================================ */
+
+/* ============================================================
+   BRAND FONTS — IBM PLEX SANS + IBM PLEX MONO
+
+   Plex Sans is the PRIMARY brand face — used for display, body,
+   and condensed roles. Proportional, readable, professional;
+   carries the Cybersteel voice into long-form and dense UI.
+
+   Plex Mono is the PRIMARY MONOSPACE face — used for code,
+   terminal output, data values, timestamps, and any tabular or
+   log-like content where character alignment matters. It is also
+   the right pick for hardware-grade hero / status moments where
+   the terminal aesthetic is the point.
+
+   Both faces share the same designer (IBM) and the same skeletal
+   proportions, so they sit together cleanly on the same screen
+   (Sans for prose + labels, Mono for code + status).
+
+   Both families: SIL OFL — free for commercial and embedded use.
+   Self-hosted from /fonts (woff2). No external CDN dependency.
+   ============================================================ */
+
+/* Light 300 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
+}
+
+/* Regular 400 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Italic.woff2') format('woff2');
+}
+
+/* Medium 500 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
+}
+
+/* Semibold 600 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
+}
+
+/* Bold 700 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('fonts/IBMPlexMono-Bold.woff2') format('woff2');
+}
+
+/* ── IBM PLEX SANS ── */
+
+/* Light 300 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
+}
+
+/* Regular 400 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Italic.woff2') format('woff2');
+}
+
+/* Medium 500 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
+}
+
+/* Semibold 600 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
+}
+
+/* Bold 700 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('fonts/IBMPlexSans-Bold.woff2') format('woff2');
+}
+
+:root {
+
+  /* ── BASE BACKGROUNDS (warm dark, Gruvbox-derived) ── */
+  --bg-shell:    #1d2021;   /* topbar, sidebar, nav chrome, modal backdrops */
+  --bg-page:     #313131;   /* default page canvas, main content area */
+  --bg-surface:  #3c3836;   /* cards, panels, drawers, input fields, code blocks, table rows */
+  --bg-active:   #504945;   /* selected rows, active nav items, hover states */
+  --bg-disabled: #665c54;   /* disabled buttons/inputs — fg-muted text only, intentionally low contrast */
+  --bg-border:   #7c6f64;   /* borders, dividers, rules, input outlines — never use as a text surface */
+
+  /* RGB triplets for rgba() use */
+  --bg-page-rgb:   49, 49, 49;
+  --bg-surface-rgb:   60, 56, 54;
+  --bg-active-rgb:   80, 73, 69;
+
+  /* ── BASE FOREGROUNDS (warm cream/ivory) ── */
+  --fg-heading:   #fbf1c7;   /* hero text, page headings, display titles */
+  --fg-body:      #f2e2ba;   /* primary body text, default readable content */
+  --fg-secondary: #e0d0a8;   /* labels, secondary descriptions, table data */
+  --fg-caption:   #cebd9e;   /* captions, metadata, timestamps, placeholders */
+  --fg-muted:     #b8a98e;   /* disabled text, token labels, subtle UI annotations */
+
+  /* ── ACCENT — GOLD (signature, Art Deco) ── */
+  --gold-bright:  #fabd2f;  /* primary interactive, focus rings        */
+  --gold-dim:     #d79921;  /* borders, decorative rules               */
+  --gold-muted:   #b57614;  /* hover states, pressed accents           */
+  --amber:        #ffb000;  /* terminal amber glow, CRT reference      */
+
+  /* ── ACCENT — RED ── */
+  --red-bright:   #fb4934;
+  --red-dim:      #cc241d;
+  --red-muted:    #9d0006;
+
+  /* ── ACCENT — GREEN ── */
+  --green-bright: #b8bb26;
+  --green-dim:    #98971a;
+  --green-muted:  #79740e;
+
+  /* ── ACCENT — BLUE / TEAL ── */
+  --blue-bright:  #83a598;
+  --blue-dim:     #458588;
+  --blue-muted:   #076678;
+
+  /* ── ACCENT — ORANGE ── */
+  --orange-bright: #fe8019;
+  --orange-dim:    #d65d0e;
+  --orange-muted:  #af3a03;
+
+  /* ── ACCENT — AQUA ── */
+  --aqua-bright:  #8ec07c;
+  --aqua-dim:     #689d6a;
+  --aqua-muted:   #427b58;
+
+  /* ── ACCENT — PURPLE ── */
+  --purple-bright: #d3869b;
+  --purple-dim:    #b16286;
+  --purple-muted:  #8f3f71;
+
+  /* ── SEMANTIC COLORS ── */
+  --color-primary:     var(--gold-bright);
+  --color-primary-dim: var(--gold-dim);
+  --color-danger:      var(--red-bright);
+  --color-danger-dim:  var(--red-dim);
+  --color-success:     var(--green-bright);
+  --color-success-dim: var(--green-dim);
+  --color-warning:     var(--orange-bright);
+  --color-warning-dim: var(--orange-dim);
+  --color-info:        var(--blue-bright);
+  --color-info-dim:    var(--blue-dim);
+  --color-link:        var(--blue-bright);
+  --color-link-hover:  var(--gold-bright);
+  --color-focus:       var(--gold-bright);
+
+  /* ── SURFACES ── */
+  --surface-page:      var(--bg-page);
+  --surface-raised:    var(--bg-surface);
+  --surface-overlay:   var(--bg-shell);
+  --surface-hover:     var(--bg-active);
+  --surface-active:    var(--bg-surface);
+
+  /* ── BORDERS ── */
+  --border:            var(--bg-border);            /* structural borders       */
+  --border-subtle:     var(--bg-disabled);            /* very faint separators    */
+  --border-accent:     var(--gold-dim);       /* decorative/active        */
+  --border-focus:      var(--gold-bright);    /* focus rings              */
+  --border-danger:     var(--red-dim);
+  --border-success:    var(--green-dim);
+
+  /* ── SHADOWS ── */
+  /* Flat design — no drop shadows. Elevation expressed through bg + border only. */
+  --shadow-sm:   none;
+  --shadow-md:   none;
+  --shadow-lg:   none;
+  --shadow-inset: none;
+  --shadow-gold:  0 0 0 1px var(--gold-dim);  /* focus/active ring — only permitted shadow use */
+
+  /* ── GRADIENTS ── */
+  --gradient-gold-fade:   linear-gradient(135deg, rgba(250,189,47,0.08) 0%, transparent 60%);  /* @kind color */
+  --gradient-amber-fade:  linear-gradient(180deg, rgba(255,176,0,0.06) 0%, transparent 100%);  /* @kind color */
+  --gradient-dark-fade:   linear-gradient(180deg, var(--bg-shell) 0%, var(--bg-page) 100%);
+  --gradient-card:        linear-gradient(135deg, rgba(250,189,47,0.04) 0%, rgba(40,40,40,0) 100%);  /* @kind color */
+  --gradient-scanline:    repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0,0,0,0.03) 2px,
+    rgba(0,0,0,0.03) 4px
+  );  /* @kind color */
+
+  /* ── SPACING (8px base grid) ── */
+  --space-chip:      4px;   /* badge/tag padding, icon-label gap, border offsets, micro nudges */
+  --space-element:   8px;   /* inline element gaps, chip/pill padding, icon inset, tight row spacing */
+  --space-component: 12px;  /* button vertical padding, input inset, list row gap, label-to-field gap */
+  --space-group:     16px;  /* card inset, input horizontal padding, form field gap, default gap */
+  --space-cluster:   20px;  /* grouped nav items, related form section spacing, compact panel inset */
+  --space-panel:     24px;  /* sidebar/panel inset, modal body padding, drawer inset, section subheader gap */
+  --space-block:     32px;  /* between distinct content blocks, card grid gutter, toolbar height */
+  --space-content:   40px;  /* major content group spacing, dialog padding, page sub-section gap */
+  --space-section:   48px;  /* page section breaks, feature group dividers, hero subheading gap */
+  --space-region:    64px;  /* hero vertical padding, layout area spacing, large feature gaps */
+  --space-zone:      80px;  /* page-scale layout spacing, full-width section vertical rhythm */
+  --space-canvas:    96px;  /* page margins, full-bleed hero top padding, maximum layout gutter */
+
+  /* ── BORDER RADIUS ── */
+  --radius-none: 0px;
+  --radius-sm:   4px;
+  --radius-md:   6px;   /* default — confirmed */
+  --radius-lg:   10px;
+  --radius-pill: 999px;
+
+  /* ── TRANSITIONS ── */
+  --transition-press:   55ms ease-out;   /* @kind other */ /* entering active/pressed state */
+  --transition-ui:      180ms ease-out;  /* @kind other */ /* releasing, hover changes */
+  --transition-hover:   150ms ease-out;  /* @kind other */ /* hover enter/exit */
+  --transition-modal:   200ms ease;      /* @kind other */ /* overlays, modals */
+
+  /* ── INTERACTION PATTERN (ghost buttons) ── */
+  /* default: transparent bg, colored border + fg2 text                     */
+  /* hover:   20% accent tint bg, colored border, fg1 text (--transition-hover) */
+  /* press:   full accent-bright fill, white text (--transition-press)      */
+  /* release: back to hover/default (--transition-ui)                       */
+
+  /* ── TYPOGRAPHY — Font Families ──
+     Plex Sans is the primary face for display, body, and
+     condensed roles. Plex Mono is the primary monospace face
+     for code, terminal output, data values, and timestamps.
+
+     For a fully terminal-styled surface (status dashboard,
+     console, hardware-grade hero), set --font-display /
+     --font-body / --font-condensed to var(--font-mono) on the
+     surface root, or apply the .mono-mode class.
+  */
+  --font-sans:      'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-mono:      'IBM Plex Mono', 'Courier New', monospace;
+
+  --font-display:   var(--font-sans);
+  --font-body:      var(--font-sans);
+  --font-condensed: var(--font-sans);
+
+  /* ── TYPOGRAPHY — Scale (1.25 modular ratio, base 16px) ── */
+  --text-xs:   11px;   /* status badges, fine print              */
+  --text-sm:   13px;   /* secondary labels, captions             */
+  --text-base: 15px;   /* default body text                      */
+  --text-md:   16px;   /* slightly prominent body                */
+  --text-lg:   18px;   /* subheadings, emphasized labels         */
+  --text-xl:   22px;   /* H3 level                               */
+  --text-2xl:  28px;   /* H2 level                               */
+  --text-3xl:  36px;   /* H1 level                               */
+  --text-4xl:  48px;   /* display / hero                         */
+  --text-5xl:  64px;   /* hero display                           */
+  --text-6xl:  96px;   /* max scale; masthead only               */
+
+  /* ── TYPOGRAPHY — Weight ── */
+  --weight-light:   300;
+  --weight-regular: 400;
+  --weight-medium:  500;
+  --weight-semibold:600;
+  --weight-bold:    700;
+  --weight-black:   900;
+
+  /* ── TYPOGRAPHY — Line Heights ── */
+  --leading-tight:  1.15;
+  --leading-snug:   1.3;
+  --leading-normal: 1.5;
+  --leading-loose:  1.7;
+  --leading-mono:   1.4;
+
+  /* ── TYPOGRAPHY — Letter Spacing ── */
+  --tracking-tight:   -0.02em;
+  --tracking-normal:   0em;
+  --tracking-wide:     0.05em;
+  --tracking-wider:    0.1em;
+  --tracking-widest:   0.2em;   /* ALL CAPS labels */
+}
+
+
+/* ── SEMANTIC ELEMENT DEFAULTS ── */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  background-color: var(--bg-page);
+  color: var(--fg-body);
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  font-weight: var(--weight-regular);
+  line-height: var(--leading-normal);
+}
+
+/* ── HEADINGS ── */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  font-weight: var(--weight-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-wide);
+  color: var(--fg-heading);
+  margin: 0 0 var(--space-group);
+}
+
+h1 {
+  font-size: var(--text-3xl);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+h2 {
+  font-size: var(--text-2xl);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+h3 {
+  font-size: var(--text-xl);
+  font-family: var(--font-condensed);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-normal);
+}
+
+h4 {
+  font-size: var(--text-lg);
+  font-family: var(--font-condensed);
+  font-weight: var(--weight-semibold);
+}
+
+h5 {
+  font-size: var(--text-base);
+  font-family: var(--font-condensed);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--fg-secondary);
+}
+
+h6 {
+  font-size: var(--text-sm);
+  font-family: var(--font-mono);
+  font-weight: var(--weight-regular);
+  letter-spacing: var(--tracking-widest);
+  text-transform: uppercase;
+  color: var(--fg-caption);
+}
+
+/* ── BODY TEXT ── */
+p {
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--fg-secondary);
+  margin: 0 0 var(--space-group);
+}
+
+small {
+  font-size: var(--text-sm);
+  color: var(--fg-caption);
+}
+
+/* ── LINKS ── */
+a {
+  color: var(--color-link);
+  text-decoration: none;
+  transition: color var(--transition-ui);
+}
+
+a:hover {
+  color: var(--color-link-hover);
+}
+
+/* ── CODE ── */
+code, kbd, samp, pre {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  line-height: var(--leading-mono);
+}
+
+code {
+  color: var(--gold-bright);
+  background: var(--bg-surface);
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+}
+
+pre {
+  background: var(--bg-shell);
+  border: 1px solid var(--border);
+  border-left: 2px solid var(--gold-dim);
+  padding: var(--space-group) var(--space-panel);
+  overflow-x: auto;
+  color: var(--fg-body);
+}
+
+/* ── LABELS & CAPS ── */
+.label {
+  font-family: var(--font-condensed);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-widest);
+  text-transform: uppercase;
+  color: var(--fg-caption);
+}
+
+.label-mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-widest);
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+/* ── FOCUS ── */
+:focus-visible {
+  outline: 1px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+/* ── MONO MODE ──
+   Flip a surface into fully terminal-styled type: display, body,
+   and condensed roles all resolve to IBM Plex Mono. Use for
+   consoles, status dashboards, IDE-like tools, and hardware-grade
+   hero moments where the terminal aesthetic IS the point.
+
+       <body class="mono-mode"> … </body>
+
+   Or, scope it programmatically:
+       :root { --font-body: var(--font-mono); … }
+*/
+.mono-mode {
+  --font-display:   var(--font-mono);
+  --font-body:      var(--font-mono);
+  --font-condensed: var(--font-mono);
+}

themes/chromium/README.md

@@ -13,7 +13,7 @@ single `manifest.json`, no images.
 
 ## Token mapping
 
-Every value is lifted from `colors_and_type.css`, matched to the role the
+Every value is lifted from `styles.css`, matched to the role the
 token comments already describe.
 
 | Chromium key         | Token            | Hex       | Token's stated role              |
@@ -66,7 +66,7 @@ inactive colors are set explicitly instead.
 
 ## What doesn't carry over
 
-Roughly half of `colors_and_type.css` is the type system — IBM Plex
+Roughly half of `styles.css` is the type system — IBM Plex
 Sans/Mono, the 1.25 modular scale, the Art Deco tracking and uppercase
 treatments. None of it can reach the browser: Chromium themes accept only
 `images`, `colors`, `tints`, and `properties`. There is no font capability,