# HeyGen · Design system migration spec

> Source: https://www.heygen.com  ·  Curated by OpenDesign  ·  en

> A polished, premium AI SaaS example that balances high-impact typography with a clean, minimalist aesthetic.

## 1. Identity DNA

HeyGen's design system operates like a high-end AI video studio rendered in a browser—a place where technical complexity is deliberately concealed behind a pristine, confident interface. The visual language translates the promise of generative video into a clean, professional environment where users feel capable rather than overwhelmed.

**One-liner:** Turn your ideas into videos in minutes using lifelike AI avatars.
**Keywords:** AI Video · Avatar · Generative · Effortless · Professional
**Analogy:** A high-end AI video studio in your browser

## 2. Color

The color system is fundamentally about clarity and focus: a bright white canvas creates maximum space for content, while the dark gray text establishes immediate, comfortable readability. A single vibrant cyan accent provides the energetic punctuation needed for interactive moments and calls to action.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#171717` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#00C3FF` | placeholder |
| `--accent` | `#00C3FF` | single accent |
| `--line` | `rgba(23, 23, 23, 0.1)` | divider |

**Color principle:** Clean, bright white canvas with dark, high-contrast text and energetic cyan accents.

The principle is restraint—using color not as decoration but as a tool to direct attention and signal interactivity within a clean, high-contrast field.

## 3. Typography

Typography is handled through geometric and humanist sans-serifs that speak with a confident, modern voice. The scale is built to support bold, declarative headlines that command attention, supported by a clean type hierarchy for descriptions and navigation.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.05 | 700 | -0.5px | Hero headlines |
| heading | 32px | 1.2 | 700 | -0.14px | Section headlines |
| body | 18px | 1.4 | 400 | 0px | Paragraphs and descriptions |
| small | 14px | 1.4 | 400 | 0px | Navigation links and labels |

## 4. Spacing

Spacing follows a consistent 4px baseline grid, creating a predictable rhythm that gives content room to breathe and establishes clear visual separation between sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 30 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px baseline grid with generous section spacing.

## 5. Surfaces

Surfaces rely on subtle, glassmorphic depth and minimal borders rather than heavy shadows or decorative frames. The system uses inset shadows and soft, semi-transparent borders to create lift and define containers without adding visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 20px
- **Shadows:**
  - rgba(0, 0, 0, 0) 0px 0px 0px 0px
  - rgba(255, 255, 255, 0.9) 2.125px 2.125px 10px 0px inset
  - rgba(255, 255, 255, 0.4) -2.125px -2.125px 20px 0px inset
- **Borders:** 1px solid rgba(23, 23, 23, 0.1)

## 6. Layout

The layout skeleton is anchored by a wide, single-column hero that commands initial attention, followed by structured content sections below. This vertical flow prioritizes clarity and linear storytelling, with generous margins preventing visual congestion.

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

**Skeleton:** Wide single-column hero followed by structured content sections.

## 7. Motion & Interaction

Motion is functional and purposeful, used to smooth transitions and provide feedback rather than to decorate. Micro-interactions operate at 150ms for immediate responsiveness, while larger state changes use 300ms to feel substantial but not sluggish.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth hover transitions on interactive elements
  - Subtle entrance animations for section content

- **Hover:** Subtle color shift or opacity change on buttons and links.
- **Click:** Immediate feedback via state change or scale.
- **Transition:** 150ms ease for micro-interactions, 300ms for larger state changes.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is empowering, direct, and highly professional, emphasizing speed and quality through bold, declarative headlines. Calls to action focus on reducing friction by highlighting free access, while the overall tone remains confident without technical jargon.

- **Tone:** Empowering, direct, and highly professional.
- **Headline style:** Bold, declarative statements emphasizing speed and quality.
- **CTA style:** Action-oriented, focusing on the 'Free' aspect to reduce friction.
- **Avoid:** Avoid overly technical jargon in primary headlines. / Avoid visual clutter or distracting background elements. / Avoid multiple competing primary call-to-actions.

### Don'ts
- ❌ Don't use serif fonts — the screenshot exclusively uses geometric and humanist sans-serifs.
- ❌ Don't use a dark mode background — the primary background is solid white.
- ❌ Don't use complex multi-color gradients — the accent is a single, consistent cyan.
- ❌ Don't use sharp, square corners — all buttons and chips use rounded pill-shapes.
- ❌ Don't use dense, multi-column text blocks — content is laid out in wide, breathable sections.
- ❌ Don't use subtle, low-contrast text — the ink color is a very dark gray for high readability.

The system deliberately avoids dark modes, serif typography, complex gradients, sharp corners, dense layouts, and low-contrast text—maintaining a focused, premium aesthetic through consistent exclusion.

## System Prompt (paste into AI tool)

```
A high-end SaaS platform for AI video generation. Key colors are pure white (#FFFFFF), dark gray (#171717), and a vibrant cyan accent (#00C3FF). Typography features geometric and humanist sans-serifs with bold, large-scale headlines. Critical donts: Do not use dark mode or dark backgrounds. Do not use serif fonts or traditional typography. Do not use cluttered, multi-column layouts. Do not use sharp, square corners on UI components. Do not use low-contrast or muted color palettes.
```
