update DESIGN.md to v2

design-md/superhuman/DESIGN.md

@@ -1,252 +1,448 @@
-# Design System Inspired by Superhuman
+---
+version: alpha
+name: Superhumon Inspired
+description: An inspired interpretation of Superhumon's design language — a fast-email productivity brand split between an editorial dark hero (deep indigo navy with violet-sky atmospheric backdrop and a portrait subject) and a quiet white content body with off-warm-grey ink. The system uses a single proprietary variable display sans, heavy weight 460–540 with tight tracking, and a deep-teal closing CTA band that breaks the indigo/white rhythm with a warm dark interlude. Buttons are tight rounded rectangles, pricing is sober and dense, and the brand reads more like a high-end newsletter than a SaaS app.
 
-## 1. Visual Theme & Atmosphere
+colors:
+  primary: "#1b1938"
+  primary-deep: "#0e0c1f"
+  on-primary: "#ffffff"
+  ink: "#292827"
+  ink-mute: "#73706d"
+  ink-faint: "#9a9794"
+  canvas: "#ffffff"
+  canvas-soft: "#fafaf8"
+  surface-violet-soft: "#c9b4fa"
+  surface-teal-deep: "#0e3030"
+  surface-teal-mid: "#155555"
+  hairline: "#e8e4dd"
+  hairline-dark: "#3f3a52"
+  on-dark-mute: "#bcbac9"
+  on-dark-faint: "#5a5772"
 
-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.
+typography:
+  display-xxl:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 64px
+    fontWeight: 540
+    lineHeight: 0.96
+    letterSpacing: 0
+  display-xl:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 48px
+    fontWeight: 460
+    lineHeight: 0.96
+    letterSpacing: -1.32px
+  display-lg:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 28px
+    fontWeight: 540
+    lineHeight: 1.14
+    letterSpacing: -0.63px
+  display-md:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 22px
+    fontWeight: 460
+    lineHeight: 1.1
+    letterSpacing: -0.315px
+  heading-lg:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 20px
+    fontWeight: 460
+    lineHeight: 1.2
+    letterSpacing: -0.4px
+  body-lg:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 18px
+    fontWeight: 540
+    lineHeight: 1.5
+    letterSpacing: -0.135px
+  body-md:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 16px
+    fontWeight: 460
+    lineHeight: 1.5
+    letterSpacing: 0
+  body-strong:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 18.72px
+    fontWeight: 700
+    lineHeight: 1.5
+    letterSpacing: 0
+  button-md:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 16px
+    fontWeight: 700
+    lineHeight: 1.0
+    letterSpacing: 0
+  button-cap:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 1.0
+    letterSpacing: 0
+  caption:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 14px
+    fontWeight: 460
+    lineHeight: 1.4
+    letterSpacing: 0
+  micro:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 12px
+    fontWeight: 540
+    lineHeight: 1.4
+    letterSpacing: 0
 
-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.
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  full: 9999px
 
-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.
+spacing:
+  xxs: 2px
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 24px
+  xxl: 32px
+  huge: 64px
+
+components:
+  button-primary-dark:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  button-primary-dark-pressed:
+    backgroundColor: "{colors.primary-deep}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  button-on-dark-pill:
+    backgroundColor: "{colors.surface-violet-soft}"
+    textColor: "{colors.primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 12px 20px
+  button-secondary-outline:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  button-on-teal:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.surface-teal-deep}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 10px 12px
+  card-feature-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-pricing:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-pricing-featured:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-teal-band:
+    backgroundColor: "{colors.surface-teal-deep}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-lg}"
+    rounded: "{rounded.lg}"
+    padding: 64px
+  card-feature-row:
+    backgroundColor: "{colors.canvas-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 24px
+  pill-tab-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-cap}"
+    rounded: "{rounded.full}"
+    padding: 8px 16px
+  nav-bar-dark:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 16px 24px
+  nav-bar-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 16px 24px
+  link-on-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 0px
+  footer-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink-mute}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.xs}"
+    padding: 64px 24px
+---
+
+## Overview
+
+Superhumon's marketing pages open in an editorial dark register: a deep indigo navy `{colors.primary}` (`#1b1938`) canvas overlaid with a soft violet-and-sky atmospheric backdrop and a half-bleed portrait subject (often a person looking off-frame, photographed at twilight). Headlines render in `{typography.display-xxl}` (Super Sans VF at 64px / weight 540) with negative tracking, set in white over the indigo. A single rounded-rectangle CTA button anchors each band — never two, never three.
+
+The body of every page flips to white. `{colors.canvas}` (`#ffffff`) takes over below the hero, with body type in `{colors.ink}` (`#292827` — a slightly warm dark grey, never pure black) and feature rows alternating between white and `{colors.canvas-soft}` (a barely-tinted off-white). Pricing tiers sit on this white surface; the featured tier inverts to the indigo navy, completing the brand's binary polarity.
+
+Every page closes with a **deep-teal CTA band** (`{colors.surface-teal-deep}` — `#0e3030`). The teal is a single chromatic interlude: rich, almost-black green-blue, that breaks up what would otherwise be an indigo/white-only page. The teal band always contains the closing CTA in `{typography.display-lg}` paired with a single white-pill button.
+
+Typography runs **Super Sans VF** — a proprietary variable display sans — at unusual mid-weights (460, 540, 600). The variable axes let the brand pick precise sub-default weights that read as warmer and more human than typical 400/500/700 SaaS scales. Display sizes use negative letter-spacing of -1.32px to -0.315px depending on size; line-heights are unusually tight (0.96 on 48px display).
 
 **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
+- Three-canvas system: indigo navy (`{colors.primary}`) for hero, white (`{colors.canvas}`) for body, deep teal (`{colors.surface-teal-deep}`) for closing CTA.
+- Half-bleed portrait subject in the hero with violet-sky atmospheric backdrop — the brand uses a person looking off-frame as a recurring visual.
+- Single CTA per band; the marketing pages never crowd actions.
+- Super Sans VF at sub-default weights (460, 540, 600) — the brand's typographic warmth signature.
+- Tight line-heights (0.96) on display sizes — vertical compression as editorial density.
+- Off-warm-grey body ink (`#292827`) — never pure black; the brand's quiet warmth.
+- Pill-shaped on-hero CTA in pale violet (`{colors.surface-violet-soft}`); rounded-rectangle CTAs everywhere else.
 
-## 2. Color Palette & Roles
+## Colors
 
-### 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
+> **Source pages:** home (`/`), `/products/go-ai-assistant`, `/contact-sales`, `/plans`.
 
-### 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
+### Brand & Accent
+- **Primary Indigo Navy** (`{colors.primary}` — `#1b1938`): The brand's primary surface and CTA color. Hero canvas, filled rounded-rectangle button, featured pricing tier.
+- **Indigo Deep** (`{colors.primary-deep}` — `#0e0c1f`): Pressed-state lift / deeper navy used in hero gradient stops.
+- **Surface Violet Soft** (`{colors.surface-violet-soft}` — `#c9b4fa`): The hero pill-button fill — pale violet over the indigo canvas. Also appears in atmospheric backdrops.
+- **Surface Teal Deep** (`{colors.surface-teal-deep}` — `#0e3030`): The signature closing-CTA band color. Rich green-blue, almost black.
+- **Surface Teal Mid** (`{colors.surface-teal-mid}` — `#155555`): Slightly lifted teal for nested chrome inside the band.
 
-### 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
+### Surface
+- **Canvas** (`{colors.canvas}` — `#ffffff`): Default body background.
+- **Canvas Soft** (`{colors.canvas-soft}` — `#fafaf8`): Barely-warm off-white for alternating feature-row bands.
+- **Hairline** (`{colors.hairline}` — `#e8e4dd`): 1px borders, slightly warm grey.
+- **Hairline Dark** (`{colors.hairline-dark}` — `#3f3a52`): 1px borders on dark surfaces.
 
-### 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
+### Text
+- **Ink** (`{colors.ink}` — `#292827`): Default body text. Warm dark grey, never pure black.
+- **Ink Mute** (`{colors.ink-mute}` — `#73706d`): Secondary text, captions.
+- **Ink Faint** (`{colors.ink-faint}` — `#9a9794`): Tertiary / disabled text.
+- **On Primary** (`{colors.on-primary}` — `#ffffff`): Text on dark navy / teal surfaces.
+- **On Dark Mute** (`{colors.on-dark-mute}` — translucent white): Secondary text on dark.
+- **On Dark Faint** (`{colors.on-dark-faint}` — translucent white): Tertiary text on dark.
 
-### 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
+## Typography
 
 ### 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
+
+The display and UI tier is **Super Sans VF** — a proprietary variable sans (variable axes for weight, with the brand using sub-default 460 / 540 / 600 weights). Fallback chain is the system font stack.
+
+For substitution use **Inter Variable** (open-source) at weight 460 / 540 / 600 — Inter's variable axes match Super Sans VF's behavior closely. Avoid fixed-weight Inter at 400 / 500 / 600 — the brand specifically picks the in-between weights.
 
 ### 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 |
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-xxl}` | 64px | 540 | 0.96 | 0 | Hero headline |
+| `{typography.display-xl}` | 48px | 460 | 0.96 | -1.32px | Section opener on light surfaces |
+| `{typography.display-lg}` | 28px | 540 | 1.14 | -0.63px | Sub-section / feature title |
+| `{typography.display-md}` | 22px | 460 | 1.1 | -0.315px | Card title |
+| `{typography.heading-lg}` | 20px | 460 | 1.2 | -0.4px | Compact card title |
+| `{typography.body-lg}` | 18px | 540 | 1.5 | -0.135px | Marketing body lead |
+| `{typography.body-md}` | 16px | 460 | 1.5 | 0 | Default UI body |
+| `{typography.body-strong}` | 18.72px | 700 | 1.5 | 0 | Emphasized body |
+| `{typography.button-md}` | 16px | 700 | 1.0 | 0 | Rounded-rectangle button label |
+| `{typography.button-cap}` | 14px | 600 | 1.0 | 0 | Compact button label |
+| `{typography.caption}` | 14px | 460 | 1.4 | 0 | Helper, footnote |
+| `{typography.micro}` | 12px | 540 | 1.4 | 0 | Pill label, fine print |
 
 ### 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
+- **Sub-default weights.** The brand picks 460 / 540 / 600 instead of 400 / 500 / 700 — a quiet warmth in the typography that distinguishes it from default SaaS systems.
+- **Tight display leading.** 0.96 on 48–64px display — the type stacks unusually compact.
+- **Negative tracking on display sizes.** -1.32px at 48px scaling proportionally — tightens the variable letterforms into editorial density.
 
-## 4. Component Stylings
+### Note on Font Substitutes
+**Inter Variable** (open-source via Google Fonts) is the recommended substitute. Set `font-variation-settings: "wght" 540` for display, 460 for body — Inter's variable axes match. Avoid fixed-weight Inter; the in-between weights are the brand's signature.
 
-### 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
+## Layout
 
 ### 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
+- **Base unit**: 8px (with 2 / 4 / 12 sub-tokens for fine work).
+- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px.
+- **Section padding**: 64–96px on most sections; closing teal band uses 96–128px for editorial weight.
+- **Card internal padding**: 32px on pricing cards; 24px on alternating feature rows.
 
 ### 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
+- Hero spans full viewport width with the violet-sky backdrop edge-to-edge; content centers in a ~960px column.
+- Body content centers in ~960–1100px.
+- Pricing collapses 3-up → 2-up → 1-up at 1024 / 768 breakpoints.
 
 ### 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
+The brand uses generous editorial whitespace on both polarities — dark hero and white body. Section gaps tend toward 96px; the teal closing band gets up to 128px of vertical air. The whitespace itself is part of the brand's "considered, slow-tempo" feel.
 
-### 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
+## Elevation & Depth
 
 | 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
+|---|---|---|
+| 0 | Flat | Default surface |
+| 1 | `box-shadow: 0 1px 3px rgba(0,0,0,0.08)` | Subtle card lift |
+| 2 | `box-shadow: 0 8px 24px rgba(0,0,0,0.12)` | Floating panels, modals |
+| 3 | Atmospheric backdrop (violet-sky over indigo) | The hero's depth medium |
 
 ### 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
+The hero's depth is the **violet-sky atmospheric backdrop** — a soft indigo-to-violet-to-sky-blue radial wash that sits behind the portrait subject. Implemented as a CSS radial gradient or large background image. Below the hero, depth is minimal — the white canvas is flat.
 
-## 7. Do's and Don'ts
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.xs}` | 4px | Hairline tags |
+| `{rounded.sm}` | 6px | Form inputs |
+| `{rounded.md}` | 8px | Buttons (the brand's signature button shape — rounded rectangle, never pill) |
+| `{rounded.lg}` | 12px | Pricing cards, feature cards |
+| `{rounded.xl}` | 16px | Modal dialogs, large feature cards |
+| `{rounded.full}` | 9999px | Pill tabs in feature row, hero CTA |
+
+### Photography Geometry
+The hero uses **half-bleed portrait subjects** — a person photographed at twilight, looking off-frame, occupying the right half of the hero. The portrait extends edge-to-edge vertically and stops mid-canvas horizontally; type sits on the left side. Other photography is rare; product UI mockups handle most other illustrative needs.
+
+## Components
+
+### Buttons
+
+**`button-primary-dark`** — the dominant rounded-rectangle CTA on white surfaces.
+- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `{spacing.md} {spacing.xl}` (12px 20px), rounded `{rounded.md}` 8px.
+- Pressed state `button-primary-dark-pressed` shifts to `{colors.primary-deep}`.
+
+**`button-on-dark-pill`** — the hero CTA in pale violet pill shape.
+- Background `{colors.surface-violet-soft}`, text `{colors.primary}`, same typography, padding 12px 20px, rounded `{rounded.full}`. The pill shape only appears on the hero — body CTAs use the rounded rectangle.
+
+**`button-secondary-outline`** — outline alternative on white.
+- Background `{colors.canvas}`, text `{colors.ink}`, 1px solid `{colors.hairline-dark}` border, same shape as `button-primary-dark`.
+
+**`button-on-teal`** — CTA inside the closing teal band.
+- Background `{colors.canvas}`, text `{colors.surface-teal-deep}`, rounded-rectangle, same typography.
+
+### Cards & Containers
+
+**`card-feature-light`** — feature card on white.
+- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border.
+
+**`card-pricing`** — standard pricing tier card.
+- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border.
+
+**`card-pricing-featured`** — inverted indigo featured tier.
+- Background `{colors.primary}`, text `{colors.on-primary}`, otherwise identical to `card-pricing`.
+
+**`card-teal-band`** — the closing CTA band on every page.
+- Background `{colors.surface-teal-deep}`, text `{colors.on-primary}`, padding `{spacing.huge}` 64px, rounded `{rounded.lg}` 12px (often radius-less in practice when full-bleed). Holds a single closing headline in `{typography.display-lg}` and a `button-on-teal`.
+
+**`card-feature-row`** — alternating feature-row card on the body.
+- Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.xl}` 24px, rounded `{rounded.md}` 8px. Used in pairs/triplets to explain features below the hero.
+
+### Inputs & Forms
+
+**`text-input`** — standard form input.
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm}+ {spacing.md}` (10px 12px), rounded `{rounded.sm}` 6px, 1px `{colors.hairline}` border.
+
+### Navigation
+
+**`nav-bar-dark`** — top nav over the indigo hero.
+- Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.lg} {spacing.xl}`. Logo on the left, nav center, "Get Started" `button-on-dark-pill` on the right.
+
+**`nav-bar-light`** — top nav on body / pricing pages.
+- Background `{colors.canvas}`, text `{colors.ink}`, otherwise same structure with `button-primary-dark` on the right.
+
+### Pills, Tags, and Chips
+
+**`pill-tab-light`** — feature-row tab selector.
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button-cap}`, padding `{spacing.sm} {spacing.lg}`, rounded `{rounded.full}`. Used in the feature category picker (Mail / Channels / Code / AI / Calendar etc.) below the hero.
+
+### Signature Components
+
+**Half-Bleed Portrait Hero** — a person photographed at twilight, occupying the right half of the indigo hero with violet-sky atmospheric backdrop behind. Type and CTA sit on the left side. The portrait is the brand's recurring visual signature.
+
+**Closing Teal Band** — every page closes with a `card-teal-band` containing a `{typography.display-lg}` closing headline and a single `button-on-teal`. The teal is the page's resolving chord.
+
+**`link-on-light`** — inline links on body.
+- Text `{colors.ink}` rendered in `{typography.body-md}` with persistent underline.
+
+**`footer-light`** — site-wide footer.
+- Background `{colors.canvas}`, text `{colors.ink-mute}`, type `{typography.caption}`, padding `{spacing.huge} {spacing.xl}` (64px 24px). Holds 4 columns of link groups, social icons, and a small legal/copyright row.
+
+## 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
+- Pair every hero with the violet-sky atmospheric backdrop and a half-bleed portrait subject when possible.
+- Render display tiers at sub-default weights (460 / 540) — the warmth is the typographic signature.
+- Use rounded-rectangle CTAs at 8px radius everywhere except the hero (where pill-shaped is the rule).
+- Close every marketing page with a deep-teal CTA band.
+- Use warm dark grey `{colors.ink}` for body text — never pure black.
+- Apply tight 0.96 line-height on display sizes; the editorial compression is the brand.
 
 ### 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
+- Don't use pill-shaped buttons in the body of the page; the pill is hero-only.
+- Don't bump display weight above 540 unless using `body-strong` (700) for emphasized inline body.
+- Don't render body text in pure black — the warm grey `#292827` is part of the brand.
+- Don't omit the closing teal band — every marketing page closes with it.
+- Don't introduce additional accent colors beyond indigo, violet-soft, teal, and the off-warm-greys.
 
-## 8. Responsive Behavior
+## 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 |
+|---|---|---|
+| Wide | ≥ 1440px | Half-bleed portrait at full scale; teal band 128px tall |
+| Desktop | 1024–1440px | Default content max-width; pricing 3-up |
+| Tablet | 768–1023px | Pricing 2-up; portrait crops tighter |
+| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 64 → 36px |
 
 ### 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
+- Buttons hit ≥ 44×44px on mobile via 12px vertical padding × 16px line-height. WCAG AAA.
+- Form fields stay at the 44px minimum height.
 
 ### 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
+- Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
+- Half-bleed portrait crops to head-and-shoulders on mobile; atmospheric backdrop simplifies.
+- Pricing tiers stair-step 3-up → 2-up → 1-up.
+- Top nav collapses to hamburger below 768px.
+- Closing teal band reduces vertical padding from 128 → 64px 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
+Hero portrait uses `srcset` with desktop / mobile crops — desktop favors the full half-bleed composition; mobile crops to head-and-shoulders.
 
-## 9. Agent Prompt Guide
+## Iteration 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
+1. Focus on ONE component at a time.
+2. Reference component names and tokens directly.
+3. Run `npx @google/design.md lint DESIGN.md` after edits.
+4. Default body to `{typography.body-md}`; reserve `{typography.body-lg}` for marketing leads.
+5. Keep the three-canvas rhythm (indigo / white / teal) — adding a fourth canvas color breaks the system.
+6. The closing teal band is non-negotiable — every marketing page resolves there.