---
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 | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and light-section background; also used for text and button labels on dark surfaces. |
| Quo Ink | `#000000` | `--color-quo-ink` | brand | Primary text, links, navigation, black CTA fills, and major dark section backgrounds. |
| Graphite Panel | `#28282a` | `--color-graphite-panel` | surface | Dark testimonial cards and inverse card surfaces; reserve white text for contrast. |
| Shadow Gradient | `#141415` | `--color-shadow-gradient` | semantic | Gradient-related measured colour; treat as overlay detail, not a defining page surface. |
| Soft Graphite | `#4c4c4c` | `--color-soft-graphite` | semantic | Muted link and body text against the white canvas. |
| Warm Porcelain | `#f7f6f5` | `--color-warm-porcelain` | surface | Pale section and feature-card background, creating gentle separation from white. |
| Quiet Hairline | `#e5e5e5` | `--color-quiet-hairline` | semantic | Subtle card, button, and interface borders. |
| Card Edge | `#1b1b1d` | `--color-card-edge` | surface | Border edge on dark testimonial cards. |
| Night Panel | `#0a0a0c` | `--color-night-panel` | surface | Deep background for the customer-story section. |
| Silver Note | `#bfbfbf` | `--color-silver-note` | semantic | Low-emphasis text, especially on dark or secondary interface details. |
| Muted Link | `#666666` | `--color-muted-link` | semantic | Secondary link and text details, not a primary brand colour. |
| Mid Grey | `#808080` | `--color-mid-grey` | semantic | Occasional secondary text details. |
| Border Charcoal | `#333333` | `--color-border-charcoal` | semantic | Occasional dark link or button border detail. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#28282a` (Graphite Panel) · `--color-surface-2` → `#f7f6f5` (Warm Porcelain) · `--color-surface-3` → `#000000` (Quo Ink) · `--color-surface-4` → `#0a0a0c` (Night Panel) · `--color-text` → `#000000` (Quo Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#4c4c4c` (Soft Graphite) · `--color-border` → `#e5e5e5` (Quiet Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#28282a` | 1.43:1 | fail |
| `#000000` | `#f7f6f5` | 19.46:1 | AAA |
| `#ffffff` | `#28282a` | 14.71:1 | AAA |
| `#ffffff` | `#f7f6f5` | 1.08:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#4c4c4c` | `#ffffff` | 8.59:1 | AAA |
| `#4c4c4c` | `#28282a` | 1.71:1 | fail |
| `#4c4c4c` | `#f7f6f5` | 7.96:1 | AAA |
| `#4c4c4c` | `#000000` | 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 #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.

## 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 #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.

### Measured component styles

- **Primary button** (“Try for free”): background #000000 · text #ffffff · border 1px solid · radius 6px · padding 5px 12px · 500 16px Inter
- **Secondary button** (“Talk to Sales”): transparent background · text #000000 · border 1px solid #e5e5e5 · radius 6px · padding 5px 12px · 500 16px Inter
- **Link** (“iOS”): transparent background · text #000000 · radius 0px · padding 0px · 600 14px Inter
- **Card** (“99% speed to lead improvement "When some”): background #28282a · text #ffffff · border 1px solid #1b1b1d · radius 10px · padding 24px 32px 24px 24px · 400 16px Inter
- **Navigation item** (“Product Solutions Resources Pricing Log ”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## 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 (#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.

## 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: #e5f53d;
--_colors---warm-gray<deleted|variable-9e343445-0174-8fae-68ae-711a76795be4>: #f7f5f2;
--_legacy---spacing--gutter: 48px;
```

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