← OpenDesign
CURATED · OPEN · FREE
HeyGen
Turn your ideas into videos in minutes using lifelike AI avatars.
ai video
01
Identity DNA
AI Video Avatar Generative Effortless Professional
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
display 60px · 700heading 32px · 700body 18px · 400small 14px · 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
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Wide single-column hero followed by structured content sections.
07
Motion & Interaction
150ms micro
300ms small
800ms medium
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
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 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.
More from the library
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: A polished, premium AI SaaS example that balances high-impact typography with a clean, minimalist aesthetic.