DESIGN.md inspired by Pitch

---
name: Pitch
tagline: Enormous Mark Pro headlines on a black hero, then a clean white workspace — violet #5318eb is the one loud move.
updated_at: 2026-05-29T00:00:00.000Z
published_at: 2026-05-28T23:12:55.645Z
author: webdesignhot
source_url: https://pitch.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas, design-tools]
tags: [dark, light, bold, sans, presentations, multi-theme]
preview_swatch: ['#000000', '#5318eb', '#ffffff']
related: [framer, figma, linear]
description: 'Pitch wears two faces: a pitch-black hero where Mark Pro Bold headlines run to 180px in pure white, then a calm, full-white workspace where black body text does the explaining. The whole brand spends its color budget on one signature — a violet #5318eb "Generate" button at a tight 4px radius — while a classic blue-link "Log in" keeps the utility chrome honest. It''s an AI presentation tool that treats type-as-poster as the product demo: the headlines are the slides.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
colors:
  bg: '#ffffff'
  bg-hero: '#000000'
  surface: '#0a0a0a'
  surface-light: '#f6f5fb'
  text: '#000000'
  text-on-hero: '#ffffff'
  text-muted: '#5b5b66'
  text-muted-on-hero: '#a8a8b3'
  brand: '#5318eb'
  brand-hover: '#4512c9'
  brand-active: '#3a0fab'
  on-brand: '#ffffff'
  brand-tint: '#ebe3fe'
  link: '#0000ee'
  link-hover: '#3a0fab'
  border: '#e4e2ee'
  border-strong: '#cbc8da'
  border-on-hero: '#26262e'
  success: '#16a34a'
  warning: '#d97706'
  danger: '#dc2626'
  info: '#5318eb'

typography:
  display:
    family: '"Mark Pro Bold", "Mark Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'
    weights: [600, 700]
  body:
    family: '"Mark Pro", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 180, weight: 700, lineHeight: 0.92, tracking: '-0.04em',  family: display }
    display-xl:      { size: 120, weight: 700, lineHeight: 0.95, tracking: '-0.035em', family: display }
    display-lg:      { size: 80,  weight: 700, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    h1:              { size: 56,  weight: 700, lineHeight: 1.05, tracking: '-0.025em', family: display }
    h2:              { size: 40,  weight: 700, lineHeight: 1.1,  tracking: '-0.02em',  family: display }
    h3:              { size: 28,  weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h4:              { size: 22,  weight: 600, lineHeight: 1.3,  tracking: '-0.006em', family: body }
    h5:              { size: 18,  weight: 600, lineHeight: 1.35, tracking: '0',        family: body }
    body-lg:         { size: 20,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16,  weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14,  weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 14,  weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 13,  weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    eyebrow:         { size: 12,  weight: 600, lineHeight: 1.4,  tracking: '0.08em',   family: body }
    code:            { size: 14,  weight: 400, lineHeight: 1.6,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64
  hero-y: 160
  section-y: 120
  gutter: 24

components:
  button-primary:
    bg: '#5318eb'
    text: '#ffffff'
    radius: 4
    paddingX: 16
    paddingY: 10
    font: 'Mark Pro 500 / 14px'
    hover: 'bg #4512c9'
  button-secondary:
    bg: '#ffffff'
    text: '#0000ee'
    radius: 30
    paddingX: 16
    paddingY: 10
    border: '1px solid #cbc8da'
    use: '"Log in" — classic blue link in a pill'
  button-ghost:
    bg: 'transparent'
    text: '#000000'
    radius: 4
    paddingX: 16
    paddingY: 10
    border: '1px solid #e4e2ee'
    hover: 'bg #f6f5fb'
  button-on-hero:
    bg: '#ffffff'
    text: '#000000'
    radius: 4
    paddingX: 16
    paddingY: 10
    use: 'inverted CTA on the black hero band'
  card:
    bg: '#ffffff'
    border: '1px solid #e4e2ee'
    radius: 12
    padding: 24
    shadow: '0 1px 2px rgba(15, 12, 40, 0.05)'
  card-dark:
    bg: '#0a0a0a'
    text: '#ffffff'
    border: '1px solid #26262e'
    radius: 12
    padding: 24
  input:
    bg: '#ffffff'
    border: '1px solid #cbc8da'
    text: '#000000'
    radius: 8
    paddingX: 12
    paddingY: 8
    focus: 'border #5318eb + ring 3px rgba(83,24,235,0.2)'
  badge:
    bg: '#ebe3fe'
    text: '#3a0fab'
    radius: 4
    paddingX: 8
    paddingY: 3
    font: 'Mark Pro 500 / 12px'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce — generative/auto-play loops freeze to a still frame, scroll reveals collapse to opacity-only'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: '0 1px 2px rgba(15, 12, 40, 0.05)'
  standard: '0 4px 16px rgba(15, 12, 40, 0.08)'
  elevated: '0 12px 32px rgba(15, 12, 40, 0.12), 0 2px 6px rgba(15, 12, 40, 0.05)'
  glow-violet: '0 0 32px rgba(83, 24, 235, 0.35)'
  ring: '0 0 0 3px rgba(83, 24, 235, 0.25)'

accessibility:
  contrast-text-on-bg: 21.0          # AAA — black on white
  contrast-text-on-hero: 21.0        # AAA — white on black hero
  contrast-on-brand-on-brand: 6.6    # AA — white on #5318eb
  contrast-muted-on-bg: 6.4          # AA — #5b5b66 on white
  contrast-link-on-bg: 8.6           # AAA — #0000ee on white
  focus-ring: '3px rgba(83,24,235,0.25) ring with brand-colored border'
  reduced-motion-honored: true
  keyboard-nav: 'visible focus on every interactive; tab order follows DOM source'

themes:
  default: light
  available: [light, dark]
  switch-via: 'Marketing site default is white/light; the hero (and select interstitial bands) ships full black with white display type. The black is a composition device, not a user-toggled global dark mode.'
---

## 1. Visual Theme & Atmosphere

Pitch opens on a black stage. The hero is pure `#000000`, and into it Pitch drops a single Mark Pro Bold headline at an enormous 180px in pure white — type so large it stops being a sentence and becomes the slide. This is the brand's entire thesis compressed into one screen: a presentation tool whose own homepage is the most confident slide in the deck. The headline is the hero image; there is no product mockup competing for the eye above the fold.

Scroll past the hero and the atmosphere inverts. The workspace itself is calm, bright, and white — black body text on `#ffffff`, generous air, restrained chrome. Pitch spends almost none of its color budget on the working surface, because the working surface is where you build and the brand gets out of the way. The contrast between the theatrical black hero and the clinical white body is the rhythm: declare loudly, then work quietly.

The one place color does shout is the primary action. Pitch's signature violet `#5318eb` lives on the "Generate" button — the AI entry point — at a deliberately tight 4px radius. That near-square corner is a quiet anti-trend move: while most 2026 SaaS rounds its CTAs into pills, Pitch keeps its primary button crisp and editorial, a chip rather than a lozenge. The violet plus the giant type is the whole identity; everything else is service-grade neutrals.

Utility chrome stays honest. The "Log in" control is a classic browser-blue link (`#0000ee`) sitting in a soft 30px pill — a small, almost retro signal that this is a tool, not a billboard. Pitch never lets the secondary action borrow the brand violet; the violet is reserved for the one moment that matters, the AI generate.

The result is an atmosphere of **confident minimalism with one violet exclamation mark**. Where Framer floods the page with a four-color gradient quartet and Linear leans on a dark-first product chrome, Pitch is monochrome discipline punctuated by a single saturated purple — the type does the drama, the violet does the pointing.

**Key Characteristics**

- Black `#000000` hero stage with white Mark Pro Bold headlines at up to 180px
- Type-as-poster: the headline is the hero, no mockup competing above the fold
- Calm white `#ffffff` workspace below — black body text, restrained chrome
- Signature violet `#5318eb` reserved for the primary "Generate" / AI action only
- Tight 4px radius on the primary button — editorial chip, not pill (anti-trend)
- Classic blue-link `#0000ee` "Log in" in a soft pill — honest utility chrome
- Monochrome discipline: color budget spent almost entirely on one violet
- Full black ↔ full white inversion as the page's compositional rhythm
- Mark Pro across the system — geometric, clean, optically tuned at display sizes
- Generous whitespace; the air around the headline is part of the headline

## 2. Color Palette & Roles

### Primary / Canvas

- **bg** (`#ffffff`): the workspace canvas — pure white, no warm tilt; where all the real work and reading happens
- **bg-hero** (`#000000`): the black hero stage and interstitial inversion bands — pure black behind the giant white display type
- **surface** (`#0a0a0a`): near-black panel on the dark hero — cards and chips that sit one step off the `#000` ground
- **surface-light** (`#f6f5fb`): faintly violet-tinted panel on white — section wells, hovered list rows, code blocks

### Text

- **text** (`#000000`): body and headings on white — full black, the discipline against grey-on-grey SaaS softening
- **text-on-hero** (`#ffffff`): white display type on the black hero — the 180px headline color
- **text-muted** (`#5b5b66`): captions, meta, helper copy on white — neutral with the faintest cool cast
- **text-muted-on-hero** (`#a8a8b3`): secondary copy on the black hero, kept above the AAA floor

### Brand & Action

- **brand** (`#5318eb`): the Pitch violet — primary "Generate" / AI CTA fill, the single loud color in the system
- **brand-hover** (`#4512c9`): pressed/hover state of the primary button
- **brand-active** (`#3a0fab`): active/depressed state — deepest violet
- **on-brand** (`#ffffff`): white label on the violet button
- **brand-tint** (`#ebe3fe`): pale violet wash — badge backgrounds, selection highlight, focus halo at low alpha

### Interactive

- **link** (`#0000ee`): the classic browser-blue "Log in" link — utility chrome, never the brand violet
- **link-hover** (`#3a0fab`): on hover, the link warms toward the brand violet (the one place blue and violet meet)
- **selected**: `rgba(83, 24, 235, 0.12)` — soft violet tint on selected rows/cells
- **disabled**: `#a8a8b3` text on `#f6f5fb` bg

### Neutral & Borders

- **border** (`#e4e2ee`): default hairline on white — faint violet-grey, softer than pure grey
- **border-strong** (`#cbc8da`): emphasized border — inputs at rest, dividers under headers
- **border-on-hero** (`#26262e`): hairline on the black hero — separates dark cards from `#000` ground

### Surface & Shadow

Pitch's elevation is restrained. On white, shadows are violet-tinted-black at very low alpha so cards lift without casting grey. On the black hero, depth is tonal (`#000` → `#0a0a0a`) rather than shadowed.

- **shadow-ambient** `rgba(15, 12, 40, 0.05)` — resting card
- **shadow-standard** `rgba(15, 12, 40, 0.08)` — hovered card / dropdown
- **shadow-elevated** `rgba(15, 12, 40, 0.12)` — modal, floating panel
- **glow-violet** `rgba(83, 24, 235, 0.35)` — focused "Generate" halo, the brand's only colored glow

### Semantic

- **success** (`#16a34a`): saved / published confirmations
- **warning** (`#d97706`): unsaved changes, quota nudges
- **danger** (`#dc2626`): destructive actions, delete confirmations
- **info** (`#5318eb`): informational accents reuse the brand violet — Pitch doesn't introduce a separate info-blue

## 3. Typography Rules

### Font Family

- **Display & Body**: Mark Pro — a clean geometric humanist sans. Display uses **Mark Pro Bold** (700) at heroic sizes; body uses Mark Pro 400/500/600. The audit's `sans-serif` 12px reading on `body` is sampling noise from an un-styled probe node; the real running font is Mark Pro / a clean system sans fallback.
- **Mono**: system mono stack (`ui-monospace`, SF Mono, Menlo) — used only for embed snippets, version strings, and inline code in docs. Rare on the marketing surface.
- **Fallback chain**: `system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif` — so the layout holds before Mark Pro loads.

### Hierarchy

| Role | Font | Size | Weight | Line H | Tracking | Notes |
|---|---|---|---|---|---|---|
| display-hero | Mark Pro Bold | 180 | 700 | 0.92 | -0.04em | The black-hero headline — poster-scale, white on `#000` |
| display-xl | Mark Pro Bold | 120 | 700 | 0.95 | -0.035em | Large section opener |
| display-lg | Mark Pro Bold | 80 | 700 | 1.0 | -0.03em | Standard H1 below hero |
| h1 | Mark Pro Bold | 56 | 700 | 1.05 | -0.025em | Page / subsection title |
| h2 | Mark Pro Bold | 40 | 700 | 1.1 | -0.02em | Feature header |
| h3 | Mark Pro Bold | 28 | 600 | 1.2 | -0.012em | Card / block header |
| h4 | Mark Pro | 22 | 600 | 1.3 | -0.006em | Component title |
| h5 | Mark Pro | 18 | 600 | 1.35 | 0 | Inline label header |
| body-lg | Mark Pro | 20 | 400 | 1.55 | 0 | Hero subhead, lead paragraph |
| body | Mark Pro | 16 | 400 | 1.55 | 0 | Default paragraph |
| body-sm | Mark Pro | 14 | 400 | 1.5 | 0 | Captions, secondary copy |
| label | Mark Pro | 14 | 500 | 1.4 | 0 | Form labels, button text |
| caption | Mark Pro | 13 | 500 | 1.4 | 0 | Meta under cards |
| eyebrow | Mark Pro | 12 | 600 | 1.4 | 0.08em | Section taglines, ALL CAPS |
| code | system mono | 14 | 400 | 1.6 | 0 | Inline code, embed snippets |

### Principles

- **Display is the product demo** — Mark Pro Bold at 120–180px on the hero is the single most important typographic move; treat the headline as a poster, not a sentence.
- **Negative tracking scales with size** — `-0.04em` at 180px easing toward `-0.012em` by 28px; the tightness is what makes the giant type read as designed, not just big.
- **Line-height compresses at hero scale** — display-hero runs at 0.92 so multi-line headlines stack as a tight block.
- **Body stays neutral 16/1.55** — once below the headline, type is utility; the drama is spent above the fold.
- **No serif anywhere** — Pitch's contrast is scale and color, never typeface mixing.
- **One body weight range** — 400 for prose, 500 for labels/buttons, 600 for sub-headers; never lighter than 400.
- **All-caps eyebrows are the only positive tracking** (+0.08em) — used sparingly for section kickers.
- **White on black is exact** — hero type is `#ffffff`, never an off-white; the contrast is part of the confidence.

## 4. Component Stylings

### Buttons

**Primary — "Generate" (the signature)**
- bg `#5318eb`, text `#ffffff`, radius `4px` (tight editorial chip — the brand stamp)
- padding `10px 16px`, Mark Pro 500 14px label
- hover: bg `#4512c9`; active: bg `#3a0fab`
- focus: 3px ring `rgba(83,24,235,0.25)` + brand-colored border
- use: the AI generate action and the single most important CTA per surface

**Secondary — "Log in"**
- bg `#ffffff`, text `#0000ee` (classic blue link), radius `30px` (soft pill)
- padding `10px 16px`, border `1px solid #cbc8da`
- hover: text warms to `#3a0fab`, border `#5318eb`
- use: account / utility entry — deliberately not the brand violet

**Ghost**
- bg transparent, text `#000000`, radius `4px`, border `1px solid #e4e2ee`
- padding `10px 16px`
- hover: bg `#f6f5fb`
- use: tertiary actions, toolbar buttons, "Learn more"

**On-Hero (inverted)**
- bg `#ffffff`, text `#000000`, radius `4px`
- padding `10px 16px`
- hover: bg `#f6f5fb`
- use: a CTA sitting on the black hero band when the violet would clash with the surrounding type

### Cards

**Card (light)**
- bg `#ffffff`, radius `12px`, padding `24px`
- border `1px solid #e4e2ee`, shadow ambient `0 1px 2px rgba(15,12,40,0.05)`
- hover: shadow standard + 2px translateY lift, 240ms ease-standard

**Card (dark / on hero)**
- bg `#0a0a0a`, text `#ffffff`, radius `12px`, padding `24px`
- border `1px solid #26262e`, no shadow (depth is tonal)
- hover: border lightens toward `#3a3a44`

**Template tile** (deck thumbnail)
- 16:9 thumbnail, radius `8px`, 1px `#e4e2ee` border
- hover: shadow standard + violet glow hint, title row reveals below

### Badges / Tags / Pills

**Badge (brand)**
- bg `#ebe3fe`, text `#3a0fab`, radius `4px`
- padding `3px 8px`, Mark Pro 500 12px — matches the chip language of the primary button

**Badge (neutral)**
- bg `#f6f5fb`, text `#5b5b66`, radius `4px`
- padding `3px 8px`

**Pill tag** (filter chip)
- bg `#ffffff`, text `#000000`, radius `9999px`, border `1px solid #cbc8da`
- active: bg `#ebe3fe`, text `#3a0fab`, border `#5318eb`

### Inputs / Forms

**Text Input**
- bg `#ffffff`, border `1px solid #cbc8da`, radius `8px`
- padding `8px 12px`, Mark Pro 400 16px
- focus: border `#5318eb` + ring `3px rgba(83,24,235,0.2)`
- placeholder: `#a8a8b3`

**AI Prompt Field** (the generate input)
- bg `#ffffff`, border `1px solid #cbc8da`, radius `12px`, larger padding `12px 16px`
- trailing inline violet "Generate" button (radius 4px) docked at the right edge
- focus: violet glow `0 0 32px rgba(83,24,235,0.35)`

### Navigation

**Top Nav**
- height `64px`, 24px gutters; transparent on the black hero, flips to white with a `#e4e2ee` bottom hairline on scroll
- logo left, nav links center (Product / Templates / Pricing), actions right: blue-link "Log in" + violet "Generate"/"Sign up"

**Footer**
- bg `#000000` (returns to the hero black), white type, 96px vertical padding
- 4-column link grid, hover: white text underline-grow

### Tooltip / Toast

**Tooltip** — bg `#000000`, text `#ffffff`, radius `6px`, padding `8px 12px`, Mark Pro 500 13px
**Toast** — bg `#ffffff`, border `1px solid #e4e2ee`, radius `12px`, shadow elevated, 16px padding

## 5. Layout Principles

### Spacing System

- **base** `4px`, scale `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 160]`
- Density philosophy: **generous-but-grounded**. Pitch is airier than a dense dashboard but never as theatrical as Framer's 160px-default cadence — the air exists to frame the giant headline, then tightens for the working content below.

### Grid & Container

- **page-width** `1280px` with 24px gutters
- The black hero **bleeds full-width**; content resets to the 1280 container below
- 12-column grid; feature rows use clean halves (6/6) and thirds (4/4/4) rather than Framer's asymmetric splits — Pitch is more orderly
- **prose-width** `720px` for docs and changelog

### Whitespace Philosophy

The whitespace around the hero headline is structural, not decorative — the 180px type needs a quiet black field to read as a poster. Below the fold, whitespace tightens: feature sections sit on a `120px` vertical rhythm, cards pack at `24px` internal padding. The page exhales at the top and gets to work underneath.

### Section Cadence

A typical page reel:
1. Black hero — single 180px white headline + short subhead + violet "Generate"
2. White feature row — product screenshot, 6/6 split
3. White template gallery — 3- or 4-up tile grid
4. Optional black interstitial — one bold claim, white type
5. White testimonial / logo wall
6. Black footer — returns to the hero color, closing the loop

The black-open / black-close framing makes the white middle feel like the workspace held inside the brand.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|---|---|---|
| Micro | 2px | Tiny inline chips, color swatches |
| Standard | 4px | **Primary button**, badges, ghost buttons — the signature tight corner |
| Medium | 8px | Inputs, template thumbnails |
| Comfortable | 12px | Cards, AI prompt field, toasts |
| Large | 16px | Large panels, modals |
| Pill (utility) | 30px | The "Log in" secondary button — soft pill, deliberately set apart from the violet chip |
| Pill (full) | 9999px | Filter chips, avatars, status dots |

The signature shape is the **4px primary button** — a near-square chip that reads editorial and modern against the pill-button norm. Note the intentional split: the brand action is sharp (4px), the utility "Log in" is soft (30px). That contrast is on purpose.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow, no border | Headline on the black hero |
| 1 | 1px hairline `#e4e2ee` | Resting cards on white |
| 2 | shadow-ambient `0 1px 2px rgba(15,12,40,0.05)` | Lifted cards, template tiles |
| 3 | shadow-standard `0 4px 16px rgba(15,12,40,0.08)` | Hovered cards, dropdowns |
| 4 | shadow-elevated `0 12px 32px rgba(15,12,40,0.12)` | Modals, floating panels |
| 5 | glow-violet `0 0 32px rgba(83,24,235,0.35)` | Focused "Generate" button / AI field |

### Shadow Philosophy

Pitch's shadows are **violet-tinted black at very low alpha** (`rgba(15,12,40,…)`) so cards lift cleanly without muddying the white workspace with grey. Elevation is modest — 1px to 16px blur for most UI — because the page's real depth cue is the black/white inversion, not literal shadow. The one colored shadow is the violet glow, used exclusively to mark the focused AI action. On the black hero, there are no shadows at all; depth there is tonal (`#000` → `#0a0a0a`).

## 8. Interaction & Motion

### Easing Curves

- **ease-standard** `cubic-bezier(0.4, 0, 0.2, 1)` — most hover and state transitions
- **ease-emphasized** `cubic-bezier(0.2, 0, 0, 1)` — section reveals, hero entrance, modal open

### Duration Buckets

- **fast** `150ms` — button hover, link color, focus ring
- **standard** `240ms` — card hover lift, dropdown reveal
- **slow** `320ms` — modal entry, section fade-up, black↔white band crossfade

### Per-Component Recipes

- **Primary button hover**: bg `#5318eb → #4512c9`, 150ms ease-standard; active deepens to `#3a0fab`
- **Card hover**: shadow ambient → standard + 2px translateY, 240ms ease-standard
- **Link hover**: `#0000ee` warms to `#3a0fab` over 150ms (the blue→violet warm is a Pitch detail)
- **AI "Generate" focus**: violet glow blooms `0 0 32px rgba(83,24,235,0.35)` over 240ms
- **Hero entrance**: the 180px headline fades-up 24px over 320ms ease-emphasized on first paint

### Page Transitions

- Section reveals on scroll: fade-up 16px, 320ms slow ease-emphasized
- Black interstitial bands crossfade in rather than hard-cut, keeping the inversion smooth
- Generative/AI demos auto-play in a short loop with no pause chrome

### Reduced Motion Strategy

Pitch respects `prefers-reduced-motion: reduce`. Under reduced motion:
- Generative / auto-play loops freeze to a representative still frame
- Scroll-triggered fade-ups become opacity-only (no translate)
- The hero entrance renders in place with no fade-up
- Hover lifts disable; only color and border changes remain

## 9. Accessibility & A11y

### Contrast Pairs

- text `#000000` on bg `#ffffff`: **21.0** — AAA at every size
- text-on-hero `#ffffff` on bg-hero `#000000`: **21.0** — AAA (the giant headline is maximally legible)
- on-brand `#ffffff` on brand `#5318eb`: **~6.6** — AA at body sizes, AAA for the large/bold button label
- text-muted `#5b5b66` on bg `#ffffff`: **~6.4** — AA body, AAA large
- link `#0000ee` on bg `#ffffff`: **~8.6** — AAA — the classic blue link is highly legible
- text-muted-on-hero `#a8a8b3` on bg-hero `#000000`: **~8.4** — AAA on the dark band
- border `#e4e2ee` on bg `#ffffff`: ~1.2 — decorative hairline only, never load-bearing for meaning

### Focus Indicators

- 3px violet ring `rgba(83,24,235,0.25)` + a `#5318eb` border on light surfaces
- On the black hero, focus uses a 2px `#ffffff` ring with offset
- Never `outline: none` without a visible replacement
- Visible on every interactive: buttons, links, inputs, cards-as-links, template tiles

### ARIA Patterns

- AI prompt field: `role="textbox"` with `aria-label="Describe the presentation to generate"`; the generate trigger is a real `<button>`
- Dialog / modal: `role="dialog"` + `aria-modal="true"` + `aria-labelledby` + focus trap
- Template gallery: `role="list"` / `role="listitem"`, each tile a focusable link with an accessible name
- Auto-playing demo loops: `aria-hidden="true"` when purely decorative, captioned when informational

### Keyboard Nav

- Tab order matches DOM source order
- ESC closes any open modal or dropdown
- ARROW navigates within tab groups, template grids, and listboxes
- ENTER / SPACE activate buttons; SPACE does not scroll inside a focused button
- The "Generate" action is reachable and triggerable from the keyboard

### Screen Reader Hints

- Logo SVG carries `<title>Pitch</title>`
- The hero headline is a real `<h1>`, not an image, so it's read verbatim
- Decorative auto-play demos: `aria-hidden="true"`, `role="presentation"`

### Reduced Motion

- `prefers-reduced-motion: reduce` honored site-wide
- Auto-play loops pause and show a poster frame
- Scroll reveals become opacity-only; hover lifts disable

## 10. Responsive Behavior

### Breakpoints

| Tier | Min-width | Use |
|---|---|---|
| mobile | 0–639px | Single-column stack |
| tablet | 640–1023px | 2-column feature grids |
| desktop | 1024–1279px | Full 12-column |
| wide | 1280px+ | Container caps at 1280, generous gutters |

### Touch Targets

Minimum 44×44px on mobile. The primary "Generate" button keeps its 4px radius but grows padding to `12px 20px` on touch to clear a 48px tap target.

### Collapsing Strategy

- **Hero display**: 180px → 120px → 80px → 48px down the cascade; the headline always stays the largest element on screen
- **Feature rows**: 6/6 split → 1/1 stack
- **Template gallery**: 4-up → 2-up → 1-up
- **Top nav**: full link bar → hamburger drawer at <1024px
- **Section rhythm**: 120px → 80px → 56px

### Image Behavior

- Hero is type-only on small screens — no product image competes with the headline
- Product screenshots: `object-fit: contain`, rounded `8px`, capped max-height
- Auto-play demos pause on mobile to save battery; a poster frame shows

### Container Queries

The template gallery uses container queries: when a tile's container narrows below ~360px the metadata row collapses under the thumbnail rather than sitting beside it.

## 11. Content & Voice

### Tone

**Plainspoken and confident, built for makers in a hurry.** Pitch talks to people who have a deck due, not a brand to admire. Copy is short, declarative, and action-first — "The AI presentation workspace", not "Reimagine how your team tells its story". The product does the impressing; the words just point at the button.

### Microcopy Patterns

- **Button verbs**: "Generate", "Start for free", "Log in", "New presentation", "Use template"
- **Empty states**: "No presentations yet — generate one to get started." (Invitation, not apology.)
- **Errors**: "Something went wrong generating that. Try again." (Plain, blame-free.)
- **Success**: "Saved." / "Published." (One word. Done.)
- **Loading (AI)**: "Generating…" with the violet glow active on the button

### CTA Verb Conventions

The primary CTA is **"Generate"** wherever the AI surface is in reach — it's both the product's verb and its color. Outside the AI flow, the primary is **"Start for free"**. The account entry is always **"Log in"** (blue link), never dressed up as a brand action. Avoid "Get started" sprawl: pick "Generate" or "Start for free", never both in one band.

### Empty States

Pitch leaves room rather than filling it with skeleton ghosts. An empty deck list reads "Generate one to get started" in muted Mark Pro 16 — pointing at the violet button rather than apologizing for the blank.

## 12. Dark Mode & Theming

Pitch is not a single-theme brand: the marketing surface runs **light by default with full-black hero and interstitial bands**, and the product app itself supports a real dark workspace. On the marketing site the black is a composition device — declare on black, work on white — rather than a user-toggled preference. The token swap below applies inside any `<section data-theme="dark">` (the hero, interstitials, footer):

```yaml
colors-dark:
  bg: '#000000'           # hero / interstitial / footer ground
  surface: '#0a0a0a'      # near-black card
  surface-2: '#16161c'    # hover card
  text: '#ffffff'         # display + body on black
  text-muted: '#a8a8b3'   # secondary copy on black
  brand: '#5318eb'        # violet stays identical across themes
  brand-hover: '#6a35f0'  # lifts slightly on dark for contrast
  on-brand: '#ffffff'
  border: '#26262e'       # hairline on black
  border-strong: '#3a3a44'
  link: '#8a7bff'         # blue link lightens toward violet on black for legibility
```

Note: the brand violet `#5318eb` is held constant across light and dark — it's the one fixed point of the system. The blue "Log in" link is the only token that shifts hue on dark (toward a lighter violet-blue) so it clears contrast on `#000`.

## 13. Lineage & Influences

Pitch descends from the **type-as-poster lineage** that runs from Swiss/International Typographic Style through to the oversized-headline era of modern SaaS marketing. The black hero with one enormous white headline is the keynote-slide instinct turned into a homepage: a single confident statement, maximal type, no clutter. Its closest contemporary sibling is Framer, which shares the heroic-display-on-inverted-band move — but where Framer floods a four-color gradient quartet across atmospheric bands, Pitch stays monochrome and spends its entire color budget on one violet action chip.

What Pitch rejects is decoration for its own sake. There's no gradient mesh, no glassmorphism, no rainbow of accents. The discipline is closer to Linear's restraint and Vercel's achromatic confidence, but Pitch breaks from both by allowing exactly one saturated color — the `#5318eb` violet — and pinning it to the AI generate action so the color always means "do the thing". The tight 4px button radius is a deliberate counter to the pill-button consensus: it keeps Pitch reading editorial and tool-like rather than consumer-app round. The blue-link "Log in" is an almost nostalgic nod to the browser-native web — utility that doesn't pretend to be brand.

**Named Influences**

- **Framer** ([framer.com](https://www.framer.com)) — heroic display type on inverted black bands; the loud-headline marketing posture
- **Linear** ([linear.app](https://linear.app)) — monochrome restraint and a single accent reserved for the primary action
- **Vercel** ([vercel.com](https://vercel.com)) — achromatic black/white discipline and confidence in negative space
- **Figma** ([figma.com](https://www.figma.com)) — design-tool-as-canvas marketing and clean product chrome
- **Stripe** ([stripe.com](https://stripe.com)) — plainspoken maker-first voice and tight, utilitarian button language

## 14. Do's and Don'ts

### Do

- Open on a black hero with one enormous Mark Pro Bold headline in white — go big, 120px+ minimum
- Keep the primary "Generate" button violet `#5318eb` at a tight 4px radius — that's the brand stamp
- Reserve the violet for the single most important action per surface; everything else stays neutral
- Use a classic blue link `#0000ee` for "Log in" utility chrome — don't dress it as a brand button
- Tighten display tracking (`-0.04em` at hero scale) so the giant type reads designed, not just large
- Invert to white the moment the work starts — black for the statement, white for the workspace
- Hold body text at full black `#000000` on white; resist grey-on-grey softening
- Keep shadows violet-tinted black at low alpha so cards lift without muddying the white
- Frame pages black-open / black-close (hero + footer) so the white middle feels held inside the brand
- Honor `prefers-reduced-motion` — freeze auto-play AI demos to a still frame

### Don't

- Round the primary button into a pill — the 4px chip is signature; a pill reads as a different brand
- Spread the violet across multiple actions — more than one violet per surface dilutes the "do the thing" meaning
- Put the brand violet on the "Log in" control — that stays a blue link, on purpose
- Add a gradient, glassmorphism, or a second accent color — Pitch is monochrome plus one violet
- Use an off-white or near-black — hero is exactly `#000000`, body is exactly `#ffffff`
- Let a product mockup compete with the hero headline above the fold — the type is the hero
- Drop body weight below 400 or introduce a serif anywhere
- Soften body text to grey on white — full `#000` is the discipline
- Pack two equal-weight CTAs into one band — Pitch leads with one clear primary
- Animate the AI glow or auto-play loops without a reduced-motion fallback

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg:            #ffffff   (white workspace)
bg-hero:       #000000   (black hero stage)
text:          #000000   (black body on white)
text-on-hero:  #ffffff   (white display on black)
text-muted:    #5b5b66   (captions, meta)
brand:         #5318eb   (violet — "Generate" CTA)
brand-hover:   #4512c9
on-brand:      #ffffff   (label on violet)
brand-tint:    #ebe3fe   (badge / selection wash)
link:          #0000ee   (classic blue "Log in")
border:        #e4e2ee   (hairline on white)
```

### Example Component Prompts

1. *"Create a hero in Pitch style: full-black `#000000` background, a single Mark Pro Bold headline in pure white at 140px reading 'The AI presentation workspace' tracked at -0.035em, a short white subhead in Mark Pro 20 muted `#a8a8b3` below, and one violet `#5318eb` primary button at 4px radius with white label 'Generate'. No product image — the type is the hero."*
2. *"Design a Pitch-style primary button: violet `#5318eb` fill, white Mark Pro 500 14px label, tight 4px radius, 10px×16px padding; hover deepens to `#4512c9`, focus shows a 3px `rgba(83,24,235,0.25)` ring. Keep it square-cornered, not a pill."*
3. *"Build a Pitch-style AI prompt field: white input, 1px `#cbc8da` border, 12px radius, with a violet `#5318eb` 'Generate' button (4px radius) docked inline at the right edge; on focus add a violet glow `0 0 32px rgba(83,24,235,0.35)`."*
4. *"Compose a Pitch-style top nav: 64px tall, transparent over the black hero then white-with-`#e4e2ee`-hairline on scroll, logo left, links center, and on the right a blue-link `#0000ee` 'Log in' in a 30px pill beside a violet 4px 'Generate' button."*
5. *"Design a Pitch-style template gallery on white: 4-up grid of 16:9 thumbnails, 8px radius, 1px `#e4e2ee` borders, Mark Pro 14 titles below; on hover add shadow `0 4px 16px rgba(15,12,40,0.08)` and a faint violet glow hint."*
6. *"Create a Pitch-style black interstitial band: full `#000000` section, one bold white Mark Pro Bold claim at 80px centered, a single white-on-transparent ghost button at 4px radius below, generous vertical air."*

### Iteration Guide

1. **Go bigger on the headline.** If the hero feels timid, the first move is type scale — push from 80px toward 120–180px. Pitch's confidence is in the size.
2. **Hold the 4px chip.** If a button drifts toward 8px, 12px, or a pill, force it back to 4px. The sharp corner is the brand; the pill is reserved only for the blue "Log in".
3. **Cut color to one violet.** If the design has more than one accent, collapse to `#5318eb` and pin it to the single most important action.
4. **Maximize black/white contrast.** No off-whites, no near-blacks — hero is `#000000`, body is `#ffffff`, body text is `#000000`. Grey-on-grey is off-brand.
5. **Keep the login blue.** If "Log in" has crept into the brand violet, return it to the classic `#0000ee` link. The utility-vs-brand split is intentional.
6. **Invert at the work boundary.** If the page is all-black or all-white, add the inversion: black hero, white workspace, black footer.
7. **Tighten the tracking.** Giant type at default spacing looks loose — pull display tracking to `-0.03em` or tighter.
8. **Add motion last.** Once the static composition reads right, layer the violet focus glow, hover lifts, and band crossfades — always with a reduced-motion fallback.