superhuman___style_reference:
  info: "> Cinematic cockpit behind warm parchment — a productivity instrument panel where atmospheric photography meets structured cream-toned UI surfaces."

  theme: "mixed"

  info: "Superhuman feels like a cinematic productivity cockpit — moody atmospheric photography bleeds behind glassmorphic UI panels while the page itself stays anchored in warm parchment neutrals. The hero is a full-viewport dusk photograph with overlapping product panels floating at various depths, then the page snaps to a warm off-white (#f2f0eb) canvas for feature content. Custom variable font 'Super Sans VF' is the entire typographic system — tight negative tracking at display sizes (-0.028em at 64px) makes headlines feel compressed and urgent. Violet (#714cb6) is the sole chromatic system accent, appearing as outlined ghost buttons and focus rings against otherwise achromatic surfaces. The dark muted-red (#421d24) surfaces only in the announcement banner and footer, creating a bracketed frame around the entire page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Parchment Canvas | `#f2f0eb` | `--color-parchment-canvas` | Primary page background below the hero; the warm, slightly toasted off-white that distinguishes this from sterile white SaaS canvases |"
    info: "| Ink | `#292827` | `--color-ink` | Primary text, borders, nav labels — near-black with a warm brown undertone instead of pure black |"
    info: "| Bone | `#ffffff` | `--color-bone` | Card surfaces, hero text, button text on dark backgrounds |"
    info: "| Fog | `#e3e3e2` | `--color-fog` | Subtle UI dividers, light button borders, tab backgrounds |"
    info: "| Driftwood | `#dcd7d3` | `--color-driftwood` | Secondary dividers and section rule lines |"
    info: "| Graphite | `#666666` | `--color-graphite` | Secondary body text — feature descriptions and supporting copy beneath headings |"
    info: "| Aubergine | `#421d24` | `--color-aubergine` | Announcement banner background, footer background — deep muted red that brackets the page top and bottom |"
    info: "| Aubergine Deep | `#4e242c` | `--color-aubergine-deep` | SVG icon fills and border accents within dark brand surfaces |"
    info: "| Iris | `#714cb6` | `--color-iris` | Ghost/outlined action borders, link text, focus rings — the only chromatic accent across light UI surfaces; outlined ghost 'Get the suite' button uses this as its border and text |"
    info: "| Indigo Glow | `#353088` | `--color-indigo-glow` | Focus shadow on primary CTA links (inset ring depth cue) |"
    info: "| Lavender Chip | `#d4c7ff` | `--color-lavender-chip` | Sign-up button fill on dark hero — soft violet chip against dark photography |"
    info: "| Hero Dusk Gradient | `linear-gradient(to left bottom, rgba(168, 164, 216, 0.5), rgba(107, 165, 232, 0.5), rgba(176, 112, 192, 0.6), rgba(144, 136, 208, 0.5))` | `--color-hero-dusk-gradient` | Full-viewport hero background gradient overlaying the dusk photography; pastel violet-to-blue-to-purple sweep |"

  tokens___typography:

    super_sans_vf___the_sole_typeface_for_all_text___headlines__body__nav__buttons__captions__custom_variable_font_with_tight_negative_tracking_baked_into_large_sizes___0_028em_at_64px_collapses_letterforms_until_display_text_reads_as_a_single_compressed_block__weight_460_is_the_default_body_weight__600_700_reserved_for_headlines__the_variable_weight_axis_allows_granular_fine_tuning_not_possible_with_static_weights_____font_super_sans_vf:
      - "**Substitute:** Inter Variable or Neue Haas Grotesk"
      - "**Weights:** 460, 500, 540, 600, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 19px, 20px, 22px, 26px, 28px, 48px, 64px"
      - "**Line height:** 0.76–1.50 (0.76 at display, 1.20–1.50 at body)"
      - "**Letter spacing:** -0.028em at 64px, -0.027em at 48px, -0.022em at 28px, -0.020em at 26px, -0.014em at 22px, -0.008em at 18-20px"
      - "**Role:** The sole typeface for all text — headlines, body, nav, buttons, captions. Custom variable font with tight negative tracking baked into large sizes: -0.028em at 64px collapses letterforms until display text reads as a single compressed block. Weight 460 is the default body weight; 600–700 reserved for headlines. The variable weight axis allows granular fine-tuning not possible with static weights."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.3 | -0.14px | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.25 | -0.31px | `--text-heading-sm` |"
      info: "| heading | 28px | 1.2 | -0.62px | `--text-heading` |"
      info: "| heading-lg | 48px | 1 | -1.3px | `--text-heading-lg` |"
      info: "| display | 64px | 0.96 | -1.79px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| links | 12px |"
      info: "| pills | 999px |"
      info: "| buttons | 8px |"
      info: "| cardsLarge | 24px |"
      info: "| announcementBanner | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(113, 76, 182) 0px 0px 0px 1px inset` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    announcement_banner:
      role: "Full-width top-of-page notification strip"

      info: "Background #421d24, white text at 14px weight 500, 12px vertical padding, 16px radius on inner button. Contains ghost text link 'Learn more' with no border. Full bleed edge-to-edge above the nav."

    primary_navigation:
      role: "Sticky top navigation bar"

      info: "White background, Ink (#292827) nav labels at 16px weight 460. Logo left-aligned. 'Sign up' uses Lavender Chip (#d4c7ff) background, Ink text, 8px radius, 6px/12px padding. 'Log in' and 'Contact sales' are ghost text links with no border. Nav transitions from transparent over hero to white with backdrop-blur on scroll (animation: page_header-fade-in)."

    hero_section:
      role: "Full-viewport brand opening"

      info: "Full-bleed dusk photography with linear-gradient(to left bottom, rgba(168,164,216,0.5), rgba(107,165,232,0.5), rgba(176,112,192,0.6), rgba(144,136,208,0.5)) overlay. White display text at 64px weight 600, line-height 0.96, letter-spacing -1.79px, centered. Subheadline at 18-20px weight 460. CTA 'Get Superhuman' is a white-background pill with Ink text, 8px radius, Iris inset shadow on focus, animated gradient rotation on hover (hero-button-gradient-angle-rotate)."

    get_superhuman_cta_button:
      role: "Primary hero call-to-action"

      info: "Background #ffffff, text #292827 at 16px weight 500, 8px radius, 12px vertical / 24px horizontal padding. Focus ring: rgb(113,76,182) 0px 0px 0px 1px inset. Includes a small arrow icon with Iris (#714cb6) tint. Animated gradient halo on hover."

    sign_up_button:
      role: "Nav-level signup action"

      info: "Background #d4c7ff (Lavender Chip), text #292827 (Ink), 8px border-radius, 6px top/bottom padding, 12px left/right padding. No border. Sits in top-right nav cluster."

    ghost_outlined_button_iris:
      role: "Secondary action on light surfaces"

      info: "Background transparent, border 1px solid #714cb6, text #714cb6, 8px radius, 6px/12px padding. Used for 'Get the suite' on the parchment canvas section."

    suite_tab_button:
      role: "Product switcher tabs (Mail / Grammarly / Coda / Go)"

      active_state: "#e3e3e2 background, Ink text, 999px radius pill, 12px vertical padding. Inactive state: transparent background, Ink text, same radius. 16px horizontal padding. Icon precedes label at 16px."

    social_proof_logo_bar:
      role: "Trust logos strip"

      info: "White card surface, 1px solid #e3e3e2 border, 0px radius (sharp edges), logos in Ink at roughly 80-120px wide each, evenly distributed in a single row. Parchment canvas background behind. 36px vertical padding."

    product_feature_card:
      role: "Per-product detail panel inside tab sections"

      info: "White background, 16px radius, 16px padding all sides, 1px solid #e3e3e2 border. Contains product label at 12px weight 500 with Iris icon, heading at 28px weight 600, body at 16px Graphite (#666666), and a link at 14px Iris (#714cb6)."

    glassmorphic_hero_panel:
      role: "Product UI preview panels floating in hero"

      info: "Background rgba(255,255,255,0.13), backdrop-filter blur(12px), 999px radius on pill-shaped variants or 24px on rectangular panels, 12px/16px padding. White text inside. These appear as layered floating cards over the hero photograph."

    footer:
      role: "Full-width site footer"

      info: "Background #421d24, white text throughout. Nav links at 14px weight 460. Brand logo top-left. Four column layout. 32px horizontal padding, 36px top/bottom padding."

  do_s_and_don_ts:

    do:
      - "Use #f2f0eb as the page canvas for all content sections below the hero — never plain white (#ffffff) as the canvas background."
      - "Apply Super Sans VF at weight 600–700 for all headings with letter-spacing -0.022em to -0.028em at sizes 28px and above."
      - "Use #714cb6 exclusively as outlined ghost button borders and link colors on light surfaces — never as a filled button background."
      - "Reserve #421d24 only for the announcement banner and footer — it must bracket the page without appearing in content sections."
      - "Set border-radius 8px for inline buttons and badges, 16px for cards, 999px for pill tabs and floating UI chips."
      - "Use backdrop-filter: blur(12px) on any UI panel that overlaps the hero photography to maintain the glassmorphic depth effect."
      - "Pair display headlines (64px) with line-height 0.96 — sub-1.0 line-height at display sizes is the signature compression of this system."

    don_t:
      - "Don't use a pure white (#ffffff) page background for content sections — the parchment (#f2f0eb) canvas is what separates this from generic SaaS."
      - "Don't apply #714cb6 as a filled button background — evidence shows it appears only as outlined borders and link text, never as a button fill."
      - "Don't use letter-spacing at 0 or positive values for headings — all heading sizes use negative tracking; flat tracking breaks the compressed headline aesthetic."
      - "Don't introduce additional typefaces — Super Sans VF handles every text role; mixing in system fonts or other typefaces breaks the typographic cohesion."
      - "Don't use standard box-shadow elevation for cards — depth is achieved through overlapping layout and backdrop-blur, not drop shadows."
      - "Don't place the aubergine (#421d24) in mid-page content sections, feature cards, or UI components — its role is structural framing (banner + footer) only."
      - "Don't use rounded corners smaller than 8px on interactive elements — the minimum radius in this system is 8px; sharp 0px borders only appear on flat content containers and logo bars."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Hero Photography | `#421d24` | Full-viewport hero with dusk photography + translucent gradient overlay; dark surfaces here only |"
    info: "| 1 | Parchment Canvas | `#f2f0eb` | Primary content page background below hero for all feature sections |"
    info: "| 2 | Bone Card | `#ffffff` | Card and panel surfaces that lift off the parchment canvas |"
    info: "| 3 | Fog Divider | `#e3e3e2` | Tab indicators, secondary separators, low-contrast borders on white surfaces |"

  elevation:

    - "**Outlined Ghost Button (Iris focus state):** `rgb(113, 76, 182) 0px 0px 0px 1px inset`"

  imagery:

    info: "Superhuman uses full-bleed cinematic lifestyle photography in the hero — dark-toned dusk and evening skies with human subjects (woman looking upward, silhouetted figures) that read as contemplative rather than corporate. Photography is high-contrast with deep cool blues and magentas, treated with semi-transparent gradient overlays in pastel violet/blue/pink (the hero gradient system). Product UI screenshots are embedded as floating glassmorphic panels directly over the photography — not contained in device frames, just floating at depth. Below the hero, imagery shifts to pure product: email UI, document surfaces, and AI suggestions shown in white-background card panels. Illustrated abstract geometric compositions appear in promotional sections (stacked rectangle frames, golden-ratio wireframes) as editorial art rather than UI. Icons throughout are outlined mono-color at ~16-20px, using Iris (#714cb6) tint on light surfaces and white on dark surfaces. The design is moderately image-heavy in the hero and text-dominant in feature sections."

  layout:

    info: "Max-width approximately 1200px centered, but hero is full-bleed edge-to-edge with no container. Hero occupies 100vh with centered headline stack and CTA, product UI panels float asymmetrically left and right over the photography. Below hero: white/parchment alternating bands with 64px section gaps. Logo bar is a single full-width row with sharp borders. Suite section uses a tab switcher (pill tabs) above a large product panel — single column centered. Feature sections use 2-column text-left / product-right alternating layout. Navigation is a fixed top bar that starts transparent over the hero and fades to white with blur on scroll. Footer is 4-column grid at full width in dark aubergine. Overall rhythm is spacious with 64px between sections and 36px internal section padding."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #292827 (Ink)"
    - "background (canvas): #f2f0eb (Parchment)"
    - "card surface: #ffffff"
    - "border: #e3e3e2 (light) / #dcd7d3 (divider)"
    - "accent / outlined action border: #714cb6 (Iris)"
    - "secondary text: #666666 (Graphite)"
    - "dark frame (banner/footer): #421d24"
    - "primary action: #421d24 (filled action)"

    example_component_prompts:

    - "Hero Section: Full-bleed dusk photograph with linear-gradient(to left bottom, rgba(168,164,216,0.5), rgba(107,165,232,0.5), rgba(176,112,192,0.6), rgba(144,136,208,0.5)) overlay. Center-aligned headline: 'Superpowers, everywhere you work' in Super Sans VF (substitute: Inter Variable) weight 600, 64px, line-height 0.96, letter-spacing -1.79px, color #ffffff. Sub-headline at 20px weight 460, #ffffff, letter-spacing -0.16px. CTA button: background #ffffff, text #292827, 8px radius, 12px/24px padding, weight 500, 16px. Iris inset ring on focus: rgb(113,76,182) 0px 0px 0px 1px inset."

    - "Feature Section on Parchment: Background #f2f0eb. Section heading at 48px Super Sans VF weight 600, #292827, letter-spacing -1.30px, line-height 1.0. Body text at 16px weight 460, #666666, line-height 1.5. 'Get the suite' ghost button: transparent background, 1px solid #714cb6 border, text #714cb6, 8px radius, 6px/12px padding."

    - "Product Feature Card: Background #ffffff, 1px solid #e3e3e2 border, 16px border-radius, 16px padding. Label at 12px weight 500, #714cb6 with Iris icon. Heading at 28px weight 600, #292827, letter-spacing -0.62px. Body at 16px weight 460, #666666. Link at 14px weight 500, #714cb6, underline on hover."

    - "Announcement Banner: Full-width, background #421d24, 12px vertical padding, 32px horizontal padding. Text: 'Looking for Superhuman Mail?' at 14px weight 500, #ffffff. Inline 'Learn more' link in white, 16px radius inner button, no border."

    - "Suite Tab Switcher: Row of pill tabs, 999px radius. Active: background #e3e3e2, text #292827, 12px/16px padding. Inactive: transparent background, #292827 text. All tabs: 16px, weight 500, Super Sans VF."

  gradient_system:

    info: "Four radial spotlight gradients animate behind the hero section, positioned at different edges to simulate colored lighting on the photography:"
    - "Violet spotlight: radial-gradient(circle at 68% 50%, rgba(133,125,250,0.6) 0px, rgba(0,0,0,0) 50%)"
    - "Pink spotlight: radial-gradient(circle at 50% 98%, rgba(255,51,102,0.6) 0px, rgba(0,0,0,0) 50%)"
    - "Blue spotlight: radial-gradient(circle at 93% 50%, rgba(75,105,227,0.5) 0px, rgba(0,0,0,0) 50%)"
    - "Cyan spotlight: radial-gradient(circle at 50% 75%, rgba(104,222,255,0.5) 0px, rgba(0,0,0,0) 50%)"

    info: "These stack via multiple background layers to produce the cinematic dusk atmosphere. The CTA button also has a rotating gradient animation (hero-button-gradient-angle-rotate) on hover — a slow rotation of the violet-blue palette around the button border."

  motion_philosophy:

    info: "Motion is expressive but controlled. Base transition: 0.2s ease on color, border-color, background-color, box-shadow. Slower 0.3s for layout shifts (gap changes). Hero entrance uses fade-slide sequences: fade-slide-down-from-transparent (headline) and fade-slide-up-from-transparent (subtext), creating a cinematic reveal. The navigation bar transitions from transparent+blur-0 to white+blur on scroll (page_header-fade-in, page_header-remove-blur). Asset grids use fade-in/fade-out (0.5s) for tab switching. The signature CTA micro-interaction is hero-button-gradient-angle-rotate — a continuous slow rotation of the gradient behind the button border on hover. Easing is overwhelmingly ease (780×) with no linear transitions — everything accelerates and decelerates."

  similar_brands:

    - "**Linear** — Same single chromatic accent on ghost button borders against warm-neutral canvas, tight negative letter-spacing on display headlines, no shadow elevation"
    - "**Notion** — Warm off-white canvas (not pure white) as page background, sharp-edged logo strips, product UI as primary hero visual"
    - "**Loom** — Full-bleed dark photography hero transitioning to light content sections, glassmorphic floating UI panels over photography"
    - "**Arc Browser** — Muted violet/purple accent system against near-monochrome warm neutrals, cinematic lifestyle hero photography with product overlay"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-canvas: #f2f0eb;
          --color-ink: #292827;
          --color-bone: #ffffff;
          --color-fog: #e3e3e2;
          --color-driftwood: #dcd7d3;
          --color-graphite: #666666;
          --color-aubergine: #421d24;
          --color-aubergine-deep: #4e242c;
          --color-iris: #714cb6;
          --color-indigo-glow: #353088;
          --color-lavender-chip: #d4c7ff;
          --color-hero-dusk-gradient: #a8a4d8;
          --gradient-hero-dusk-gradient: linear-gradient(to left bottom, rgba(168, 164, 216, 0.5), rgba(107, 165, 232, 0.5), rgba(176, 112, 192, 0.6), rgba(144, 136, 208, 0.5));
        
          /* Typography — Font Families */
          --font-super-sans-vf: 'Super Sans VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.14px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.31px;
          --text-heading: 28px;
          --leading-heading: 1.2;
          --tracking-heading: -0.62px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.3px;
          --text-display: 64px;
          --leading-display: 0.96;
          --tracking-display: -1.79px;
        
          /* Typography — Weights */
          --font-weight-w460: 460;
          --font-weight-medium: 500;
          --font-weight-w540: 540;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 999px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-links: 12px;
          --radius-pills: 999px;
          --radius-buttons: 8px;
          --radius-cardslarge: 24px;
          --radius-announcementbanner: 16px;
        
          /* Shadows */
          --shadow-subtle: rgb(113, 76, 182) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-hero-photography: #421d24;
          --surface-parchment-canvas: #f2f0eb;
          --surface-bone-card: #ffffff;
          --surface-fog-divider: #e3e3e2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-canvas: #f2f0eb;
          --color-ink: #292827;
          --color-bone: #ffffff;
          --color-fog: #e3e3e2;
          --color-driftwood: #dcd7d3;
          --color-graphite: #666666;
          --color-aubergine: #421d24;
          --color-aubergine-deep: #4e242c;
          --color-iris: #714cb6;
          --color-indigo-glow: #353088;
          --color-lavender-chip: #d4c7ff;
          --color-hero-dusk-gradient: #a8a4d8;
        
          /* Typography */
          --font-super-sans-vf: 'Super Sans VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.14px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.31px;
          --text-heading: 28px;
          --leading-heading: 1.2;
          --tracking-heading: -0.62px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.3px;
          --text-display: 64px;
          --leading-display: 0.96;
          --tracking-display: -1.79px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 999px;
        
          /* Shadows */
          --shadow-subtle: rgb(113, 76, 182) 0px 0px 0px 1px inset;
        }