A clean, enterprise-grade tool that uses AI to streamline video production.
02
Color
#3E57DAAccent
#0D0F2CInk
#333B52Ink soft
#F5F8FFBG
#FFFFFFBG soft
#EBF6DFBG quiet
#656C86Muted
rgba(230, 234, 244, 1)Line
A high-contrast, accessible palette using a dominant blue accent against a soft cool-gray background.
03
Typography
geometric-sans · monospace
display56px · 500
h232px · 500
body18px · 400
small14px · 400
label12px · 500
Use geometric-sans for all text (display, body, and UI elements). · Avoid using more than 2 font weights (400 and 500). · Headlines should have negative letter-spacing for a compact look.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
4px base grid with a consistent 24px gutter and 32px padding for cards.
A centered, fixed-width container (1280px) with a 12-column grid and 24px gutters, adapting to mobile-first breakpoints.
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Simple color and transform transitions on hover and click. · Subtle opacity changes for loading states. · No complex or distracting animations.
Color changes for text links and subtle background shifts for buttons. · Scale or transform micro-interactions on interactive elements.
08
Components
buttonSolid blue (#3E57DA) with white text for primary actions, and outlined/ghost styles for secondary actions. Pill-shaped for smaller buttons, slightly rounded for larger ones.
cardWhite background (#FFFFFF) with subtle shadows (0px 6px 20px rgba(16, 24, 40, 0.08)) and 12px border radius.
chipPill-shaped elements with 1px borders and small padding, often used for tags or secondary filters.
inputClean, minimal inputs with a 1px border (rgb(230, 234, 244)) and subtle shadow on focus.
heroLarge, centered headline (56px) with a soft cool background gradient, accompanied by a prominent CTA and product preview.
09
Voice & Don'ts
ToneProfessional, confident, and helpful, emphasizing ease of use and efficiency.
HeadlinesDirect and benefit-oriented, often using large, bold text to highlight key features.
CTAsClear and action-oriented, using phrases like 'Get started' and 'Book a demo'.
Don't use a pure black (#000000) for text — screenshot shows a deep navy (#0D0F2C) for better readability.
Don't use a wide variety of font weights — screenshot shows only 400 and 500 weights consistently.
Don't use sharp, unrounded corners — screenshot shows 12px radius for cards and pill shapes for buttons.
Don't use heavy, dark backgrounds for the main layout — screenshot shows a light, cool-blue tinted background (#F5F8FF).
Don't use decorative or script fonts — screenshot shows a clean, geometric-sans font for all text.
Don't use complex, multi-color gradients — screenshot shows subtle, single-direction gradients or solid colors.
Captured from the live site · real computed styles
11
System prompt
Synthesia is an enterprise-grade SaaS platform for AI-driven video creation. The design features a clean, professional aesthetic with a primary blue accent (#3E57DA) and a soft, cool-gray background (#F5F8FF). The typography is a consistent geometric-sans font (using weights 400 and 500) with large, tight headlines. Key interaction patterns include subtle shadows and 12px rounded corners. Critical don'ts: avoid pure black text, sharp corners, heavy dark backgrounds, complex gradients, and decorative fonts. The layout is centered and spacious, prioritizing clarity and ease of navigation for business users.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
