---
version: alpha
name: "voiceflow.com"
description: "Design system extracted from https://www.voiceflow.com/ on 2026-10-28"
colors:
  background: "#f2f7f7"
  surface: "#ffffff"
  surface-2: "#f1f2f2"
  surface-3: "#d3e5f4"
  foreground: "#1a1e23"
  muted-foreground: "#515a63"
  primary: "#397dff"
  on-primary: "#111111"
  secondary: "#008069"
  border: "#e2e4e5"
typography:
  headline-display:
    fontFamily: "Tiempos Headline-81ad1a66702885c1"
    fontSize: "72px"
    fontWeight: 300
    lineHeight: "76.32px"
    letterSpacing: "-2.16px"
  headline-lg:
    fontFamily: "Tiempos Headline-81ad1a66702885c1"
    fontSize: "48px"
    fontWeight: 300
    lineHeight: "55.68px"
    letterSpacing: "-0.96px"
  headline-md:
    fontFamily: "UCity Pro-8cd2cb40d9534eaf"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "28.8px"
    letterSpacing: "-0.48px"
  body-md:
    fontFamily: "UCity Pro-8cd2cb40d9534eaf"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "22px"
  label-md:
    fontFamily: "UCity Pro-8cd2cb40d9534eaf"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.42"
  button:
    fontFamily: "UCity Pro"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "20px"
  code:
    fontFamily: "Fira Code-3bf965ca37a74b48"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "18.6px"
rounded:
  none: "0px"
  md: "8px"
  lg: "10px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "8px"
    height: "37px"
    padding: "10px 14px"
  button-ghost:
    backgroundColor: "#f2f7f7"
    textColor: "#515a63"
    typography: "{typography.button}"
    rounded: "0px"
    height: "33px"
    padding: "4px 12px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#1a1e23"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "40px"
    padding: "0px 0px"
  input:
    backgroundColor: "transparent"
    rounded: "0px"
    height: "32px"
  card:
    backgroundColor: "#ffffff"
    rounded: "10px"
    padding: "16px"
---

# voiceflow.com

## Overview

Voiceflow | Enterprise Conversational AI Platform & Voice AI: Voiceflow is the AI agent platform for customer experience automation. Build, launch, and scale chat and voice AI agents for customer support and CX. Book a demo.

Gently rounded controls, layered shadows for depth, large display type at 72px / 300, a single blue accent on neutrals. The site ships in light mode by default. Measured from 3241 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("Talk to sales"), rest
- `screenshots/c-button-1--hover.png`: Button 1 ("Talk to sales"), hover
- `screenshots/c-button-1--focus.png`: Button 1 ("Talk to sales"), focus
- `screenshots/c-link-1--rest.png`: Text link 1 ("Sanlam’s story →"), rest
- `screenshots/c-link-1--hover.png`: Text link 1 ("Sanlam’s story →"), hover
- `screenshots/c-link-1--focus.png`: Text link 1 ("Sanlam’s story →"), focus
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Docs"), rest
- `screenshots/c-nav-link-1--hover.png`: Navigation link 1 ("Docs"), hover
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Docs"), focus
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Resources"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Resources"), hover
- `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by menu-button "Resources"
- `screenshots/c-menu-button-1--open.png`: Menu / dropdown trigger 1 ("Resources"), open (trigger)
- `screenshots/c-tabs-1--rest.png`: Tabs 1 ("SupportCX DesignProductE"), rest
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Platform overview"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Platform overview"), hover
- `screenshots/c-social-links-1--rest.png`: Social icon links 1, rest
- `screenshots/c-social-links-1--hover.png`: Social icon links 1, hover
- `screenshots/c-tooltip-1--rest.png`: Tooltip 1 ("ResolvedConversations840"), rest
- `screenshots/c-card-1--rest.png`: Card 1 ("Every tool your team nee"), rest
- `screenshots/c-testimonial-1--rest.png`: Testimonial / quote card 1 ("“We built and threw away"), rest
- `screenshots/c-accordion-1--rest.png`: Accordion / disclosure 1 ("🇺🇸English 🇺🇸Englishí ¼"), rest
- `screenshots/c-accordion-1--hover.png`: Accordion / disclosure 1 ("🇺🇸English 🇺🇸Englishí ¼"), hover

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f2f7f7` | Page background |
| surface | `#ffffff` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#f1f2f2` | Secondary surface |
| surface-3 | `#d3e5f4` | Secondary surface |
| foreground | `#1a1e23` | Primary text |
| muted-foreground | `#515a63` | Secondary text, captions |
| primary | `#397dff` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#111111` | Text on the accent |
| secondary | `#008069` | Secondary accent (teal) |
| border | `#e2e4e5` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#1f2429`, `#f1f2f2`, `#2b3239`, `#0b0b0b`, `#d3e5f4`, `#397dff`, `#ead9f2`.

Gradients in use: `linear-gradient(rgb(226, 230, 230) 0px, rgb(197, 201, 202) 100%)`; `linear-gradient(rgb(46, 61, 49), rgb(28, 40, 32))`; `linear-gradient(rgb(255, 255, 255) 0%, rgb(248, 248, 248) 100%)`.

The accent `#397dff` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Tiempos Headline-81ad1a66702885c1** for h1, h2: self-hosted webfont; verify availability and permission; **Newsreader** is the suggested stand-in.
- **UCity Pro-8cd2cb40d9534eaf** for h3, body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **Fira Code-3bf965ca37a74b48** for code: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **UCity Pro** for button: unknown source; use **Inter** as the stand-in if it does not load.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Tiempos Headline-81ad1a66702885c1 | 72px | 300 | 76.32px | -2.16px |
| headline-lg | Tiempos Headline-81ad1a66702885c1 | 48px | 300 | 55.68px | -0.96px |
| headline-md | UCity Pro-8cd2cb40d9534eaf | 24px | 400 | 28.8px | -0.48px |
| body-md | UCity Pro-8cd2cb40d9534eaf | 14px | 400 | 22px | normal |
| label-md | UCity Pro-8cd2cb40d9534eaf | 12px | 400 | 1.42 | normal |
| button | UCity Pro | 14px | 400 | 20px | normal |
| code | Fira Code-3bf965ca37a74b48 | 12px | 400 | 18.6px | normal |

Type scale in use: 10px, 11px, 12px, 14px, 15px, 16px, 18px, 24px, 28px, 36px, 48px, 72px. Base body size 14px.

The hero heading (h1) renders at 72px / 300, center aligned, up to 720px wide, tracking -2.16px. Sample: "AI agents customers love. ROI you can prove.".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32 (px).
- Flex and grid gaps: 4, 8, 12, 16, 20, 24 px.
- Content max width: 1312px, centred.
- Breakpoints: 480px, 540px, 800px, 1200px, 1280px.
- Header: 91px tall, fixed, background `rgba(0, 0, 0, 0)`; 7 nav links at 0px / 400 (Docs · Platform · Customers · Pricing · Login · Get started).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px`
- shadow-2: `rgba(11, 20, 26, 0.13) 0px 1px 0.5px 0px`
- shadow-3: `rgba(22, 26, 30, 0.02) 0px 0px 0px 1px inset`
- shadow-4: `rgba(22, 26, 30, 0.06) 0px 1px 0px 0px`

## Shapes

- Buttons: 8px
- Inputs: 0px
- Cards and panels: 10px
- Images and media: 0px
- Radius scale: none 0px, md 8px, lg 10px, full 9999px

## Components

### Button, primary

Background `#397dff`, text `#ffffff`, border none, radius 8px, height 37px, padding 10px 14px, 14px / 600, shadow `rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6px, rgba(15, 30, 97, 0.06) 0px 3px 8px -4px, rgba(15, 30, 97, 0.04) 0px 2px 6px -3px, rgba(15, 30, 97, 0.04) 0px 1px 4px -2px, rgba(15, 30, 97, 0.02) 0px 1px 3px -1px, rgba(15, 30, 97, 0.01) 0px 1px 2px 0px, rgba(47, 104, 219, 0.32) 0px -1px 0px 1px inset, rgba(255, 255, 255, 0.32) 0px 1px 2px -1px inset`. Sample label: "Get started".

### Button, ghost

Background transparent (it sits on `#f2f7f7`, so place it on that colour), text `#515a63`, border none, radius 0px, height 33px, padding 4px 12px, 14px / 400. Sample label: "Resources".

### Button, secondary

Background `#ffffff`, text `#1a1e23`, border none, radius 9999px, height 40px, padding 0px 0px, 16px / 400, shadow `rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px`.

### Input

Height 32px, background `transparent`, border 0px solid #1a1e23, radius 0px, 14px text, padding 7px 8px.

### Card

Background `#ffffff`, border none, radius 10px, padding 16px, shadow `rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px, rgba(22, 26, 30, 0.08) 0px 1px 5px -4px, rgba(22, 26, 30, 0.04) 0px 0px 0px 1px, rgba(22, 26, 30, 0.02) 0px 1px 0px 0px`. Typical size about 292×252px.

### Link

Colour `#515a63`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (27 of 87 in the checklist, 50 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 11 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | secondary sm, primary-icon-right sm, secondary-with-icon sm, secondary-with-icon lg, secondary sm, secondary-icon-right, secondary-icon-right lg, ghost-icon-right lg | hover, focus | "Talk to sales" |
| Icon button | secondary, ghost, ghost, secondary | rest only |  |
| Text link | plain-accent | hover, focus | "Sanlam’s story →" |
| Text input | outlined | rest only |  |
| Header / navbar | default | rest only | "Docs Platform Resources DocsOp" |
| Navigation link | plain, plain | hover, focus | "Docs" |
| Menu / dropdown trigger | ghost | hover, open | "Resources" |
| Tabs | underline | rest only | "SupportCX DesignProductEnginee" |
| Footer | default | rest only | "Take control of your AI custom" |
| Footer link | plain | hover | "Platform overview" |
| Social icon links | default | hover |  |
| Tooltip | default | rest only | "ResolvedConversations840 · 84%" |
| Badge / pill / tag | subtle-square | rest only | "Returns & refunds" |
| Counter / notification dot | subtle-filled | rest only |  |
| Card | flat, flat, elevated, flat-with-media, outlined-with-media, elevated-interactive | rest only | "Every tool your team needs to " |
| Testimonial / quote card | elevated-with-media | rest only | "“We built and threw away four " |
| Accordion / disclosure | details | hover | "🇺🇸English 🇺🇸English🇩🇪Deu" |
| Avatar | 28px-round | rest only |  |
| Code block / inline code | inline, block | rest only | "vf project list" |
| Blockquote | default | rest only | "“Voiceflow takes the pain out " |
| Image / figure | aspect-0.87, aspect-1.49-rounded, aspect-3.36 | rest only |  |
| Icon | outline-24px, filled-16px, filled-19px | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Theme toggle, Language / region switch, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Stat / metric, Styled list, List row / menu row, Table, Table row, Avatar stack, Divider, Keyboard key, Video / media embed, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1312px | 280px | 16px | 72px, 2 lines, center | 91px, 6 links, 1 CTA | media below text | 3→3 col; 8→1 col; 3→1 col | content-width |
| laptop 1024px | 928px | 112px | 16px | 72px, 2 lines, center | 91px, 6 links, 1 CTA | media below text | 3→3 col; 3→1 col; 2→2 col | content-width |
| tablet 768px | 704px | 72px | 16px | 56px, 2 lines, center | 91px, 5 links, 1 CTA | media below text | 3→3 col; 3→1 col; 2→2 col | content-width |
| phone 390px | 342px | 24px | 16px | 28px, 2 lines, center | 76px, hamburger (Menu) | media below text | 2→1 col; 3→1 col; 2→2 col | content-width |

- H1 goes 72px → 28px (39%), 2 → 2 lines.
- Nav collapses to a hamburger by 390px (first seen at 390px); header 91px → 76px.
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 24px.
- Section top padding 40px → 40px.

## Interaction & Motion

278 elements carry transitions; typical 0.15s with ease, mostly on color, opacity, background-color. 10 running keyframe animations (psWord 0.18s 1; _1fvov9a2 1s infinite; psBars 1s infinite).

- Hover on button-primary ("Get started"): background #397dff → #2f68db, shadow deepens; cursor pointer; transition all | 0.2s | ease.
- Hover on button-secondary ("Get started"): background #397dff → #2f68db, shadow deepens; cursor pointer; transition background-color, color, opacity, box-shadow, border-color | 0.15s, 0.15s, 0.15s, 0.15s, 0.15s | ease, ease, ease, ease, ease | delay 0s, 0s, 0s, 0s, 0s.
- Hover on nav-link ("Docs"): text #515a63 → #1a1e23, border #515a63 → #1a1e23, icon/inner colour → #1a1e23; cursor pointer; transition color | 0.2s | ease.
- Hover on body-link ("Turo’s story →"): no visible change; cursor pointer.
- Hover on input: no visible change; cursor text.
- Focus on button-primary: outline 1px none rgb(255, 255, 255), offset 1px.
- Focus on body-link: box-shadow ring rgb(57, 125, 255) 0px 0px 0px 1px.
- Focus on input: element did not take focus.
- Tooltip triggers exist (1 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 2 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 57 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).
- Portal roots present: hs-web-interactives-floating-container.

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#397dff` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 14px in UCity Pro-8cd2cb40d9534eaf and headings in Tiempos Headline-81ad1a66702885c1.
- Do match corner radii per element class (buttons 8px, cards 10px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.