Quo 首页以克制的黑白界面和宽松的产品展示为主，并用荧光绿点亮部分图形与行动入口。圆角卡片、清晰的无衬线字体层级和明暗交替的区块，让共享电话系统的功能一目了然。
North star · Keep the interface calm and monochrome, using generous whitespace and product imagery to explain the value before adding restrained lime highlights.
The page is anchored by a white canvas and near-black typography, with warm off-white bands used to distinguish selected content areas. Black CTA buttons and dark testimonial or conversion sections provide contrast; the vivid lime seen in the hero button and product imagery is a selective highlight rather than a broad interface colour. Roobert gives large headlines a compact, confident shape, while Inter handles navigation, body copy, and controls. The centered hero moves from a review cue to a large headline, short explanation, and paired actions, then opens into a wide product screenshot. Lower sections switch between compact feature-card grids, logo strips, a dark customer-story carousel, and a muted category panel. Product screenshots and interface mockups carry much of the visual storytelling; illustrations and brand marks add small bursts of colour. Cards use subtle borders and rounded corners instead of heavy decoration, with consistent whitespace separating the page’s clear content bands.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Quo Ink
#000000
Primary text, links, navigation, black CTA fills, and major dark section backgrounds.
表层色
Graphite Panel
#28282a
Dark testimonial cards and inverse card surfaces; reserve white text for contrast.
Warm Porcelain
#f7f6f5
Pale section and feature-card background, creating gentle separation from white.
Card Edge
#1b1b1d
Border edge on dark testimonial cards.
Night Panel
#0a0a0c
Deep background for the customer-story section.
中性色
Gallery White
#ffffff
Main page canvas and light-section background; also used for text and button labels on dark surfaces.
功能色
Shadow Gradient
#141415
Gradient-related measured colour; treat as overlay detail, not a defining page surface.
Soft Graphite
#4c4c4c
Muted link and body text against the white canvas.
Quiet Hairline
#e5e5e5
Subtle card, button, and interface borders.
Silver Note
#bfbfbf
Low-emphasis text, especially on dark or secondary interface details.
Muted Link
#666666
Secondary link and text details, not a primary brand colour.
Mid Grey
#808080
Occasional secondary text details.
Border Charcoal
#333333
Occasional dark link or button border detail.
文字 背景 对比度 WCAG #000000 Quo Ink#ffffff Gallery White21:1 AAA #000000 Quo Ink#28282a Graphite Panel1.43:1 不达标 #000000 Quo Ink#f7f6f5 Warm Porcelain19.46:1 AAA #ffffff Gallery White#28282a Graphite Panel14.71:1 AAA #ffffff Gallery White#f7f6f5 Warm Porcelain1.08:1 不达标 #ffffff Gallery White#000000 Quo Ink21:1 AAA
字体 字号阶梯：Perfect Fourth（比例约 1.32，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Inter 网络字体 · 字重 400 / 500 / 600 · 占比 58%
免费替代：Inter
Navigation, body copy, captions, buttons, and links.
Aa 设计
Roobert 网络字体 · 字重 500 · 占比 42%
免费替代：Manrope
Display headings and page section titles.
角色 示例 字号 字重 行高 字距 特大标题 Large campaign-style display headings where used.
Quo
64px 500 1 -0.02em 一级标题 Primary hero headline.
Quo
56px 500 1.1 -0.02em 二级标题 Major section headings.
Quo
48px 500 1.1 -0.02em 三级标题 Feature and content-card headings.
Quo
40px 500 1.1 -0.02em 四级标题 Subsection headings and smaller feature titles.
Quo
32px 500 1.1 -0.02em 正文 Paragraphs, feature explanations, and testimonial copy.
The quick brown fox 敏捷的狐狸
16px 400 1.5 0 辅助文字 Compact labels, metadata, and small supporting notes.
The quick brown fox 敏捷的狐狸
12px 400 1.3 0 按钮 Primary and secondary action labels.
The quick brown fox 敏捷的狐狸
16px 500 1.5 0 导航 Top-level navigation labels.
The quick brown fox 敏捷的狐狸
16px 500 1 0 链接 Inline links and secondary actions.
The quick brown fox 敏捷的狐狸
16px 400 1.5 0
间距与布局 基准单位 8px · 密度：适中
32px 版块间距
16px 元素间距
26px 卡片内边距
1200px 内容最大宽度
2px
3px
4px
5px
8px
10px
16px
22px
24px
32px
48px
72px
128px
Use a centered content area with a measured maximum width of 1200px and a comfortable density. The hero is centered and vertically open; subsequent feature content mostly aligns left in multi-column grids. Preserve the measured 8px spacing base and broad section gaps, letting white space separate content rather than adding ornamental dividers. Alternate light content bands with a small number of full-width dark sections. Keep card grids consistent and responsive, reducing columns as the viewport narrows.
圆角与层次 The page is mostly flat, with subtle #e5e5e5 outlines defining light cards and controls. Cards use measured rounded corners and restrained shadowing where present, not dramatic floating effects. Dark testimonial cards distinguish themselves through #28282a surfaces and #1b1b1d edges; preserve clear surface contrast without piling on layers.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Announcement bar A narrow black strip above the navigation, with centered white message, a small lime mark, and a close control.
Navigation White horizontal header with Quo mark, compact Inter links, login, outlined Talk to Sales, and black Try for free button.
Hero actions Centered headline and supporting copy followed by a lime Try for free action and a quieter video link.
Feature cards Light #f7f6f5 cards with #e5e5e5 borders, 10px corners, concise copy, and interface mockup imagery.
Dark story cards Customer quotes and video imagery on #28282a cards with #1b1b1d borders inside a #0a0a0c section.
Conversion cards Three dark outlined choice cards pair monochrome line illustrations with lime details and short action copy.
Footer actions A high-contrast closing headline and paired black or light actions precede compact multi-column link lists.
Imagery · Use broad product-interface screenshots as the central proof point, framed within pale panels and surrounded by white space. Feature cards contain cropped UI mockups, while customer stories use video stills within dark cards. Partner marks and integration logos appear as compact strips or grids. Illustrations may carry brighter lime or assorted product colours; keep those colours confined to the artwork rather than spreading them across the interface.
页面版块 共 13 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
首页
首屏 产品主视觉
Centered headline, review cue, supporting copy, paired actions, and platform note.
产品展示 产品界面
Wide, nearly full-bleed product screenshot within a pale frame.
功能网格 AI 功能
Left-aligned section title above three compact feature cards.
品牌墙 客户品牌
Centered caption above a horizontal strip of customer marks.
功能网格 核心功能
Section heading above six feature cards arranged in three columns.
数据亮点 成长故事
Black full-width band with a left-aligned section heading.
用户评价 客户案例
Dark multi-column carousel with video-led customer cards.
功能网格 免费迁移
White three-column row of migration benefits below a section heading.
用户评价区 平台评价
Short white trust band with statement and award badges.
分类导航 适用团队
Muted full-width panel with heading, category links, and supporting illustration.
集成生态 应用集成
White section with heading, view-all link, and a dense integration-logo grid.
行动号召 开始使用
Black conversion band with introductory text, three choice cards, and a question prompt.
页脚 网站页脚
White footer with closing headline, paired actions, grouped link columns, and legal details.
该做与不该做 ✓ 该做 Use white as the dominant canvas. Set display headings in Roobert or a close substitute. Keep body and interface text in Inter. Reserve lime highlights for selected actions and artwork. Use pale cards with subtle borders and rounded corners. Let product screenshots explain features. Separate major content bands with generous whitespace. ✕ 不该做 Do not add unmeasured colours to the interface palette. Do not turn lime into a large background field. Do not use heavy gradients as a defining visual treatment. Do not crowd the hero with extra decorative elements. Do not apply deep shadows to every card. Do not make all sections dark or all cards identical. Do not use display type for dense body copy. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 Build a new Quo-style SaaS page with a calm white canvas (#ffffff), Quo Ink (#000000) text, and Warm Porcelain (#f7f6f5) content panels. Use Graphite Panel (#28282a) and Night Panel (#0a0a0c) only for selected testimonial or conversion sections. Keep lime as a restrained accent in calls to action and product artwork, not as a measured interface colour token. Use Roobert-like medium display headings with tight tracking and Inter-like UI text. Center the hero, then organize feature content into clean, rounded cards with subtle Quiet Hairline (#e5e5e5) borders. Give product screenshots room to breathe, alternate light and dark bands sparingly, and keep navigation and footer links compact. Use the measured 1200px maximum content width and 8px spacing base; do not invent additional palette values or ornamental effects.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
title: "Quo design system"
variant: extended
source: https://www.quo.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/openphone-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---
# Quo · Design System
> Quiet monochrome, brought to life with product and lime
**Theme:** light · **Industry:** saas · **Source:** https://www.quo.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._
Quo’s homepage pairs a restrained black-and-white interface with spacious product showcases and a vivid lime accent in selected graphics and calls to action. Rounded cards, a clear sans-serif hierarchy, and alternating dark sections make the shared-phone product easy to scan.
## North star
Keep the interface calm and monochrome, using generous whitespace and product imagery to explain the value before adding restrained lime highlights.
## Overview
The page is anchored by a white canvas and near-black typography, with warm off-white bands used to distinguish selected content areas. Black CTA buttons and dark testimonial or conversion sections provide contrast; the vivid lime seen in the hero button and product imagery is a selective highlight rather than a broad interface colour. Roobert gives large headlines a compact, confident shape, while Inter handles navigation, body copy, and controls. The centered hero moves from a review cue to a large headline, short explanation, and paired actions, then opens into a wide product screenshot. Lower sections switch between compact feature-card grids, logo strips, a dark customer-story carousel, and a muted category panel. Product screenshots and interface mockups carry much of the visual storytelling; illustrations and brand marks add small bursts of colour. Cards use subtle borders and rounded corners instead of heavy decoration, with consistent whitespace separating the page’s clear content bands.
## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | ` | `--color-gallery-white` | neutral | Main page canvas and light-section background; also used for text and button labels on dark surfaces. |
| Quo Ink | ` | `--color-quo-ink` | brand | Primary text, links, navigation, black CTA fills, and major dark section backgrounds. |
| Graphite Panel | ` | `--color-graphite-panel` | surface | Dark testimonial cards and inverse card surfaces; reserve white text for contrast. |
| Shadow Gradient | ` | `--color-shadow-gradient` | semantic | Gradient-related measured colour; treat as overlay detail, not a defining page surface. |
| Soft Graphite | ` | `--color-soft-graphite` | semantic | Muted link and body text against the white canvas. |
| Warm Porcelain | ` | `--color-warm-porcelain` | surface | Pale section and feature-card background, creating gentle separation from white. |
| Quiet Hairline | ` | `--color-quiet-hairline` | semantic | Subtle card, button, and interface borders. |
| Card Edge | ` | `--color-card-edge` | surface | Border edge on dark testimonial cards. |
| Night Panel | ` | `--color-night-panel` | surface | Deep background for the customer-story section. |
| Silver Note | ` | `--color-silver-note` | semantic | Low-emphasis text, especially on dark or secondary interface details. |
| Muted Link | ` | `--color-muted-link` | semantic | Secondary link and text details, not a primary brand colour. |
| Mid Grey | ` | `--color-mid-grey` | semantic | Occasional secondary text details. |
| Border Charcoal | ` | `--color-border-charcoal` | semantic | Occasional dark link or button border detail. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Graphite Panel) · `--color-surface-2` → ` (Warm Porcelain) · `--color-surface-3` → ` (Quo Ink) · `--color-surface-4` → ` (Night Panel) · `--color-text` → ` (Quo Ink) · `--color-text-muted` → ` (Gallery White) · `--color-text-subtle` → ` (Soft Graphite) · `--color-border` → ` (Quiet Hairline)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 21:1 | AAA |
| ` | ` | 1.43:1 | fail |
| ` | ` | 19.46:1 | AAA |
| ` | ` | 14.71:1 | AAA |
| ` | ` | 1.08:1 | fail |
| ` | ` | 21:1 | AAA |
| ` | ` | 8.59:1 | AAA |
| ` | ` | 1.71:1 | fail |
| ` | ` | 7.96:1 | AAA |
| ` | ` | 2.45:1 | fail |
### Gradients
- `linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))`
- `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))`
- `linear-gradient(90deg, rgb(255, 255, 255) 25%, rgba(0, 0, 0, 0))`
- `linear-gradient(90deg, rgb(255, 255, 255), rgba(0, 0, 0, 0))`
## Typography
| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, captions, buttons, and links. | Inter |
| Roobert | `--font-display` | webfont | 500 | Display headings and page section titles. | Manrope |
- **Inter:** Use measured regular to semibold weights; keep interface text neutral, compact, and in sentence case.
- **Roobert:** Medium weight, tight negative tracking, and clean sentence-case headlines; avoid decorative styling.
### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)
| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | -0.02em | — | Roobert | Large campaign-style display headings where used. |
| h1 | 56px | 500 | 1.1 | -0.02em | — | Roobert | Primary hero headline. |
| h2 | 48px | 500 | 1.1 | -0.02em | — | Roobert | Major section headings. |
| h3 | 40px | 500 | 1.1 | -0.02em | — | Roobert | Feature and content-card headings. |
| h4 | 32px | 500 | 1.1 | -0.02em | — | Roobert | Subsection headings and smaller feature titles. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Paragraphs, feature explanations, and testimonial copy. |
| caption | 12px | 400 | 1.3 | 0 | — | Inter | Compact labels, metadata, and small supporting notes. |
| button | 16px | 500 | 1.5 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 16px | 500 | 1 | 0 | — | Inter | Top-level navigation labels. |
| link | 16px | 400 | 1.5 | 0 | — | Inter | Inline links and secondary actions. |
## Spacing & layout
- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 8, 10, 16, 22, 24, 32, 48, 72, 128 px.
- Section rhythm 32px · element gap 16px · card padding 26px · max content width 1200px.
Use a centered content area with a measured maximum width of 1200px and a comfortable density. The hero is centered and vertically open; subsequent feature content mostly aligns left in multi-column grids. Preserve the measured 8px spacing base and broad section gaps, letting white space separate content rather than adding ornamental dividers. Alternate light content bands with a small number of full-width dark sections. Keep card grids consistent and responsive, reducing columns as the viewport narrows.
## Shape & elevation
- Radius: button `6px` · card `10px` · nav `6px` · link `10px` · xs `6px` · sm `8px` · md `10px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.09) 0px 1.985px 1.985px -1.985px, rgba(0, 0, 0, 0.3) 0px 1.985px 11.911px -5.956px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.1) 0px 11px 17px -10px`
- Motion: standard transition `0.5s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.
The page is mostly flat, with subtle ## Imagery
Use broad product-interface screenshots as the central proof point, framed within pale panels and surrounded by white space. Feature cards contain cropped UI mockups, while customer stories use video stills within dark cards. Partner marks and integration logos appear as compact strips or grids. Illustrations may carry brighter lime or assorted product colours; keep those colours confined to the artwork rather than spreading them across the interface.
## Components
### Announcement bar
A narrow black strip above the navigation, with centered white message, a small lime mark, and a close control.
### Navigation
White horizontal header with Quo mark, compact Inter links, login, outlined Talk to Sales, and black Try for free button.
### Hero actions
Centered headline and supporting copy followed by a lime Try for free action and a quieter video link.
### Feature cards
Light ### Dark story cards
Customer quotes and video imagery on ### Conversion cards
Three dark outlined choice cards pair monochrome line illustrations with lime details and short action copy.
### Footer actions
A high-contrast closing headline and paired black or light actions precede compact multi-column link lists.
### Measured component styles
- **Primary button** (“Try for free”): background ## Do
- Use white as the dominant canvas.
- Set display headings in Roobert or a close substitute.
- Keep body and interface text in Inter.
- Reserve lime highlights for selected actions and artwork.
- Use pale cards with subtle borders and rounded corners.
- Let product screenshots explain features.
- Separate major content bands with generous whitespace.
## Don't
- Do not add unmeasured colours to the interface palette.
- Do not turn lime into a large background field.
- Do not use heavy gradients as a defining visual treatment.
- Do not crowd the hero with extra decorative elements.
- Do not apply deep shadows to every card.
- Do not make all sections dark or all cards identical.
- Do not use display type for dense body copy.
## Agent prompt
Build a new Quo-style SaaS page with a calm white canvas (## Page sections (top to bottom)
| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, review cue, supporting copy, paired actions, and platform note. | Primary trial action, Video explainer link, Review credibility cue | Large Roobert heading, White canvas, Lime CTA |
| 2 | product-showcase | Wide, nearly full-bleed product screenshot within a pale frame. | Visual product proof | Light neutral frame, Large interface mockup |
| 3 | feature-grid | Left-aligned section title above three compact feature cards. | Feature discovery, Card links | Three-column cards, Minimal iconography |
| 4 | logo-cloud | Centered caption above a horizontal strip of customer marks. | Social proof | Small monochrome logos, Open white band |
| 5 | feature-grid | Section heading above six feature cards arranged in three columns. | Feature exploration, Link per card | Pale cards, Embedded product previews |
| 6 | stats | Black full-width band with a left-aligned section heading. | Transition to customer proof | Black background, Bright illustrated accent |
| 7 | testimonials | Dark multi-column carousel with video-led customer cards. | Carousel navigation, Read customer story | Near-black section, Graphite cards, Video stills |
| 8 | feature-grid | White three-column row of migration benefits below a section heading. | Trial entry point, Number porting | Compact benefit cards, Simple icons |
| 9 | reviews | Short white trust band with statement and award badges. | Third-party validation | Award badge row, Compact layout |
| 10 | category-nav | Muted full-width panel with heading, category links, and supporting illustration. | Browse by industry or team | Warm Porcelain background, Pill-like category links |
| 11 | integrations | White section with heading, view-all link, and a dense integration-logo grid. | Browse integrations, View all link | Repeated logo tiles, Light borders |
| 12 | cta | Black conversion band with introductory text, three choice cards, and a question prompt. | Choose a number, Watch a demo, View pricing | Dark cards, Line-art illustrations, Lime details |
| 13 | footer | White footer with closing headline, paired actions, grouped link columns, and legal details. | Trial or sales contact, Grouped navigation | Large closing message, Multi-column links, Fine-print row |
## Source CSS custom properties (selected)
```css
--_typography---fonts--global: Inter,sans-serif;
--_typography---global--font-weight: 400;
--_typography---global--letter-spacing-main: 0em;
--_typography---h1--font-family: Roobert,sans-serif;
--_typography---h1--font-size: 3.5rem;
--_typography---h1--font-weight: 500;
--_typography---h1--letter-spacing: -.02em;
--_typography---h2--font-family: Roobert,sans-serif;
--_typography---h2--font-size: 3rem;
--_typography---h2--font-weight: 500;
--_typography---h2--letter-spacing: -.02em;
--_typography---h3--font-family: Roobert,sans-serif;
--_typography---h3--font-size: 2.5rem;
--_typography---h3--font-weight: 500;
--_typography---h3--letter-spacing: -.02em;
--_typography---h4--font-family: Roobert,sans-serif;
--_typography---h4--font-size: 2rem;
--_typography---h4--font-weight: 500;
--_typography---h4--letter-spacing: -.02em;
--_typography---h5--font-family: Roobert,sans-serif;
--_typography---h5--font-size: 1.5rem;
--_typography---h5--font-weight: 500;
--_typography---h5--letter-spacing: -.01em;
--_typography---h6--font-family: Roobert,sans-serif;
--_typography---h6--font-size: 1.25rem;
--_typography---h6--font-weight: 500;
--_typography---h6--letter-spacing: -.01em;
--_color-schemes---background--text-full: #000;
--_legacy---fonts--p3: 14px;
--_legacy---border-radius--6px: 6px;
--_legacy---border-radius--10px: 10px;
--_colors---warm-gray-60<deleted|variable-ba81792f-3707-cf9d-1501-dc0d1c0a16fd>: #f7f5f299;
--_ui-styles---stroke--border-width: .0625rem;
--_ui-styles---radius--tiny: .375rem;
--_typography---button--font-size: 1rem;
--_typography---button--letter-spacing: 0em;
--_legacy---fonts--p2: 16px;
--_color-schemes---styles--accent: 
