--- 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 `