Pitch. Violet stage spotlight on white.
- SaaS
- Light theme
- 15 colors
- 3 typefaces
Pitch is a stage-lit productivity platform: the hero floods with a vivid violet gradient like theatrical lighting, then the rest of the page settles into a clean slate-and-white workspace where color is rationed to functional punctuation. Typography pairs a wide-tracked geometric sans (Eina01) for UI with a heavy, tightly-tracked display sans (Mark Pro) for headlines — the two voices create a clear hierarchy between product surface and marketing voice. Surfaces are flat white with soft, low-opacity shadows; the violet (#6b53ff) carries every action and brand mark, a single warm yellow (#ffd02c) injects energy accents, and a near-black charcoal (#2b2a35) does the heavy lifting for text. Components are compact and confident — pill buttons, small radii (6–20px), tight 20px padding, and a deliberate absence of decoration. The page rhythm alternates between immersive dark-violet full-bleed bands and bright content sections, producing a theatrical pacing from spectacle to substance.
Pitch design system
Brand4
Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Secondary brand accent, gradient highlight stops, icon fills, decorative violet washes — a brighter cousin used when Signal Violet would feel too heavy
Dark brand text, deep gradient end-stops, footer/marketing accent on white sections — the shadow side of the violet family
Primary hero gradient end-stop — linear gradient(90deg, #5718eb, #ab6ef9) fills the entire first screen behind the headline
Accent3
Energy accent — slide preview highlights, decorative bursts, gradient start, illustration fills. Used sparingly as visual punctuation, never as a functional color; Warm accent gradient — linear-gradient(90deg, #ffd02c, #ff9e2c) for decorative bursts and illustration gradients
Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Deep shadow color tinted violet (rgba 0.3) — appears only in the hero card's large ambient shadow, giving elevation an on-brand cool cast
Neutrals8
Secondary dark text, card text on light surfaces — a step lighter than Slate Ink for subordinate copy
Primary text, heading text, icon strokes, dark surface fill — the dominant achromatic doing all reading work (1,700+ occurrences)
Muted body text, secondary headings, dark-mode support text
Supporting neutral for secondary UI, dividers, and muted labels.
Tertiary borders, subtle dividers, light-mode shadow tint at low opacity
Hairline borders, card outlines, button shadows — the lightest visible structural line
Page canvas background — slightly cooler than pure white, sets product sections apart from card surfaces
Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper on Signal Violet
4.88 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
