@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,204 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/runwayml/tokens.css
+ *
+ * Structured token bindings for the "Runway" brand — a cinematic,
+ * editorial-cinema dark canvas where photography (and AI-generated
+ * video) is the design and the chrome is intentionally invisible.
+ *
+ * Brand identity in three sentences:
+ *   1. Pure-black canvas (#000000) under bright pure-white type
+ *      (#ffffff), with cool blue-gray neutrals (#767d88 / #7d848e)
+ *      for the entire supporting text ramp — never warm gray.
+ *   2. Single typeface system: abcNormal at 400 / 450 / 500 / 600
+ *      (no bold) handles everything from 48px display down to 11px
+ *      uppercase tags. Hierarchy comes from size + case + tracking,
+ *      not weight.
+ *   3. Zero shadows, near-invisible borders (#27272a hairline), and
+ *      sharp 4–8px corners — depth comes from photographic content
+ *      and dark-vs-light section alternation, never from CSS blur.
+ *
+ * Schema decisions:
+ *   - --bg: #000000; --surface: #1a1a1a (dark card surface);
+ *     --surface-warm: #030303 (the rarely-used third-tier dark, an
+ *     "even darker" panel surface — this brand does not have a warm
+ *     temperature, so the B-slot reads as a parallel cool tier).
+ *   - --fg: #ffffff; --fg-2: #e9ecf2 (Cool Cloud — alt heading tone);
+ *     --muted: #767d88 (Cool Slate); --meta: #7d848e (Mid Slate).
+ *   - --border: #27272a (Border Dark); --border-soft: #1a1a1a (row
+ *     separator that blends into the dark surface — "barely visible
+ *     containment", per DESIGN.md §4).
+ *   - --accent: #ffffff. Runway has no decorative accent color; the
+ *     highest-signal surface in the system is pure white against
+ *     black. Hover/active states dim toward Cool Cloud / Cool Silver
+ *     rather than mixing in a hue.
+ *   - --font-display / --font-body bind to abcNormal — DESIGN.md §3
+ *     mandates a single typeface; Inter / DM Sans are documented
+ *     external substitutes for the custom face.
+ *   - --tracking-display: -0.025em (-1.2px at 48px hero per
+ *     DESIGN.md §3 hierarchy table).
+ *   - --leading-tight: 1.0 (film-title compression on display sizes);
+ *     --leading-body: 1.4 (mid-range of the documented 1.30–1.50
+ *     band — body text stays editorial-tight, never magazine-loose).
+ *   - --section-y-desktop: 78px ("cinema-grade breathing" — the
+ *     largest discrete step on the documented spacing scale).
+ *   - --radius-sm: 4px (sharp / button); --radius-md: 8px (card,
+ *     image); --radius-lg: 16px (alert containers only — DESIGN.md §4).
+ *   - --elev-raised: none. The brand do/don't is explicit: zero
+ *     shadows. We override the schema's blur fallback so any
+ *     component that reaches for `var(--elev-raised)` produces no
+ *     shadow, preserving the cinematic flat-vs-photographic depth
+ *     model. --elev-ring stays available for the "alert container"
+ *     case where a hairline ring substitutes for a border.
+ *   - --container-max: 1600px (cinema-wide, per DESIGN.md §5 grid).
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels) ──────────────────────────────────────────
+   * Dark-dominant. The canvas is true black; cards lift onto Dark
+   * Surface (#1a1a1a) without a shadow or border. --surface-warm is
+   * the schema's B-slot for a tertiary tier; runway has no warm
+   * temperature, so we bind it to Deep Black (#030303) — a parallel
+   * "even darker" panel used for layered dark containers. */
+  --bg:           #000000;             /* Runway Black — primary canvas */
+  --surface:      #1a1a1a;             /* Dark Surface — card / lifted container */
+  --surface-warm: #030303;             /* Deep Black — third-tier layered panel */
+
+  /* ─── Foreground (4 levels) ───────────────────────────────────────
+   * Pure white anchors the ramp; Cool Cloud is a near-imperceptible
+   * alt for headings; the muted / meta tiers are the brand's
+   * signature cool-blue grays (never warm). */
+  --fg:    #ffffff;                    /* Pure White — primary type, brand mark */
+  --fg-2:  #e9ecf2;                    /* Cool Cloud — alt heading tone */
+  --muted: #767d88;                    /* Cool Slate — secondary body text */
+  --meta:  #7d848e;                    /* Mid Slate — tertiary, metadata */
+
+  /* ─── Border (2 levels) ───────────────────────────────────────────
+   * Per DESIGN.md §4: "barely visible containment". --border is the
+   * single dark-mode border value; --border-soft blends almost into
+   * the card surface so row separators do not visually compete. */
+  --border:      #27272a;              /* Border Dark — alert / standard edge */
+  --border-soft: #1a1a1a;              /* matches surface — inner row separator */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Runway has no decorative color — DESIGN.md §2 is explicit ("None
+   * in the interface. Visual richness comes entirely from
+   * photographic content"). Pure white IS the brand's high-signal
+   * accent, used on CTA fills and the focus ring. Hover/active dim
+   * toward the cool-silver neutrals rather than mixing in any hue. */
+  --accent:        #ffffff;            /* Pure White — sole interface accent */
+  --accent-on:     #000000;            /* black type on white CTA fill */
+  --accent-hover:  #e9ecf2;            /* Cool Cloud — hover dim */
+  --accent-active: #c9ccd1;            /* Cool Silver — pressed dim */
+
+  /* ─── Semantic ────────────────────────────────────────────────────
+   * Runway's UI does not surface state colors in its public surface;
+   * we inherit the schema defaults so any utility/admin chrome the
+   * fixture spawns still resolves. Keep semantic coverage <5% of any
+   * surface — this is not a brand color tier. */
+  --success: #16a34a;
+  --warn:    #eab308;
+  --danger:  #dc2626;
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * Single typeface commitment. DESIGN.md §3: "abcNormal handles
+   * every text role." We list the documented external substitutes
+   * (Inter, DM Sans) as the next layer of the fallback chain so the
+   * fixture renders predictably on machines without the custom face. */
+  --font-display: "abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-body:    "abcNormal", "abcNormal Fallback", "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale — direct map of DESIGN.md §3 hierarchy table.
+   *   11px micro/tag (uppercase, weight 450) → --text-xs
+   *   13px small description                 → --text-sm
+   *   16px body / button                     → --text-base
+   *   20px feature title                     → --text-lg
+   *   24px card title                        → --text-xl
+   *   36px sub-heading                       → --text-2xl
+   *   40px section heading                   → --text-3xl
+   *   48px display / hero                    → --text-4xl */
+  --text-xs:   11px;
+  --text-sm:   13px;
+  --text-base: 16px;
+  --text-lg:   20px;
+  --text-xl:   24px;
+  --text-2xl:  36px;
+  --text-3xl:  40px;
+  --text-4xl:  48px;
+
+  /* Leading + tracking.
+   *   --leading-tight: 1.0 → film-title compression on display sizes.
+   *   --leading-body: 1.4 → mid-range of DESIGN.md's documented
+   *     1.30–1.50 body band; intentionally editorial-tight.
+   *   --tracking-display: -0.025em → -1.2px at 48px hero per
+   *     DESIGN.md §3 hierarchy table. */
+  --leading-body:     1.4;
+  --leading-tight:    1.0;
+  --tracking-display: -0.025em;
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * 8px base unit per DESIGN.md §5 — the schema's 4px-grid scale
+   * maps cleanly. Runway's documented scale (4/6/8/12/16/20/24/28/
+   * 32/48/64/78) lands on every required step except 6/28/64/78,
+   * which live inline in components (no token name needed). */
+  --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 — "cinema-grade breathing". 78px on desktop is
+   * the largest discrete step on the documented scale, creating the
+   * scrolling-between-scenes pacing called out in DESIGN.md §5. */
+  --section-y-desktop: 78px;
+  --section-y-tablet:  48px;
+  --section-y-phone:   32px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * DESIGN.md §5 documents four tiers: 4px sharp (buttons), 6–8px
+   * comfortable (containers/images), 16px generous (alerts). The
+   * pill tier is preserved at the schema default — Runway forbids
+   * pill-shaped UI ("Don't use pill-shaped radius"), so the token
+   * exists purely so cross-brand components resolve cleanly. */
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   16px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ───────────────────────────────────────────────────
+   * DESIGN.md §6 is explicit: "Runway uses zero shadows." We honor
+   * that by overriding --elev-raised to `none` (depth comes from
+   * dark/light section alternation and photographic depth of field,
+   * never from CSS blur). --elev-ring remains as a hairline ring so
+   * the documented "alert container" case still has a treatment. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: none;
+
+  /* ─── Focus ───────────────────────────────────────────────────────
+   * White ring on dark canvas — the only chromatic affordance the
+   * brand permits. 60% transparency keeps the ring readable without
+   * looking like a fill. */
+  --focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 60%);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Slightly slower base than the schema default — cinematic pacing
+   * favors deliberate state changes over instant snap. Easing stays
+   * on the standard curve so micro-interactions still feel
+   * mechanical-precise rather than springy. */
+  --motion-fast:   150ms;
+  --motion-base:   220ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * Cinema-wide container — DESIGN.md §5: "up to 1600px". Gutters
+   * progressively shrink from 48px desktop → 16px phone so the
+   * full-bleed photography hero can stay edge-to-edge. */
+  --container-max:            1600px;
+  --container-gutter-desktop: 48px;
+  --container-gutter-tablet:  24px;
+  --container-gutter-phone:   16px;
+}

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

@@ -0,0 +1,360 @@
+# Design System Inspired by Sanity
+
+> Category: Backend & Data
+> Headless CMS. Red accent, content-first editorial layout.
+
+## 1. Visual Theme & Atmosphere
+
+Sanity's website is a developer-content platform rendered as a nocturnal command center -- dark, precise, and deeply structured. The entire experience sits on a near-black canvas (`#0b0b0b`) that reads less like a "dark mode toggle" and more like the natural state of a tool built for people who live in terminals. Where most CMS marketing pages reach for friendly pastels and soft illustration, Sanity leans into the gravity of its own product: structured content deserves a structured stage.
+
+The signature typographic voice is waldenburgNormal -- a distinctive, slightly geometric sans-serif with tight negative letter-spacing (-0.32px to -4.48px at display sizes) that gives headlines a compressed, engineered quality. At 112px hero scale with -4.48px tracking, the type feels almost machined -- like precision-cut steel letterforms. This is paired with IBM Plex Mono for code and technical labels, creating a dual-register voice: editorial authority meets developer credibility.
+
+What makes Sanity distinctive is the interplay between its monochromatic dark palette and vivid, saturated accent punctuation. The neutral scale runs from pure black through a tightly controlled gray ramp (`#0b0b0b` -> `#212121` -> `#353535` -> `#797979` -> `#b9b9b9` -> `#ededed` -> `#ffffff`) with no warm or cool bias -- just pure, achromatic precision. Against this disciplined backdrop, a neon green accent (display-p3 green) and electric blue (`#0052ef`) land with the impact of signal lights in a dark control room. The orange-red CTA (`#f36458`) provides the only warm touch in an otherwise cool system.
+
+**Key Characteristics:**
+- Near-black canvas (`#0b0b0b`) as the default, natural environment -- not a dark "mode" but the primary identity
+- waldenburgNormal with extreme negative tracking at display sizes, creating a precision-engineered typographic voice
+- Pure achromatic gray scale -- no warm or cool undertones, pure neutral discipline
+- Vivid accent punctuation: neon green, electric blue (`#0052ef`), and coral-red (`#f36458`) against the dark field
+- Pill-shaped primary buttons (99999px radius) contrasting with subtle rounded rectangles (3-6px) for secondary actions
+- IBM Plex Mono as the technical counterweight to the editorial display face
+- Full-bleed dark sections with content contained in measured max-width containers
+- Hover states that shift to electric blue (`#0052ef`) across all interactive elements -- a consistent "activation" signal
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Sanity Black** (`#0b0b0b`): The primary canvas and dominant surface color. Not pure black but close enough to feel absolute. The foundation of the entire visual identity.
+- **Pure Black** (`#000000`): Used for maximum-contrast moments, deep overlays, and certain border accents.
+- **Sanity Red** (`#f36458`): The primary CTA and brand accent -- a warm coral-red that serves as the main call-to-action color. Used for "Get Started" buttons and primary conversion points.
+
+### Accent & Interactive
+- **Electric Blue** (`#0052ef`): The universal hover/active state color across the entire system. Buttons, links, and interactive elements all shift to this blue on hover. Also used as `--color-blue-700` for focus rings and active states.
+- **Light Blue** (`#55beff` / `#afe3ff`): Secondary blue variants used for accent backgrounds, badges, and dimmed blue surfaces.
+- **Neon Green** (`color(display-p3 .270588 1 0)`): A vivid, wide-gamut green used as `--color-fg-accent-green` for success states and premium feature highlights. Falls back to `#19d600` in sRGB.
+- **Accent Magenta** (`color(display-p3 .960784 0 1)`): A vivid wide-gamut magenta for specialized accent moments.
+
+### Surface & Background
+- **Near Black** (`#0b0b0b`): Default page background and primary surface.
+- **Dark Gray** (`#212121`): Elevated surface color for cards, secondary containers, input backgrounds, and subtle layering above the base canvas.
+- **Medium Dark** (`#353535`): Tertiary surface and border color for creating depth between dark layers.
+- **Pure White** (`#ffffff`): Used for inverted sections, light-on-dark text, and specific button surfaces.
+- **Light Gray** (`#ededed`): Light surface for inverted/light sections and subtle background tints.
+
+### Neutrals & Text
+- **White** (`#ffffff`): Primary text color on dark surfaces, maximum legibility.
+- **Silver** (`#b9b9b9`): Secondary text, body copy on dark surfaces, muted descriptions, and placeholder text.
+- **Medium Gray** (`#797979`): Tertiary text, metadata, timestamps, and de-emphasized content.
+- **Charcoal** (`#212121`): Text on light/inverted surfaces.
+- **Near Black Text** (`#0b0b0b`): Primary text on white/light button surfaces.
+
+### Semantic
+- **Error Red** (`#dd0000`): Destructive actions, validation errors, and critical warnings -- a pure, high-saturation red.
+- **GPC Green** (`#37cd84`): Privacy/compliance indicator green.
+- **Focus Ring Blue** (`#0052ef`): Focus ring color for accessibility, matching the interactive blue.
+
+### Border System
+- **Dark Border** (`#0b0b0b`): Primary border on dark containers -- barely visible, maintaining minimal containment.
+- **Subtle Border** (`#212121`): Standard border for inputs, textareas, and card edges on dark surfaces.
+- **Medium Border** (`#353535`): More visible borders for emphasized containment and dividers.
+- **Light Border** (`#ffffff`): Border on inverted/light elements or buttons needing contrast separation.
+- **Orange Border** (`color(display-p3 1 0.3333 0)`): Special accent border for highlighted/featured elements.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Headline**: `waldenburgNormal`, fallback: `waldenburgNormal Fallback, ui-sans-serif, system-ui`
+- **Body / UI**: `waldenburgNormal`, fallback: `waldenburgNormal Fallback, ui-sans-serif, system-ui`
+- **Code / Technical**: `IBM Plex Mono`, fallback: `ibmPlexMono Fallback, ui-monospace`
+- **Fallback / CJK**: `Helvetica`, fallback: `Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei`
+
+*Note: waldenburgNormal is a custom typeface. For external implementations, use Inter or Space Grotesk as the sans substitute (geometric, slightly condensed feel). IBM Plex Mono is available on Google Fonts.*
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | waldenburgNormal | 112px (7rem) | 400 | 1.00 (tight) | -4.48px | Maximum impact, compressed tracking |
+| Hero Secondary | waldenburgNormal | 72px (4.5rem) | 400 | 1.05 (tight) | -2.88px | Large section headers |
+| Section Heading | waldenburgNormal | 48px (3rem) | 400 | 1.08 (tight) | -1.68px | Primary section anchors |
+| Heading Large | waldenburgNormal | 38px (2.38rem) | 400 | 1.10 (tight) | -1.14px | Feature section titles |
+| Heading Medium | waldenburgNormal | 32px (2rem) | 425 | 1.24 (tight) | -0.32px | Card titles, subsection headers |
+| Heading Small | waldenburgNormal | 24px (1.5rem) | 425 | 1.24 (tight) | -0.24px | Smaller feature headings |
+| Subheading | waldenburgNormal | 20px (1.25rem) | 425 | 1.13 (tight) | -0.2px | Sub-section markers |
+| Body Large | waldenburgNormal | 18px (1.13rem) | 400 | 1.50 | -0.18px | Intro paragraphs, descriptions |
+| Body | waldenburgNormal | 16px (1rem) | 400 | 1.50 | normal | Standard body text |
+| Body Small | waldenburgNormal | 15px (0.94rem) | 400 | 1.50 | -0.15px | Compact body text |
+| Caption | waldenburgNormal | 13px (0.81rem) | 400-500 | 1.30-1.50 | -0.13px | Metadata, descriptions, tags |
+| Small Caption | waldenburgNormal | 12px (0.75rem) | 400 | 1.50 | -0.12px | Footnotes, timestamps |
+| Micro / Label | waldenburgNormal | 11px (0.69rem) | 500-600 | 1.00-1.50 | normal | Uppercase labels, tiny badges |
+| Code Body | IBM Plex Mono | 15px (0.94rem) | 400 | 1.50 | normal | Code blocks, technical content |
+| Code Caption | IBM Plex Mono | 13px (0.81rem) | 400-500 | 1.30-1.50 | normal | Inline code, small technical labels |
+| Code Micro | IBM Plex Mono | 10-12px | 400 | 1.30-1.50 | normal | Tiny code labels, uppercase tags |
+
+### Principles
+- **Extreme negative tracking at scale**: Display headings at 72px+ use aggressive negative letter-spacing (-2.88px to -4.48px), creating a tight, engineered quality that distinguishes Sanity from looser editorial typography.
+- **Single font, multiple registers**: waldenburgNormal handles both editorial display and functional UI text. The weight range is narrow (400-425 for most, 500-600 only for tiny labels), keeping the voice consistent.
+- **OpenType feature control**: Typography uses deliberate feature settings including `"cv01", "cv11", "cv12", "cv13", "ss07"` for display sizes and `"calt" 0` for body text, fine-tuning character alternates for different contexts.
+- **Tight headings, relaxed body**: Headings use 1.00-1.24 line-height (extremely tight), while body text breathes at 1.50. This contrast creates clear visual hierarchy.
+- **Uppercase for technical labels**: IBM Plex Mono captions and small labels frequently use `text-transform: uppercase` with tight line-heights, creating a "system readout" aesthetic for technical metadata.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA (Pill)**
+- Background: Sanity Red (`#f36458`)
+- Text: White (`#ffffff`)
+- Padding: 8px 16px
+- Border Radius: 99999px (full pill)
+- Border: none
+- Hover: Electric Blue (`#0052ef`) background, white text
+- Font: 16px waldenburgNormal, weight 400
+
+**Secondary (Dark Pill)**
+- Background: Near Black (`#0b0b0b`)
+- Text: Silver (`#b9b9b9`)
+- Padding: 8px 12px
+- Border Radius: 99999px (full pill)
+- Border: none
+- Hover: Electric Blue (`#0052ef`) background, white text
+
+**Outlined (Light Pill)**
+- Background: White (`#ffffff`)
+- Text: Near Black (`#0b0b0b`)
+- Padding: 8px
+- Border Radius: 99999px (full pill)
+- Border: 1px solid `#0b0b0b`
+- Hover: Electric Blue (`#0052ef`) background, white text
+
+**Ghost / Subtle**
+- Background: Dark Gray (`#212121`)
+- Text: Silver (`#b9b9b9`)
+- Padding: 0px 12px
+- Border Radius: 5px
+- Border: 1px solid `#212121`
+- Hover: Electric Blue (`#0052ef`) background, white text
+
+**Uppercase Label Button**
+- Font: 11px waldenburgNormal, weight 600, uppercase
+- Background: transparent or `#212121`
+- Text: Silver (`#b9b9b9`)
+- Letter-spacing: normal
+- Used for tab-like navigation and filter controls
+
+### Cards
+
+**Dark Content Card**
+- Background: `#212121`
+- Border: 1px solid `#353535` or `#212121`
+- Border Radius: 6px
+- Padding: 24px
+- Text: White (`#ffffff`) for titles, Silver (`#b9b9b9`) for body
+- Hover: subtle border color shift or elevation change
+
+**Feature Card (Full-bleed)**
+- Background: `#0b0b0b` or full-bleed image/gradient
+- Border: none or 1px solid `#212121`
+- Border Radius: 12px
+- Padding: 32-48px
+- Contains large imagery with overlaid text
+
+### Inputs
+
+**Text Input / Textarea**
+- Background: Near Black (`#0b0b0b`)
+- Text: Silver (`#b9b9b9`)
+- Border: 1px solid `#212121`
+- Padding: 8px 12px
+- Border Radius: 3px
+- Focus: outline with `var(--focus-ring-color)` (blue), 2px solid
+- Focus background: shifts to deep cyan (`#072227`)
+
+**Search Input**
+- Background: `#0b0b0b`
+- Text: Silver (`#b9b9b9`)
+- Padding: 0px 12px
+- Border Radius: 3px
+- Placeholder: Medium Gray (`#797979`)
+
+### Navigation
+
+**Top Navigation**
+- Background: Near Black (`#0b0b0b`) with backdrop blur
+- Height: auto, compact padding
+- Logo: left-aligned, Sanity wordmark
+- Links: waldenburgNormal 16px, Silver (`#b9b9b9`)
+- Link Hover: Electric Blue via `--color-fg-accent-blue`
+- CTA Button: Sanity Red pill button right-aligned
+- Separator: 1px border-bottom `#212121`
+
+**Footer**
+- Background: Near Black (`#0b0b0b`)
+- Multi-column link layout
+- Links: Silver (`#b9b9b9`), hover to blue
+- Section headers: White (`#ffffff`), 13px uppercase IBM Plex Mono
+
+### Badges / Pills
+
+**Neutral Subtle**
+- Background: White (`#ffffff`)
+- Text: Near Black (`#0b0b0b`)
+- Padding: 8px
+- Font: 13px
+- Border Radius: 99999px
+
+**Neutral Filled**
+- Background: Near Black (`#0b0b0b`)
+- Text: White (`#ffffff`)
+- Padding: 8px
+- Font: 13px
+- Border Radius: 99999px
+
+## 5. Layout Principles
+
+### Spacing System
+Base unit: **8px**
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| space-1 | 1px | Hairline gaps, border-like spacing |
+| space-2 | 2px | Minimal internal padding |
+| space-3 | 4px | Tight component internal spacing |
+| space-4 | 6px | Small element gaps |
+| space-5 | 8px | Base unit -- button padding, input padding, badge padding |
+| space-6 | 12px | Standard component gap, button horizontal padding |
+| space-7 | 16px | Section internal padding, card spacing |
+| space-8 | 24px | Large component padding, card internal spacing |
+| space-9 | 32px | Section padding, container gutters |
+| space-10 | 48px | Large section vertical spacing |
+| space-11 | 64px | Major section breaks |
+| space-12 | 96-120px | Hero vertical padding, maximum section spacing |
+
+### Grid & Container
+- Max content width: ~1440px (inferred from breakpoints)
+- Page gutter: 32px on desktop, 16px on mobile
+- Content sections use full-bleed backgrounds with centered, max-width content
+- Multi-column layouts: 2-3 columns on desktop, single column on mobile
+- Card grids: CSS Grid with consistent gaps (16-24px)
+
+### Whitespace Philosophy
+Sanity uses aggressive vertical spacing between sections (64-120px) to create breathing room on the dark canvas. Within sections, spacing is tighter (16-32px), creating dense information clusters separated by generous voids. This rhythm gives the page a "slides" quality -- each section feels like its own focused frame.
+
+### Border Radius Scale
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| radius-xs | 3px | Inputs, textareas, subtle rounding |
+| radius-sm | 4-5px | Secondary buttons, small cards, tags |
+| radius-md | 6px | Standard cards, containers |
+| radius-lg | 12px | Large cards, feature containers, forms |
+| radius-pill | 99999px | Primary buttons, badges, nav pills |
+
+## 6. Depth & Elevation
+
+### Shadow System
+
+| Level | Value | Usage |
+|-------|-------|-------|
+| Level 0 (Flat) | none | Default state for most elements -- dark surfaces create depth through color alone |
+| Level 1 (Subtle) | 0px 0px 0px 1px `#212121` | Border-like shadow for minimal containment without visible borders |
+| Level 2 (Focus) | 0 0 0 2px `var(--color-blue-500)` | Focus ring for inputs and interactive elements |
+| Level 3 (Overlay) | Backdrop blur + semi-transparent dark | Navigation overlay, modal backgrounds |
+
+### Depth Philosophy
+Sanity's depth system is almost entirely **colorimetric** rather than shadow-based. Elevation is communicated through surface color shifts: `#0b0b0b` (ground) -> `#212121` (elevated) -> `#353535` (prominent) -> `#ffffff` (inverted/highest). This approach is native to dark interfaces where traditional drop shadows would be invisible. The few shadows that exist are ring-based (0px 0px 0px Npx) or blur-based (backdrop-filter) rather than offset shadows, maintaining the flat, precision-engineered aesthetic.
+
+Border-based containment (1px solid `#212121` or `#353535`) serves as the primary spatial separator, with the border darkness calibrated to be visible but not dominant. The system avoids "floating card" aesthetics -- everything feels mounted to the surface rather than hovering above it.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the achromatic gray scale as the foundation -- maintain pure neutral discipline with no warm/cool tinting
+- Apply Electric Blue (`#0052ef`) consistently as the universal hover/active state across all interactive elements
+- Use extreme negative letter-spacing (-2px to -4.48px) on display headings 48px and above
+- Keep primary CTAs as full-pill shapes (99999px radius) with the coral-red (`#f36458`)
+- Use IBM Plex Mono uppercase for technical labels, tags, and system metadata
+- Communicate depth through surface color (dark-to-light) rather than shadows
+- Maintain generous vertical section spacing (64-120px) on the dark canvas
+- Use `"cv01", "cv11", "cv12", "cv13", "ss07"` OpenType features for display typography
+
+### Don't
+- Don't introduce warm or cool color tints to the neutral scale -- Sanity's grays are pure achromatic
+- Don't use drop shadows for elevation -- dark interfaces demand colorimetric depth
+- Don't apply border-radius between 13px and 99998px -- the system jumps from 12px (large card) directly to pill (99999px)
+- Don't mix the coral-red CTA with the electric blue interactive color in the same element
+- Don't use heavy font weights (700+) -- the system maxes out at 600 and only for 11px uppercase labels
+- Don't place light text on light surfaces or dark text on dark surfaces without checking the gray-on-gray contrast ratio
+- Don't use traditional offset box-shadows -- ring shadows (0 0 0 Npx) or border-based containment only
+- Don't break the tight line-height on headings -- 1.00-1.24 is the range, never go to 1.5+ for display text
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Behavior |
+|------|-------|----------|
+| Desktop XL | >= 1640px | Full layout, maximum content width |
+| Desktop | >= 1440px | Standard desktop layout |
+| Desktop Compact | >= 1200px | Slightly condensed desktop |
+| Laptop | >= 1100px | Reduced column widths |
+| Tablet Landscape | >= 960px | 2-column layouts begin collapsing |
+| Tablet | >= 768px | Transition zone, some elements stack |
+| Mobile Large | >= 720px | Near-tablet layout |
+| Mobile | >= 480px | Single-column, stacked layout |
+| Mobile Small | >= 376px | Minimum supported width |
+
+### Collapsing Strategy
+- **Navigation**: Horizontal links collapse to hamburger menu below 768px
+- **Hero typography**: Scales from 112px -> 72px -> 48px -> 38px across breakpoints, maintaining tight letter-spacing ratios
+- **Grid layouts**: 3-column -> 2-column at ~960px, single-column below 768px
+- **Card grids**: Horizontal scrolling on mobile instead of wrapping (preserving card aspect ratios)
+- **Section spacing**: Vertical padding reduces by ~40% on mobile (120px -> 64px -> 48px)
+- **Button sizing**: CTA pills maintain padding but reduce font size; ghost buttons stay fixed
+- **Code blocks**: Horizontal scroll with preserved monospace formatting
+
+### Mobile-Specific Adjustments
+- Full-bleed sections extend edge-to-edge with 16px internal gutters
+- Touch targets: minimum 44px for all interactive elements
+- Heading letter-spacing relaxes slightly at mobile sizes (less aggressive negative tracking)
+- Image containers switch from fixed aspect ratios to full-width with auto height
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+```
+Background:      #0b0b0b (near-black canvas)
+Surface:         #212121 (elevated cards/containers)
+Border:          #353535 (visible) / #212121 (subtle)
+Text Primary:    #ffffff (white on dark)
+Text Secondary:  #b9b9b9 (silver on dark)
+Text Tertiary:   #797979 (medium gray)
+CTA:             #f36458 (coral-red)
+Interactive:     #0052ef (electric blue, all hovers)
+Success:         #19d600 (green, sRGB fallback)
+Error:           #dd0000 (pure red)
+Light Surface:   #ededed / #ffffff (inverted sections)
+```
+
+### Example Prompts
+
+**Landing page section:**
+"Create a feature section with a near-black (#0b0b0b) background. Use a 48px heading in Inter with -1.68px letter-spacing, white text. Below it, 16px body text in #b9b9b9 with 1.50 line-height. Include a coral-red (#f36458) pill button with white text and a secondary dark (#0b0b0b) pill button with #b9b9b9 text. Both buttons hover to #0052ef blue."
+
+**Card grid:**
+"Build a 3-column card grid on a #0b0b0b background. Each card has a #212121 surface, 1px solid #353535 border, 6px border-radius, and 24px padding. Card titles are 24px white with -0.24px letter-spacing. Body text is 13px #b9b9b9. Add a 13px IBM Plex Mono uppercase tag in #797979 at the top of each card."
+
+**Form section:**
+"Design a contact form on a #0b0b0b background. Inputs have #0b0b0b background, 1px solid #212121 border, 3px border-radius, 8px 12px padding, and #b9b9b9 placeholder text. Focus state shows a 2px blue (#0052ef) ring. Submit button is a full-width coral-red (#f36458) pill. Include a 13px #797979 helper text below each field."
+
+**Navigation bar:**
+"Create a sticky top navigation on #0b0b0b with backdrop blur. Left: brand text in 15px white. Center/right: nav links in 16px #b9b9b9 that hover to blue. Far right: a coral-red (#f36458) pill CTA button. Bottom border: 1px solid #212121."
+
+### Iteration Guide
+1. **Start dark**: Begin with `#0b0b0b` background, `#ffffff` primary text, `#b9b9b9` secondary text
+2. **Add structure**: Use `#212121` surfaces and `#353535` borders for containment -- no shadows
+3. **Apply typography**: Inter (or Space Grotesk) with tight letter-spacing on headings, 1.50 line-height on body
+4. **Color punctuation**: Add `#f36458` for CTAs and `#0052ef` for all hover/interactive states
+5. **Refine spacing**: 8px base unit, 24-32px within sections, 64-120px between sections
+6. **Technical details**: Add IBM Plex Mono uppercase labels for tags and metadata
+7. **Polish**: Ensure all interactive elements hover to `#0052ef`, all buttons are pills or subtle 5px radius, borders are hairline (1px)