# Pitch Vibrant

## Overview
A confident, playful SaaS marketing aesthetic extracted from Pitch (pitch.com), the presentation workspace. The default canvas is pure white, but heroes and CTAs become full-bleed deep-indigo (#280f62) color blocks that crash the page into high contrast. Boldness comes not from *density* but from oversized geometric type and large blocks of saturated color. Electric violet drives brand actions, fluorescent lime punches the key conversion CTA, and lavender softens the surfaces in between.

## Colors & Roles
White `background` with a deep purple-black `foreground` (#0c021c). `primary` is electric violet (#5318eb) — brand buttons, links, the "workspace" wordmark. `accent` is fluorescent lime (#c4ee87) with dark indigo text, reserved for the single highest-intent CTA (Sign up). `secondary`/soft surfaces are pale lavender (#ebe3fe) with deep-indigo text (the measured pill-button fill). Deep indigo (#280f62) is the signature full-bleed block color (`chart-4`, and the dark-mode card base). Body links and default blue (#0000ee) seen in raw measurement are ignored as browser defaults — brand color is violet, not blue.

## Typography Rules
Geometric grotesque family: measured UI is **Eina 03**, oversized display is **Mark Pro Bold** — both commercial, with Google-Fonts fallbacks **Manrope** (sans) and **Poppins** (display). The signature is a screen-dominating hero display (measured 180px / weight 700 / letter-spacing −7.2px ≈ −0.04em, line-height ≈0.9). Weights: 400 body, 600 subheads/labels, 700 headings/display (900 also exists on-site). Body copy is a readable 16–18px — the measured 12px is the button-label size, not body.

## Layout Principles
Max content width ~1200px on a 12-column / 24px grid. The core rhythm is an **alternation**: airy white section → full-bleed deep-indigo color block → white section. Each section opens with generous whitespace and an oversized heading. White sections breathe; color blocks fill with large type. Section gaps `clamp(5rem, 12vw, 10rem)`.

## Depth & Elevation
Elevation is a **brand-colored glow**, not a neutral shadow: the measured signature is `rgba(198,165,255,0.35) 0 20px 60px -20px` — a soft lavender halo on hero input cards and key CTAs. Ordinary cards separate by a pale lavender 1px border or a tonal step. Color blocks may carry a faint central radial highlight; backgrounds otherwise stay flat.

## Shapes
Generously rounded. Cards and boxes are 16–24px radius; buttons are full pills (radius 9999px); input fields ~16px. Nothing is sharp-cornered.

## Component Stylings
- **Button**: full pill (9999px), 14px/600 with an arrow icon. Primary = violet fill + white text; accent = lime fill + deep-indigo text (key CTA only); white pill (white fill + indigo text) common on color blocks. Hover = small scale(1.02) + lighten. Focus = 2px violet ring.
- **Card**: white fill + 1px lavender border, 24px radius, 24–40px padding. Hero/primary cards get the lavender glow. Emphasis cards may fill indigo or lavender.
- **Input**: white fill, 1px or dashed lavender border, 16px radius; focus border → violet.
- **Nav**: transparent over the color-block hero with white logo/links; right side has a white "Log in" pill + a lime "Sign up" pill; dropdowns with chevrons.

## Motion
Bright and springy. Section entrances fade with opacity + translateY(16px); buttons do a small hover scale; emphasis elements may use a gentle spring overshoot (`cubic-bezier(0.34,1.56,0.64,1)`). Durations 150–500ms.

## Do's and Don'ts
**Do:** alternate white sections with deep-indigo blocks; reserve violet for actions/focus and lime for the one key CTA; make the hero display type enormous with tight tracking; use full-pill buttons and big-radius cards; use a lavender colored glow for lift.
**Don't:** dump every color onto one screen (boldness lives in *large blocks*, not confetti); use small/sharp corners; set body text to 12px; spread lime across wide areas; fall back to neutral gray shadows or a muted monochrome tone.

## Responsive Behavior
The 12-column grid collapses to a single column; display type scales via `clamp()` from ~3rem to 11.25rem. Color blocks stay full-bleed at every breakpoint; nav collapses its pill actions into a compact menu on mobile.

## Agent Prompt Guide
> Build this in the 'Pitch Vibrant' style: alternate pure-white sections with full-bleed deep-indigo (#280f62) blocks; electric violet (#5318eb) for primary actions, fluorescent lime (#c4ee87, dark text) for the single key CTA, lavender (#ebe3fe/#c6a5ff) for soft surfaces. Oversized geometric-grotesque display (Poppins/Manrope fallback) with ≈−0.04em tracking and line-height ~0.9; body a readable 16–18px. Full-pill buttons, 16–24px cards, and a brand lavender colored glow (rgba(198,165,255,0.35) 0 20px 60px -20px) instead of gray shadow. Bright, slightly springy motion.

## Known Gaps / Confidence
Light-mode **core** colors (white background, #0c021c foreground, violet primary, lavender secondary/card, lime accent) are directly measured (`computed-css`). Light `border`/`input`/`muted-foreground` are **derived** — the measured border was `#ffffff` (unusable), so lavender tints were authored (`vision-inferred`). The **entire dark set is authored**, not extracted (the site ships no native dark mode): it is synthesized on the indigo brand block (#280f62 card over a darker indigo base, primary brightened to lavender #c6a5ff for contrast) — all `vision-inferred`. Fonts **Eina 03** and **Mark Pro** are commercial; **Manrope**/**Poppins** are the practical Google-Fonts substitutes for reproduction. `chart-5` (magenta) is synthesized to round out the chart ramp.