CURATED · OPEN · FREE

HeyGen

Turn your ideas into videos in minutes using lifelike AI avatars.

aivideo

HeyGen screenshot

↓ Download design system (27 MB)Open in OpenDesign

Visit: https://www.heygen.com

📦 Browse pack contents →

01

Identity DNA

AI VideoAvatarGenerativeEffortlessProfessional

A high-end AI video studio in your browser

02

Color

#00C3FFAccent

#171717Ink

#333333Ink soft

#FFFFFFBG

#F2F2F2BG soft

rgba(23, 23, 23, 0.1)Line

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

03

Typography

geometric-sans · humanist-sans · monospace

display60px · 700
heading32px · 700
body18px · 400
small14px · 400

04

Spacing

4px

8px

16px

20px

24px

30px

32px

48px

64px

96px

Consistent 4px baseline grid with generous section spacing.

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 20px

1px solid rgba(23, 23, 23, 0.1)

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

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Wide single-column hero followed by structured content sections.

07

Motion & Interaction

150msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth hover transitions on interactive elements · Subtle entrance animations for section content

Subtle color shift or opacity change on buttons and links. · Immediate feedback via state change or scale.

08

Components

button Pill-shaped CTA buttons with cyan background and black text; secondary outlined buttons.
card Glassmorphic 3D shapes showcasing video outputs; clean white sections for features.
chip Subtle pill-shaped category tags like 'AI Avatar Generator'.
input Standard white input fields with soft rounded borders.
hero Split layout with bold typography on the left and interactive 3D graphics on the right.

09

Voice & Don'ts

Tone Empowering, direct, and highly professional.
Headlines Bold, declarative statements emphasizing speed and quality.
CTAs Action-oriented, focusing on the 'Free' aspect to reduce friction.

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.
Avoid: Avoid overly technical jargon in primary headlines.
Avoid: Avoid visual clutter or distracting background elements.
Avoid: Avoid multiple competing primary call-to-actions.

10

Inside the pack — real screenshots

HeyGen — 桌面首屏（hero） — 桌面首屏（hero）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

HeyGen — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko