# Pitch Vibrant 화이트 캔버스와 딥 인디고 브랜드 블록을 오가며 일렉트릭 바이올렛·라임·라벤더로 대비를 터뜨리는, 자신감 넘치는 프레젠테이션 마케팅 스타일. - taxonomy: playful-maximalism · vibrant, color-blocking, electric-violet, lime-accent, presentation-tool, confident-marketing, pill-buttons, oversized-display · complexity=medium - page types: landing, marketing, app - best for: 대담한 색상 대비가 필요한 SaaS 랜딩 페이지, 프레젠테이션·크리에이티브 툴 마케팅 사이트, 자신감 있는 스타트업 브랜드 히어로, 형광 액센트로 CTA를 강조하는 전환 중심 페이지 - avoid for: 절제된 흑백 에디토리얼·럭셔리 브랜드, 데이터 밀도 높은 엔터프라이즈 대시보드, 차분한 라이프스타일·웰니스 사이트, 긴 장문 텍스트가 주인공인 문서·독스 - provenance: website (The AI presentation workspace) — confidence: colors_light_core=computed-css, colors_light_derived=vision-inferred, colors_dark=vision-inferred, color_roles=vision-inferred, typography=computed-css, radius=computed-css, shadows=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Pitch Vibrant — theme.css (generated, do not edit) */ :root { --radius: 24px; --radius-selector: 9999px; --radius-field: 16px; --font-sans: 'Eina 03', 'Poppins', 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Mark Pro', 'Eina 03', 'Poppins', -apple-system, sans-serif; --spacing: 8px; --shadow: 0px 20px 60px -20px color-mix(in oklab, oklch(0.784 0.129 300.3) 35%, transparent); --ks-display-weight: 700; --ks-display-tracking: -0.04em; --background: oklch(1 0 0); --foreground: oklch(0.134 0.059 299.1); --card: oklch(1 0 0); --card-foreground: oklch(0.134 0.059 299.1); --popover: oklch(1 0 0); --popover-foreground: oklch(0.134 0.059 299.1); --primary: oklch(0.473 0.270 281.2); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.930 0.037 299.2); --secondary-foreground: oklch(0.271 0.133 287.6); --muted: oklch(0.955 0.020 300); --muted-foreground: oklch(0.500 0.070 293); --accent: oklch(0.897 0.138 127.1); --accent-foreground: oklch(0.271 0.133 287.6); --destructive: oklch(0.58 0.22 27); --destructive-foreground: oklch(1 0 0); --border: oklch(0.905 0.028 300); --input: oklch(0.905 0.028 300); --ring: oklch(0.473 0.270 281.2); --chart-1: oklch(0.473 0.270 281.2); --chart-2: oklch(0.897 0.138 127.1); --chart-3: oklch(0.784 0.129 300.3); --chart-4: oklch(0.271 0.133 287.6); --chart-5: oklch(0.65 0.22 350); } .dark { --background: oklch(0.205 0.110 287.6); --foreground: oklch(0.965 0.012 300); --card: oklch(0.271 0.133 287.6); --card-foreground: oklch(0.965 0.012 300); --popover: oklch(0.300 0.130 287.6); --popover-foreground: oklch(0.965 0.012 300); --primary: oklch(0.784 0.129 300.3); --primary-foreground: oklch(0.205 0.110 287.6); --secondary: oklch(0.340 0.135 287.6); --secondary-foreground: oklch(0.965 0.012 300); --muted: oklch(0.320 0.110 288); --muted-foreground: oklch(0.760 0.070 300); --accent: oklch(0.897 0.138 127.1); --accent-foreground: oklch(0.205 0.110 287.6); --destructive: oklch(0.65 0.20 27); --destructive-foreground: oklch(1 0 0); --border: oklch(0.400 0.110 288); --input: oklch(0.400 0.110 288); --ring: oklch(0.784 0.129 300.3); --chart-1: oklch(0.784 0.129 300.3); --chart-2: oklch(0.897 0.138 127.1); --chart-3: oklch(0.650 0.200 300); --chart-4: oklch(0.850 0.100 300); --chart-5: oklch(0.72 0.20 350); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

The AI presentation workspace

Pitch
perfect.

From prompt to presentation, teams create and deliver winning slides together.

Generate a sales presentation for a digital marketplace

Prompts
Sign up for free → Get a demo
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/pitch.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `