# Synthesia · Design system migration spec

> Source: https://www.synthesia.io  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of modern, professional SaaS design that balances a clean aesthetic with clear, benefit-driven communication.

## 1. Identity DNA

Synthesia is an AI video platform built like a clean, well-lit studio—where the machinery is powerful but the interface remains calm. Its design system prioritizes clarity and efficiency, treating the complexity of AI video creation with the restrained precision of an enterprise tool. The visual language is direct, confident, and engineered for professional use, not decoration.

**One-liner:** An all-in-one AI video platform for business that simplifies studio-quality video creation with avatars and voiceovers.
**Keywords:** AI · Video · Platform · Business · Enterprise
**Analogy:** A clean, enterprise-grade tool that uses AI to streamline video production.

## 2. Color

The palette is built on a single, dominant blue accent (#3E57DA) set against a soft, cool-tinted white background (#F5F8FF). This high-contrast pairing ensures accessibility and focus, making interactive elements unmistakably clear within a clean visual field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F8FF` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#EBF6DF` | quiet area |
| `--ink` | `#0D0F2C` | body text |
| `--ink-soft` | `#333B52` | secondary text |
| `--muted` | `#656C86` | placeholder |
| `--muted-soft` | `#E6EAF4` | weak hint |
| `--accent` | `#3E57DA` | single accent |
| `--line` | `rgba(230, 234, 244, 1)` | divider |

**Color principle:** A high-contrast, accessible palette using a dominant blue accent against a soft cool-gray background.

The principle is restraint: a limited, functional palette that guides attention without competing with content.

## 3. Typography

Typography is handled with a single geometric-sans family, using only the 400 and 500 weights to maintain a consistent, clean texture. Headlines are set with negative letter-spacing for a compact, authoritative presence, while the scale moves logically from hero statements down to metadata.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 500 | -1px | Hero headline |
| h2 | 32px | 1.2 | 500 | -0.5px | Section titles |
| body | 18px | 1.5 | 400 | 0px | Paragraphs |
| small | 14px | 1.6 | 400 | 0px | Captions and metadata |
| label | 12px | 1.2 | 500 | 0.5px | Uppercase tags and navigation |

**Type rules:**
- 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.

## 4. Spacing

Rhythm is established by a strict 4px base grid, ensuring proportional consistency across all spacing values.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with a consistent 24px gutter and 32px padding for cards.

## 5. Surfaces

Surface depth is communicated through subtle, layered shadows and a consistent 1px border (rgb(230, 234, 244)). Cards and interactive elements float gently above the background, creating a clear hierarchy without harsh visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 6px 20px 0px rgba(16, 24, 40, 0.08)
  - 0px 2px 16px 0px rgba(16, 24, 40, 0.08)
  - 0px 0px 0px 1px rgb(230, 234, 244)
- **Borders:** 1px solid rgb(230, 234, 244)

## 6. Layout

The layout skeleton is a centered, fixed-width container (1280px) organized by a 12-column grid with 24px gutters. This structure adapts to mobile-first breakpoints, providing a spacious, orderly foundation that prioritizes content clarity and ease of navigation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A centered, fixed-width container (1280px) with a 12-column grid and 24px gutters, adapting to mobile-first breakpoints.

## 7. Motion & Interaction

Motion is minimal and purposeful, limited to simple color and transform transitions on hover and click states. All animations use short durations (0.2s for micro-interactions) to reinforce actions without introducing distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Simple color and transform transitions on hover and click.
  - Subtle opacity changes for loading states.
  - No complex or distracting animations.

- **Hover:** Color changes for text links and subtle background shifts for buttons.
- **Click:** Scale or transform micro-interactions on interactive elements.
- **Transition:** All transitions set to 0.2s for micro-interactions and 0.3s for larger color changes.
- **Keyboard:** Standard focus rings and logical tab order throughout the interface.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and helpful, using direct, benefit-oriented headlines and clear calls-to-action like 'Get started.' It avoids vague jargon, aggressive sales language, and informal slang, focusing instead on clarity and ease of use.

- **Tone:** Professional, confident, and helpful, emphasizing ease of use and efficiency.
- **Headline style:** Direct and benefit-oriented, often using large, bold text to highlight key features.
- **CTA style:** Clear and action-oriented, using phrases like 'Get started' and 'Book a demo'.
- **Avoid:** Vague or overly technical jargon. / Aggressive sales language. / Informal or playful slang.

### Don'ts
- ❌ 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.

The system deliberately avoids decorative fonts, sharp corners, heavy dark backgrounds, and complex gradients to maintain its clean, enterprise-grade professionalism.

## System Prompt (paste into AI tool)

```
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.
```
