---
title: "Voiceflow design system"
variant: extended
source: https://www.voiceflow.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/voiceflow-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Voiceflow · Design System

> Editorial calm for an AI platform built to perform

**Theme:** light · **Industry:** ai · **Source:** https://www.voiceflow.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Voiceflow pairs refined serif headlines and quiet, pale section bands with vivid blue calls to action. Product interfaces, customer stories, and immersive media make the long homepage feel like a guided proof of the platform.

## North star

Balance editorial serif-led storytelling with precise, product-focused evidence, keeping blue reserved for clear interaction cues.

## Overview

The page builds a calm enterprise-AI identity from a white canvas, alternating with pale blue-gray bands and occasional charcoal blocks. Tiempos Headline supplies the distinctive editorial voice: large, light serif headlines with tight tracking, balanced by compact UCity Pro navigation, captions, and interface copy. Signal Blue is deliberately scarce, reserved for primary actions, links, and small interaction details. The layout moves between centered, spacious statements and structured product or customer-story areas, using a broad content frame and restrained hairlines to keep the long scroll legible. Visual evidence is central: the hero uses cinematic landscape media, followed by product screens, channel mockups, customer portraits, and testimonial cards. Those varied images provide color and texture; the measured greens and muted photo hues are not core brand colors. Soft card elevation and rounded media containers separate layers without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, cards, and the clean background behind hero and omnichannel content. |
| Quiet Slate | `#6e797b` | `--color-quiet-slate` | neutral | Primary measured text tone across body copy, navigation, headings, and card content. |
| Signal Blue | `#397dff` | `--color-signal-blue` | accent | Primary CTA fill, inline links, and small conversational-interface highlights. |
| Mist Wash | `#f2f7f7` | `--color-mist-wash` | surface | Recurring pale section background for workflow, platform, and editorial content bands. |
| Soft Alloy | `#e2e6e6` | `--color-soft-alloy` | surface | Section and media backing, subtle dividers, and low-contrast border treatment. |
| Charcoal Ink | `#1f2429` | `--color-charcoal-ink` | semantic | Dark feature and footer bands, inverse buttons, and selected inverse text. |
| Cloud Pewter | `#c5c9ca` | `--color-cloud-pewter` | neutral | Gradient endpoint in muted section/media treatment; supporting color, not a dominant brand surface. |
| Frost Line | `#e8ecec` | `--color-frost-line` | neutral | Subtle card, navigation, and section boundaries. |
| Deep Graphite | `#2b3239` | `--color-deep-graphite` | semantic | Dark section and footer details, including low-contrast borders. |
| Muted Charcoal | `#3f3f3f` | `--color-muted-charcoal` | neutral | Sparse card-border detail; not a primary page color. |
| Steel Text | `#515a63` | `--color-steel-text` | neutral | Secondary navigation and supporting text. |
| Ash Caption | `#9aa1a3` | `--color-ash-caption` | neutral | Subdued footer and tertiary text. |
| Near Black | `#0b0b0b` | `--color-near-black` | semantic | Occasional dark card or media backing, rather than the main dark-section tone. |
| Night Text | `#1a1e23` | `--color-night-text` | semantic | Dark heading and input text, including form fields. |
| Moss Shadow | `#2e3d31` | `--color-moss-shadow` | neutral | Green gradient detail detected in media; treat as illustration or asset color, not a brand surface. |
| Forest Shade | `#1c2820` | `--color-forest-shade` | neutral | Dark green gradient detail inside media; avoid extending it to general UI. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f7f7` (Mist Wash) · `--color-surface-2` → `#1f2429` (Charcoal Ink) · `--color-surface-3` → `#e2e6e6` (Soft Alloy) · `--color-surface-4` → `#0b0b0b` (Near Black) · `--color-text` → `#6e797b` (Quiet Slate) · `--color-text-muted` → `#1f2429` (Charcoal Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e2e6e6` (Soft Alloy) · `--color-accent` → `#397dff` (Signal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#6e797b` | `#ffffff` | 4.48:1 | AA-large |
| `#6e797b` | `#f2f7f7` | 4.15:1 | AA-large |
| `#6e797b` | `#1f2429` | 3.49:1 | AA-large |
| `#6e797b` | `#e2e6e6` | 3.56:1 | AA-large |
| `#1f2429` | `#ffffff` | 15.64:1 | AAA |
| `#1f2429` | `#f2f7f7` | 14.47:1 | AAA |
| `#1f2429` | `#e2e6e6` | 12.43:1 | AAA |
| `#ffffff` | `#f2f7f7` | 1.08:1 | fail |
| `#ffffff` | `#1f2429` | 15.64:1 | AAA |
| `#ffffff` | `#e2e6e6` | 1.26:1 | fail |

### Gradients

- `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%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Tiempos Headline-81ad1a66702885c1 | `--font-body` | webfont | 300 | Editorial serif for hero, section headings, and measured body role. | DM Serif Display |
| UCity Pro-8cd2cb40d9534eaf | `--font-ucity-pro-8cd2cb40d9534eaf` | webfont | 400, 600 | Sans-serif for navigation, buttons, captions, and interface/supporting copy. | Inter |
| UCity Pro | `--font-ucity-pro` | system | 400, 500, 600 | System-loaded UCity Pro fallback for compact UI and badge text. | Inter |

- **Tiempos Headline-81ad1a66702885c1:** Light measured weight; tight negative tracking and sentence case. Preserve generous line breaks in display headlines.
- **UCity Pro-8cd2cb40d9534eaf:** Use regular or semibold weights; compact, neutral, untransformed labels with no added tracking.
- **UCity Pro:** Keep the same restrained sans-serif voice; use regular weight for small labels and conversational UI.

### Type scale — Perfect Fourth (ratio ≈ 1.339, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 300 | 1.16 | -0.02em | — | Tiempos Headline-81ad1a66702885c1 | Centered hero statement in light editorial serif. |
| h2 | 36px | 300 | 1.2 | -0.02em | — | Tiempos Headline-81ad1a66702885c1 | Major feature and section headlines. |
| h3 | 28px | 300 | 1.2 | -0.02em | — | Tiempos Headline-81ad1a66702885c1 | Subsection headlines and supporting feature titles. |
| body | 20px | 300 | 1.3 | -0.02em | — | Tiempos Headline-81ad1a66702885c1 | Editorial supporting copy and explanatory text. |
| caption | 14px | 400 | 1.55 | 0 | — | UCity Pro-8cd2cb40d9534eaf | Testimonials, interface labels, and small supporting details. |
| nav | 14px | 400 | 1.5 | 0 | — | UCity Pro-8cd2cb40d9534eaf | Header and footer navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 9, 10, 12, 14, 16, 20, 24, 32, 40 px.
- Section rhythm 40px · element gap 20px · card padding — · max content width 1296px.

Use a broad centered content frame capped at the measured 1296px maximum, with comfortable density and clear section breaks. The opening is centered and spacious, while later bands alternate among three-column process content, six-column testimonial arrangements, single-column product demonstrations, and editorial cards. Measured spacing follows a 4px base-unit system; favor generous qualitative breathing room rather than crowding components. Keep section transitions calm, align copy consistently within each block, and let wide media carry the visual weight.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `12px` · badge `10px` · nav `12px` · link `12px` · xs `8px` · sm `9px` · md `10px` · lg `12px` · xl `16px` · 2xl `27px` · pill `9999px`
- Shadow `md` (card, link, button): `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 `xl` (button): `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`
- Shadow `inset` (other): `rgb(226, 228, 229) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.02) 0px 3px 4px 0px, rgba(22, 26, 30, 0.08) 0px 8px 42px -16px`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0.16) 0px -1px 0px 0px inset`
- Shadow `xl-2` (card): `rgba(22, 26, 30, 0.12) 0px 20px 44px -18px, rgba(22, 26, 30, 0.12) 0px 16px 28px -18px, rgba(22, 26, 30, 0.08) 0px 12px 20px -18px, rgba(22, 26, 30, 0.08) 0px 10px 16px -18px, rgba(22, 26, 30, 0.04) 0`
- Shadow `hairline` (card): `rgba(22, 26, 30, 0.04) 0px 0px 0px 1px`
- Motion: standard transition `0.2s ease` on interactive elements.

Keep most sections and text areas flat, using fine pale borders to define structure. Apply restrained, soft shadows to cards, buttons, and floating testimonial layers; reserve stronger depth for prominent media or product cards. Rounded containers help separate imagery from the pale canvas without adding visual heaviness.

## Imagery

Use large, cinematic media in the hero, then present product interfaces, device mockups, customer portraits, and story cards as proof points. Keep images in clean, rounded containers and avoid heavy filters or decorative overlays. Realistic photography and interface imagery introduce natural color and detail; greens, ocean hues, and other palette colors found in those assets are illustrative content rather than extensions of the core UI palette.

## Components

### Primary CTA

Signal Blue (#397dff) fill with white UCity Pro semibold text; measured button radius is 8px and the treatment has a soft shadow.

### Hero email form

A compact white email-entry surface paired with a blue Get started action, centered beneath the hero copy.

### Testimonial card

White or pale card with rounded corners, customer portrait or logo, serif quote, compact sans-serif attribution, and a blue story link.

### Product media panel

Rounded product screenshot, workflow, or channel mockup framed by clean white or Mist Wash backgrounds.

### Section band

Alternating Gallery White and Mist Wash backgrounds; testimonial content also uses a Soft Alloy band.

### Navigation

Compact UCity Pro links across the header, with the blue CTA as the strongest visual cue.

### Footer CTA and links

Charcoal Ink closing band with a serif prompt, email form, grouped navigation links, and restrained secondary text.

### Measured component styles

- **Primary button** (“Get started”): background #397dff · text #ffffff · radius 8px · padding 10px 14px 8px 14px · 600 14px UCity Pro-8cd2cb40d9534eaf · shadow rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6
- **Secondary button** (“Read all stories”): background #1f2429 · text #ffffff · radius 100px · padding 10px 20px · 400 16px UCity Pro-8cd2cb40d9534eaf · shadow rgba(15, 30, 97, 0.08) 0px 6px 16px -8px, rgba(15, 30, 97, 0.06) 0px 4px 12px -6
- **Link** (“Voiceflow is a G2 Fall 2026 Leader, and ”): background #ffffff · text #6e797b · radius 10px · padding 12px · 400 14px UCity Pro-8cd2cb40d9534eaf · shadow rgba(22, 26, 30, 0.01) 0px 1px 3px 1px, rgba(22, 26, 30, 0.08) 0px 4px 8px -6px,
- **Input**: transparent background · text #1a1e23 · radius 0px · padding 10px 0px 8px 0px · 400 14px UCity Pro-8cd2cb40d9534eaf
- **Card** (“"Voiceflow provides us with massive acce”): background #ffffff · text #6e797b · radius 12px · padding 0px · 400 14px UCity Pro-8cd2cb40d9534eaf
- **Badge** (“Is the sourdough in there?”): background #397dff · text #ffffff · radius 10px · padding 9px 13.5px 8.5px 13.5px · 400 14px UCity Pro
- **Navigation item** (“Platform overview”): transparent background · text #e2e4e5 · radius 0px · padding 8px 0px · 400 14px UCity Pro-8cd2cb40d9534eaf

## Do

- Lead with a centered, light serif headline.
- Use Mist Wash to create quiet section changes.
- Reserve Signal Blue for actions and meaningful links.
- Pair editorial headlines with compact sans-serif UI.
- Use product screens and customer proof as the main visual evidence.
- Keep card borders and shadows soft and restrained.

## Don't

- Do not turn illustration colors into global UI colors.
- Do not use saturated blue as a large section background.
- Do not crowd the headline or supporting copy.
- Do not make every section a card grid.
- Do not use heavy shadows on ordinary content.
- Do not replace the editorial serif with an all-sans display system.

## Agent prompt

Build a new Voiceflow-style AI platform page with an editorial, calm enterprise tone. Use Gallery White (#ffffff) as the main canvas, Mist Wash (#f2f7f7) for recurring section bands, and Charcoal Ink (#1f2429) for a selective dark CTA or footer. Keep Signal Blue (#397dff) for primary actions and meaningful links only. Set major headlines in a light, tightly tracked serif similar to Tiempos Headline; use a clean sans-serif such as Inter for navigation, captions, and interface details. Create a spacious centered hero, then alternate structured feature layouts, product media, customer proof, and editorial cards. Use pale hairlines and soft card elevation, rounded media, and generous measured spacing. Treat photography and product mockup colors as content, not brand tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above a wide cinematic media panel, with email CTA and customer-story overlay. | Email capture, Primary CTA, Customer proof | Serif display headline, Blue button, Floating quote card, Customer logo strip |
| 2 | how-it-works | Three-column workflow cards on a pale band, with interface media and concise supporting text. | Process overview, Feature scanning | Pale section band, Product screenshots, Three-column cards |
| 3 | stats | Centered platform statement above three horizontally aligned performance metrics. | Capability proof, Metric scanning | Centered serif heading, Large numeric values, Pale background |
| 4 | testimonials | Multi-column testimonial mosaic with portraits, customer marks, and a compact story link. | Social proof, Read customer stories | Portrait cards, Soft Alloy backdrop, Quote text, Dark pill CTA |
| 5 | product-showcase | Left-aligned copy followed by a large, centered row of overlapping device and messaging mockups. | Channel demonstration, Product exploration | White panel, Device mockups, Conversation UI |
| 6 | feature-grid | Pale, media-led band with a centered heading and a broad multi-column presentation. | Feature discovery, Visual scanning | Full-bleed media, Pale background, Product imagery |
| 7 | feature-grid | Pale background with a compact three-column feature arrangement and supporting visuals. | Feature comparison, Progressive discovery | Three-column layout, Product illustrations, Open spacing |
| 8 | video | Large, dark, rounded media surface within a four-column section frame. | Watch demonstration, Focused viewing | Charcoal media panel, Rounded container, Minimal surrounding UI |
| 9 | content-feed | Left-aligned section title above three editorial story cards with image and reading links. | Browse articles, Read more | Pale band, Three-column cards, Editorial thumbnails |
| 10 | footer | Dark footer with CTA and email field at left, grouped navigation columns, and a lower brand/legal row. | Email capture, Site navigation, Social links | Charcoal Ink background, Serif CTA heading, Blue button, Grouped link columns |

## Source CSS custom properties (selected)

```css
--font-fira: "Fira Code-e8b5a9c0766d7883","Fira Code-e8b5a9c0766d7883 fallback: Courier New",ui-monospace,Menlo,monospace;
--customer-highlights-loop-duration: 192s;
--vfc-font-family-default: "UCityProWeb", "Open Sans", "Arial", "sans-serif";
--vfc-font-family-code: "Fira Code", ui-monospace, monospace;
--vfc-font-size-h-1: 40px;
--vfc-font-size-h-2: 22px;
--vfc-font-size-h-3: 16px;
--vfc-font-size-h-4: 14px;
--vfc-font-size-default: 14px;
--vfc-font-size-field: 13px;
--vfc-font-size-table-header: 13px;
--vfc-font-size-caption: 12px;
--vfc-font-size-subcaption: 11px;
--vfc-font-size-code-large: 14px;
--vfc-font-size-code: 12px;
--vfc-font-weight-extra-bold: 700;
--vfc-font-weight-bold: 600;
--vfc-font-weight-regular: 400;
--vfc-font-weight-code: 450;
--vfc-spacing-sm: 2px;
--vfc-spacing-md: 4px;
--vfc-spacing-lg: 8px;
--vfc-color-font-default: #1a1e23;
--vfc-color-font-dark: #1a1e23;
--vfc-color-font-light: #fff;
--vfc-radius-2: 2px;
--vfc-radius-4: 4px;
--vfc-radius-5: 5px;
--vfc-radius-6: 6px;
--vfc-radius-7: 7px;
--vfc-radius-8: 8px;
--vfc-radius-10: 10px;
--vfc-radius-12: 12px;
--vfc-radius-16: 16px;
--vfc-radius-100: 100px;
--vfc-radius-round: 50%;
--vfc-color-accent-accent-50: #e7f5fd;
--vfc-color-accent-accent-100: #c6e4fb;
--vfc-color-accent-accent-200: #a2d2fa;
--vfc-color-accent-accent-300: #87bffb;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/voiceflow-com