@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,294 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/supabase/tokens.css
+ *
+ * Structured token bindings for "Supabase" — the open-source Firebase
+ * alternative whose marketing surface reads like a dark-mode editor that
+ * grew up: near-black canvas (#171717), Postgres-emerald (#3ecf8e) reserved
+ * for the chromatic moments, Circular geometric sans for prose, Source
+ * Code Pro uppercase for the developer-console voice, and depth carried
+ * by a tight border hierarchy instead of drop shadows.
+ *
+ * Agents generating an artifact for Supabase should paste the `:root`
+ * block verbatim into the first `<style>` of the artifact, then reference
+ * everything via `var(--*)`.
+ *
+ * Brand-specific schema decisions (each bends a schema convention to
+ * match Supabase's voice rather than the cross-brand default):
+ *
+ *   1. `--bg: #171717` and `--surface: #1c1c1c` instead of pure black.
+ *      DESIGN.md §1: "deep black backgrounds (`#0f0f0f`, `#171717`)" but
+ *      "never pure black". The #1c1c1c surface gives cards a faint
+ *      luminance step above the page without warm-shifting; Supabase
+ *      has no warm tier, so `--surface-warm` aliases `--surface` rather
+ *      than introducing a tint that doesn't exist in the brand.
+ *
+ *   2. Four-level foreground ramp — `#fafafa → #b4b4b4 → #898989 →
+ *      #4d4d4d` — bound to `--fg / --fg-2 / --muted / --meta`. DESIGN.md
+ *      §2 documents exactly these four text tiers (Off White / Light
+ *      Gray / Mid Gray / Dark Gray) and §9 calls them out as the
+ *      primary / secondary / muted / heavy-secondary ramp. Binding them
+ *      independently (no aliasing) lets the marketing surface render
+ *      genuine four-tier hierarchy — the dark canvas hides any two-tier
+ *      collapse, so the differentiation is real.
+ *
+ *   3. `--border: #2e2e2e` and `--border-soft: #242424` as solid hex,
+ *      not rgba. DESIGN.md §6 makes border-as-depth THE depth system
+ *      ("depth comes from borders, not shadows") and §9 names #242424
+ *      as the subtle tier and #2e2e2e as the standard tier. The hex
+ *      form (instead of rgba over the dark bg) is intentional: it
+ *      keeps the border's luminance constant regardless of what surface
+ *      it sits on, which is the brand's "edges define" promise.
+ *
+ *   4. `--accent: #3ecf8e` — Supabase brand green, the Postgres-emerald
+ *      identity marker. Used SPARINGLY (DESIGN.md §1: "always as a
+ *      signal of 'this is Supabase' rather than as a decorative
+ *      element"). `--accent-on` is `#0f0f0f` (near-black), not the
+ *      schema default of `#ffffff`, because emerald at this luminance
+ *      reads with dark text far better than white — the contrast ratio
+ *      against the bright green is what makes the brand button legible.
+ *      `--accent-hover` binds to `#00c573`, the documented "green link"
+ *      color (DESIGN.md §2 Brand) — Supabase ships TWO emerald values
+ *      with semantic distinction (brand vs. interactive) and the
+ *      hover state is exactly where the interactive variant belongs.
+ *
+ *   5. `--font-display` and `--font-body` share the Circular stack.
+ *      Hierarchy comes from size + weight (400 for prose, 500 for
+ *      interactive), never from a separate display face. DESIGN.md §3
+ *      Principles: "There is no bold (700) in the detected system —
+ *      hierarchy is created through size, not weight."
+ *      `--font-mono: "Source Code Pro"` for the developer-console
+ *      voice — the uppercase technical labels with 1.2px tracking that
+ *      DESIGN.md §3 calls "the developer-console marker that connects
+ *      the marketing site to the product".
+ *
+ *   6. `--text-4xl: 72px` with `--leading-tight: 1.00`. DESIGN.md §3
+ *      makes the 1.00 hero line-height "the defining typographic
+ *      gesture — text that feels like a terminal command: dense,
+ *      efficient, no wasted vertical space." Tracking stays at
+ *      `normal` (per DESIGN.md §3 hero row) — Supabase reads dense
+ *      from the leading collapse, not from negative letter-spacing
+ *      like Vercel's `-0.05em`.
+ *
+ *   7. Section rhythm is generous: 128px desktop, 80px tablet, 48px
+ *      phone. DESIGN.md §5 names 90–128px desktop spacing as
+ *      "dramatic, cinematic pacing — each section is its own scene in
+ *      the dark void". The top of that range (128px) matches the
+ *      brand's confidence; the 48px phone floor is the documented
+ *      mobile collapse.
+ *
+ *   8. Radius scale 6 / 8 / 16 / 9999. DESIGN.md §5: standard 6px
+ *      (ghost buttons, secondary), comfortable 8px (cards), large 16px
+ *      (feature cards), pill 9999px (primary CTAs and tab indicators).
+ *      DESIGN.md §7 forbids the 16px tier on buttons — "pills (9999px)
+ *      or standard (6px), nothing in between". Component CSS enforces
+ *      that policy at the component level.
+ *
+ *   9. `--elev-raised` uses the brand's "border + minimal shadow"
+ *      compromise: `0 0 0 1px var(--border), 0 4px 12px rgba(0, 0, 0,
+ *      0.4)`. DESIGN.md §6 says Supabase "deliberately avoids shadows"
+ *      but uses `rgba(0, 0, 0, 0.1) 0px 4px 12px` for focus states —
+ *      we deepen that alpha for the raised tier so a card actually
+ *      separates from the dark canvas, while keeping the ring as the
+ *      primary depth signal.
+ *
+ *  10. `--focus-ring` is a 2px ring at `color-mix(var(--accent),
+ *      transparent 50%)` — the green-tinted halo that DESIGN.md §6
+ *      Level 3 names as the "brand-highlighted" elevation. On a near-
+ *      black canvas the schema's default (3px alpha glow over accent)
+ *      reads weak; 2px at 50% transparency lands at the documented
+ *      `rgba(62, 207, 142, 0.3)`-ish weight and stays unmistakably
+ *      Supabase.
+ *
+ * Source contracts:
+ *   - Standard token names: design-systems/_schema/tokens.schema.ts
+ *   - A2 fallback parity:   design-systems/_schema/defaults.css
+ *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
+ *
+ * Keep this file additive: never invent token names not also documented
+ * in DESIGN.md or the schema. Circular and Source Code Pro do not need
+ * a CDN reference here — the font stacks list Helvetica Neue / Menlo
+ * fallbacks so artifacts render acceptably even when the brand faces
+ * are not loaded, and any host that wants the real Circular face links
+ * it externally.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels — schema slot) ─────────────────────────────
+   * #171717 is the documented page canvas (DESIGN.md §1 "Dark"). The
+   * card surface bumps one luminance step to #1c1c1c so elevated
+   * containers carry a faint lift without warm-shifting — Supabase
+   * has no warm tier, so `--surface-warm` aliases `--surface` exactly
+   * the way Vercel's achromatic canvas does. */
+  --bg: #171717;
+  --surface: #1c1c1c;
+  --surface-warm: var(--surface);            /* alias — Supabase has no warm tier */
+
+  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
+   * Off White → Light Gray → Mid Gray → Dark Gray, the documented
+   * four-tier text scale from DESIGN.md §2. Each tier is independently
+   * bound (no aliasing) because Supabase genuinely uses four distinct
+   * text registers: heading white, body silver, caption gray, and
+   * tertiary metadata gray. The four-stop ramp is the typography
+   * system; collapsing it to two tiers would flatten the marketing
+   * surface's voice. */
+  --fg: #fafafa;                             /* Off White — primary text, headings */
+  --fg-2: #b4b4b4;                           /* Light Gray — secondary body, links */
+  --muted: #898989;                          /* Mid Gray — captions, footer, muted */
+  --meta: #4d4d4d;                           /* Dark Gray — tertiary metadata, disabled */
+
+  /* ─── Border (2 levels) ──────────────────────────────────────────
+   * Border-as-depth is THE depth system (DESIGN.md §6: "depth comes
+   * from borders, not shadows"). #2e2e2e is the standard card edge,
+   * #242424 the inner-row divider that "should not visually compete".
+   * Solid hex (not rgba over bg) keeps luminance constant regardless
+   * of what surface the border sits on. */
+  --border: #2e2e2e;                         /* standard border — cards, tabs, dividers */
+  --border-soft: #242424;                    /* subtle divider — inner row separators */
+
+  /* ─── Accent ─────────────────────────────────────────────────────
+   * Supabase brand emerald — the Postgres-green identity marker.
+   * Hard cap of ≤2 visible uses per screen (lint enforced) because
+   * DESIGN.md §7 forbids using green "to backgrounds or large
+   * surfaces — it's for borders, links, and small accents".
+   *
+   * `--accent-on` is `#0f0f0f` (near-black), NOT the schema default
+   * `#ffffff` — bright emerald reads with dark text far better than
+   * white, and #0f0f0f is the documented "near-black" button surface
+   * already in the brand's neutral scale.
+   *
+   * `--accent-hover` is `#00c573` — DESIGN.md §2 documents this as
+   * the "green link" interactive variant of the brand color. Mapping
+   * it to the hover state preserves the brand's distinction between
+   * identity-green (#3ecf8e) and interactive-green (#00c573). */
+  --accent: #3ecf8e;                         /* Supabase emerald — brand identity marker */
+  --accent-on: #0f0f0f;                      /* near-black label on bright emerald */
+  --accent-hover: #00c573;                   /* documented interactive green link variant */
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ───────────────────────────────────────────────────
+   * Supabase's marketing surface rarely renders state. DESIGN.md §7
+   * specifically forbids using the Radix warm tones (crimson, orange)
+   * as primary design elements — they exist purely as semantic
+   * tokens. We inherit the schema defaults rather than designing a
+   * custom warm palette that doesn't appear in the brand voice. */
+  --success: #16a34a;
+  --warn: #eab308;
+  --danger: #dc2626;
+
+  /* ─── Typography ─────────────────────────────────────────────────
+   * Circular is Supabase's signature face — a geometric sans-serif
+   * with rounded terminals that softens the technical edge.
+   * `--font-display` and `--font-body` share the stack; the Helvetica
+   * Neue / Helvetica / Arial fallbacks come straight from DESIGN.md
+   * §3 and ensure artifacts render legibly even when Circular is not
+   * loaded. Source Code Pro is the developer-console voice — the
+   * uppercase technical labels with 1.2px tracking that DESIGN.md §3
+   * calls "the marker that connects the marketing site to the
+   * product". Office Code Pro / Menlo fallbacks match DESIGN.md §3. */
+  --font-display: "Circular", "custom-font", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-body: "Circular", "custom-font", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono: "Source Code Pro", "Office Code Pro", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
+   * The scale tops out at 72px (display hero) and shoots straight up
+   * from 36px (section heading) — the missing intermediate steps are
+   * deliberate. Supabase reads BIG because the hero leading collapses
+   * to 1.00, not because the px count climbs gradually. */
+  --text-xs: 12px;                           /* small — fine print, code labels */
+  --text-sm: 14px;                           /* button, nav link, caption */
+  --text-base: 16px;                         /* body — standard reading */
+  --text-lg: 18px;                           /* sub-heading — secondary headings */
+  --text-xl: 24px;                           /* card title */
+  --text-2xl: 32px;                          /* mid-large heading */
+  --text-3xl: 36px;                          /* section heading */
+  --text-4xl: 72px;                          /* display hero — terminal-density */
+
+  /* `--leading-tight` is 1.00 — DESIGN.md §3 names this "the defining
+   * typographic gesture" and forbids relaxing it ("Don't increase
+   * hero line-height above 1.00 — the density is intentional").
+   * `--tracking-display` is `normal` (DESIGN.md §3 hero row) —
+   * Supabase reads dense from the leading collapse, not from negative
+   * letter-spacing like Vercel's -0.05em. */
+  --leading-body: 1.5;
+  --leading-tight: 1.00;
+  --tracking-display: normal;
+
+  /* ─── Spacing ────────────────────────────────────────────────────
+   * 4px-grid base scale. DESIGN.md §5 documents micro-stops (1px /
+   * 4px / 6px) that are too fine to belong in the shared schema —
+   * those are inlined per-component when needed. The 4/8/12/16/20/
+   * 24/32/48 tier covers the structural rhythm of cards and stacks. */
+  --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 — DESIGN.md §5: "Dramatic section spacing 90–128px
+   * creates a cinematic pacing — each section is its own scene in the
+   * dark void". We sit at the top of that range (128px desktop) to
+   * honor the brand confidence, drop to 80px on tablet, and 48px on
+   * phone (the documented mobile floor). */
+  --section-y-desktop: 128px;
+  --section-y-tablet: 80px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────
+   * DESIGN.md §5 radius scale: 6 / 8 / 11–12 / 16 / 9999. We bind
+   * the four schema tiers to 6 (ghost / functional / secondary), 8
+   * (cards / containers), 16 (feature cards / major containers),
+   * 9999 (primary CTAs and pill tabs). The 11–12px mid-panel tier is
+   * component-specific and not part of the shared schema. DESIGN.md
+   * §7 forbids in-between radii on buttons — components MUST pick
+   * pill or 6px, never 8/12/16. */
+  --radius-sm: 6px;                          /* ghost buttons, secondary, functional */
+  --radius-md: 8px;                          /* cards, containers */
+  --radius-lg: 16px;                         /* feature cards, major containers */
+  --radius-pill: 9999px;                     /* primary CTAs, tab indicators */
+
+  /* ─── Elevation (3 levels) ───────────────────────────────────────
+   * DESIGN.md §6: Supabase "deliberately avoids shadows" because they
+   * read as invisible on a dark canvas; depth is the border hierarchy
+   * (#242424 → #2e2e2e → #393939 → green-accent border). We map:
+   *
+   *   --elev-flat    no shadow (page background, text blocks)
+   *   --elev-ring    1px hairline ring at --border (the standard tier)
+   *   --elev-raised  ring + minimal ambient shadow (the brand's
+   *                  compromise: DESIGN.md's focus shadow alpha
+   *                  deepened from 0.1 to 0.4 so a card actually
+   *                  separates from the dark canvas at distance) */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 0 0 1px var(--border), 0 4px 12px rgba(0, 0, 0, 0.4);
+
+  /* ─── Focus ring ─────────────────────────────────────────────────
+   * 2px ring at `color-mix(var(--accent), transparent 50%)` — the
+   * green-tinted halo that DESIGN.md §6 Level 3 names the "brand-
+   * highlighted" elevation (`rgba(62, 207, 142, 0.3)`). On a near-
+   * black canvas the schema's default 3px alpha glow reads weak;
+   * 2px at 50% transparency lands at the documented weight and stays
+   * unmistakably Supabase without dominating the surface. */
+  --focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 50%);
+
+  /* ─── Motion ─────────────────────────────────────────────────────
+   * Two durations + one easing curve, per the anti-ai-slop "short,
+   * purposeful transitions (150–250ms) with stable easing". Supabase
+   * transitions are quick and unobtrusive — the brand reads as
+   * engineered, never choreographed. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ─────────────────────────────────────────────────────
+   * 1200px max content width — typical for marketing surfaces.
+   * Mobile gutter holds at 16px (instead of dropping to 12px) so
+   * code blocks and badges retain padding context on small screens;
+   * Supabase's developer-doc voice rarely edge-bleeds. */
+  --container-max: 1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 16px;
+}

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

@@ -0,0 +1,255 @@
+# Design System Inspired by Superhuman
+
+> Category: Developer Tools
+> Fast email client. Premium dark UI, keyboard-first, purple glow.
+
+## 1. Visual Theme & Atmosphere
+
+Superhuman's website feels like opening a luxury envelope — predominantly white, immaculately clean, with a single dramatic gesture of color that commands attention. The hero section is a cinematic purple gradient, a deep twilight wash of `#1b1938` that evokes the moment just before dawn, overlaid with confident white typography. Below this dramatic entrance, the rest of the site is almost entirely white canvas with dark charcoal text, creating a stark but refined reading experience.
+
+The typography is the true signature: Super Sans VF, a custom variable font with unconventional weight stops (460, 540, 600, 700) that sit between traditional font weight categories. Weight 460 — slightly heavier than regular but lighter than medium — is the workhorse, creating text that feels more confident than typical 400-weight but never aggressive. The tight line-heights (0.96 on display text) compress headlines into dense, powerful blocks, while generous 1.50 line-height on body text provides airy readability. This tension between compressed power and breathing room defines the Superhuman typographic voice.
+
+The design philosophy is maximum confidence through minimum decoration. Warm cream buttons (`#e9e5dd`) instead of bright CTAs, a near-absence of borders and shadows, and lavender purple (`#cbb7fb`) as the sole accent color. It's a productivity tool that markets itself like a luxury brand — every pixel earns its place, nothing is merely decorative. The brand naming convention extends to colors: the primary purple is called "Mysteria," straddling blue and purple with deliberate ambiguity.
+
+**Key Characteristics:**
+- Deep purple gradient hero (`#1b1938`) contrasting against a predominantly white content body
+- Super Sans VF variable font with non-standard weight stops (460, 540, 600, 700) — sits between conventional weight categories
+- Ultra-tight display line-height (0.96) creating compressed, powerful headlines
+- Warm Cream (`#e9e5dd`) buttons instead of bright/saturated CTAs — understated luxury
+- Lavender Purple (`#cbb7fb`) as the singular accent color — a soft, approachable purple
+- Minimal border-radius scale: only 8px and 16px — no micro-rounding, no pill shapes
+- Product screenshots dominate the content — the UI sells itself with minimal surrounding decoration
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Mysteria Purple** (`#1b1938`): Hero gradient background, deep purple that straddles blue-purple — the darkest expression of the brand
+- **Lavender Glow** (`#cbb7fb`): Primary accent and highlight color — soft purple used for emphasis, decorative elements, and interactive highlights
+- **Charcoal Ink** (`#292827`): Primary text and heading color on light surfaces — warm near-black with faint brown undertone
+
+### Secondary & Accent
+- **Amethyst Link** (`#714cb6`): Underlined link text — mid-range purple that connects to the brand palette while signaling interactivity
+- **Translucent White** (`color(srgb 1 1 1 / 0.95)`): Hero overlay text — near-white at 95% opacity for depth layering on dark surfaces
+- **Misted White** (`color(srgb 1 1 1 / 0.8)`): Secondary text on dark surfaces — 80% opacity white for hierarchy on the hero gradient
+
+### Surface & Background
+- **Pure White** (`#ffffff`): Primary page background — the dominant canvas color for all content sections
+- **Warm Cream** (`#e9e5dd`): Button background — a warm, neutral cream that avoids the coldness of pure gray
+- **Parchment Border** (`#dcd7d3`): Card and divider borders — warm light gray with slight pink undertone
+
+### Neutrals & Text
+- **Charcoal Ink** (`#292827`): Primary heading and body text on white surfaces
+- **Amethyst Link** (`#714cb6`): In-content links with underline decoration
+- **Translucent White 95%** (`color(srgb 1 1 1 / 0.95)`): Primary text on dark/purple surfaces
+- **Translucent White 80%** (`color(srgb 1 1 1 / 0.8)`): Secondary text on dark/purple surfaces
+
+### Semantic & Accent
+- Superhuman operates with extreme color restraint — Lavender Glow (`#cbb7fb`) is the only true accent
+- Interactive states are communicated through opacity shifts and underline decorations rather than color changes
+- The warm cream button palette avoids any saturated semantic colors (no red errors, green success visible on marketing)
+
+### Gradient System
+- **Hero Gradient**: Deep purple gradient starting from `#1b1938`, transitioning through purple-to-twilight tones across the hero section — the most dramatic visual element on the entire site
+- **Content Transition**: The gradient dissolves into the white content area, creating a cinematic curtain-lift effect as the user scrolls
+- No other gradients on the marketing site — the hero gradient is a singular dramatic gesture
+
+## 3. Typography Rules
+
+### Font Family
+- **Display & Body**: `Super Sans VF` — custom variable font with non-standard weight axis. Fallbacks: `system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue`
+- **Product UI** (referenced in brand): `Messina Sans` / `Messina Serif` / `Messina Mono` from Luzi Type — used in the product itself for sans-serif-to-serif transitions
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Super Sans VF | 64px | 540 | 0.96 | 0px | Maximum compression, powerful block headlines |
+| Section Display | Super Sans VF | 48px | 460 | 0.96 | -1.32px | Lighter weight for section introductions |
+| Section Heading | Super Sans VF | 48px | 460 | 0.96 | 0px | Alternate section heading without tracking |
+| Feature Title | Super Sans VF | 28px | 540 | 1.14 | -0.63px | Feature block headlines, tighter |
+| Sub-heading Large | Super Sans VF | 26px | 460 | 1.30 | 0px | Content sub-sections |
+| Card Heading | Super Sans VF | 22px | 460 | 0.76 | -0.315px | Card title with extreme compression |
+| Body Heading | Super Sans VF | 20px | 460 | 1.20 | 0px | Bold content intros |
+| Body Heading Alt | Super Sans VF | 20px | 460 | 1.10 | -0.55px | Tighter variant for emphasis |
+| Body Heading Relaxed | Super Sans VF | 20px | 460 | 1.25 | -0.4px | More breathing room variant |
+| Emphasis Body | Super Sans VF | 18px | 540 | 1.50 | -0.135px | Medium-weight body for callouts |
+| Body | Super Sans VF | 16px | 460 | 1.50 | 0px | Standard reading text — generous line-height |
+| Button / UI Bold | Super Sans VF | 16px | 700 | 1.00 | 0px | Bold UI elements |
+| Button / UI Semi | Super Sans VF | 16px | 600 | 1.00 | 0px | Semi-bold navigation and labels |
+| Nav Link | Super Sans VF | 16px | 460 | 1.20 | 0px | Navigation items |
+| Caption | Super Sans VF | 14px | 500 | 1.20 | -0.315px | Small labels, metadata |
+| Caption Semi | Super Sans VF | 14px | 600 | 1.29 | 0px | Emphasized small text |
+| Caption Body | Super Sans VF | 14px | 460 | 1.50 | 0px | Small body text |
+| Micro Label | Super Sans VF | 12px | 700 | 1.50 | 0px | Smallest text — badges, tags |
+
+### Principles
+- **Non-standard weight axis**: Weights 460 and 540 are deliberately between conventional Regular (400) and Medium (500), creating a typographic texture that feels subtly "off" in a confident way — slightly heavier than expected, never quite bold
+- **Extreme display compression**: Display headlines at 0.96 line-height collapse lines nearly on top of each other, creating dense typographic blocks that feel architectural
+- **Body generosity**: In contrast, body text at 1.50 line-height is extremely spacious, ensuring comfortable reading after the dense headline impact
+- **Selective negative tracking**: Letter-spacing is applied surgically — -1.32px on 48px headings, -0.63px on 28px features, but 0px on body text. The larger the text, the tighter the tracking
+- **Variable font efficiency**: A single font file serves all weight variations (460–700), enabling smooth weight transitions and micro-adjustments
+
+## 4. Component Stylings
+
+### Buttons
+- **Warm Cream Primary**: `#e9e5dd` background, Charcoal Ink (`#292827`) text, subtle rounded corners (8px radius), no visible border. The signature CTA — warm, muted, luxurious rather than aggressive
+- **Dark Primary** (on light sections): `#292827` background with white text, 8px radius — inverse of the warm cream for contrast sections
+- **Ghost / Text Link**: No background, underline decoration, Amethyst Link (`#714cb6`) or Charcoal Ink color depending on context
+- **Hero CTA**: Warm Cream on the dark purple gradient — the cream color pops dramatically against `#1b1938`
+- **Hover**: Subtle opacity or brightness shift — no dramatic color transformations
+
+### Cards & Containers
+- **Content Card**: White background, Parchment Border (`#dcd7d3`) 1px border, 16px border-radius — clean and minimal
+- **Dark Surface Card**: `#292827` border on dark sections, maintaining warm-neutral tone
+- **Hero Surface**: Semi-transparent white border (`rgba(255, 255, 255, 0.2)`) on purple gradient — ghostly containment
+- **Product Screenshot Cards**: Large product UI images with clean edges, minimal framing — the product itself is the visual
+- **Hover**: Minimal state changes — consistency and calm over flashy interactions
+
+### Inputs & Forms
+- Minimal form presence on the marketing site — Superhuman funnels users directly to signup
+- Dark-bordered inputs with Charcoal Ink borders and warm-toned placeholder text
+- Focus: Border emphasis increase, likely shifting from Parchment Border to Charcoal Ink
+
+### Navigation
+- **Top nav**: Clean white background on content sections, transparent on hero gradient
+- **Nav links**: Super Sans VF at 16px, weight 460/600 for hierarchy
+- **CTA button**: Warm Cream (`#e9e5dd`) pill in the nav — subtle, not attention-grabbing
+- **Sticky behavior**: Nav remains fixed on scroll with background transition
+- **Mobile**: Collapses to hamburger menu with simplified layout
+
+### Image Treatment
+- **Product screenshots**: Large, dominant product UI images showing the email interface — the product is the hero
+- **Lifestyle photography**: A single dramatic image (silhouette against purple/red gradient) in the hero area — cinematic and editorial
+- **Full-width presentation**: Screenshots span full container width with subtle shadow or no border
+- **Aspect ratios**: Wide landscape ratios (roughly 16:9) for product screenshots
+- **Color integration**: Screenshots are carefully color-graded to harmonize with the purple-to-white page flow
+
+### Testimonial / Social Proof
+- "Your Superhuman suite" section with product feature grid
+- Feature descriptions paired with product screenshots — proof through demonstration rather than quotes
+- Clean grid layout with consistent card sizing
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 2px, 4px, 6px, 8px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 56px
+- **Section padding**: 48px–80px vertical between major sections
+- **Card padding**: 16px–32px internal spacing
+- **Component gaps**: 8px–16px between related elements
+
+### Grid & Container
+- **Max width**: ~1200px content container, centered
+- **Column patterns**: Full-width hero, centered single-column for key messaging, 2-3 column grid for feature cards
+- **Feature grid**: Even column distribution for "Your Superhuman suite" product showcase
+
+### Whitespace Philosophy
+- **Confident emptiness**: Generous whitespace between sections signals premium positioning — every element has room to breathe
+- **Product as content**: Large product screenshots fill space that lesser sites would fill with marketing copy
+- **Progressive density**: The hero is spacious and cinematic, content sections become denser with feature grids, then opens up again for CTAs
+
+### Border Radius Scale
+- **8px**: Buttons, inline elements (`span`, `button`, `div`) — the universal small radius
+- **16px**: Cards, links, larger containers (`a`, card elements) — the universal large radius
+- Only two radii in the entire system — radical simplicity. No micro-rounding (2px), no pill shapes (50px+)
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, white background | Primary page canvas, most content surfaces |
+| Level 1 (Border) | `1px solid #dcd7d3` (Parchment Border) | Card containment, section dividers |
+| Level 2 (Dark Border) | `1px solid #292827` | Header elements, dark section separators |
+| Level 3 (Glow) | Subtle shadow (from 6 shadow definitions detected) | Product screenshot containers, elevated cards |
+| Level 4 (Hero Depth) | `rgba(255, 255, 255, 0.2)` transparent border | Elements on the dark purple gradient hero |
+
+### Shadow Philosophy
+Superhuman's elevation system is remarkably restrained on the marketing site. Depth is primarily communicated through:
+- **Border containment**: Warm-toned borders (`#dcd7d3`) at 1px create gentle separation
+- **Color contrast**: The hero gradient creates massive depth through color shift rather than shadows
+- **Product screenshots**: Screenshots themselves create depth by showing a layered UI within the flat page
+- **Opacity layering**: Semi-transparent whites on the hero gradient create atmospheric depth layers
+
+### Decorative Depth
+- **Hero gradient**: The `#1b1938` → white gradient transition is the primary depth device — a cinematic curtain effect
+- **Lavender accents**: `#cbb7fb` Lavender Glow elements float above the dark gradient, creating a stellar/atmospheric effect
+- **No glassmorphism**: Despite the translucent borders, there are no blur/frosted-glass effects
+- **Photography depth**: The hero silhouette image creates natural atmospheric depth without artificial CSS
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Super Sans VF at weight 460 as the default — it's slightly heavier than regular, which is the brand's typographic signature
+- Keep display headlines at 0.96 line-height — the compression is intentional and powerful
+- Use Warm Cream (`#e9e5dd`) for primary buttons — not white, not gray, specifically warm cream
+- Limit border-radius to 8px (small) and 16px (large) — the binary radius system is deliberate
+- Apply negative letter-spacing on headlines only (-0.63px to -1.32px) — body text stays at 0px
+- Use Lavender Glow (`#cbb7fb`) as the only accent color — it's the sole color departure from the neutral palette
+- Let product screenshots be the primary visual content — the UI sells itself
+- Maintain the dramatic hero gradient as a singular gesture — the rest of the page is white
+
+### Don't
+- Use conventional font weights (400, 500, 600) — Superhuman's 460 and 540 are deliberately between standard stops
+- Add bright or saturated CTA colors (blue, green, red) — buttons are intentionally muted in Warm Cream or Charcoal
+- Introduce additional accent colors beyond Lavender Glow — the palette is deliberately restrained to one accent
+- Apply shadows generously — depth comes from borders, color contrast, and photography, not box-shadows
+- Use tight line-height on body text — display is compressed (0.96) but body is generous (1.50)
+- Add decorative elements, icons, or illustrations — Superhuman relies on product UI and minimal typography
+- Create pill-shaped buttons — the system uses 8px radius, not rounded pills
+- Use pure black (`#000000`) for text — Charcoal Ink (`#292827`) is warmer and softer
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, hero text reduces to ~36px, stacked feature cards, hamburger nav |
+| Tablet | 768px–1024px | 2-column feature grid begins, hero text ~48px, nav partially visible |
+| Desktop | 1024px–1440px | Full layout, 64px hero display, multi-column feature grid, full nav |
+| Large Desktop | >1440px | Max-width container centered, generous side margins |
+
+### Touch Targets
+- Buttons: 8px radius with comfortable padding — meets touch target guidelines
+- Nav links: 16px text with adequate surrounding padding
+- Mobile CTAs: Full-width Warm Cream buttons for easy thumb reach
+- Links: Underline decoration provides clear tap affordance
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → hamburger menu on mobile
+- **Hero text**: 64px display → 48px → ~36px across breakpoints
+- **Feature grid**: Multi-column product showcase → 2-column → single stacked column
+- **Product screenshots**: Scale within containers, maintaining landscape ratios
+- **Section spacing**: Reduces proportionally — generous desktop margins compress on mobile
+
+### Image Behavior
+- Product screenshots scale responsively while maintaining aspect ratios
+- Hero silhouette image crops or scales — maintains dramatic composition
+- No art direction changes — same compositions across all breakpoints
+- Lazy loading likely on below-fold product screenshots
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Hero Background: Mysteria Purple (`#1b1938`)
+- Primary Text (light bg): Charcoal Ink (`#292827`)
+- Primary Text (dark bg): Translucent White (`color(srgb 1 1 1 / 0.95)` — use `rgba(255,255,255,0.95)`)
+- Accent: Lavender Glow (`#cbb7fb`)
+- Button Background: Warm Cream (`#e9e5dd`)
+- Border: Parchment Border (`#dcd7d3`)
+- Link: Amethyst Link (`#714cb6`)
+- Page Background: Pure White (`#ffffff`)
+
+### Example Component Prompts
+- "Create a hero section with deep purple gradient background (#1b1938), 64px Super Sans heading at weight 540, line-height 0.96, white text at 95% opacity, and a warm cream button (#e9e5dd, 8px radius, #292827 text)"
+- "Design a feature card with white background, 1px #dcd7d3 border, 16px radius, 20px Super Sans heading at weight 460, and 16px body text at weight 460 with 1.50 line-height in #292827"
+- "Build a navigation bar with white background, Super Sans links at 16px weight 460, a warm cream CTA button (#e9e5dd, 8px radius), sticky positioning"
+- "Create a product showcase section with centered 48px heading (weight 460, -1.32px letter-spacing, #292827), a large product screenshot below, on white background"
+- "Design an accent badge using Lavender Glow (#cbb7fb) background, 8px radius, 12px bold text (weight 700), for category labels"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify font weight is 460 (not 400 or 500) for body and 540 for display — the non-standard weights are essential
+2. Check that display line-height is 0.96 — if headlines look too spaced, they're wrong
+3. Ensure buttons use Warm Cream (#e9e5dd) not pure white or gray — the warmth is subtle but critical
+4. Confirm the only accent color is Lavender Glow (#cbb7fb) — no other hues should appear
+5. The overall tone should feel like a luxury product presentation — minimal, confident, with one dramatic color gesture in the hero