--- name: HeyGen tagline: 'Clean white canvas, ABC Solar Display headlines, and an electric-cyan #00c3ff CTA with black text — consumer-AI video, friendly and bright.' updated_at: 2026-05-29T21:43:22.571Z published_at: 2026-05-29T21:43:22.571Z author: webdesignhot source_url: https://www.heygen.com spec: webdesignhot/0.1 quality: curated featured: false categories: [ai, saas] tags: [light, sans, bright] preview_swatch: ['#ffffff', '#00c3ff', '#171717'] related: [descript] description: 'HeyGen''s marketing site is the bright, friendly face of consumer AI video. A pure-white `#ffffff` canvas carries near-black `#171717` body copy in a custom **TT Norms Pro** geometric sans, while hero headlines are set in **ABC Solar Display** at 80px / weight 400 — a wide, optical, slightly futuristic display face that reads as approachable rather than corporate. The signature move is the primary CTA: an electric cyan `#00c3ff` (rgb 0,195,255) button with **black** label text at a 12px radius — an unusually high-energy, almost neon accent that lands as playful and consumer-grade rather than enterprise. Secondary actions invert to a solid-black `#000000` pill with white text at the same 12px radius, so the action layer reads as a two-tone cyan/black duet. Where Descript reaches for cream-pink beauty-editorial and most AI tools reach for dark slabs and purple gradients, HeyGen ships white + electric cyan + a friendly display sans — the visual register of a fun, frictionless avatar-video toy that anyone can pick up. The cyan-on-black CTA is the brand''s entire personality compressed into one button: bright, confident, and unmistakably AI-native consumer.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand accent: accent-black muted: text-muted border: border ring: brand colors: # Primary bg: '#ffffff' # pure white canvas (rgb 255,255,255) bg-soft: '#fafafa' # faint off-white for nested panels bg-tertiary: '#f4f4f5' # light grey emphasis band surface: '#ffffff' # raised white card surface-tint: '#f0fbff' # palest cyan wash for accent surfaces text: '#171717' # primary body copy, near-black (rgb 23,23,23) text-display: '#333333' # hero H1 colour — softened near-black (rgb 51,51,51) text-secondary: '#3f3f46' # secondary heading / strong body text-soft: '#52525b' # captions, metadata text-faint: '#71717a' # eyebrows, helper text-muted: '#a1a1aa' # disabled microcopy # Brand brand: '#00c3ff' # electric cyan primary CTA (rgb 0,195,255) brand-hover: '#00abe0' # darkened cyan on hover brand-active: '#0094c2' # pressed cyan brand-soft: '#cdf2ff' # soft cyan hover wash / chip ground brand-tint: '#e6f9ff' # palest cyan tint on-brand: '#000000' # BLACK label on cyan CTA — the signature pairing # Accents accent-black: '#000000' # solid-black secondary CTA / inverted button on-accent-black: '#ffffff' # white label on black button accent-cyan-deep: '#0094c2' # deeper cyan for links / focus # Interactive link: '#0094c2' # deeper cyan link (cyan brand is too light for body text) link-hover: '#007ba3' # darker cyan on hover selected-bg: '#e6f9ff' # selected nav state, palest cyan disabled: '#a1a1aa' # Borders border: '#0000001a' # ~10% black hairline border-strong: '#00000026' # ~15% for outlined buttons border-subtle: '#00000010' # ~6% quietest border-brand: 'rgba(0, 195, 255, 0.40)' # cyan-tinted hairline for focus / emphasis # Semantic success-bg: '#dcfce7' # soft green wash success-text: '#166534' warning-bg: '#fef3c7' # warm amber wash warning-text: '#92400e' danger-bg: '#fee2e2' # soft red wash danger-text: '#b91c1c' info-bg: '#e6f9ff' # palest cyan (reuses brand-tint) — info is brand-coherent info-text: '#0094c2' typography: display: family: '"ABC Solar Display", system-ui, -apple-system, sans-serif' weights: [400, 500, 600] opentype-features: ['liga', 'kern'] body: family: '"TT Norms Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif' weights: [400, 500, 600] opentype-features: ['liga', 'kern'] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] opentype-features: ['tnum', 'zero'] scale: display-hero: { size: 80, weight: 400, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h1: { size: 80, weight: 400, lineHeight: 1.0, tracking: '-0.03em', family: display } h2: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display } h3: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display } h4: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display } h5: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } eyebrow: { size: 13, weight: 600, lineHeight: 1.4, tracking: '0.08em', family: body, transform: uppercase } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } button: { size: 15, weight: 600, lineHeight: 1.0, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } code: { size: 14, weight: 400, lineHeight: 1.55, tracking: '0', family: mono } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] layout: page-width: 1280 prose-width: 720 site-gutter: 'clamp(20px, 5vw, 64px)' header-height: 64 grid-columns: 12 section-rhythm: '80-120px' components: button-primary: background: '#00c3ff' text: '#000000' padding: '12px 20px' radius: 12 border: 'none' font: 'TT Norms Pro 600 / 15px' hover-bg: '#00abe0' active-bg: '#0094c2' use: 'Primary action — electric-cyan pill with BLACK label, the brand''s defining button' button-secondary: background: '#000000' text: '#ffffff' padding: '12px 20px' radius: 12 border: 'none' font: 'TT Norms Pro 600 / 15px' hover-bg: '#1a1a1a' use: 'Inverted twin — solid-black pill with white label, the cyan CTA''s counterweight' button-outline: background: 'transparent' text: '#171717' padding: '12px 20px' radius: 12 border: '1px solid #00000026' font: 'TT Norms Pro 600 / 15px' hover-bg: '#fafafa' use: 'Tertiary outlined — hairline border, near-black label, faint grey hover' button-ghost: background: 'transparent' text: '#171717' padding: '8px 14px' font: 'TT Norms Pro 500 / 15px' hover-text: '#0094c2' use: 'Quiet fourth action — nav links, footer' card: background: '#ffffff' border: '1px solid #0000001a' radius: 12 padding: '24px' use: 'Default white feature card on white canvas — separated by hairline, not fill' card-tint: background: '#f0fbff' border: 'none' radius: 16 padding: '24px' use: 'Palest-cyan accent card for highlighted feature blocks' input: background: '#ffffff' border: '1px solid #00000026' radius: 8 padding: '10px 14px' font: 'TT Norms Pro 400 / 16px' placeholder-color: '#a1a1aa' focus-ring: '0 0 0 3px rgba(0, 195, 255, 0.40)' use: 'Form fields, search, email capture' badge-eyebrow: background: 'transparent' text: '#71717a' padding: '0' font: 'TT Norms Pro 600 / 13px / uppercase / 0.08em' use: 'Section eyebrow — no chrome, just type' pill-cyan: background: '#cdf2ff' text: '#0094c2' padding: '6px 14px' radius: 9999 font: 'TT Norms Pro 600 / 13px' use: 'Soft-cyan chip for NEW / status labels' nav-link: background: 'transparent' text: '#171717' padding: '8px 14px' font: 'TT Norms Pro 500 / 15px' hover-text: '#0094c2' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' ease-spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 duration-page: 440 reduced-motion: 'respects prefers-reduced-motion: reduce — transitions become opacity-only, durations halved' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: none: 'none' ambient: 'rgba(0, 0, 0, 0.04) 0 1px 3px' standard: 'rgba(0, 0, 0, 0.06) 0 4px 12px' page-lift: 'rgba(0, 0, 0, 0.08) 0 12px 32px -12px' elevated: 'rgba(0, 0, 0, 0.12) 0 24px 48px -16px' cyan-glow: '0 0 0 3px rgba(0, 195, 255, 0.40)' accessibility: contrast-text-on-bg: 16.9 # #171717 on #ffffff — AAA at all sizes contrast-display-on-bg: 12.6 # #333333 on #ffffff — AAA at all sizes contrast-black-on-brand: 14.6 # #000000 on #00c3ff cyan CTA — AAA at all sizes contrast-white-on-accent-black: 21.0 # #ffffff on #000000 — AAA, maximum contrast contrast-brand-on-bg: 1.7 # #00c3ff on #ffffff — DECORATIVE ONLY, never body text contrast-link-on-bg: 4.5 # #0094c2 deeper cyan on #ffffff — AA at body sizes focus-ring: '3px rgba(0, 195, 255, 0.40) cyan ring with 2px offset' reduced-motion-honored: true keyboard-nav: 'visible focus on every interactive surface; tab order matches visual flow' prose-line-length: 'capped at 720px for readability' dark-mode: null # marketing surface is light-only; white + electric-cyan is the brand's defining contrast --- ## 1. Visual Theme & Atmosphere HeyGen's marketing site is the bright, friendly face of consumer AI video. The canvas is pure white `#ffffff` — no off-white warmth, no cream tint, no dark slab — and near-black `#171717` body copy sits on it in a custom **TT Norms Pro** geometric sans. Hero headlines switch to **ABC Solar Display** at 80px / weight 400: a wide, optical, faintly futuristic display face whose generous counters and even strokes read as approachable rather than corporate. The whole page has the clean, well-lit feel of a product photographed in a daylight studio — nothing is hiding in shadow, every surface is white or hairline-separated, and the eye goes straight to the one place the brand wants it: the button. That button is the entire personality compressed into one element. The primary CTA is an electric cyan `#00c3ff` (rgb 0,195,255) pill with **black** label text at a 12px radius. The choice of black-on-cyan rather than white-on-cyan is the signature move — it reads as high-energy and almost neon, playful and consumer-grade rather than enterprise-safe. Cyan this bright would normally be reserved for a highlight or a hover; HeyGen makes it the primary action, and the black label gives it enough contrast to carry weight on a white page. Secondary actions invert the deal: a solid-black `#000000` pill with white text at the same 12px radius. The action layer is therefore a two-tone **cyan / black duet** — bright primary, dark counterweight — and almost nothing else on the page competes with it chromatically. What makes HeyGen visually distinctive is its *consumer-AI register*. Where Descript reaches for cream-pink beauty-editorial and most AI tools reach for dark slabs, purple gradients, and chrome-on-black, HeyGen ships white + electric cyan + a friendly display sans. The implicit pitch is "this is fun, this is easy, anyone can make an avatar video." The brightness is the positioning: a tool that looks like a toy you'd want to play with, not an enterprise platform you'd have to be trained on. The cyan is the dopamine; the white keeps it from ever feeling busy. The display/body relationship reinforces the friendliness. ABC Solar Display at weight 400 — not 700 — keeps the hero headline open and airy; the wide optical face does the heavy lifting without needing bold weight. TT Norms Pro underneath is a warm, slightly humanist geometric sans (think the Futura/Avenir lineage softened for screen), which reads as calm and modern at body sizes. The H2 breaks the pattern by going to weight 700 at 56px for emphasis sections, but the hero stays light — the contrast between a light 80px hero and a heavy 56px section header is a deliberate rhythm. Atmospheric vocabulary that captures the feeling: *electric-cyan, daylight-studio, black-on-cyan-CTA, consumer-AI, friendly-futurist, ABC-Solar-Display, TT-Norms-Pro, two-tone-duet, frictionless-toy, bright-and-confident, white-canvas, neon-but-clean.* Every surface lands like a product demo shot in a bright room by a team that wants you to feel you could make a great video in the next five minutes. **Key Characteristics** - Pure-white `#ffffff` canvas — never off-white, never a dark band, brightness is the brand - **ABC Solar Display** hero headlines at 80px / weight 400 — wide, optical, futurist-but-friendly - **TT Norms Pro** geometric sans body at 16px / 1.55 — warm humanist-geometric reading texture - Electric-cyan `#00c3ff` primary CTA with **black** label — the brand's defining, unmistakable button - Solid-black `#000000` secondary CTA with white label — the cyan's inverted counterweight - Two-tone cyan / black action duet — almost no other chromatic competition on the page - 12px radius on both primary and secondary pills — consistent, friendly rounding - Light hero / heavy H2 contrast (400 vs 700) — a deliberate weight rhythm - Near-black `#171717` text, softened `#333333` display headlines — never pure `#000` for prose - Hairline `#0000001a` separation over fills — white cards on white, defined by edges - Cyan reserved for action and accent only — deeper `#0094c2` used for links (the bright cyan fails contrast as text) - Consumer-AI positioning via brightness — software that reads as a fun, frictionless toy ## 2. Color Palette & Roles ### Canvas / Surface - **bg** `#ffffff` — pure-white page canvas, the brand's defining brightness. RGB (255, 255, 255). Never substitute off-white or cream — the clean white is what makes the cyan pop. - **bg-soft** `#fafafa` — faint off-white for nested panels and alternating bands. - **bg-tertiary** `#f4f4f5` — light-grey emphasis band for footers and pricing strips. - **surface** `#ffffff` — raised white card; lift comes from hairline + shadow, not fill. - **surface-tint** `#f0fbff` — palest cyan wash for highlighted accent surfaces and info blocks. ### Text - **text** `#171717` — primary body copy, near-black. RGB (23, 23, 23). Warmer and softer than pure `#000`. - **text-display** `#333333` — hero H1 colour, a softened near-black (rgb 51,51,51). Headlines sit one step lighter than body so the 80px display doesn't shout. - **text-secondary** `#3f3f46` — secondary headings and strong body. - **text-soft** `#52525b` — captions and metadata. - **text-faint** `#71717a` — eyebrows and helper text. - **text-muted** `#a1a1aa` — disabled microcopy and placeholders. ### Brand (Electric Cyan) - **brand** `#00c3ff` — electric-cyan primary CTA. RGB (0, 195, 255). The defining chromatic move; paired with black text it becomes the brand's loudest element. - **brand-hover** `#00abe0` — darkened cyan on hover. - **brand-active** `#0094c2` — pressed cyan. - **brand-soft** `#cdf2ff` — soft cyan hover wash and chip ground. - **brand-tint** `#e6f9ff` — palest cyan tint for selected states. - **on-brand** `#000000` — **black** label on the cyan CTA. This is the signature pairing — black, not white. ### Accent (Black) - **accent-black** `#000000` — solid-black secondary CTA and inverted button surface. The cyan's counterweight. - **on-accent-black** `#ffffff` — white label on the black button. - **accent-cyan-deep** `#0094c2` — deeper cyan for links and focus, used where the bright brand cyan fails text contrast. ### Interactive - **link** `#0094c2` — deeper cyan link in body copy (the `#00c3ff` brand cyan is too light to use as text). Underlined. - **link-hover** `#007ba3` — darker cyan on hover. - **selected-bg** `#e6f9ff` — selected nav state, palest cyan wash. - **disabled** `#a1a1aa` — disabled control text, muted grey. ### Borders - **border** `#0000001a` — ~10% black hairline. The default separator on a white-on-white page. - **border-strong** `#00000026` — ~15% black for outlined buttons and inputs. - **border-subtle** `#00000010` — ~6% black, the quietest separation. - **border-brand** `rgba(0, 195, 255, 0.40)` — cyan-tinted hairline for focus rings and emphasis. ### Shadow Colors HeyGen's depth language is **neutral and minimal**. Cards on a white canvas are most often separated by a 10% black hairline rather than a shadow; when a shadow is used it is cool-neutral and diffuse — `rgba(0, 0, 0, 0.04)` to `0.12` — for sticky nav, dropdowns, and modals. The one chromatic exception is the focus / glow treatment: a `rgba(0, 195, 255, 0.40)` cyan glow ring that ties the elevation language back to the brand. The brand never uses warm-tinted shadows; that would crack the clean daylight temperature. ### Semantic - **success** — bg `#dcfce7` (soft green wash), text `#166534`. - **warning** — bg `#fef3c7` (warm amber wash), text `#92400e`. - **danger** — bg `#fee2e2` (soft red wash), text `#b91c1c`. - **info** — bg `#e6f9ff` (palest cyan, reuses brand-tint), text `#0094c2` (deep cyan). Info is brand-coherent — it borrows the cyan ladder rather than a separate blue, reinforcing the single-accent system. ## 3. Typography Rules ### Font Family - **Display**: `"ABC Solar Display", system-ui, -apple-system, sans-serif` — a wide, optical, futurist-but-friendly display sans used for hero headlines and section headers. Weight 400 for the hero, 500–600 for sub-headers, 700 for emphasis H2. The defining display face. - **Body**: `"TT Norms Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` — a warm humanist-geometric sans (Futura/Avenir lineage softened for screen). Used at 400 / 500 / 600. The calm reading texture. - **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace` — system mono fallback for code and tabular data. - **OpenType features**: `liga`, `kern` on display and body; `tnum`, `zero` on mono. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |---|---|---|---|---|---|---| | Display Hero | ABC Solar Display | 80px | 400 | 1.0 | -0.03em | The canonical HeyGen hero — light weight, wide face | | Display Large | ABC Solar Display | 56px | 700 | 1.05 | -0.02em | Heavy section intro at scale | | H1 | ABC Solar Display | 80px | 400 | 1.0 | -0.03em | Page hero headline | | H2 | ABC Solar Display | 56px | 700 | 1.05 | -0.02em | Major section — the heavy 700 emphasis face | | H3 | ABC Solar Display | 32px | 600 | 1.2 | -0.012em | Sub-section header | | H4 | ABC Solar Display | 24px | 600 | 1.25 | -0.005em | Card / block heading | | H5 | TT Norms Pro | 20px | 600 | 1.3 | normal | Inline emphasis (switches to body face) | | Eyebrow | TT Norms Pro | 13px | 600 | 1.4 | 0.08em | Uppercase section pre-label | | Body Large | TT Norms Pro | 18px | 400 | 1.55 | normal | Lede paragraph | | Body | TT Norms Pro | 16px | 400 | 1.55 | normal | Default body copy | | Body Small | TT Norms Pro | 14px | 400 | 1.5 | normal | Captions, sidebars | | Label | TT Norms Pro | 13px | 500 | 1.4 | normal | UI labels | | Button | TT Norms Pro | 15px | 600 | 1.0 | normal | CTA copy | | Caption | TT Norms Pro | 12px | 500 | 1.4 | 0.02em | Image captions, footnotes | | Code | Mono | 14px | 400 | 1.55 | normal | Inline + block code | ### Principles - **The hero is light, not bold.** ABC Solar Display at 80px lands at weight 400, not 700. The wide optical face carries the size; going heavy on the hero would crush the friendly, airy feel that the brightness establishes. - **H2 inverts the weight rule for emphasis.** Section headers at 56px go to weight 700 — the one place the display face goes heavy. This light-hero / heavy-H2 contrast is the brand's typographic rhythm. - **Display face for headlines, body face for everything below H4.** ABC Solar Display owns the hero down to H4 (24px); at H5 (20px) and below, type switches to TT Norms Pro. Hierarchy is partly typeface-driven, not only size/weight-driven. - **TT Norms Pro is the calm.** The body sans never tries to be expressive — it's a warm geometric workhorse at 16px / 1.55 that keeps long reading passages quiet so the cyan CTA and ABC Solar headlines stay the focus. - **Body at 16px, the consumer-app standard.** Unlike Descript's editorial 17px, HeyGen sits at a friendly 16px — it reads as an approachable web app, not a magazine. - **Negative tracking compresses with size.** -0.03em at 80px, -0.02em at 56px, -0.012em at 32px, easing to normal at 20px and below. - **Near-black text, softened display.** Body is `#171717`; the hero H1 is one step lighter at `#333333`, so the large display headline reads as soft rather than stark on the bright white. - **Cyan never carries text.** The `#00c3ff` brand cyan is decorative/action only (1.7:1 on white). Links and inline cyan use the deeper `#0094c2` (4.5:1) so text stays legible. ## 4. Component Stylings ### Buttons **Primary (Electric-Cyan, Black Label)** - Background: `#00c3ff`. Text: `#000000` black, TT Norms Pro 600 / 15px. - Padding: `12px 20px`. Radius: `12px`. No border. - Hover: bg → `#00abe0`; transition `240ms ease-standard`. No scale. - Active: bg → `#0094c2`. - Use: Primary CTA — *Get started, Sign up free, Create a video, Try HeyGen.* The brand's defining, unmistakable button. **Secondary (Solid Black, White Label)** - Background: `#000000`. Text: `#ffffff`, TT Norms Pro 600 / 15px. - Padding: `12px 20px`. Radius: `12px`. No border. - Hover: bg → `#1a1a1a`. - Use: The cyan CTA's inverted counterweight — *Sign in, Book a demo, Contact sales.* **Tertiary (Outlined)** - Background: transparent. Text: `#171717` near-black. Border: `1px solid #00000026`. Radius: `12px`. - Padding: `12px 20px`. TT Norms Pro 600 / 15px. - Hover: bg → `#fafafa` faint grey. - Use: Quiet third action where neither cyan nor black is warranted — *Learn more, See pricing.* **Ghost (Quiet)** - Background: transparent. Text: `#171717`. No border. - Padding: `8px 14px`. TT Norms Pro 500 / 15px. - Hover: text → `#0094c2` deeper cyan. - Use: Nav links, footer secondary actions. Note on a fifth, third-party variant: the "Sign up with Google" button (white bg, `#3c4043` grey label, 4px radius, Google "G" mark) is **Google's brand button spec, not HeyGen's** — it follows Google's identity guidelines and should not be treated as a HeyGen token. HeyGen's own pills are always 12px radius. ### Cards **White Hairline Card (Default)** - Background: `#ffffff`. Border: `1px solid #0000001a`. Radius: `12px`. Padding: `24px`. - Shadow: none at rest. - Hover: subtle `rgba(0,0,0,0.06) 0 4px 12px` lift; border may deepen slightly. - Use: Default feature card. On a white canvas, cards are defined by their hairline edge, not by fill. **Cyan-Tint Accent Card** - Background: `#f0fbff` palest cyan. Border: none. Radius: `16px`. Padding: `24px`. - Use: Highlighted feature block, "what's new" callout, info panel — the one place a soft cyan wash ties a card to the brand. ### Badges, Tags, Pills **Eyebrow Label** — no chrome, just type. TT Norms Pro 600 / 13px / uppercase / 0.08em tracking, colour `#71717a`. Sits above section headlines. **Soft-Cyan Pill** — bg `#cdf2ff`, text `#0094c2` deep cyan, radius `9999px`, padding `6px 14px`, TT Norms Pro 600 / 13px. NEW / status / FEATURED labels. **Solid Pill** — bg `#171717`, text `#ffffff`, radius `9999px`, padding `4px 12px`, TT Norms Pro 600 / 12px. Used for category tags on cards. ### Inputs / Forms - Background: `#ffffff`. Border: `1px solid #00000026`. Radius: `8px`. Padding: `10px 14px`. - Font: TT Norms Pro 400 / 16px. Placeholder: `#a1a1aa`. - Focus: `0 0 0 3px rgba(0, 195, 255, 0.40)` cyan glow ring, border → `#00c3ff`. - Error: border → `#b91c1c`, helper text in danger red below. - Helper: caption 13px `#71717a` below the field. ### Navigation - Header height `64px`. Background `#ffffff` (gains a hairline bottom border + subtle shadow on scroll). - Logo: HeyGen wordmark in near-black. - Nav links: TT Norms Pro 500 / 15px, colour `#171717`, padding `8px 14px`. Hover → `#0094c2` deeper cyan. - Right-side CTA pair: ghost or outlined "Sign in" + cyan "Get started for free" pill (or black "Sign in" + cyan "Get started", depending on context). The right edge is where the cyan / black duet lives. - Mobile: right-aligned hamburger opening a full-width sheet; links stack at 20px, CTAs full-width at the bottom. ## 5. Layout Principles ### Spacing System - **Base unit**: 4px. - **Scale**: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96 — a clean doubling-ish ladder. - **Density observation**: HeyGen runs comfortable, consumer-app spacing. Generous but not magazine-sprawling; sections breathe at 80–120px, content blocks sit on 24–48px internal gaps. ### Grid & Container - **Page max width**: `1280px`. - **Site gutter**: `clamp(20px, 5vw, 64px)`. - **Grid**: 12 columns with 24px gutters. Hero blocks span full width; feature rails span 6–8 columns; sidebars span 4. - **Hero treatment**: white full-bleed, 80px ABC Solar Display H1 (often centered), supporting body at 18px below, cyan primary CTA + black or outlined secondary side-by-side, and a product preview / avatar video to the side or below. ### Whitespace Philosophy The white canvas runs edge-to-edge without breaking into a dark band — the brightness is the consistency. Section gutters run **80–120px** between major blocks; minor blocks sit on 48–64px gaps; intra-section spacing uses 16–32px. White space does the separating work that color and shadow do elsewhere — the page feels uncluttered because almost nothing competes with the canvas except the cyan CTA and the headlines. ### Section Cadence - Hero (white + 80px ABC Solar H1 + cyan/black CTA pair + product preview) → Feature Grid (3-up white hairline cards) → Showcase (cyan-tint accent block or avatar gallery) → Heavy-H2 section (56px / 700 emphasis statement) → Social proof / logos → Pricing (light-grey `#f4f4f5` band) → FAQ → Footer (light-grey ground). - White runs through almost every section; the only tonal breaks are the faint `#fafafa` / `#f4f4f5` bands and the occasional `#f0fbff` cyan-tint accent block. ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | Micro | 2px | Decorative dividers, inline ticks | | Small (sm) | 4px | Tags, third-party buttons (e.g. Google's spec) | | Medium (md) | 8px | Inputs, dropdowns, code blocks | | Comfortable (lg) | 12px | **Primary + secondary CTA pills, cards** — the brand default | | Large (xl) | 16px | Cyan-tint accent cards, larger feature blocks | | Pill | 9999px | Soft-cyan chips, status pills | HeyGen's signature radius is **12px on both the cyan primary and black secondary pills, and on default cards** — a single comfortable rounding that keeps the action layer consistent. The friendliness comes partly from this medium-soft corner: not sharp (corporate), not fully pill (toy-like) except on small chips. Inputs sit a step tighter at 8px so fields read as more utilitarian than buttons. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Hairline only (`1px #0000001a`) | Default white cards on white canvas | | 2 | `rgba(0,0,0,0.04) 0 1px 3px` | Sticky nav on scroll, resting raised panels | | 3 | `rgba(0,0,0,0.06) 0 4px 12px` | Card hover, dropdowns | | 4 | `rgba(0,0,0,0.08) 0 12px 32px -12px` | Popovers, hover-lifted feature cards | | 5 | `rgba(0,0,0,0.12) 0 24px 48px -16px` | Modals, dialogs | | Focus | `0 0 0 3px rgba(0,195,255,0.40)` | The cyan glow ring — the one chromatic elevation | ### Shadow Philosophy HeyGen's depth comes primarily from **hairline separation on a white field** — cards are most often defined by a 10% black edge rather than a shadow. When shadows appear, they are cool-neutral and diffuse, never warm, never hard. The single chromatic exception is the **cyan glow ring** (`rgba(0,195,255,0.40)`) used for focus and the occasional hovered CTA — this ties the elevation language back to the brand without breaking the clean neutral palette. Avatar video previews and product screenshots get a soft neutral lift (level 3–4) so they read as the "real product" sitting on the bright page. ## 8. Interaction & Motion ### Easing Curves - `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, color transitions. - `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal enter, hero reveal. - `ease-spring`: `cubic-bezier(0.34, 1.56, 0.64, 1)` — gentle overshoot; used sparingly for playful micro-pops (chip appear, success check) that match the consumer-fun register. ### Duration Buckets - **Fast (150ms)** — colour transitions, focus rings, link hovers. - **Standard (240ms)** — button hover, card hover, dropdown reveal. - **Slow (320ms)** — modal enter/exit, section fade-in. - **Page (440ms)** — route transitions, hero reveal sequences. ### Per-Component Micro-States - **Button hover (cyan)**: bg `#00c3ff` → `#00abe0` over 240ms ease-standard. Black label unchanged. No scale, no lift — the colour shift alone carries the state. - **Button hover (black)**: bg `#000000` → `#1a1a1a`. - **Button hover (outlined)**: bg transparent → `#fafafa`. - **Card hover**: neutral shadow fades in (level 1 → 3) over 240ms; no border colour change required. - **Link hover**: colour `#0094c2` → `#007ba3` over 150ms; underline thickens. - **Input focus**: 3px cyan glow ring fades in over 150ms; border → `#00c3ff`. - **Chip / success pop**: brief spring scale (0.9 → 1.0) on appear, ease-spring — the one place playful overshoot is allowed. ### Page Transitions Hero text fades in over 440ms with a small translate-up; product previews and avatar videos fade in on scroll via `IntersectionObserver` at ~80% viewport, 320ms, no translate. Avatar demo loops autoplay muted with a fade-in. Section reveals are quiet — the brand leans on brightness and the cyan CTA rather than heavy scroll choreography. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Translate animations, spring pops, scale-ins, and autoplay loops are disabled; videos show a static poster, and sections snap to final state. ## 9. Accessibility & A11y ### Contrast Pairs (computed from live tokens) - **`#171717` text on `#ffffff` bg**: 16.9:1 — AAA at all sizes. Default body. - **`#333333` display H1 on `#ffffff` bg**: 12.6:1 — AAA at all sizes. The softened hero colour is still well clear. - **`#000000` black label on `#00c3ff` cyan CTA**: 14.6:1 — AAA at all sizes. This is *why* the brand uses black, not white, on the cyan: black gives the bright button strong, accessible contrast. - **`#ffffff` white label on `#000000` black CTA**: 21.0:1 — AAA, maximum contrast. - **`#00c3ff` brand cyan on `#ffffff` bg**: 1.7:1 — **DECORATIVE / ACTION ONLY**. The brand cyan must never be used as text on white. Use it only as a fill behind black text, or as a glow ring. - **`#0094c2` deeper cyan (link) on `#ffffff` bg**: 4.5:1 — AA at body sizes. This is the legible cyan for links and inline accents. - **`#71717a` text-faint on `#ffffff` bg**: 4.6:1 — AA at body sizes. Eyebrows and helper. ### Focus Indicators - Default focus ring: `0 0 0 3px rgba(0, 195, 255, 0.40)` cyan glow with 2px offset on white pages. - On the black secondary button: ring switches to `0 0 0 3px rgba(255,255,255,0.6)` white so it remains visible against black. - Every interactive surface must have a visible focus state — no `outline: none` without a glow-ring replacement. ### ARIA Patterns - **Navigation**: `