Retell AI Design System

Overview

Retell AI presents a striking dual-personality design system that oscillates between immersive, dark-editorial hero experiences and crisp, light-surface application interfaces. The dominant visual impression is the hero band—a deep navy expanse ({colors.surface-dark} — #00122e) washed with radial blue gradients that create atmospheric depth without relying on drop shadows or traditional elevation. This is not a flat design; it is a gradient-depth design where luminance shifts carry the burden of spatial hierarchy.

Brand voltage lives in unexpected places. The primary brand identifier is the near-black {colors.primary} navy itself, which functions simultaneously as background, headline color on light surfaces, and button fill. But the true voltage—the element that draws the eye and demands interaction—is the warm {colors.signature-apricot} apricot (#ffbb7e), deployed exclusively on high-commitment CTAs like "Try For Free" and "See Pricing." This creates a complementary-color tension: cool blue-black depths punctuated by warm orange-peach action points. The supporting blue accent ({colors.active} — #3e6aef) appears sparingly for links and interactive hints.

The single typographic move that defines the system is the proprietary condensed serif headline. At 90px ({typography.display-xl}), Denton Condensed delivers editorial gravitas with its narrow proportions and sharp terminals—an unmistakable mark of premium positioning in the AI/voice space. Body text retreats into the neutral, humanist geometry of Untitled Sans at modest sizes (14–16px), ensuring readability while letting the headlines command attention. Weight discipline is strict: headlines sit at 500, everything else at 400, with never a bold weight in sight.

Shape language favors the pill ({rounded.pill} — 50px radius) for all primary actions, signaling approachability and modern SaaS convention. Cards and containers default to {rounded.lg} (12px), soft enough to feel friendly but structured enough for enterprise credibility. Circular avatars appear at 48px within the demo card component.

Sub-systems include: the hero dialect (dark canvas, white text, radial gradients, oversized type), the marquee dialect (white canvas, desaturated logos, horizontal scroll), and the card dialect (lavender-tinted surfaces {colors.surface-lavender}, tighter spacing). Each dialect shares the same token foundation but recombines surfaces and text treatments dramatically.

Key Characteristics

• Hero canvas uses {colors.surface-dark} (#00122e) with radial {colors.active} blue gradient overlay for atmospheric depth
• Headlines set in Dentoncondensed at {typography.display-xl} (90px / weight 500 / -1.8px tracking)—the system's signature moment
• Primary CTAs use {colors.signature-apricot} (#ffbb7e) with {colors.on-apricot} ink, never the primary navy
• All action buttons are pill-shaped ({rounded.pill} — 50px radius) regardless of size tier
• Body copy locked to "Untitled Sans" at {typography.body-md} (14px / weight 400) with generous 1.43 line-height
• Nav uses micro-type {typography.button-sm} (12px / weight 500) for dropdown links, maximizing content density
• Surface hierarchy on light pages: {colors.canvas} > {colors.surface-soft} (#f5f5fa) > {colors.surface-lavender} (#d9daee)
• Transitions favor 300ms ease timing for opacity, background-color, and transform properties
• Zero drop shadows in extracted data—all depth achieved via gradient washes and semi-transparent overlays

Colors

Brand & Accent

• Primary ({colors.primary} — #00122e): Near-black navy serving triple duty as hero background, headline ink on light surfaces, and primary button fill. The darkest anchor of the entire palette.
• Primary Hover ({colors.primary-hover} — #0e121b): Slightly lifted navy for hover states on dark-background elements.
• Active / Link Blue ({colors.active} — #3e6aef): Bright royal blue used for text links and the radial gradient glow emanating from hero center. Provides the only saturated chromatic energy outside apricot.
• Signature Apricot ({colors.signature-apricot} — #ffbb7e): Warm peach-orange reserved exclusively for high-conversion CTAs ("Try For Free", "See Pricing", "Certified Partner"). Creates intentional tension against cool hero depths.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white baseline for navbar, marquee section, and application surfaces below the fold.
• Surface Soft ({colors.surface-soft} — #f5f5fa): Cool lavender-white used for card backgrounds ({component.banner-card}) and subtle panel differentiation.
• Surface Lavender ({colors.surface-lavender} — #d9daee): More pronounced lavender tint for borders, dividers, or elevated card edges needing stronger separation from canvas.
• Surface Dark ({colors.surface-dark} — #00122e): Hero band background—identical to primary, establishing the immersive dark-editorial zone.
• Surface Deep Navy ({colors.surface-deep-navy} — #12233d): Lighter navy appearing in gradient stops or layered depth beneath the primary dark surface.
• Surface Purple Deep ({colors.surface-purple-deep} — #1a1b45): Purple-shifted navy for extreme gradient depth at hero periphery.

Text & Ink

• Ink ({colors.ink} — #333333): Standard body text on light surfaces—warm-neutral dark gray rather than pure black, reducing harshness.
• Body ({colors.body} — #00122e): Deepest navy used for headlines and emphasized text on white backgrounds. Matches primary exactly.
• Body Darker ({colors.body-darker} — #222222): Slightly heavier than ink, used for navbar dropdown text requiring marginally more weight.
• Muted ({colors.muted} — rgba(0, 18, 46, 0.6)): 60%-opacity navy for secondary text, descriptions, and marquee logo treatments where full contrast would compete with primary elements.
• On Primary / On Dark ({colors.on-primary} / {colors.on-dark} — #ffffff): Pure white for all text atop dark surfaces (hero, buttons, dark cards).
• On Apricot ({colors.on-apricot} — #00122e): Deep navy text on apricot button backgrounds—ensures AA contrast while maintaining brand cohesion.

Hairlines & Borders

• Hairline ({colors.hairline} — #f5f5fa): Nearly invisible divider matching surface-soft, used where separation must exist but not demand attention.
• Hairline Strong ({colors.hairline-strong} — #d9daee): Lavender-tinted border for card edges, input focus rings, or section separators needing mild visual weight.

Semantic

• Link ({colors.link} — #3e6aef): Maps to active blue—used for inline hyperlinks and interactive text cues.
• Error ({colors.error} — #c13515): Reserved for validation states and destructive messaging (not visible in screenshot but included for system completeness).
• Success ({colors.success} — #006400): Reserved for confirmation states and positive feedback indicators.

Typography

Font Family

The Retell AI system rests on a carefully curated two-font pairing that balances editorial authority with interface clarity. Denton Condensed (Dentoncondensed, Arial, sans-serif) is the proprietary display face—a narrow serif-condensed typeface loaded from Webflow's CDN with weights spanning Thin (100) through Medium (500). It appears exclusively in the hero headline role at 90px, where its compressed letterforms allow dramatic scale without breaking layout width constraints. The fallback to Arial ensures graceful degradation if the custom font fails to load, though the condensed width mismatch will be noticeable.

Untitled Sans ("Untitled Sans", Georgia, sans-serif) carries every other typographic role: navigation labels, body copy, button text, captions, and UI chrome. This humanist sans-serif ships in Regular (400), Regular Italic (400 italic), and Medium (500) weights from the same CDN source. The inclusion of Georgia in the fallback stack is unusual—it suggests either a legacy preference or intentional serifs-on-fail behavior. All body text renders between 12px and 19.5px, maintaining a compact but readable range suited to information-dense B2B landing pages.

No monospace font was detected in the extracted CSS. Code snippets, API references, or technical annotations (if they exist deeper in the site) likely default back to Untitled Sans or a browser-monospace fallback.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 90px | 500 | 0.88 (-1.8px) | -1.8px | Hero headline only—"Meet your AI call center..." | | {typography.display-lg} | 16px | 400 | 1.5 | -0.16px | Hero overline label ("#1 AI VOICE AGENT...") | | {typography.title-md} | 19.5px | 400 | 1.2 | -0.16px | Section subheadings, demo card titles | | {typography.label-md} | 14px | 400 | 1.43 | -0.16px | Label-like body text with slight tracking | | {typography.body-md} | 14px | 400 | 1.43 | 0 | Standard paragraph text, descriptions | | {typography.caption} | 14px | 400 | 1.43 | 0 | Hero subtext, card body copy | | {typography.body-sm} | 12px | 500 | 1.4 | 0 | Navigation dropdowns, metadata, small UI labels | | {typography.button} | 18px | 400 | 1.2 | 0 | Large CTA button text (apricot buttons) | | {typography.button-sm} | 12px | 500 | 1.4 | 0 | Small button text, nav utility links |

Principles

The typography system's defining discipline is weight restraint. Only two weights ever appear: 400 (regular) and 500 (medium). There is no bold (700) anywhere—not in headlines, not in buttons, not in emphasis. Hierarchy is achieved through extreme size differential (90px vs 14px = 6.4× scale factor), negative letter-spacing on large type (-1.8px at display-xl prevents the condensed letters from feeling cramped), and color inversion (white on dark for hero, navy on white for body).

The {typography.display-xl} headline deserves special attention: at 90px with a 79.2px line-height (0.88 ratio), lines overlap slightly, which is intentional for this ultra-condensed face. The -1.8px letter-spacing counteracts the optical crowding inherent to Denton Condensed at display sizes. This is a display-only treatment—never apply these metrics to body text or UI labels.

Navigation text operates at the system's smallest size (12px) but bumps to weight 500, ensuring legibility despite the compact measure. Button text on large apricot CTAs scales up to 18px (unusually large for SaaS conventions), signaling that these actions are the page's primary conversion events.

Note on Font Substitutes

Both Denton Condensed and Untitled Sans are proprietary fonts served from Webflow's CDN—they will not resolve from Google Fonts or system font stacks. For implementation without access to these files:

• Denton Condensed → Substitute with Playfair Display Condensed (Google Fonts) for similar narrow serif character, or Oswald if a condensed sans fallback is acceptable. Define as --font-display: 'Playfair Display Condensed', serif.
• Untitled Sans → Substitute with Inter (Google Fonts) for nearly identical humanist geometry and metric compatibility, or Source Sans 3 as a secondary option. Define as --font-body: 'Inter', 'Untitled Sans', Georgia, sans-serif.

If implementing in a context where Google Fonts are unavailable, system fallbacks should prioritize SF Pro (macOS), Segoe UI (Windows), or Roboto (Android/Chrome OS) for the body role, and Georgia or Times New Roman for the display role as last-resort serifs.

Layout

Spacing System

• Base unit: 4px ({spacing.xxs}).
• Tokens: {spacing.xxs} (4px — icon gaps, inner padding), {spacing.xs} (6px — tight component spacing), {spacing.sm} (8px — common gap), {spacing.md} (10px — button vertical padding), {spacing.base} (12px — form gaps), {spacing.lg} (16px — card padding), {spacing.xl} (20px — section internal spacing), {spacing.xxl} (24px — component margins), {spacing.section-xl} (30px — large gaps), {spacing.section} (40px — vertical rhythm), {spacing.hero-vertical} (80px — hero band top/bottom padding), {spacing.section-xxl} (132px — major section breaks).
• Section padding (vertical): {spacing.hero-vertical} (80px) on hero; {spacing.section} (40px) on subsequent bands.
• Card internal padding: {component.banner-card} uses 10px 10px 30px 20px (asymmetric: tighter top/sides, generous bottom); {component.demo-card} uses 16px 24px.
• Gutters: 8px horizontal on sections (padding: 0px 8px per extracted container data).

Grid & Container

• Max content width: 1440px for main container (extracted from main and section selectors showing width: 1440px). This is unusually wide for a marketing site, suggesting Retell targets desktop-first enterprise buyers with large monitors.
• Navbar constrains to 1160px internally, leaving breathing room on ultra-wide viewports.
• Editorial density: Low-to-moderate. The hero uses a centered single-column text block (~600–700px implied width based on 90px headline line length) with right-aligned demo card. Below-fold sections (marquee, banner cards) expand closer to the 1440px max.
• Grid behavior at desktop: Hero appears to use a 2-column implicit grid (text left ~60%, demo card right ~40%). Marquee uses single-row overflow-scroll. Banner section likely uses multi-column card grid (inferred from article width of 381px suggesting 3–4 column layout at 1440px).
• Hero column split: Centered text column with left-aligned headline block; CTA area splits between left-side description+rating and right-side demo card.

Whitespace Philosophy

The system practices generous vertical compression with horizontal generosity. The hero band commands 80px of top/bottom padding plus substantial internal air around the 90px headline, creating a poster-like composition. Below the fold, spacing contracts to 40px sections with 16–24px internal padding—comfortable but not lavish. This suggests a confidence-based hierarchy: the hero gets room to breathe because it must establish emotional resonance; downstream sections optimize for information scanning. Whitespace is never "empty"—the hero's whitespace is filled with gradient atmosphere; the marquee's whitespace is filled with motion.

Header Architecture

┌──────────────────────────────────────────────────────────────────────┐
│ [Logo]  Product ▾  Pricing  For Business ▾  For Developers ▾       │
│          Resources ▾  Company ▾          Login  Contact Sales [CTA] │
│                                                                      │
│  ← ← ← ← ← ← ← ← ← 1160px content max-width → → → → → → → → → →  │
└──────────────────────────────────────────────────────────────────────┘
Height: 64px implied | Background: {colors.canvas} | Logo flush-left
Nav items center-left cluster | Utilities flush-right | CTA = button-primary

Hero Section

┌──────────────────────────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │  OVERLINE LABEL (display-lg, centered, white, tracking -0.16) │   │
│  │                                                              │   │
│  │     HEADLINE (display-xl, 90px, centered,                    │   │
│  │              Dentoncondensed, white, tracking -1.8)          │   │
│  │     "Meet your AI call center                                │   │
│  │      from the future."                                       │   │
│  │                                                              │   │
│  │  [Rating Badge]        Subtext (caption, white)   [Demo Card] │   │
│  │  ★★★★★ 4.8           Build, deploy...         Try Our Live  │   │
│  │                       manage next-gen...      Demo    [○]    │   │
│  └──────────────────────────────────────────────────────────────┘   │
│  Background: {colors.surface-dark} + radial blue gradient            │
│  Padding: 80px vertical | Border-radius: 20px (xl) on container    │
└──────────────────────────────────────────────────────────────────────┘

Marquee Section

┌──────────────────────────────────────────────────────────────────────┐
│  bill    ANKER    motorola    Grab    Lenovo    + CAPSULE  → scroll  │
│                                                                      │
│  Background: {colors.canvas} | Text: {colors.muted} (60% opacity)   │
│  Overflow: horizontal scroll (marquee-left / marquee-right anim)     │
└──────────────────────────────────────────────────────────────────────┘

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat Baseline | No shadow, solid {colors.canvas} | Navbar, marquee section | | 1 — Soft Overlay | rgba(255, 255, 255, 0.2) semi-transparent fill | Rating badge, demo card backgrounds | | 2 — Gradient Atmosphere | Radial gradient from {colors.active} to {colors.surface-dark} | Hero band background | | 3 — Surface Lift | {colors.surface-soft} or {colors.surface-lavender} solid | Banner cards, elevated panels | | 4 — Focus Ring | {colors.hairline-strong} border or outline | Input focus states (inferred) |

The Retell AI system rejects drop shadows entirely. Extracted CSS shows zero box-shadow declarations. Instead, depth is achieved through three mechanisms:

1. Luminance layering: The hero's radial gradient creates a perceived "glow" from center ({colors.active} bright blue) to edge ({colors.surface-dark} near-black), simulating a light source behind the content.
2. Semi-transparent overlays: Components sitting on dark surfaces (rating badge, demo card) use rgba(255, 255, 255, 0.2) fills, allowing the gradient to show through while providing enough contrast for text. This is "glassmorphism-lite"—no backdrop-blur, just alpha blending.
3. Surface value stepping: On light pages, cards step from {colors.canvas} (white) → {colors.surface-soft} (lavender-white) → {colors.surface-lavender} (visible lavender). Each step is flatter than a shadow but clearly hierarchical.

This is a color-block depth philosophy: spatial relationships are communicated through background-value differences rather than simulated lighting. The result feels modern, print-inspired, and performant (no shadow repaint costs).

Decorative Depth

The hero gradient is the sole decorative depth element. It appears to be a radial-gradient(ellipse at center, {colors.active} 0%, {colors.surface-dark} 70%) or similar, creating a blue halo effect behind the centered text. This gradient is not animated in the static extract (no CSS transition on background-position detected), though JS-driven parallax or mouse-tracking shifts are possible at runtime.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.none} | 0px | Nav dropdown links, text inputs, mobile menu button | | {rounded.sm} / {rounded.DEFAULT} | 6px | Default UI elements, subtle rounding | | {rounded.md} | 8px | Rating badge, small containers | | {rounded.lg} | 12px | Banner cards, demo card container | | {rounded.xl} | 20px | Hero band outer container (major section wrapper) | | {rounded.pill} | 50px | All primary/secondary/apricot buttons | | {rounded.circle} | 50% | Avatar inside demo card |

Photography Geometry

No photography was detected in the above-fold screenshot. The avatar in the demo card ({component.demo-card-avatar}) is a circular gradient orb (48px, appears to be a soft purple-blue radial fill)—not a photograph. If product screenshots or team photos appear lower on the page, they would likely follow the {rounded.lg} (12px) convention established by cards, or potentially {rounded.xl} (20px) for hero-scale imagery. Aspect ratios cannot be inferred from current data.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The persistent global navigation bar anchoring the top of every page. Background {colors.canvas}, text {colors.body-darker} at {typography.button-sm} (12px/500), height 64px. Contains the logo (left), navigation dropdown cluster (center-left), and utility/action area (right). No border or shadow—floats above content via z-index only. The mobile-responsive sibling {component.mobile-menu-button} replaces the nav cluster on small screens with a 44px × 44px square button in {colors.surface-soft} (#efefef extracted).

{component.nav-dropdown-link} — Individual items within the navbar's mega-menu-style dropdowns ("Product", "For Business", etc.). Transparent background, {colors.body-darker} text, {typography.button-sm} weight 500, zero border-radius, padded 0px 8px. These are text-only triggers—no visible chevrons or icons in the extract, suggesting dropdown panels appear on click/tap via JS.

{component.button-primary} — Solid navy conversion button ("Try For Free" in navbar). Background {colors.primary}, text {colors.on-primary}, pill-shaped ({rounded.pill} — 50px), padded 10px 24px. This is the highest-frequency action button, used in the navbar's utility zone and repeated in hero/footer contexts. State variant: {component.button-primary-active} for pressed/focus states (same token shape, implement hover darkening per convention).

{component.button-secondary} — Ghost/tertiary button ("Login", "Contact Sales"). Transparent background with {colors.ink} text, identical pill geometry and padding to primary. Relies entirely on text color to signal interactivity—border may appear on hover (not documented).

{component.button-apricot-lg} — The signature conversion element of the entire system. Massive warm apricot background ({colors.signature-apricot} — #ffbb7e), deep navy text ({colors.on-apricot} — #00122e), scaled to {typography.button} (18px/400), extreme pill radius (80px in raw CSS, maps to {rounded.pill}), padded generously 0px 40px. Used exclusively for "See Pricing" and "Certified Partner" actions where commitment level is highest. The color temperature contrast (warm button on cool/neutral background) makes it the undeniable visual focal point wherever it appears. State variant: {component.button-apricot-lg-hover}.

Cards & Containers

{component.hero-band} — The immersive full-width hero section. Background {colors.surface-dark} (near-black) with radial blue gradient overlay (documented in {extensions.shadows.hero-gradient}). All child text uses {colors.on-dark} (white). Padded 80px vertically with {spacing.lg} (16px) horizontal. Outer container has {rounded.xl} (20px) radius, creating a "floating panel" effect against the page body (which may be a slightly lighter shade or simply the gradient bleeding to edges). This is the most visually complex component in the system—it carries the entire brand's first-impression weight.

{component.hero-overline-label} — The eyebrow text above the headline ("#1 AI VOICE AGENT PLATFORM FOR AUTOMATING CALLS"). Transparent background, white text at {typography.display-lg} (16px/400/-0.16px tracking), uppercase by content convention (not text-transform). Sets tonal authority before the headline arrives.

{component.hero-headline} — The centerpiece typographic element. "Meet your AI call center from the future." rendered in Dentoncondensed at {typography.display-xl} (90px/500/-1.8px tracking). White on dark. Line-height is tight (0.88 ratio) causing slight line overlap on two-line rendering—which is intentional for this condensed face at this scale. This component receives more design attention than any other element on the page.

{component.hero-subtext} — Descriptive paragraph below headline ("Build, deploy, and manage next-generation AI voice agents..."). White text at {typography.caption} (14px/400), positioned left-aligned beneath the centered headline, alongside the rating badge.

{component.hero-rating-badge} — Social proof badge showing "★★★★★ 4.8". Background rgba(255, 255, 255, 0.2) (20% white), text {colors.on-dark}, {typography.body-sm} (12px/500), {rounded.md} (8px), padded 6px 12px. Floats left of the subtext paragraph. The semi-transparent fill lets the hero gradient show through subtly—this is a "glass" element without blur.

{component.demo-card} — Interactive promo card positioned bottom-right of the hero ("Try Our Live Demo"). Background rgba(255, 255, 255, 0.2) matching the rating badge treatment, text {colors.on-dark} at {typography.title-md} (19.5px/400), {rounded.lg} (12px), padded 16px 24px. Contains a {component.demo-card-avatar} (circle, 48px, gradient orb) floated or flex-aligned to the right of the label text. This card likely has hover state lift/opacity change (undocumented).

{component.marquee-section} — Horizontal scrolling logo strip below hero. Background {colors.canvas}, logo text rendered in {colors.muted} (60% opacity navy), {typography.body-md} (14px). Animated via marquee-left / marquee-right keyframes at 1s duration (detected in keyframes array). Logos include: bill, ANKER, motorola, Grab, Lenovo, + CAPSULE. Each individual logo item is {component.marquee-logo-item} with transparent background.

{component.banner-card} — Content card appearing in the post-hero banner section. Background {colors.surface-soft} (#f5f5fa), text {colors.body} (navy) at {typography.caption} (14px/400), {rounded.lg} (12px), asymmetrically padded 10px 10px 30px 20px (tight top/sides, loose bottom). Width constrained to ~381px in extracted data, suggesting a 3–4 column grid at 1440px viewport.

Inputs & Forms

{component.text-input} — Form input field (radio buttons detected in extract, implying form presence). Transparent background, {colors.body} text color, {typography.body-md}, no border-radius, no padding (likely handled by wrapper). Minimal styling—relies on browser defaults augmented by focus state. State variant: {component.text-input-focus} for the focused ring treatment (implement {colors.hairline-strong} border or outline per accessibility conventions).

Navigation

{component.mobile-menu-button} — Hamburger/menu toggle for viewport widths below the desktop breakpoint. Square 44px × 44px (WCAG AAA touch target), background #efefef (slightly warmer than {colors.surface-soft}), text {colors.ink}, zero border-radius. Appears only when {component.top-nav} collapses its dropdown cluster.

Do's and Don'ts

Do

• Do reserve {colors.signature-apricot} (#ffbb7e) exclusively for primary conversion CTAs—its warmth is diluted if overused on secondary actions.
• Do apply {typography.display-xl} (90px Dentoncondensed) only to the hero headline; never reuse this token for section headers or card titles where it would destroy hierarchy.
• Do maintain the 6.4× size ratio between display (90px) and body (14px)—this extreme contrast is the system's primary hierarchy lever since weights stay at 400/500.
• Do use rgba(255, 255, 255, 0.2) for any overlay component sitting on {colors.surface-dark}—it ensures legibility while preserving gradient visibility.
• Do keep all buttons as pills ({rounded.pill} — 50px) regardless of size tier; mixed radius vocabulary (some square, some round) breaks the friendly-modern voice.
• Do apply {rounded.xl} (20px) to major section wrappers (hero, feature bands) to soften the page's outer silhouette against the browser chrome.
• Do set marquee logo opacity to {colors.muted} (60%) so brands support rather than compete with page content.
• Do use {typography.button-sm} (12px/500) for navigation chrome—smaller type with medium weight maintains density without sacrificing scannability.
• Do limit {colors.active} blue (#3e6aef) to links and the hero gradient glow—avoid using it as a button background or large surface fill.
• Do pad the hero band vertically at {spacing.hero-vertical} (80px minimum) to give the 90px headline adequate respiratory room.

Don't

• Don't introduce bold (700) weight anywhere—the system peaks at 500 (medium) and relies on scale/color for emphasis instead.
• Don't add drop shadows to cards or modals—the entire depth model uses color-value layering and alpha overlays, not simulated lighting.
• Don't use {colors.primary} navy as a button background on {colors.canvas} white surfaces unless it's the navbar's compact {component.button-primary} (which works due to small size); large navy buttons on white would feel heavy and government-issue.
• Don't round avatar images to anything other than {rounded.circle} (50%)—the demo card establishes circles as the avatar convention.
• Don't expand the spacing scale beyond the defined tokens—if you need 36px, combine {spacing.xxl} (24px) + {spacing.lg} (16px) rather than inventing a new value.
• Don't apply text-transform: uppercase via CSS to body text—the overline label achieves its caps appearance through content casing alone; programmatic uppercasing would affect non-English locales unexpectedly.
• Don't place {colors.signature-apricot} text on any background lighter than the apricot itself—contrast requires {colors.on-apricot} navy for AA compliance.
• Don't nest components more than 2 levels deep without introducing a new surface token (canvas → surface-soft → surface-lavender is the maximum stepped progression).
• Don't animate the hero gradient position via CSS transitions if JS parallax is intended—use transform: translateZ(0) and requestAnimationFrame instead to avoid layout thrashing on the 1440px container.
• Don't omit the -1.8px letter-spacing from {typography.display-xl}—without it, Denton Condensed at 90px will optically crowd and feel cheaper.

Motion & Animation

Transition Tokens

--transition-opacity: opacity 0.3s ease;
--transition-bg: background-color 0.3s ease;
--transition-transform: transform 0.3s ease, background-color 0.3s ease;
--transition-filter: filter 1s ease;
--transition-clip-path: clip-path 1s ease;
--transition-grid: grid-template-columns 0.8s cubic-bezier(0.38, 0.005, 0.215, 1);
--transition-max-width: max-width 0.8s cubic-bezier(0.38, 0.005, 0.215, 1);

All transitions use ease timing function (CSS keyword, equivalent to ease-in-out approximated) unless otherwise noted. Duration clusters at 300ms for micro-interactions (buttons, inputs, opacity reveals) and 1000ms for decorative/structural changes (filter effects, clip-path morphs, grid reflows). The cubic-bezier(0.38, 0.005, 0.215, 1) custom easing on grid/max-width transitions suggests a sophisticated layout animation (likely an expanding/collapsing card grid or accordion section) with overshoot-free deceleration.

Keyframe Animations

• spin — Continuous 360° rotation (standard loading spinner pattern).
• marquee-left — Horizontal translation animating logo strip leftward (infinite loop, likely translateX(-50%) pattern for seamless wrap).
• marquee-right — Mirror of marquee-left for reverse-direction scroll or alternating bands.
• react-loading-skeleton — Pulse/shimmer animation for skeleton loading states (background-position sweep).
• buttonBlur — Likely a frosted-glass backdrop-filter entrance (blur 0→10px) for modal/overlay buttons.
• buttonTextBlur — Companion to buttonBlur, applying text-shadow or opacity blur to button label during glass entrance.

Interaction Patterns

• Marquee scroll: The logo strip auto-scrolls horizontally via CSS marquee-left/marquee-right keyframes at 1s interval, creating continuous brand-social-proof motion. Direction alternates per band or per cycle.
• Button glass morphism entrance: Apricot or primary buttons in overlay contexts animate blur/filter on appearance (buttonBlur keyframe), suggesting a "materialize from fog" effect.
• Skeleton loading: Content areas show placeholder pulse (react-loading-skeleton) before real content renders—indicates async data loading (pricing tiers, testimonial feeds, or API-dependent content).
• Grid expansion: Card grids animate grid-template-columns and max-width over 800ms with custom bezier easing—likely a "reveal cascade" where cards stagger into their final positions.
• Opacity crossfade: Standard 300ms opacity transitions on hover/focus states for all interactive elements (buttons, links, cards).
• Clip-path reveal: 1s clip-path transitions suggest doors-wipe or circle-expand reveals on hero or section entry (scroll-triggered).
• Filter transitions: 1s filter animations imply saturation/blur shifts on imagery or gradient bands during scroll parallax.

No scroll-triggered libraries (GSAP ScrollTrigger, Lenis, AOS) were explicitly detected in the CSS class names, but the presence of clip-path, filter, and transform transitions strongly implies JS-driven intersection-observer orchestration connecting scroll position to these CSS properties.

Imagery Style

• Hero background: Abstract gradient wash—radial ellipse from center-blue (#3e6aef) to edge-navy (#00122e). No photography, illustration, or 3D render. Purely atmospheric color field.
• Avatar element: Gradient orb (demo card avatar) appears to be a soft radial blend of purple and blue hues, possibly with noise texture or multiple color stops. Abstract/non-representational.
• Logo strip: Monochrome brand wordmarks rendered at reduced opacity (60%). No color logos—unified grayscale treatment enforces visual subservience to page content.
• No product screenshots detected above fold. If present lower, expected style: clean UI captures on {colors.surface-soft} cards with {rounded.lg} corners, possibly with subtle {colors.hairline-strong} borders.
• Illustration strategy (inferred): None apparent in the hero—Retell relies on typography and gradient atmosphere rather than character illustration, isometric diagrams, or abstract shapes. This is a typographic-hero design, not an illustrative one.
• Color treatment: Any imagery introduced would need to survive both light-canvas and dark-hero contexts, suggesting either duotone processing or careful placement within surface-bounded cards only.
• Imagery role: Supportive, never dominant. The 90px headline and gradient background carry 100% of the visual weight above the fold.

Icon System

• Library: Custom SVG (no Lucide, Heroicons, Material, or Bootstrap classes detected). Icons are inline SVGs or Webflow-managed assets.
• Specific icons observed:
  • Retell logo mark (dot-grid icon beside "Retell" wordmark in navbar)
  • Star/rating glyphs (★ ★★★★ in hero rating badge—likely SVG paths or Unicode characters)
  • Chevron/down-arrow indicators on nav dropdowns (implied by w-dropdown-toggle class naming, not directly visible in static extract)
  • Plus icon (+) before "CAPSULE" in marquee (Unicode or SVG)
  • Mobile hamburger icon (implied by c-navbar-mobile-menu-button)
• Treatment: Stroke-based for UI icons (nav chevrons, hamburger); fill for logo mark and stars. Color generally currentColor inheriting from parent text color.
• Size alignment: Nav icons estimated 12–16px (matching {typography.button-sm} cap height); logo mark ~24px; star ratings ~14px; avatar orb ~48px diameter.
• Stroke weight: Not extracted, but consistent with Untitled Sans's humanist geometry—likely 1.5px–2px stroke on 16px icons for optically balanced weight.

Recommended Frontend Stack

- Framework:      Next.js 15 (App Router) or Astro (for landing-page optimization)
                 Webflow extraction suggests static-markup comfort; React meta-framework ideal for interactive demos
- Styling:        Tailwind v4 with CSS custom properties for design tokens
                 (Vanilla CSS in origin; Tailwind maps cleanly to the 4px/8px spacing grid)
- Fonts:          Self-host Denton Condensed (woff2 from Webflow CDN) + Untitled Sans
                 Fallback chain: "Dentoncondensed, Arial, sans-serif" | "'Untitled Sans', Georgia, sans-serif"
- Animation:      Framer Motion (React) or GSAP (vanilla) for scroll-triggered clip-path/filter transitions
                 CSS-only for marquee (keyframes) and button hovers
- Icons:          Custom SVG sprite (inline or icon component) — no external library matches the logo/grid mark
- Component lib:  Radix UI Primitives for accessible dropdowns/buttons (nav, CTA)
                 shadcn/ui patterns adapted to Retell's token system

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Nav collapses to {component.mobile-menu-button}; hero headline scales down (estimated 48–56px); demo card stacks below text; marquee slows or pauses; single-column card grid | | Tablet | 768px – 1024px | Nav partially visible; hero headline 64–72px; 2-column card grid possible; padding compresses to {spacing.section} (40px) | | Desktop | 1025px – 1440px | Full nav with dropdowns; 90px headline; 3–4 column card grid; 1440px max container respected | | Wide | > 1440px | Container centers with auto margins; hero gradient expands to fill viewport beyond 1440px; nav stays 1160px internally |

Touch Targets

• {component.button-primary} / {component.button-apricot-lg}: Height ~40–48px (from padding 10px 24px + font 12–18px + border). Exceeds WCAG AAA 44×44px target comfortably.
• {component.mobile-menu-button}: Exactly 44px × 44px (extracted size). Meets WCAG AAA precisely.
• {component.demo-card}: Tappable area ~200px × 80px (padded container). Generous touch zone.
• {component.text-input}: Depends on implementation, but radio buttons detected suggest minimum 24px × 24px hit areas (may need enlargement for touch).
• Nav dropdown links ({component.nav-dropdown-link}): Padding 0px 8px with 12px font yields ~28px height—potentially below 44px threshold. Recommend increasing vertical padding to 12px on mobile.

Collapsing Strategy

• Navbar: Desktop shows full dropdown cluster (Product ▾ Pricing For Business ▾ ...) plus right-rail utilities. Below tablet breakpoint, this collapses behind {component.mobile-menu-button}, revealing a slide-down or off-canvas menu panel (class c-navbar-mobile-menu w-nav-menu indicates Webflow's built-in responsive nav pattern with overlay layers c-navbar-overlay-new is-1 through is-5).
• Hero columns: Two-column layout (text left, demo card right) stacks vertically on mobile: overline → headline → subtext + rating → demo card. Headline size reduces from 90px to approximately 48–56px (maintaining impact at smaller viewport).
• Marquee: Horizontal scroll continues on mobile (native overflow-scroll or continued CSS animation). Logo count may reduce or scroll speed decreases to prevent motion sickness.
• Card grid: Multi-column banner cards collapse to single column, each at full width (~381px → ~100% minus gutters). Asymmetric padding (10px 10px 30px 20px) remains appropriate.
• Hero padding: Compresses from {spacing.hero-vertical} (80px) to {spacing.section} (40px) on mobile, reclaiming vertical space for stacked content.

Image Behavior

• Demo card avatar (gradient orb): Maintains 48px diameter on all breakpoints (fixed size, not responsive). May shift from right-of-text to centered-above-text on mobile stack.
• Gradient hero background: Should use background-size: cover or fixed positioning to ensure gradient fills viewport at all sizes. The radial center point may shift from center to top-center on mobile where portrait orientation changes the focal area.
• Logos in marquee: Maintain aspect ratio, reduce horizontal spacing between items on mobile to fit more logos in viewport width. Opacity at {colors.muted} (60%) unchanged.

Iteration Guide

1. Initialize with tokens first. Before writing any component markup, define every color, spacing, radius, and typography value from the YAML frontmatter as CSS custom properties (e.g., --color-primary: #00122e; --radius-pill: 50px; --space-hero-v: 80px;). Reference these variables exclusively—never hard-code hex codes or pixel values that have token equivalents.

2. Build the hero band as the foundational component. Start with {component.hero-band}: a full-width container with {colors.surface-dark} background, {rounded.xl} (20px) corners, and the radial gradient overlay ({extensions.shadows.hero-gradient}). Implement {component.hero-overline-label}, {component.hero-headline}, and {component.hero-subtext} as children with correct typography tokens. Validate the 90px headline renders Denton Condensed correctly at -1.8px tracking.

3. Implement the dual-button system. Create {component.button-primary} (navy, white text, pill) and {component.button-apricot-lg} (apricot, navy text, large pill) as distinct variants. Ensure apricot buttons use {typography.button} (18px) while primary buttons use {typography.button-sm} (12px). Add hover states: navy buttons darken to {colors.primary-hover}; apricot buttons gain slight brightness lift or scale(1.02) transform.

4. Layer the glass-overlay components. Position {component.hero-rating-badge} and {component.demo-card} using background: rgba(255, 255, 255, 0.2) fills. Test that the hero gradient remains visible through these semi-transparent surfaces. Add backdrop-filter: blur(8px) only if the design intends frosted glass (optional enhancement beyond extracted spec).

5. Construct the marquee with CSS animation. Build {component.marquee-section} as a horizontal overflow container with overflow-x: hidden. Implement the @keyframes marquee-left animation translating child elements translateX(-50%) over a duration derived from content width (faster for shorter lists, slower for longer). Duplicate the logo list to create seamless infinite loop.

6. Build the card grid system. Implement {component.banner-card} with {colors.surface-soft} background, {rounded.lg} (12px) corners, and the specific asymmetric padding 10px 10px 30px 20px. Lay out 3–4 columns at desktop (1440px / 381px ≈ 3.78), collapsing to single column on mobile. Connect to the grid-template-columns transition (0.8s cubic-bezier) for animated reflow if desired.

7. Implement responsive navbar collapse. Code the desktop nav ({component.top-nav}) with dropdown triggers ({component.nav-dropdown-link}) visible at ≥1024px. Below this threshold, hide the dropdown cluster and show {component.mobile-menu-button} (44px × 44px). Wire the button to toggle a mobile menu panel (slide-down or off-canvas) with the overlay layers (c-navbar-overlay-new is-1..5) for backdrop dismissal.

8. Add motion progressively. After static layout is complete, layer in transitions: 300ms ease on opacity/background-color for all interactive elements, 1s clip-path or filter transitions for scroll-triggered section reveals, and the marquee-left/marquee-right keyframes for the logo strip. Use Intersection Observer to trigger animations only when elements enter viewport.

9. Run linting and validation. Execute npx @google/design.md lint DESIGN.md after implementation. Fix broken-ref errors (typos in token paths), contrast-ratio warnings (especially {colors.signature-apricot} on {colors.on-apricot}), and orphaned-tokens (tokens defined but never referenced in components or prose).

10. Test font substitution paths. Load the page with network throttling that blocks the Webflow CDN (cdn.prod.website-files.com). Verify that Denton Condensed falls back gracefully to Arial (condensed width mismatch acceptable) and Untitled Sans falls back to Inter or Georgia. Document any layout shifts caused by metric differences in your QA notes.

Font Setup

/* Define in :root or tailwind.config.js */
:root {
  /* Font families */
  --font-display: 'Dentoncondensed', 'Playfair Display Condensed', 'Arial Narrow', serif;
  --font-body: 'Untitled Sans', 'Inter', 'Georgia', sans-serif;
  
  /* Critical display settings */
  --tracking-tight: -1.8px;    /* For 90px headlines */
  --tracking-snug: -0.16px;    /* For 16–19.5px labels */
  
  /* Load from Webflow CDN (preferred) or substitute */
  @font-face {
    font-family: 'Dentoncondensed';
    src: url('https://cdn.prod.website-files.com/64ada0f2685b2d18caa5e699/6959cff549d8d847f1399fc9_DentonCondensed-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Untitled Sans';
    src: url('https://cdn.prod.website-files.com/64ada0f2685b2d18caa5e699/6959d036be16bb645837eca8_untitled-sans-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
}

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are absent. Implementers must decide whether navy buttons darken, apricot buttons lift/scale, and cards gain border or shadow on hover. Current data provides Default and Active/Pressed tokens only.
• Focus ring specifications: {component.text-input-focus} exists as a token but lacks explicit border-color or outline values. Recommend implementing a 2px {colors.active} (#3e6aef) ring with 2px offset for keyboard accessibility (WCAG 2.4.7).
• Loading skeleton visual design: react-loading-skeleton keyframe name detected but no skeleton color/pulse-geometry values extracted. Skeletons likely use {colors.surface-soft} base with {colors.surface-lavender} shimmer highlight.
• Dark mode palette: The system includes dark surfaces ({colors.surface-dark}, {colors.surface-deep-navy}) but only in the hero dialect. A true dark-mode toggle swapping all canvas/text values was not detected and may not exist.
• Form validation states: Beyond focus, no error ({colors.error}), warning, or success ({colors.success}) input border/background treatments were extractable from the landing page screenshot. These require designer input for checkout/signup flows.
• Dropdown panel styling: {component.nav-dropdown-link} triggers exist but the revealed dropdown panel (background, shadow, item list) was not visible in the static screenshot. Panel likely uses {colors.canvas} with {extensions.shadows.md} (if shadows were used) or {colors.hairline-strong} border.
• Footer component: No footer was captured in the above-fold screenshot. Expect a footer with {colors.canvas} or {colors.surface-soft} background, {colors.muted} text, and multi-column link organization based on nav structure.
• Pricing/dashboard surfaces: The pricing page (referenced by "See Pricing" button) and dashboard (authenticated user flow) were not visible. These may introduce new surface tokens (tables, charts, sidebar navigation) not covered in this landing-page-focused specification.
• Pixel-exact gradient coordinates: The hero radial gradient's exact color-stop percentages and ellipse radii are interpolated from visual inspection. A designer should provide the precise radial-gradient() CSS function for faithful reproduction.
• Webflow-specific classes: Class names like c-navbar-2, w-nav, w-dropdown-toggle, c-button-rounded indicate Webflow origins. These carry no semantic meaning for reimplementation—use the component token names ({component.top-nav}, etc.) instead of copying class naming conventions.