Synthesia以宽敞的白色画布、紧凑深色文字和沉浸式产品视频构建首页。浅灰区块、企业客户背书与局部渐变形成页面节奏，同时让产品演示和行动按钮保持突出。
North star · Keep the interface quiet and bright, and let authentic product previews provide the color, motion, and proof.
The homepage is built on a predominantly white canvas, with near-black navy reserved for headings, primary actions, the API feature panel, and footer. Secondary copy uses a softer charcoal, while pale gray cards and section bands separate content without heavy framing. The typography is a geometric-feeling sans serif with close, compact headline tracking and medium-weight display text; body copy remains restrained and readable. A centered hero leads with a concise value proposition, dual CTAs, and a large interactive product preview. The rest of the page alternates centered introductions with editorial feature splits, product videos, customer stories, API content, and FAQs. Real people and interface previews carry the visual proof; soft color gradients appear selectively in product imagery and a community panel, rather than across the whole canvas. Generous whitespace and clear content groupings keep the long page scannable.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Midnight Ink
#090b22
Headings, primary buttons, and dark contrast surfaces including API content.
强调色
Signal Indigo
#4c5ba9
Small brand accent and a stop in decorative gradients, not a broad page fill.
Indigo Shadow
#12163c
Deep gradient stop in decorative or product-preview color treatments.
Periwinkle Mist
#c8d2f9
Pale gradient highlight used in decorative product imagery.
表层色
Cloud Gray
#f7f7f7
Feature cards and the Sessions band, separating content from the white canvas.
Deep Footer
#0d0f2c
Footer background, forming the deepest full-width dark area.
Night Slate
#222439
Secondary dark surface and product-preview details; not a dominant page band.
中性色
Gallery White
#ffffff
Main page canvas and text on dark CTAs; preserves the homepage's open, bright feel.
Soft Graphite
#363636
Secondary body copy and understated text links on light surfaces.
功能色
Quiet Silver
#e9e9eb
Fine borders and subtle dividers around controls and page elements.
Slate Edge
#4e5060
Low-contrast outlines within dark product-card or interface mockup details.
Muted Border
#3a3c4e
Subtle strokes and interface details, primarily inside dark mockups.
Powder Line
#dadadd
Fine inset outlines and muted interface details rather than large surfaces.
文字 背景 对比度 WCAG #090b22 Midnight Ink#ffffff Gallery White19.4:1 AAA #090b22 Midnight Ink#f7f7f7 Cloud Gray18.11:1 AAA #090b22 Midnight Ink#0d0f2c Deep Footer1.04:1 不达标 #363636 Soft Graphite#ffffff Gallery White12.08:1 AAA #363636 Soft Graphite#f7f7f7 Cloud Gray11.28:1 AAA #363636 Soft Graphite#090b22 Midnight Ink1.61:1 不达标
字体 字号阶梯：Perfect Fourth（比例约 1.351，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Basiersquare Webfont 网络字体 · 字重 400 / 500 · 占比 98%
免费替代：DM Sans
Primary font across navigation, headings, body copy, buttons, and links.
Aa 设计
ui-monospace 系统字体 · 字重 400 · 占比 2%
免费替代：Roboto Mono
Code samples in the API section and technical interface previews.
角色 示例 字号 字重 行高 字距 特大标题 Oversized hero or major campaign headline.
Synthesia
72px 500 1 -0.065em 一级标题 Primary hero heading and principal page title.
Synthesia
44px 500 1.05 -0.05em 二级标题 Section titles for feature, trust, API, and FAQ blocks.
Synthesia
34px 500 1.12 -0.045em 三级标题 Feature subheads and prominent card headings.
The quick brown fox 敏捷的狐狸
26px 500 1.15 -0.04em 四级标题 Small content headings and supporting panel titles.
The quick brown fox 敏捷的狐狸
20px 400 1.1 -0.035em 正文 Standard explanatory paragraphs and feature descriptions.
The quick brown fox 敏捷的狐狸
16px 400 1.38 -0.01em 辅助文字 Compact labels, supporting notes, and fine print.
The quick brown fox 敏捷的狐狸
14px 400 1.43 -0.005em 导航 Header links and main navigation labels.
The quick brown fox 敏捷的狐狸
16px 400 1.38 -0.01em 链接 Inline text links and lightweight secondary actions.
The quick brown fox 敏捷的狐狸
16px 400 1.38 -0.01em 代码 Monospace API examples and technical snippets.
const style = 1;
14px 400 1.3 0
间距与布局 基准单位 8px · 密度：紧凑
40px 版块间距
8px 元素间距
32px 卡片内边距
1216px 内容最大宽度
4px
6px
8px
12px
16px
18px
24px
32px
40px
96px
The measured content frame uses a 1216px maximum width, with a compact eight-unit spacing base and clearly separated sections. The opening hero is centered, followed by wide product media and customer proof. Content then alternates between centered section introductions and left-right feature splits, with three-column cards for API and community content. The FAQ uses a two-column arrangement. Most sections retain a white background; the Sessions block uses a pale gray band, while API and footer provide dark anchors. Whitespace is generous around major transitions despite compact internal card layouts.
圆角与层次 inset · link, button
md · button, link
hairline · other
inset · link
The design is mostly flat, using white and pale-gray surfaces rather than pronounced card shadows. Fine light borders define buttons, navigation details, and panel edges. Primary dark CTAs have a restrained shadow, while product previews and testimonial media create depth through image contrast, overlays, and layered interface content.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary CTA Near-black #090b22 fill, white medium-weight text, measured 10px radius, and a subtle shadow; paired with an outlined white Book demo button.
Hero product preview Wide light-gray framed interface with a tab-like top bar, compact category links, and three rounded avatar-video previews.
Feature split Alternating text and product media; short uppercase-style category label, concise heading, body copy, and lightweight Get started link.
Testimonial carousel Horizontal customer-video cards with darkened imagery, brand labels, quote overlays, and restrained edge navigation.
Feature card Pale #f7f7f7 surface with #363636 text, generous internal padding, rounded corners, and no prominent shadow.
Dark API panel Full-width #090b22 region with centered introduction, light text, and code/product interface content below.
FAQ accordion Two-column section with a left-side title and right-side question rows, slim separators, and directional icons.
Imagery · Product interfaces, embedded video, and human avatar footage are the primary imagery, often arranged as large rounded preview panels. Customer testimonial cards show real people with dark overlays and readable quote captions. Soft blue, green, and lavender gradients appear behind selected product mockups or community content. Keep imagery crisp and credible; decorative gradients should support the interface preview, not replace it.
页面版块 共 18 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 Use white as the default canvas and reserve dark bands for clear structural anchors. Set headlines in a clean sans serif with compact, tightly tracked line breaks. Lead with real product interfaces and human avatar video as visual evidence. Alternate centered introductions with editorial feature splits. Use pale gray surfaces and hairlines to organize content without heavy framing. Make the primary action dark and pair it with a quieter secondary action. ✕ 不该做 Do not turn the page into a dark-first interface. Do not apply gradients as a continuous background across ordinary content. Do not add saturated colors unsupported by the measured palette. Do not replace product demonstrations with generic decorative illustrations. Do not use heavy shadows or thick borders on every card. Do not crowd the hero or flatten all sections into one repeated layout. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 Build a new SaaS page in Synthesia's measured visual style. Use Gallery White (#ffffff) as the main canvas, Midnight Ink (#090b22) for headings and the primary CTA, Soft Graphite (#363636) for secondary copy, and Cloud Gray (#f7f7f7) for selected cards or section bands. Use Basiersquare Webfont or a close geometric sans substitute such as DM Sans; keep headlines medium-weight and tightly tracked. Create a centered, concise hero with paired actions and a large, authentic product preview. Continue with alternating feature splits, customer proof, and clearly grouped cards. Use gradients sparingly inside imagery, not as a default background. Keep borders fine, shadows restrained, and the overall page airy, credible, and easy to scan.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
title: "Synthesia design system"
variant: extended
source: https://www.synthesia.io/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/synthesia-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---
# Synthesia · Design System
> Quiet, confident software with vivid product proof
**Theme:** light · **Industry:** ai · **Source:** https://www.synthesia.io/ · **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._
Synthesia pairs a spacious white canvas and compact dark typography with immersive video and product previews. Subtle gray section bands, enterprise proof, and occasional gradients give the long SaaS homepage rhythm without distracting from its calls to action.
## North star
Keep the interface quiet and bright, and let authentic product previews provide the color, motion, and proof.
## Overview
The homepage is built on a predominantly white canvas, with near-black navy reserved for headings, primary actions, the API feature panel, and footer. Secondary copy uses a softer charcoal, while pale gray cards and section bands separate content without heavy framing. The typography is a geometric-feeling sans serif with close, compact headline tracking and medium-weight display text; body copy remains restrained and readable. A centered hero leads with a concise value proposition, dual CTAs, and a large interactive product preview. The rest of the page alternates centered introductions with editorial feature splits, product videos, customer stories, API content, and FAQs. Real people and interface previews carry the visual proof; soft color gradients appear selectively in product imagery and a community panel, rather than across the whole canvas. Generous whitespace and clear content groupings keep the long page scannable.
## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | ` | `--color-gallery-white` | neutral | Main page canvas and text on dark CTAs; preserves the homepage's open, bright feel. |
| Soft Graphite | ` | `--color-soft-graphite` | neutral | Secondary body copy and understated text links on light surfaces. |
| Midnight Ink | ` | `--color-midnight-ink` | brand | Headings, primary buttons, and dark contrast surfaces including API content. |
| Cloud Gray | ` | `--color-cloud-gray` | surface | Feature cards and the Sessions band, separating content from the white canvas. |
| Quiet Silver | ` | `--color-quiet-silver` | semantic | Fine borders and subtle dividers around controls and page elements. |
| Deep Footer | ` | `--color-deep-footer` | surface | Footer background, forming the deepest full-width dark area. |
| Slate Edge | ` | `--color-slate-edge` | semantic | Low-contrast outlines within dark product-card or interface mockup details. |
| Muted Border | ` | `--color-muted-border` | semantic | Subtle strokes and interface details, primarily inside dark mockups. |
| Night Slate | ` | `--color-night-slate` | surface | Secondary dark surface and product-preview details; not a dominant page band. |
| Signal Indigo | ` | `--color-signal-indigo` | accent | Small brand accent and a stop in decorative gradients, not a broad page fill. |
| Indigo Shadow | ` | `--color-indigo-shadow` | accent | Deep gradient stop in decorative or product-preview color treatments. |
| Periwinkle Mist | ` | `--color-periwinkle-mist` | accent | Pale gradient highlight used in decorative product imagery. |
| Powder Line | ` | `--color-powder-line` | semantic | Fine inset outlines and muted interface details rather than large surfaces. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Cloud Gray) · `--color-surface-2` → ` (Midnight Ink) · `--color-surface-3` → ` (Deep Footer) · `--color-surface-4` → ` (Night Slate) · `--color-text` → ` (Midnight Ink) · `--color-text-muted` → ` (Soft Graphite) · `--color-text-subtle` → ` (Gallery White) · `--color-border` → ` (Quiet Silver) · `--color-accent` → ` (Signal Indigo)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 19.4:1 | AAA |
| ` | ` | 18.11:1 | AAA |
| ` | ` | 1.04:1 | fail |
| ` | ` | 12.08:1 | AAA |
| ` | ` | 11.28:1 | AAA |
| ` | ` | 1.61:1 | fail |
| ` | ` | 1.55:1 | fail |
| ` | ` | 1.07:1 | fail |
| ` | ` | 19.4:1 | AAA |
| ` | ` | 18.72:1 | AAA |
### Gradients
- `linear-gradient(rgba(0, 0, 0, 0), rgb(9, 11, 34) 100%)`
- `linear-gradient(90deg, rgb(18, 22, 60), rgb(76, 91, 169), rgb(200, 210, 249))`
- `linear-gradient(rgb(172, 186, 243) 0%, rgb(77, 91, 165) 50%, rgb(21, 26, 69) 100%)`
## Typography
| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basiersquare Webfont | `--font-body` | webfont | 400, 500 | Primary font across navigation, headings, body copy, buttons, and links. | DM Sans |
| ui-monospace | `--font-mono` | system | 400 | Code samples in the API section and technical interface previews. | Roboto Mono |
- **Basiersquare Webfont:** Use medium weight for headlines and primary buttons; headlines have tight negative tracking, while body and navigation stay sentence-case.
- **ui-monospace:** Restrict to code-like snippets; use regular weight and preserve a clear monospace texture.
### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)
| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1 | -0.065em | — | Basiersquare Webfont | Oversized hero or major campaign headline. |
| h1 | 44px | 500 | 1.05 | -0.05em | — | Basiersquare Webfont | Primary hero heading and principal page title. |
| h2 | 34px | 500 | 1.12 | -0.045em | — | Basiersquare Webfont | Section titles for feature, trust, API, and FAQ blocks. |
| h3 | 26px | 500 | 1.15 | -0.04em | — | Basiersquare Webfont | Feature subheads and prominent card headings. |
| h4 | 20px | 400 | 1.1 | -0.035em | — | Basiersquare Webfont | Small content headings and supporting panel titles. |
| body | 16px | 400 | 1.38 | -0.01em | — | Basiersquare Webfont | Standard explanatory paragraphs and feature descriptions. |
| caption | 14px | 400 | 1.43 | -0.005em | — | Basiersquare Webfont | Compact labels, supporting notes, and fine print. |
| nav | 16px | 400 | 1.38 | -0.01em | — | Basiersquare Webfont | Header links and main navigation labels. |
| link | 16px | 400 | 1.38 | -0.01em | — | Basiersquare Webfont | Inline text links and lightweight secondary actions. |
| code | 14px | 400 | 1.3 | 0 | — | ui-monospace | Monospace API examples and technical snippets. |
## Spacing & layout
- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 6, 8, 12, 16, 18, 24, 32, 40, 96 px.
- Section rhythm 40px · element gap 8px · card padding 32px · max content width 1216px.
The measured content frame uses a 1216px maximum width, with a compact eight-unit spacing base and clearly separated sections. The opening hero is centered, followed by wide product media and customer proof. Content then alternates between centered section introductions and left-right feature splits, with three-column cards for API and community content. The FAQ uses a two-column arrangement. Most sections retain a white background; the Sessions block uses a pale gray band, while API and footer provide dark anchors. Whitespace is generous around major transitions despite compact internal card layouts.
## Shape & elevation
- Radius: button `10px` · card `16px` · link `9999px` · xs `6px` · sm `10px` · md `12px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `inset` (link, button): `rgb(218, 218, 221) 0px 0px 0px 1px inset`
- Shadow `md` (button, link): `rgba(16, 24, 40, 0.08) 0px 2px 10px 0px`
- Shadow `hairline` (other): `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px`
- Shadow `inset-2` (link): `rgba(255, 255, 255, 0.4) 0px 0px 0px 1px inset`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.157) 0px 2px 32px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.
The design is mostly flat, using white and pale-gray surfaces rather than pronounced card shadows. Fine light borders define buttons, navigation details, and panel edges. Primary dark CTAs have a restrained shadow, while product previews and testimonial media create depth through image contrast, overlays, and layered interface content.
## Imagery
Product interfaces, embedded video, and human avatar footage are the primary imagery, often arranged as large rounded preview panels. Customer testimonial cards show real people with dark overlays and readable quote captions. Soft blue, green, and lavender gradients appear behind selected product mockups or community content. Keep imagery crisp and credible; decorative gradients should support the interface preview, not replace it.
## Components
### Primary CTA
Near-black ### Hero product preview
Wide light-gray framed interface with a tab-like top bar, compact category links, and three rounded avatar-video previews.
### Feature split
Alternating text and product media; short uppercase-style category label, concise heading, body copy, and lightweight Get started link.
### Testimonial carousel
Horizontal customer-video cards with darkened imagery, brand labels, quote overlays, and restrained edge navigation.
### Feature card
Pale ### Dark API panel
Full-width ### FAQ accordion
Two-column section with a left-side title and right-side question rows, slim separators, and directional icons.
### Measured component styles
- **Primary button** (“Get started for free”): background ## Do
- Use white as the default canvas and reserve dark bands for clear structural anchors.
- Set headlines in a clean sans serif with compact, tightly tracked line breaks.
- Lead with real product interfaces and human avatar video as visual evidence.
- Alternate centered introductions with editorial feature splits.
- Use pale gray surfaces and hairlines to organize content without heavy framing.
- Make the primary action dark and pair it with a quieter secondary action.
## Don't
- Do not turn the page into a dark-first interface.
- Do not apply gradients as a continuous background across ordinary content.
- Do not add saturated colors unsupported by the measured palette.
- Do not replace product demonstrations with generic decorative illustrations.
- Do not use heavy shadows or thick borders on every card.
- Do not crowd the hero or flatten all sections into one repeated layout.
## Agent prompt
Build a new SaaS page in Synthesia's measured visual style. Use Gallery White (## Page sections (top to bottom)
| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero, paired CTAs, wide product preview beneath. | Primary and secondary action, Trust indicator, Product category tabs | Large compact headline, Avatar video tiles, Dark primary CTA |
| 2 | testimonials | Customer logos above left-aligned intro and horizontal story cards. | Book a demo, Browse customer stories, Carousel navigation | Logo strip, Video testimonial cards, Quote overlays |
| 3 | product-showcase | Centered category intro with paired CTAs. | Choose product area, Start free, Book demo | Small category label, Centered heading, Paired actions |
| 4 | feature-split | Text and product preview in a two-sided feature row. | Start creating, Show workflow preview | Category eyebrow, Concise feature copy, Gradient-backed UI |
| 5 | feature-split | Alternating feature row with text and video/interface media. | Learn feature, Preview translation | Feature eyebrow, Video mockup, Inline CTA |
| 6 | feature-split | Alternating text and product-media feature row. | Review controls, Start using feature | Compact feature label, Product UI preview, Light background |
| 7 | feature-split | Alternating media and explanatory text. | Learn publishing flow, Open product | Embedded video preview, Short description, Lightweight link |
| 8 | feature-split | Text paired with a large analytics preview. | Inspect performance, Compare results | Analytics interface, Soft color treatment, Feature CTA |
| 9 | feature-grid | Centered introduction in a full-width pale gray band. | Start free, Book demo | Two-column intro, Dual CTA, Gray section background |
| 10 | video | Full-bleed video preview within the gray product band. | Play video | Large rounded media frame, New product marker, Play control |
| 11 | feature-split | Feature text and UI preview in an alternating split row. | Explore roleplay, View scenario options | Scenario cards, Soft blue interface preview, Learn more link |
| 12 | feature-split | Product preview paired with explanatory copy. | Review survey flow, Explore feature | Avatar-led survey mockup, Pastel interface, Learn more link |
| 13 | integrations | Dark full-width band, centered intro, detail columns and code preview. | Explore documentation, Browse API capabilities | Near-black surface, Light typography, Monospace code panel |
| 14 | reviews | Left-aligned heading, booking action, and three assurance cards. | Book demo, Read feature details, Review security | Pale cards, Customer logo row, Compact proof points |
| 15 | feature-grid | Centered heading above three cards in a wide visual panel. | Visit academy, Join community, Explore services | Soft gradient backdrop, Three white cards, Icon-led links |
| 16 | faq | Two columns with section title on left and accordion list on right. | Expand questions, Scan answers | Question rows, Directional icons, Subtle dividers |
| 17 | cta | Full-width gradient callout with centered headline and paired actions. | Start free, Book demo | Blue gradient field, White headline, High-contrast buttons |
| 18 | footer | Dark footer with brand summary and several link columns. | Browse site links, Choose language, Explore resources | Deep navy background, White brand mark, Dense link groups |
## Source CSS custom properties (selected)
```css
--_semantic---text-secondary: 
