@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/github/DESIGN.md

@@ -0,0 +1,155 @@
+# Design System Inspired by GitHub
+
+> Category: Developer Tools
+> Code-forward platform. Functional density, blue-on-white precision, Primer foundations.
+
+## 1. Visual Theme & Atmosphere
+
+GitHub's surface is engineered, not decorated. Every pixel announces a stance: this is a tool for people who care about diffs, builds, and pull requests. The page background is a clean `#ffffff` (light) or `#0d1117` (dark), with content arranged on dense rectangular panes separated by hairline borders rather than negative space. Information density is the brand — list rows, code lines, repository headers, and notification cards are all packed close together so a power user can scan a hundred items without scrolling.
+
+The signature accents are the **Primer blue** (`#0969da`) for links and primary actions, and **GitHub green** (`#1a7f37`) for merged states, success, and the merge button itself. Both feel slightly muted compared to consumer-product blues and greens — saturated enough to read against the dense gray text, restrained enough to disappear into the background when several appear in one viewport.
+
+Typography uses the **system-ui** stack across the entire product so text renders crisply on every OS, paired with **SFMono / Menlo / Consolas** for code. There is no editorial display font; GitHub's voice is the voice of the system you're already on.
+
+**Key Characteristics:**
+- True white canvas (`#ffffff`) or deep navy-black (`#0d1117`) — no warmth, no tint
+- Hairline gray borders (`#d0d7de`) define every pane and panel
+- Primer blue (`#0969da`) for links/primary; GitHub green (`#1a7f37`) for success/merge
+- system-ui for prose; SFMono for code — no custom typeface
+- Dense list rows with minimal padding; whitespace is rare
+- Octicon iconography at 16px / 24px — single-stroke, geometric, consistent
+- Pill-shaped status badges with strong color semantics
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Canvas Default** (`#ffffff`): Primary page background, light theme.
+- **Canvas Subtle** (`#f6f8fa`): Secondary surface, sidebar, input background, header strip.
+- **Canvas Inset** (`#eaeef2`): Code block background, deep-inset surface.
+- **Fg Default** (`#1f2328`): Primary text, headlines, ink.
+- **Fg Muted** (`#656d76`): Secondary text, captions, file paths.
+
+### Brand Accent
+- **Primer Blue** (`#0969da`): Links, primary CTAs, focus ring base — the universal interactive color.
+- **Primer Blue Hover** (`#0550ae`): Hover/pressed for primary blue.
+- **Accent Subtle** (`#ddf4ff`): Soft blue surface for callouts, info banners.
+
+### Semantic
+- **Success / Merge Green** (`#1a7f37`): Merged PRs, success badges, merge button.
+- **Success Subtle** (`#dafbe1`): Success surface tint.
+- **Open Green** (`#1a7f37`): "Open" issue/PR state.
+- **Closed / Danger Red** (`#cf222e`): Closed PRs, destructive action, validation error.
+- **Danger Subtle** (`#ffebe9`): Error banner surface.
+- **Attention / Warning Yellow** (`#9a6700`): Warning text on amber surface.
+- **Attention Subtle** (`#fff8c5`): Warning banner surface.
+- **Done Purple** (`#8250df`): Merged-and-archived, "done" state, premium badge.
+- **Sponsor Pink** (`#bf3989`): Sponsors heart, GitHub sponsors brand.
+
+### Border & Divider
+- **Border Default** (`#d0d7de`): Standard hairline border, panel outline.
+- **Border Muted** (`#d8dee4`): Inner dividers within a panel.
+- **Border Subtle** (`#eaeef2`): Faint table row dividers.
+
+### Dark Theme
+- **Dark Canvas** (`#0d1117`): Dark page background.
+- **Dark Surface** (`#161b22`): Sidebar, header, secondary surface.
+- **Dark Border** (`#30363d`): Standard dark-mode border.
+- **Dark Fg** (`#e6edf3`): Primary text on dark.
+
+## 3. Typography Rules
+
+### Font Family
+- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
+- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
+- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Repo header, marketing hero |
+| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Page heading |
+| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Section heading |
+| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-section, panel header |
+| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Default text size — not 16px |
+| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Captions, file metadata |
+| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Code blocks, diff |
+| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Inline `code` spans |
+
+### Principles
+- **14px body, not 16px**: GitHub's prose density is its identity. The product reads at 14px to fit more rows in a viewport.
+- **Weight binary**: 400 for everything by default; 600 for headlines and emphasis. No 500, no 700.
+- **System fonts always**: never load a webfont for chrome — text must render instantly on slow connections.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Green)**
+- Background: `#1f883d`
+- Text: `#ffffff`
+- Border: 1px solid `rgba(31, 35, 40, 0.15)`
+- Padding: 5px 16px
+- Radius: 6px
+- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
+- Hover: background `#1a7f37`
+- Use: "Create repository", "Merge pull request"
+
+**Default**
+- Background: `#f6f8fa`
+- Text: `#1f2328`
+- Border: 1px solid `#d0d7de`
+- Padding: 5px 16px
+- Radius: 6px
+- Hover: background `#f3f4f6`, border `#d0d7de`
+
+**Outline (Blue Link Style)**
+- Background: `#ffffff`
+- Text: `#0969da`
+- Border: 1px solid `#d0d7de`
+- Hover: background `#0969da`, text `#ffffff`
+
+**Danger**
+- Background: `#ffffff`
+- Text: `#cf222e`
+- Border: 1px solid `#d0d7de`
+- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
+
+### Cards / Boxes
+- Background: `#ffffff`
+- Border: 1px solid `#d0d7de`
+- Radius: 6px
+- Padding: 16px (header) + 16px (body)
+- Header has a `#f6f8fa` strip with bottom border.
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#d0d7de`
+- Radius: 6px
+- Padding: 5px 12px
+- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
+
+### Status Pills (Issue / PR)
+- **Open**: background `#1a7f37`, text white, padding 4px 10px, radius 9999px.
+- **Closed**: background `#cf222e`, text white.
+- **Merged**: background `#8250df`, text white.
+- **Draft**: background `#6e7781`, text white.
+
+### Labels (Tags on Issues/PRs)
+- Padding: 0 7px
+- Radius: 9999px
+- Font: 12px / 500
+- Background and text are programmatic (label color → text computed for contrast).
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48.
+- **Page max-width**: 1280px (`Container-xl`).
+- **Sidebar**: 296px on desktop, collapses below 1012px.
+- **Row padding**: 16px horizontal, 12px vertical (lists are dense by design).
+
+## 6. Motion
+
+- **Duration**: 80ms for hover; 200ms for menu/popover open.
+- **Easing**: `ease-out` for opens, `ease-in` for closes.
+- **Avoided**: page-load animation, parallax, persistent micro-interactions. Things appear; they do not perform.

package/dist/designer/data/systems/github/components.html

@@ -0,0 +1,383 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GitHub — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/github. Every visible
+        value comes from tokens.css. GitHub's signature moves: true white
+        canvas, hairline borders (#d0d7de), Primer blue CTAs, GitHub green
+        for success/merge, system-ui fonts, 14px body density."
+    />
+
+    <style>
+      :root {
+        --bg:           #ffffff;
+        --surface:      #f6f8fa;
+        --surface-warm: var(--surface);
+
+        --fg:   #1f2328;
+        --fg-2: #1f2328;
+        --muted: #656d76;
+        --meta:  #656d76;
+
+        --border:      #d0d7de;
+        --border-soft: #d8dee4;
+
+        --accent:        #0969da;
+        --accent-on:     #ffffff;
+        --accent-hover:  #0550ae;
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+        --success: #1a7f37;
+        --warn:    #9a6700;
+        --danger:  #cf222e;
+
+        --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+        --text-xs:   12px;
+        --text-sm:   14px;
+        --text-base: 14px;
+        --text-lg:   16px;
+        --text-xl:   20px;
+        --text-2xl:  24px;
+        --text-3xl:  28px;
+        --text-4xl:  32px;
+
+        --leading-body:     1.5;
+        --leading-tight:    1.25;
+        --tracking-display: -0.01em;
+
+        --space-1:  4px;
+        --space-2:  8px;
+        --space-3:  12px;
+        --space-4:  16px;
+        --space-5:  20px;
+        --space-6:  24px;
+        --space-8:  32px;
+        --space-12: 48px;
+
+        --section-y-desktop: 64px;
+        --section-y-tablet:  48px;
+        --section-y-phone:   32px;
+
+        --radius-sm:   6px;
+        --radius-md:   6px;
+        --radius-lg:   12px;
+        --radius-pill: 9999px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
+
+        --focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
+
+        --motion-fast:   80ms;
+        --motion-base:   200ms;
+        --ease-standard: ease-out;
+
+        --container-max:            1280px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet:  16px;
+        --container-gutter-phone:   16px;
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border); }
+      @media (max-width: 1023px) {
+        .container { padding-inline: var(--container-gutter-tablet); }
+        section { padding-block: var(--section-y-tablet); }
+      }
+      @media (max-width: 639px) {
+        .container { padding-inline: var(--container-gutter-phone); }
+        section { padding-block: var(--section-y-phone); }
+      }
+
+      /* ─── Typography ─────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 600;
+        margin: 0;
+        line-height: var(--leading-tight);
+      }
+      h1 {
+        font-size: var(--text-4xl);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-xl);
+        /* 20px section heading: line-height 1.25, normal tracking. */
+      }
+      h3 {
+        font-size: var(--text-lg);
+        /* 16px sub-section/panel header: line-height 1.25.
+           Overrides the shared --leading-tight set above. */
+      }
+      p { margin: 0; }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); }
+      .body-xs { font-size: var(--text-xs); }
+      .eyebrow {
+        font-size: var(--text-xs);
+        font-weight: 600;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      code {
+        font-family: var(--font-mono);
+        font-size: 0.85em;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        padding: 1px 4px;
+      }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+
+      /* ─── Buttons ────────────────────────────── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 5px 16px;
+        border-radius: var(--radius-sm);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        font-weight: 400;
+        line-height: 1.5;
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: background-color var(--motion-fast) var(--ease-standard),
+                    border-color var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      .btn-primary {
+        background: #1f883d;
+        color: #ffffff;
+        border-color: rgba(31, 35, 40, 0.15);
+        box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
+        font-weight: 500;
+      }
+      .btn-primary:hover { background: var(--success); }
+      .btn-default {
+        background: var(--surface);
+        color: var(--fg);
+        border-color: var(--border);
+      }
+      .btn-default:hover { background: #f3f4f6; }
+      .btn-outline {
+        background: var(--bg);
+        color: var(--accent);
+        border-color: var(--border);
+      }
+      .btn-outline:hover { background: var(--accent); color: white; }
+
+      /* ─── Status pills ───────────────────────── */
+      .status-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-1);
+        padding: 4px 10px;
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        color: white;
+        line-height: 1;
+      }
+      .status-open    { background: #1a7f37; }
+      .status-closed  { background: #cf222e; }
+      .status-merged  { background: #8250df; }
+      .status-draft   { background: #6e7781; }
+
+      /* ─── Box / Card ─────────────────────────── */
+      .box {
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        overflow: hidden;
+      }
+      .box-header {
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+        padding: var(--space-3) var(--space-4);
+        font-weight: 600;
+        font-size: var(--text-sm);
+      }
+      .box-body { padding: var(--space-4); }
+
+      /* ─── Inputs ─────────────────────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
+      .field input {
+        background: var(--bg);
+        color: var(--fg);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        padding: 5px 12px;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        outline: none;
+        transition: border-color var(--motion-fast) var(--ease-standard),
+                    box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .field input::placeholder { color: var(--muted); }
+      .field input:focus {
+        border-color: var(--accent);
+        box-shadow: var(--focus-ring);
+      }
+
+      /* ─── Layout ─────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1.2fr 1fr;
+        gap: var(--space-8);
+        align-items: start;
+      }
+      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-4);
+      }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-4); flex-wrap: wrap; }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- HERO -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">Reference fixture · github</p>
+            <h1>Where the world builds software.</h1>
+            <p class="body-muted" style="max-width:48ch;font-size:var(--text-lg);line-height:1.5;margin-top:var(--space-3)">
+              Millions of developers and companies build, ship, and maintain
+              their software on GitHub. Every value below comes from tokens.css
+              — no raw hex, no off-token type.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">Sign up for free</a>
+              <a href="./DESIGN.md" class="btn btn-default">Read the spec</a>
+            </div>
+          </div>
+
+          <aside>
+            <div class="box">
+              <div class="box-header">open-design / design-systems</div>
+              <div class="box-body stack-3">
+                <div style="display:flex;align-items:center;justify-content:space-between">
+                  <span class="body-sm" style="font-weight:600;color:var(--accent)">Pull requests</span>
+                  <span class="status-pill status-open">Open</span>
+                </div>
+                <div style="font-size:var(--text-xs);color:var(--muted)">
+                  #1652 · feat: add structured tokens for 5 brands
+                </div>
+                <div style="font-size:var(--text-xs);color:var(--muted)">
+                  #1653 · feat: add batch 2 token fixtures
+                </div>
+                <div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
+                  <span class="status-pill status-merged">Merged</span>
+                  <span class="status-pill status-draft">Draft</span>
+                  <span class="status-pill status-closed">Closed</span>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- FEATURES -->
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2>Dense, functional, system-native.</h2>
+        </div>
+
+        <div class="features-grid" style="margin-block-start:var(--space-6)">
+          <article class="box stack-3">
+            <div class="box-header">14px body</div>
+            <div class="box-body">
+              <p class="body-sm body-muted">
+                Not 16px — GitHub's prose density is its identity. 14px base
+                fits more content per viewport. system-ui renders instantly on
+                every OS with zero webfont load.
+              </p>
+            </div>
+          </article>
+          <article class="box stack-3">
+            <div class="box-header">Hairline borders</div>
+            <div class="box-body">
+              <p class="body-sm body-muted">
+                <code>#d0d7de</code> — every pane, panel, and card. Structure
+                communicated by stroke, not shadow. Density without visual noise.
+              </p>
+            </div>
+          </article>
+          <article class="box stack-3">
+            <div class="box-header">Primer blue + green</div>
+            <div class="box-body">
+              <p class="body-sm body-muted">
+                <code>#0969da</code> for all interactive affordances.
+                <code>#1a7f37</code> exclusively for success/merge states.
+                Both restrained — never decorative.
+              </p>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <!-- FORM -->
+      <section data-od-id="form">
+        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Primer form inputs.</h2>
+            <p class="body-muted" style="max-width:44ch">
+              Focus: border <code>#0969da</code> + <code>0 0 0 3px rgba(9,105,218,0.3)</code>.
+              5px 12px padding. 6px radius. Weight 600 label.
+            </p>
+          </div>
+          <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
+                onsubmit="event.preventDefault()">
+            <div class="field">
+              <label for="email">Email address</label>
+              <input id="email" type="email" placeholder="you@example.com" />
+            </div>
+            <div class="field">
+              <label for="repo">Repository name</label>
+              <input id="repo" type="text" placeholder="my-project" />
+            </div>
+            <div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
+              <button type="submit" class="btn btn-primary">Create repository</button>
+              <button type="button" class="btn btn-default">Cancel</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/dist/designer/data/systems/github/tokens.css

@@ -0,0 +1,125 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/github/tokens.css
+ *
+ * Structured token bindings for the "GitHub" brand — Primer foundations,
+ * functional density, blue-on-white precision.
+ *
+ * Brand identity in three sentences:
+ *   1. True white canvas (#ffffff) with a clean canvas-subtle (#f6f8fa)
+ *      secondary surface; hairline borders (#d0d7de) define every pane
+ *      — density over decoration, information over aesthetics.
+ *   2. System-ui stack throughout — no custom webfont; type renders at
+ *      instant on every OS; 14px body (not 16px) is the identity.
+ *   3. Primer blue (#0969da) for all interactive affordances; GitHub
+ *      green (#1a7f37) reserved for success/merge states only.
+ *
+ * Schema decisions:
+ *   - --bg: #ffffff; --surface: #f6f8fa (canvas-subtle).
+ *   - --surface-warm aliases --surface (no warm tier in Primer).
+ *   - --fg: #1f2328 (fg-default); --muted: #656d76 (fg-muted).
+ *   - --border: #d0d7de (1px hairline — the structural backbone).
+ *   - --accent: #0969da (Primer Blue); --accent-hover: #0550ae.
+ *   - --success bound to GitHub green (#1a7f37) — merge / open state.
+ *   - --tracking-display: -0.01em (only display-size headings use it).
+ *   - --text-base: 14px (the 14px body IS GitHub's product density).
+ *   - --radius-sm: 6px (universal Primer radius for buttons/inputs).
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg:           #ffffff;
+  --surface:      #f6f8fa;              /* canvas-subtle — sidebar, input bg */
+  --surface-warm: var(--surface);       /* Primer has no warm tier */
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg:   #1f2328;                      /* fg-default — ink */
+  --fg-2: #1f2328;                      /* same ink; no B-slot split in Primer */
+  --muted: #656d76;                     /* fg-muted — captions, file paths */
+  --meta:  #656d76;                     /* same muted tier */
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border:      #d0d7de;              /* border-default — hairline structural */
+  --border-soft: #d8dee4;             /* border-muted — inner panel dividers */
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  --accent:        #0969da;            /* Primer Blue — links, primary CTAs */
+  --accent-on:     #ffffff;
+  --accent-hover:  #0550ae;            /* darker pressed state */
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #1a7f37;                  /* GitHub green — merge, open, success */
+  --warn:    #9a6700;                  /* attention amber text */
+  --danger:  #cf222e;                  /* closed / destructive red */
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  /* System fonts only — no webfonts load in GitHub. */
+  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* Type scale — DESIGN.md §Typography.
+   * GitHub's prose density: 14px body (not 16px). Display sits at 32px.
+   * h2 (20px) and h3 (16px) collapse close together for density. */
+  --text-xs:   12px;                   /* body-small — captions, metadata */
+  --text-sm:   14px;                   /* body — default UI (GitHub's base) */
+  --text-base: 14px;                   /* body baseline = 14px for density */
+  --text-lg:   16px;                   /* h3 / panel header */
+  --text-xl:   20px;                   /* h2 — section heading */
+  --text-2xl:  24px;                   /* h1 — page heading */
+  --text-3xl:  28px;                   /* subpage display */
+  --text-4xl:  32px;                   /* display — repo header / hero */
+
+  /* Leading + tracking.
+   * GitHub uses 1.25 for headings (tight-but-readable), 1.5 for body.
+   * Only display gets the -0.01em tracking. */
+  --leading-body:     1.5;
+  --leading-tight:    1.25;
+  --tracking-display: -0.01em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  /* 4px base grid — Primer spacing. Row padding 16px h, 12px v. */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-12: 48px;
+
+  /* Section rhythm — GitHub marketing pages. */
+  --section-y-desktop: 64px;
+  --section-y-tablet:  48px;
+  --section-y-phone:   32px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  /* 6px is the universal Primer radius for all interactive elements. */
+  --radius-sm:   6px;
+  --radius-md:   6px;
+  --radius-lg:   12px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  /* GitHub uses hairline borders, not shadows, as the primary depth
+     signal. --elev-raised is a whisper for the rare floating element. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  /* Primer focus: 3px rgba ring on the accent color. */
+  --focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  /* GitHub avoids animation. 80ms hover, 200ms open — short and purposeful. */
+  --motion-fast:   80ms;
+  --motion-base:   200ms;
+  --ease-standard: ease-out;
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max:            1280px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet:  16px;
+  --container-gutter-phone:   16px;
+}