Pitch — Violet Seat Slider and Four-Tier Pricing

---
version: alpha
name: Pitch — Violet Seat Slider and Four-Tier Pricing
colors:
  ink: '#280F62'
  sample-1: '#0C021C'
  sample-2: '#FFFFFF'
  sample-3: '#5318EB'
  sample-4: '#363636'
  sample-5: '#0000EE'
  sample-6: '#C6A5FF'
  surface-7: '#EBE3FE'
typography:
  heading:
    fontFamily: '"Mark Pro Bold", "Mark Pro Bold Placeholder", sans-serif'
    fontSize: 64px
    fontWeight: 700
    lineHeight: 57.6px
  body:
    fontFamily: '"Eina 03 Regular", "Eina 03 Regular Placeholder", sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
---

## Overview
Pitch pricing with a seat-count slider, four progressively purple plan cards, a lime annual-billing accent, feature comparison, customer cards and FAQ. Inspected on 2026-10-03 at 1440px desktop and 390px mobile. The screenshot covers the full desktop page; the mobile screenshot covers the opening viewport only.

## Colors
Opaque token values come from computed CSS samples in this reference. The sampled-canvas token, when present, is a screenshot pixel sample. Gradients, alpha fills, photography and artwork are described visually rather than reduced to a single invented color.

## Typography
The computed heading sample (Find the plan that works for you) uses "Mark Pro Bold", "Mark Pro Bold Placeholder", sans-serif, 64px, weight 700, leading 57.6px. Supporting text uses "Eina 03 Regular", "Eina 03 Regular Placeholder", sans-serif at 16px / 25.6px. The matching mobile heading-category sample is 40px / 36px. These are local computed samples, not a complete universal type scale. Use properly licensed fonts or appropriate fallbacks.

## Layout
Desktop places the heading beside a billing capsule, followed by a wide seat slider, four plan cards and an Enterprise strip. Grouped feature comparison, colorful testimonial cards and FAQ precede the full footer. At 390px the heading becomes 40px instead of 64px, billing controls move below it, and Free becomes the first full-width card; the seat slider is absent from the captured opening mobile viewport. The desktop image records scroll-visible states as a composite. Desktop image: 1440 × 5826 px. Mobile viewport: 390 × 844 px; isolated mobile components may be taller than the viewport. Two measured widths do not establish exact CSS breakpoints.

## Elevation & Depth
Fine violet outlines, pale lavender bands and bright pill accents create hierarchy with little heavy shadow. The Enterprise strip uses dark ink against white.

## Shapes
Rounded plan cards with colored caps, outlined slider frame, segmented billing capsule and rounded accordion rows. Plan colors deepen from Free to Business.

## Components
Yearly billing selected, one-seat slider state, Free/Plus/Team/Business cards, Enterprise contact strip, grouped comparison with initial open section, customer cards and closed FAQs. Euro prices are the captured regional state. Slider movement, billing changes, comparison accordion actions and checkout were not tested.

## Do’s and Don’ts
Keep capacity badges and billing cadence close to each price. Do not imply the captured slider state covers all team sizes or that every comparison category is expanded. Provide useful labels, visible focus and reduced-motion alternatives when adapting; these are recommendations rather than a source accessibility audit.