# Pitch — Marketing Site Design Spec

> Source: pitch.com (live DOM, computed styles), 2026-07-18 (desktop 1512px).
> Coverage: home / marketing. Presentation app: pending login (`needs-dashboard`). Responsive: breakpoints from tokens only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Bold, high-contrast presentation brand: a deep violet-to-purple-black canvas lit by a soft radial glow, carrying an *enormous* Mark Pro Bold headline — 180px at weight 700 with extreme negative tracking (-7.2px) and a line-height below the font size, so the words fill the screen like a title slide. Body copy drops to a calm Eina 03 at 20/32. The chrome is white-on-purple with two pill CTAs, and the signature colour move is a soft lime `#c4ee87` sign-up pill set against the violet — an unexpected complement that does more work than the brand violet itself. A pale lilac announcement banner caps the page. Feels: bold, confident, energetic, presentation-grade.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#0c021c` | Deep purple-black page background |
| black | `#000000` | Deepest sections |
| violet | `#5318eb` | Brand violet, gradient hero |
| purple-deep | `#280f62` | Deep purple gradient stop |
| lilac | `#c6a5ff` | Announcement banner, light accents |
| lilac-pale | `#ebe3fe` / `#ede1ff` | Pale tint panels |
| white | `#ffffff` | Light sections, primary button |
| gray-surface | `#f6f6f6` | Light section fill |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Headlines and body on purple |
| ink | `#0c021c` / `#0d031d` | Text on light surfaces |
| dark | `#363636` | Secondary text on light |
| muted | `#666666` | Body secondary |

### Accent
| Token | Hex | Role / usage |
|---|---|---|
| lime | `#c4ee87` | Signature CTA pill ("Sign up") |
| violet | `#5318eb` | Brand accent |
| blue | `#0000ee` | Default link colour |

Rule: the canvas is deep violet-purple with white type; the soft lime `#c4ee87` is reserved for the primary sign-up pill and is the brand's most distinctive note — never use it as a background wash.

## 3. Typography Rules

- Display: `"Mark Pro Bold", "Mark Pro", sans-serif` — enormous, weight 700, extreme negative tracking, line-height *below* font size.
- UI / Body: `"Eina 03 Regular", "Eina 03", sans-serif`; `Eina 03 Bold` for emphasis.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 180 / 144 | 700 | -7.2px (-4%) |
| Sub / lead | 20 / 32 | 400 | -0.4px |
| Body | 20 / 32 | 400 | -0.4px, `#666666` on light |
| Nav / UI | 12–16 | 400 | normal |

Patterns: the display is the whole brand — set as large as the viewport allows at 700 with tracking pulled to -4% and negative leading, so lines lock together like a slide title. Everything else stays quiet in Eina at 400.

## 4. Component Stylings

### Buttons (pills)
- **Primary (lime)**: bg `#c4ee87`, ink text `#0c021c`, full pill, ~`50px`. ("Sign up".)
- **Secondary (white)**: bg `#ffffff`, ink text, full pill, with a trailing arrow. ("Log in →".)
- **Nav link**: white, 12–16px, with chevrons for dropdowns.

### Nav
- Over the purple hero: white Pitch glyph + wordmark left, center dropdown links (Product / Use Cases / Templates / Resources) plus Pricing, right white Log-in pill + lime Sign-up pill.

### Announcement banner
- Full-width pale lilac `#c6a5ff` strip with dark ink text, a bold label and an inline arrow link.

### Cards / panels
- Slide/template thumbnails and product panels sit on the purple canvas or pale lilac tints; light sections invert to white/`#f6f6f6`.

### Inputs
- Not prominently captured on marketing. Focus ring not captured.

## 5. Layout Principles

- Full-bleed purple hero with a centered/left-set giant headline over a radial glow.
- Sections alternate deep purple with white and pale lilac.
- Slide-deck and template imagery is the main content below the hero.

## 6. Depth & Elevation

- Radii: full pills for buttons; rounded panels for slide thumbnails. Nav links at `0px`.
- Elevation: the hero glow provides depth; surfaces are otherwise flat colour fields.

## 7. Motion

- The hero headline animates in (fade/blur reveal) on load — the one signature motion moment. Dropdown nav menus; restrained hover on pills. Built on Framer (framerusercontent assets), so scroll/entrance animation is part of the system.

## 8. Backgrounds, Effects & WebGL

- Signature background is a violet-to-purple-black gradient with a soft radial glow behind the headline.
- Pale lilac tints and white sections alternate below. No grain or WebGL captured.

## 9. Do's and Don'ts

### Do
- Set the canvas as a deep violet-to-purple-black gradient with a soft radial glow.
- Make the display enormous in Mark Pro Bold at 700 with extreme negative tracking (-7.2px) and negative leading.
- Keep body copy quiet in Eina 03 at 20/32.
- Use full-pill CTAs: a soft lime `#c4ee87` primary beside a white secondary with a trailing arrow.
- Cap the page with a pale lilac `#c6a5ff` announcement banner.
- Alternate purple sections with white and pale lilac.

### Don't
- Don't use the lime as a background wash — it is the sign-up pill only.
- Don't set the display at a normal size or loose tracking; the extreme scale is the identity.
- Don't square off the CTAs; they are full pills.
- Don't let body copy compete with the display — it stays at 400.

## 10. Responsive Behavior

- The display scales down aggressively with the viewport; nav collapses on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#0c021c` · Violet `#5318eb` · Deep purple `#280f62` · Lilac `#c6a5ff` · Text `#ffffff` · Muted `#666666` · Accent lime `#c4ee87`
- Fonts: Mark Pro Bold 700 (display 180px, -7.2px, negative leading) / Eina 03 Regular (body 20/32, -0.4px) · Radius full pill · Button ~50px
- Focus: not captured · Hover: subtle shift on pills

<pitch_design_language>
Use the Pitch design language: a bold presentation brand on a deep violet-to-purple-black canvas (#0c021c with #5318eb and #280f62 gradient stops) lit by a soft radial glow, carrying an ENORMOUS Mark Pro Bold headline at 180px, weight 700, extreme negative tracking (-7.2px) and a line-height below the font size (180/144) so the words fill the screen like a title slide. Everything else stays quiet: Eina 03 Regular at 20/32 with -0.4px tracking for body and lead, white on purple and #666666 on light. The chrome is white-on-purple with full-pill CTAs, and the signature colour move is a soft LIME #c4ee87 sign-up pill set against the violet, paired with a white log-in pill carrying a trailing arrow — the lime is the brand's most distinctive note and must never become a background wash. A pale lilac #c6a5ff announcement banner with dark ink caps the page, and sections alternate deep purple with white and pale lilac #ebe3fe tints. The hero headline animates in on load (the one signature motion moment, built on Framer); surfaces are otherwise flat, with the hero glow providing the only depth. Feels: bold, confident, energetic, presentation-grade. Avoid: using the lime as a background, a normally-sized or loosely-tracked display, squared-off CTAs, or body copy that competes with the headline.
</pitch_design_language>