Voiceflow以精致衬线标题和浅色分区营造克制、从容的观感，并用鲜明蓝色突出行动入口。产品界面、客户案例与沉浸式媒体贯穿长页面，逐步呈现平台能力与成效。
North star · Balance editorial serif-led storytelling with precise, product-focused evidence, keeping blue reserved for clear interaction cues.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
Signal Blue
#397dff
Primary CTA fill, inline links, and small conversational-interface highlights.
表层色
Gallery White
#ffffff
Main canvas, cards, and the clean background behind hero and omnichannel content.
Mist Wash
#f2f7f7
Recurring pale section background for workflow, platform, and editorial content bands.
Soft Alloy
#e2e6e6
Section and media backing, subtle dividers, and low-contrast border treatment.
中性色
Quiet Slate
#6e797b
Primary measured text tone across body copy, navigation, headings, and card content.
Cloud Pewter
#c5c9ca
Gradient endpoint in muted section/media treatment; supporting color, not a dominant brand surface.
Frost Line
#e8ecec
Subtle card, navigation, and section boundaries.
Muted Charcoal
#3f3f3f
Sparse card-border detail; not a primary page color.
Steel Text
#515a63
Secondary navigation and supporting text.
Ash Caption
#9aa1a3
Subdued footer and tertiary text.
Moss Shadow
#2e3d31
Green gradient detail detected in media; treat as illustration or asset color, not a brand surface.
Forest Shade
#1c2820
Dark green gradient detail inside media; avoid extending it to general UI.
功能色
Charcoal Ink
#1f2429
Dark feature and footer bands, inverse buttons, and selected inverse text.
Deep Graphite
#2b3239
Dark section and footer details, including low-contrast borders.
Near Black
#0b0b0b
Occasional dark card or media backing, rather than the main dark-section tone.
Night Text
#1a1e23
Dark heading and input text, including form fields.
文字 背景 对比度 WCAG #6e797b Quiet Slate#ffffff Gallery White4.48:1 AA-large #6e797b Quiet Slate#f2f7f7 Mist Wash4.15:1 AA-large #6e797b Quiet Slate#1f2429 Charcoal Ink3.49:1 AA-large #6e797b Quiet Slate#e2e6e6 Soft Alloy3.56:1 AA-large #1f2429 Charcoal Ink#ffffff Gallery White15.64:1 AAA #1f2429 Charcoal Ink#f2f7f7 Mist Wash14.47:1 AAA
字体 字号阶梯：Perfect Fourth（比例约 1.339，正文 20px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Tiempos Headline-81ad1a66702885c1 网络字体 · 字重 300 · 占比 64%
免费替代：DM Serif Display
Editorial serif for hero, section headings, and measured body role.
Aa 设计
UCity Pro-8cd2cb40d9534eaf 网络字体 · 字重 400 / 600 · 占比 31%
免费替代：Inter
Sans-serif for navigation, buttons, captions, and interface/supporting copy.
Aa 设计
UCity Pro 系统字体 · 字重 400 / 500 / 600 · 占比 4%
免费替代：Inter
System-loaded UCity Pro fallback for compact UI and badge text.
角色 示例 字号 字重 行高 字距 一级标题 Centered hero statement in light editorial serif.
Voiceflow
48px 300 1.16 -0.02em 二级标题 Major feature and section headlines.
Voiceflow
36px 300 1.2 -0.02em 三级标题 Subsection headlines and supporting feature titles.
Voiceflow
28px 300 1.2 -0.02em 正文 Editorial supporting copy and explanatory text.
The quick brown fox 敏捷的狐狸
20px 300 1.3 -0.02em 辅助文字 Testimonials, interface labels, and small supporting details.
The quick brown fox 敏捷的狐狸
14px 400 1.55 0 导航 Header and footer navigation links.
The quick brown fox 敏捷的狐狸
14px 400 1.5 0
间距与布局 基准单位 4px · 密度：适中
40px 版块间距
20px 元素间距
— 卡片内边距
1296px 内容最大宽度
2px
4px
6px
8px
9px
10px
12px
14px
16px
20px
24px
32px
40px
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.
圆角与层次 md · card, link, button
xl · button
inset · other
inset · other
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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 10 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
首页
首屏 品牌主视觉
Centered headline and supporting copy above a wide cinematic media panel, with email CTA and customer-story overlay.
使用步骤 工作流程
Three-column workflow cards on a pale band, with interface media and concise supporting text.
数据亮点 平台数据
Centered platform statement above three horizontally aligned performance metrics.
用户评价 客户评价
Multi-column testimonial mosaic with portraits, customer marks, and a compact story link.
产品展示 全渠道体验
Left-aligned copy followed by a large, centered row of overlapping device and messaging mockups.
功能网格 平台功能
Pale, media-led band with a centered heading and a broad multi-column presentation.
功能网格 能力拓展
Pale background with a compact three-column feature arrangement and supporting visuals.
视频 产品演示
Large, dark, rounded media surface within a four-column section frame.
内容列表 最新内容
Left-aligned section title above three editorial story cards with image and reading links.
页脚 页脚导航
Dark footer with CTA and email field at left, grouped navigation columns, and a lower brand/legal row.
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 | ` | `--color-gallery-white` | surface | Main canvas, cards, and the clean background behind hero and omnichannel content. |
| Quiet Slate | ` | `--color-quiet-slate` | neutral | Primary measured text tone across body copy, navigation, headings, and card content. |
| Signal Blue | ` | `--color-signal-blue` | accent | Primary CTA fill, inline links, and small conversational-interface highlights. |
| Mist Wash | ` | `--color-mist-wash` | surface | Recurring pale section background for workflow, platform, and editorial content bands. |
| Soft Alloy | ` | `--color-soft-alloy` | surface | Section and media backing, subtle dividers, and low-contrast border treatment. |
| Charcoal Ink | ` | `--color-charcoal-ink` | semantic | Dark feature and footer bands, inverse buttons, and selected inverse text. |
| Cloud Pewter | ` | `--color-cloud-pewter` | neutral | Gradient endpoint in muted section/media treatment; supporting color, not a dominant brand surface. |
| Frost Line | ` | `--color-frost-line` | neutral | Subtle card, navigation, and section boundaries. |
| Deep Graphite | ` | `--color-deep-graphite` | semantic | Dark section and footer details, including low-contrast borders. |
| Muted Charcoal | ` | `--color-muted-charcoal` | neutral | Sparse card-border detail; not a primary page color. |
| Steel Text | ` | `--color-steel-text` | neutral | Secondary navigation and supporting text. |
| Ash Caption | ` | `--color-ash-caption` | neutral | Subdued footer and tertiary text. |
| Near Black | ` | `--color-near-black` | semantic | Occasional dark card or media backing, rather than the main dark-section tone. |
| Night Text | ` | `--color-night-text` | semantic | Dark heading and input text, including form fields. |
| Moss Shadow | ` | `--color-moss-shadow` | neutral | Green gradient detail detected in media; treat as illustration or asset color, not a brand surface. |
| Forest Shade | ` | `--color-forest-shade` | neutral | Dark green gradient detail inside media; avoid extending it to general UI. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Mist Wash) · `--color-surface-2` → ` (Charcoal Ink) · `--color-surface-3` → ` (Soft Alloy) · `--color-surface-4` → ` (Near Black) · `--color-text` → ` (Quiet Slate) · `--color-text-muted` → ` (Charcoal Ink) · `--color-text-subtle` → ` (Gallery White) · `--color-border` → ` (Soft Alloy) · `--color-accent` → ` (Signal Blue) · `--color-on-accent` → ` (Gallery White)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 4.48:1 | AA-large |
| ` | ` | 4.15:1 | AA-large |
| ` | ` | 3.49:1 | AA-large |
| ` | ` | 3.56:1 | AA-large |
| ` | ` | 15.64:1 | AAA |
| ` | ` | 14.47:1 | AAA |
| ` | ` | 12.43:1 | AAA |
| ` | ` | 1.08:1 | fail |
| ` | ` | 15.64:1 | AAA |
| ` | ` | 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 (### 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 ## 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 (## 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: 
