Synthesia. Studio control room on white.
- AI
- Light theme
- 18 colors
- 1 typeface
Synthesia's visual language is a bright, white-canvas SaaS surface saturated with a single vivid indigo-violet accent that acts as electric punctuation against a calm, near-gray neutral stack. Typography carries the brand more than color: a custom geometric sans (Basiersquare) set in tight, aggressively tracked display weights — 88px and 56px headlines run at -0.04 to -0.05em letter-spacing, compressing letterforms into dense, architectural wordmarks. Components are lightweight and honest: 12px-radius buttons, 16-24px-radius cards, hairline borders in #e6eaf4 paired with whisper-soft shadows at 8% opacity, and pill-shaped badges in pale tints. The product metaphor is a 'video studio dashboard behind a clean editor's wall' — mostly white, but with dark indigo panels (#0d0f2c) where the AI video preview lives, creating a stage-light contrast between the marketing surface and the product surface.
Synthesia design system
Brand4
Primary CTA fill, active nav, key icon accents — the single vivid saturated accent that makes interactive elements feel switched on; Three-stop gradient for CTA hovers, premium dark accents, and feature highlights
Hover states, gradient midtones, secondary link color — the lighter step of the brand ramp; Three-stop gradient for decorative text effects, hero accents, and section dividers
Headlines, dark hero panels, footer — near-black with violet depth, anchors dark sections and high-contrast typography
Badge text on light backgrounds, secondary heading color, dark UI text — a mid-step between midnight indigo and core indigo
Accent2
Light gradient start, soft tag fills, decorative wash — the pale end of the violet ramp for backgrounds
Social proof badge accent (G2 review widget) — a single warm coral that breaks the cool palette for trust signals
Neutrals7
Body text, default borders, icon strokes — near-gray with a cool violet undertone carries all secondary content
Muted body text, nav items, secondary button labels
Placeholder text, disabled input values, tertiary helper text
Input borders, dividers, secondary card borders
Card borders, soft shadow halos, light dividers — the primary neutral border for product surfaces
Card surface tint, section background wash — barely-there blue-white that warms the canvas without competing with content
Page canvas, card surfaces, button text, inverted text on dark — the dominant background
semantic5
Success badge text, positive state icons
Success badge background wash
Error badge text, destructive state icons
Warning/orange badge text — earthy orange-brown, not a bright alert orange
Warning badge background, soft warm highlight surface
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Pure White on Midnight Indigo
18.72 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
