---
version: alpha
name: HeyGen
description: AI avatar video platform — near-black canvas with electric cyan-to-pink gradient signature, ABC Solar Display weight 700 for display text, TT Norms Pro for body, and a bold dark-first design that communicates creator energy over enterprise caution.

colors:
  # Primary surfaces
  background: "#ffffff"
  surface: "#f2f2f2"            # light gray section background
  surface-dark: "#111111"       # near-black dark canvas sections
  surface-card: "#1a1a1a"       # dark card background on dark panels

  # Text / ink
  ink: "#171717"                # near-black — primary text on light
  ink-secondary: "#333333"      # dark gray — secondary text
  ink-muted: "#555555"          # muted text, captions on light /* estimated */
  ink-inverted: "#ffffff"       # text on dark panels

  # Brand accent — electric cyan
  primary: "#00c3ff"            # --color-heygen-blue-lite (from palette)
  on-primary: "#171717"         # dark text on bright cyan
  primary-dark: "#0e404f"       # --color-heygen-blue deep teal (dark variant)
  primary-tint: "#dff8ff"       # was rgba(223,248,255,0.984) — Google format requires hex

  # Gradient partner (cyan → pink)
  accent-pink: "#f3a6ff"        # --color-pink-500 — gradient destination
  accent-pink-dark: "#3e2b4e"   # --color-pink-950 — dark purple for contrast

  # Semantic
  success: "#35c838"            # --color-heygen-green-gen
  error: "#ff4444"              # --color-error
  warning: "#ff8e1c"            # --color-orange

  # Borders
  border: "#e0e0e0"             # light border on white surfaces /* estimated */
  border-dark: "#2a2a2a"        # subtle border on dark surfaces /* estimated */

  # Shadow tints
  shadow-soft: "#ebebeb"        # was #00000014 (alpha) — flattened: rgba(0,0,0,0.08) over #ffffff ≈ #ebebeb
  shadow-dark: "#000000"        # dark shadow for elevated elements

  # CSS variable reference
  dark-green: "#233717"         # --color-dark-green — used for "Learn more" text on white /* detected */

typography:
  display-hero:
    fontFamily: "ABC Solar Display, TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 80px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0px
  display:
    fontFamily: "ABC Solar Display, TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 70px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.56px
  heading-section:
    fontFamily: "ABC Solar Display, TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.56px
  heading-1:
    fontFamily: "ABC Solar Display, TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0.4px
  heading-2:
    fontFamily: "ABC Solar Display, TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 0.32px
  heading-3:
    fontFamily: "ABC Solar Display, TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.6px
  body-large:
    fontFamily: "TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.18px
  nav-link:
    fontFamily: "TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "ABC Solar Display, TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.4px
  label-uppercase:
    fontFamily: "ABC Solar, TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.50
    letterSpacing: 0.35px
  caption:
    fontFamily: "TT Norms Pro, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.14px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 60px
  5xl: 80px
  6xl: 120px
  7xl: 150px

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  card: 40px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-tint}"

  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-dark-hover:
    backgroundColor: "{colors.surface-card}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 12px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"

  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.card}"
    padding: 30px
  card-active:
    backgroundColor: "{colors.background}"

  card-dark:
    backgroundColor: "{colors.surface-card}"
    rounded: "{rounded.card}"
    padding: 30px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"

  badge:
    backgroundColor: "{colors.primary-tint}"
    textColor: "{colors.primary-dark}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  badge-gradient:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-link-hover:
    backgroundColor: "{colors.primary-tint}"
---

# HeyGen Design System

## Overview

HeyGen's website operates as a bold declaration of what AI video can be — high-energy, visually ambitious, and unapologetically modern. Where most AI platforms retreat to white-and-blue corporate safety, HeyGen leans into the creator economy aesthetic: a near-black canvas (`{colors.surface-dark}`) for statement sections, a bright electric cyan (`{colors.primary}`) primary accent, and a gradient signature sweeping from cyan to lavender pink (`{colors.accent-pink}`) that reads as both technological and joyful. The result feels closer to a premium consumer brand than a B2B SaaS tool.

The typography is split between two custom families: ABC Solar Display handles all display text with bold weight 700, using nearly zero letter-spacing at large sizes (the display power comes from size and weight, not compression), while TT Norms Pro takes body copy and UI text with clean neutrality. ABC Solar Display is a wide, confident grotesque — its characters feel camera-ready and broadcast-friendly, appropriate for a platform about video presentation. The fallback is TT Norms Pro itself, meaning even at fallback the design maintains visual coherence.

What unifies the system is the gradient. The linear sweep from `{colors.primary}` to `{colors.accent-pink}` recurs everywhere: as a text gradient on hero headlines, as a background wash on callout sections, as a button fill, as a color-layer on the logo. This isn't an accent used sparingly — it's an identity mark applied wherever the brand needs maximum presence. Alongside this runs a distinctive inset glassmorphic shadow treatment on UI elements: `rgba(255,255,255,0.9) 2px 2px 10px inset, rgba(255,255,255,0.4) -2px -2px 20px inset` — glass highlights that make cards and panels catch light like frosted acrylic.

**Key Characteristics:**
- Dual-mode canvas — pure white for content-dense sections, near-black (`{colors.surface-dark}`) for immersive feature showcases
- Electric cyan-to-pink gradient (`{colors.primary}` → `{colors.accent-pink}`) as the identity mark — applied to text, backgrounds, buttons, and icons
- ABC Solar Display at weight 700 for all display text — wide, broadcast-ready characters with minimal tracking adjustment
- TT Norms Pro for body copy — workhorse sans-serif that lets ABC Solar Display own the headline stage
- Glassmorphic inset highlight shadows on card surfaces — frosted-acrylic floating quality
- `{rounded.card}` at 40px for cards and major containers — very generous, almost pill-like corners on larger elements
- Buttons at 12px radius (`{rounded.md}`) — a deliberate break from the pill trend; these are sharp-enough to feel product-like
- 8px base grid with section spacing reaching 120–150px — premium breathing room between content chapters
- Logo-parade animation (`logo-slide`, 25s linear) for social proof — the marquee scrolls continuously
- `{typography.label-uppercase}` with 0.35px letter-spacing used for uppercase eyebrow labels — category signifiers
- Tailwind CSS plus PrimeReact/Fluent UI internally — production component depth beneath the branded skin
- Interactive hover on nav items uses a tinted-cyan wash (`{colors.primary-tint}`) — subtle brand presence in micro-interactions

## Colors

### Primary Surfaces
- **White** (`{colors.background}`): Primary light canvas — hero, content sections, card surfaces
- **Light Gray** (`{colors.surface}`): Secondary surface — feature section backgrounds, alternating panels
- **Near-Black** (`{colors.surface-dark}`): Dark panel sections — immersive product showcases, hero dark variants
- **Dark Card** (`{colors.surface-card}`): Card background on dark canvas sections

### Brand Accent
- **Electric Cyan** (`{colors.primary}`): The HeyGen blue — primary CTA fill, gradient start point, interactive accent
- **Deep Teal** (`{colors.primary-dark}`): Dark variant of the cyan — badges on light, text on tinted backgrounds
- **Cyan Tint** (`{colors.primary-tint}`): Wash tint — hover backgrounds, badge fills on white

### Gradient Partner
- **Lavender Pink** (`{colors.accent-pink}`): Gradient destination color — appears only in gradient contexts (never as a flat fill)
- **Dark Purple** (`{colors.accent-pink-dark}`): Deep contrast pair for the pink — backgrounds behind pink elements

### Text Scale
- **Near-Black** (`{colors.ink}`): Primary headlines and body text on white
- **Dark Gray** (`{colors.ink-secondary}`): Secondary text, body descriptions
- **Muted Gray** (`{colors.ink-muted}`): Captions, tertiary labels
- **Inverted** (`{colors.ink-inverted}`): All text on dark panels

### Semantic
- **Green** (`{colors.success}`): Status indicators, success states — `--color-heygen-green-gen`
- **Red** (`{colors.error}`): Validation errors — `--color-error`
- **Orange** (`{colors.warning}`): Warning states — `--color-orange`

### Borders & Shadows
- **Border** (`{colors.border}`): Standard 1px borders on light surfaces
- **Dark Border** (`{colors.border-dark}`): Subtle border-color on dark canvas
- **Shadow Soft** (`{colors.shadow-soft}`): Standard elevation shadow
- **Shadow Dark** (`{colors.shadow-dark}`): Used in the inset glassmorphic highlight stacks

## Typography

### Font Families
- **Display**: `ABC Solar Display` (self-hosted, Bold weight) — fallbacks: `TT Norms Pro, Arial, Helvetica`
- **Body / UI**: `TT Norms Pro` (self-hosted, Normal/Medium/Bold/DemiBold) — fallbacks: `Arial, Helvetica`
- **Label/Tag**: `ABC Solar` (the non-display variant, used for uppercase labels with 0.35px tracking)
- No Google Fonts or variable fonts detected

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Top-of-page hero — 80px ABC Solar Display weight 700, tight 1.00 line-height |
| `display` | Large section titles — 70px weight 700, -0.56px tracking |
| `heading-section` | Second-tier section headlines — 56px weight 700 |
| `heading-1` | Card and feature titles — 40px weight 400, slight positive tracking |
| `heading-2` | Sub-section titles — 32px weight 700 |
| `heading-3` | Card headings, callout text — 24px weight 700, -0.6px tracking |
| `body-large` | Lead paragraph text — 20px TT Norms Pro weight 400 |
| `body` | Standard body copy — 18px TT Norms Pro weight 400 |
| `body-medium` | Emphasized body — 18px weight 500, -0.18px tracking |
| `nav-link` | Navigation text — 16px TT Norms Pro weight 400 |
| `button-ui` | Button labels — 16px ABC Solar Display weight 700 |
| `label-uppercase` | Section eyebrows and category chips — 14px uppercase, 0.35px tracking |
| `caption` | Metadata, fine print — 14px TT Norms Pro weight 400 |

### Principles
- **ABC Solar Display does one thing**: it owns all display headings at weight 700. The typeface's wide geometry and broadcast proportions make headlines feel stage-ready — right for a product about video presentation.
- **Weight 700 at display is non-negotiable**: Unlike enterprise-AI brands that soften headlines to weight 300 or 400, HeyGen uses maximum bold at the top of the hierarchy. The confidence reads as creator-facing, not corporate.
- **TT Norms Pro is invisible by design**: The body typeface recedes into utility — clean, neutral, and reliably legible. All typographic personality lives in the display layer.
- **Minimal letter-spacing intervention**: Display sizes use near-zero or only slight negative tracking (-0.56px at 70px) — the emphasis is size and weight, not compression tricks.
- **Uppercase labels with positive spacing**: `{typography.label-uppercase}` at 0.35px for eyebrows — a classic editorial device to differentiate category metadata from body text.

## Layout

### Spacing System
Base unit is **8px**. The scale runs from 4px (`xs`) to 150px (`7xl`). Section-level spacing uses 120–150px, establishing an expansive pace that signals premium quality despite the bold visual intensity.

### Grid & Container
- Max content width: approximately 1160px (confirmed breakpoint)
- Next.js 15 app — Tailwind CSS arbitrary values suggest layout uses custom constrained columns
- Feature grids: 2–4 columns on desktop, collapsing at 768px (tablet) then 640px (mobile)
- Dark panels are full-bleed from edge to edge; light sections use constrained content columns
- Hero section uses centered typography over a gradient wash

### Whitespace Philosophy
- **Creator pacing**: The spacing system is generous at section level but tight within components — the interplay creates a rhythm where each section feels like an independent feature launch.
- **Dark sections as pauses**: The near-black panels break the white-to-white scroll monotony and create natural pause points, giving the eye relief before the next content chapter.
- **Gradient as a spacing tool**: The cyan-to-pink gradient is often used as a section background that simultaneously breaks the whitespace and adds visual energy, reducing the need for heavy layout structure.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, dark panel sections |
| Glass Highlight (Level 1) | `rgba(255,255,255,0.9) 2px 2px 10px inset, rgba(255,255,255,0.4) -2px -2px 20px inset` | Cards, frosted UI panels — the signature depth treatment |
| Subtle (Level 2) | `rgba(0,0,0,0.08) 0px 2px 10px` | Standard card lift on white sections |
| Elevated (Level 3) | `rgba(0,0,0,0.12) 0px 4px 20px` | Featured panels, product preview frames |
| Focus Ring | `rgb(0,195,255,0.4) 0px 0px 0px 3px` using `{colors.primary}` | Keyboard focus, active states |

**Shadow Philosophy**: HeyGen's most distinctive shadow element is the double-inset glassmorphic highlight (`rgba(255,255,255,0.9)` warm highlight + `rgba(255,255,255,0.4)` cool highlight). This appears on the vast majority of cards and UI panels — it creates a frosted-acrylic surface quality, as if catching studio lights. Traditional drop shadows are used sparingly and only on white sections; dark panel content uses the glass-highlight treatment exclusively.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Section edge dividers only |
| `sm` | 8px | Small tag chips, input borders |
| `md` | 12px | Buttons, small UI elements |
| `lg` | 16px | Secondary containers, dropdowns |
| `xl` | 20px | Panel sections, mid-size cards |
| `2xl` | 24px | Larger containers |
| `card` | 40px | Primary cards and feature panels — very generous corner |
| `pill` | 9999px | Social media icon links, circular avatar elements |

The radius system has a strong opinion: buttons use a relatively sharp 12px (functional, product-like), while cards use the very generous 40px (`{rounded.card}`), almost capsule-shaped. This split creates a clear visual hierarchy — functional controls are crisp, containers are soft and approachable. Pill is reserved for circular/round social icons and specific UI chips.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly.

### Button Variants
- **`button-primary`** — Electric cyan fill (`{colors.primary}`), near-black text, 12px radius. The primary CTA across all pages and sections.
- **`button-primary-hover`** — Shifts to the lighter `{colors.primary-tint}` on hover with 0.15s ease.
- **`button-dark`** — Near-black fill, white text — used for CTAs on white sections where cyan would be too loud.
- **`button-ghost`** — White fill with dark text — secondary CTAs, "Learn more" style links in section bodies.

### Cards
- **`card`** — White surface, 40px radius, 30px padding — feature tiles and capability cards on white sections.
- **`card-dark`** — Dark surface (`{colors.surface-card}`), same 40px radius — product panels on dark sections.

Both card types use the glassmorphic double-inset shadow treatment described in the Elevation section.

### Inputs
- **`input`** — White surface with standard border, 12px radius, 12px/16px padding. Focus state applies a `{colors.primary}` tint ring.

### Badges
- **`badge`** — Cyan tint background (`{colors.primary-tint}`), deep teal text (`{colors.primary-dark}`), pill radius. Used for "New", category labels, feature tags.
- **`badge-gradient`** — Cyan fill (`{colors.primary}`) for gradient-adjacent or dark-panel badge contexts.

### Navigation
- **`nav-bar`** — White sticky header, TT Norms Pro 16px navigation links, right-aligned cyan CTA button. On hover, nav items receive a subtle `{colors.primary-tint}` wash background.

## Do's and Don'ts

### Do
- Apply the cyan-to-pink gradient (`{colors.primary}` → `{colors.accent-pink}`) for hero text effects, featured button fills, and section washes — it's the identity mark, not a decoration
- Use ABC Solar Display at weight 700 for all headlines — the bold broadcast quality is intentional
- Apply the glassmorphic double-inset shadow (`rgba(255,255,255,0.9)` + `rgba(255,255,255,0.4)`) on all cards and UI panels
- Use `{rounded.card}` (40px) for cards — the generous radius softens the bold typography
- Reserve `{colors.primary}` for CTAs and gradient contexts; on white, pair with dark text (`{colors.on-primary}`)
- Use dark sections (`{colors.surface-dark}`) for product showcase moments — they create immersive breaks
- Apply `{typography.label-uppercase}` with positive 0.35px tracking for all eyebrow labels and category chips
- Keep TT Norms Pro at weight 400–500 in body contexts — let the display layer own all visual personality

### Don't
- Don't use `{colors.accent-pink}` as a standalone flat color — it only exists inside the gradient context
- Don't apply pill radius to primary buttons — 12px keeps controls product-functional rather than consumer-playful
- Don't introduce warm yellows or browns — the palette is cool-to-neutral (cyan, pink, dark, white, gray)
- Don't use ABC Solar Display in body copy — the wide proportions work at display scale, not at 16–18px
- Don't lighten the gradient into pastels — `{colors.primary}` is electric, not muted; the saturation is structural
- Don't apply positive letter-spacing to ABC Solar Display display text — the type relies on size and weight, not tracking
- Don't use the glassmorphic shadow on dark backgrounds — inset white highlights need a medium or light background to be visible
- Don't mix the gradient with warm color palettes — the cyan-pink axis is cool; warm companions kill the energy

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <640px | Single column, minimum horizontal padding, stacked hero, full-width buttons |
| Mobile | 640–767px | Single column, hamburger nav, CTAs stack vertically |
| Tablet | 768–1159px | Two-column grids, expanded nav starts condensing |
| Desktop | ≥1160px | Full multi-column layouts, constrained max-width, standard nav |

### Touch Targets
- Primary buttons at 10px/20px padding — approximately 40px tap height; meets minimum with room
- Navigation links at 16px with 8px padding provide comfortable touch zones
- Input fields at 12px padding provide ~42px height — adequate

### Collapsing Strategy
- Navigation collapses to hamburger at approximately 768px
- Feature grids: 3–4 columns → 2 columns → single column at mobile
- Dark panel sections maintain full-bleed behavior at all breakpoints
- Hero gradient backgrounds scale full-width at every breakpoint
- ABC Solar Display headline sizes scale down: 80px hero → approximately 48px on mobile
- CTA button groups stack vertically on mobile

### Image Behavior
- AI avatar videos and product screenshots maintain aspect ratio, scale responsively within fluid columns
- Gradient backgrounds maintained full-width at all breakpoints — no simplification on mobile
- Logo marquee animation (`logo-slide`, 25s) maintained on mobile at reduced visible count
- Card thumbnails use fluid width within constrained columns, 40px radius maintained

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white) or `{colors.surface-dark}` (near-black)
- Primary text: `{colors.ink}` on light / `{colors.ink-inverted}` on dark
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}` (electric cyan)
- Gradient: `{colors.primary}` → `{colors.accent-pink}` (cyan → lavender pink)
- CTA: `{colors.primary}` background, `{colors.on-primary}` text
- Border: `{colors.border}`

### Example Component Prompts
- "Create a hero section on white. ABC Solar Display 80px weight 700, line-height 1.00, `{colors.ink}`. Apply a linear-gradient text effect sweeping from `{colors.primary}` to `{colors.accent-pink}` on the primary headline keyword. Subtitle in 20px TT Norms Pro weight 400 `{colors.ink-secondary}`. Primary CTA: `{colors.primary}` background, `{colors.on-primary}` text, 16px ABC Solar Display weight 700, 12px radius, 10px 20px padding."
- "Design a card on white: `{colors.background}` background, 40px radius, 30px padding. Apply glassmorphic inset shadow: `rgba(255,255,255,0.9) 2px 2px 10px inset, rgba(255,255,255,0.4) -2px -2px 20px inset`. Title in 24px ABC Solar Display weight 700, `{colors.ink}`. Description in 16px TT Norms Pro weight 400, `{colors.ink-secondary}`."
- "Build a dark feature panel: `{colors.surface-dark}` full-bleed background. Headline 56px ABC Solar Display weight 700, white. Supporting text 18px TT Norms Pro weight 400 `{colors.ink-inverted}`. 3-column card grid: `{colors.surface-card}` cards with 40px radius and the glassmorphic inset highlight shadow."
- "Create a gradient callout section: linear-gradient from `{colors.primary}` 0% to `{colors.accent-pink}` 100%. Centered headline in 56px ABC Solar Display weight 700, white text. Single CTA: `{colors.ink}` background, white text, 12px radius, 10px 20px padding."
- "Design navigation: white sticky header. TT Norms Pro 16px weight 400 nav links, `{colors.ink}`. On hover: `{colors.primary-tint}` background wash, 8px radius. Right-aligned: 'Sign in' dark button + 'Get Started for Free' in `{colors.primary}` fill, 12px radius, 10px 20px padding, weight 700 ABC Solar Display."

### Iteration Guide
1. Decide canvas first — white (`{colors.background}`) for content sections, near-black (`{colors.surface-dark}`) for immersive product showcases
2. Headlines: ABC Solar Display weight 700, full bold — no compromising on weight; the broadcast confidence is the point
3. Gradient is the identity marker — apply `{colors.primary}` → `{colors.accent-pink}` for any element that needs maximum HeyGen brand presence
4. Cards: always 40px radius + glassmorphic inset shadow (`rgba(255,255,255,0.9)` + `rgba(255,255,255,0.4)` insets)
5. Button radius is 12px — crisp and functional; never use pill for primary CTA buttons
6. Section breathing room: use 120–150px between major sections — the energy of the gradient needs space to land
7. Gradient exists only as the cyan-pink sweep — never flatten it to a single color; the two-stop diagonal or horizontal direction is the signature

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by HeyGen. Brand names and trademarks belong to their respective owners.