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

# Whereby · Design System

> Warm editorial design for effortless video calls

**Theme:** light · **Industry:** saas · **Source:** https://whereby.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._

Whereby pairs expressive condensed serif headlines with a calm, spacious SaaS layout and warm pastel section panels. Healthcare-oriented imagery and a vivid indigo CTA give the page a human, trustworthy feel without sacrificing clarity.

## North star

Let expressive serif headlines and warm, spacious sections humanize a crisp SaaS interface, with indigo reserved for decisive actions.

## Overview

The page balances a bright white canvas with broad blush and pale apricot bands, using colour sparingly so each tinted section feels intentional. Near-black text anchors the interface; saturated indigo is reserved for primary actions and selected links. Large, condensed Roslindale display headlines provide a distinctive editorial voice, while Inter keeps navigation, body copy and controls practical and legible. A centered, constrained content area organizes mixed two-column hero and product sections, logo rows, cards and editorial blocks. Generous whitespace separates these modules, but the overall system remains compact and easy to scan. Photography shows real people in video-call contexts, especially telehealth, and is complemented by colorful customer logos and occasional playful illustrations. Rounded cards and pill-like buttons soften the product presentation; restrained shadows add depth to media rather than turning the page into a layered dashboard.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary headings, body copy, navigation labels and footer text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and the clean background for logos, feature content and footer. |
| Quiet Gray | `#f4f4f4` | `--color-quiet-gray` | surface | Neutral card surfaces, including customer and use-case panels. |
| Blush Band | `#f8dbd5` | `--color-blush-band` | brand | Warm hero and testimonial backdrops; the screenshot shows this blush as a defining brand surface. |
| Apricot Band | `#f8e3c8` | `--color-apricot-band` | surface | The full-width “Why Whereby?” section background. |
| Signal Indigo | `#2b189b` | `--color-signal-indigo` | accent | Primary CTA fills and selected navigation or link emphasis. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f4` (Quiet Gray) · `--color-surface-2` → `#f8dbd5` (Blush Band) · `--color-surface-3` → `#f8e3c8` (Apricot Band) · `--color-text` → `#000000` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#2b189b` (Signal Indigo)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f4f4` | 19.09:1 | AAA |
| `#000000` | `#f8dbd5` | 16.08:1 | AAA |
| `#000000` | `#f8e3c8` | 16.81:1 | AAA |
| `#ffffff` | `#f4f4f4` | 1.1:1 | fail |
| `#ffffff` | `#f8dbd5` | 1.31:1 | fail |
| `#ffffff` | `#f8e3c8` | 1.25:1 | fail |
| `#2b189b` | `#ffffff` | 12.3:1 | AAA |
| `#2b189b` | `#f4f4f4` | 11.19:1 | AAA |
| `#2b189b` | `#f8dbd5` | 9.42:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 500 | Body copy, navigation, captions and interface labels. | Inter |
| Whereby Roslindale Display Condensed Regular | `--font-display` | webfont | 400 | Display headlines and major section headings. | Bodoni Moda |
| Whereby Roslindale Text Regular | `--font-whereby-roslindale-text-regular` | webfont | 400 | Smaller editorial headings and text-led display accents. | Lora |
| Inter-Medium | `--font-inter-medium` | system | 500 | Medium-weight interface text where a stronger label is needed. | Inter |

- **Inter:** Regular-weight, sentence-case interface text; measured caption and navigation tracking is slightly tight.
- **Whereby Roslindale Display Condensed Regular:** Regular-weight condensed serif; use large, elegant sentence-case lines without added tracking.
- **Whereby Roslindale Text Regular:** Regular serif for smaller headings; maintain the restrained, editorial contrast with Inter.
- **Inter-Medium:** Use medium weight selectively for emphasis; avoid all-caps styling.

### Type scale — Perfect Fifth (ratio ≈ 1.461, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 1.15 | 0 | — | Whereby Roslindale Display Condensed Regular | Oversized editorial display headline treatment. |
| h1 | 80px | 400 | 1.15 | 0 | — | Whereby Roslindale Display Condensed Regular | Main hero headline and prominent page-level heading. |
| h2 | 48px | 400 | 1.25 | 0 | — | Whereby Roslindale Display Condensed Regular | Major section titles such as customer stories and FAQ. |
| h3 | 40px | 400 | 1.25 | 0 | — | Whereby Roslindale Display Condensed Regular | Feature, use-case and subsection headings. |
| h4 | 28px | 400 | 1.25 | 0 | — | Whereby Roslindale Text Regular | Smaller editorial card and section headings. |
| body | 18px | 400 | 1.5 | 0 | — | Inter | Hero descriptions, explanatory copy and card content. |
| caption | 16px | 400 | 1.5 | -0.016em | — | Inter | Supporting metadata, testimonials and secondary labels. |
| nav | 16px | 400 | 1.5 | -0.016em | — | Inter | Primary navigation and top-level header links. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 10, 16, 20, 24, 32, 40, 48, 64, 80, 90, 96 px.
- Section rhythm 40px · element gap 8px · card padding 48px · max content width 1200px.

Use a centered content frame capped at the measured 1200px maximum, with broad white or tinted full-width section bands. The hero is a two-column composition: text on the left, call imagery on the right. Follow with centered logo proof, paired use-case cards, a wide testimonial, an explanatory split section, feature and story grids, a narrow FAQ list, a centered CTA, then a multi-column footer. The measured spacing scale ranges from 4px to 96px; keep card and section gaps deliberate, with an overall compact density softened by generous whitespace.

## Shape & elevation

- Radius: button `50%` · card `12px` · nav `12px` · link `12px` · xs `4px` · sm `12px` · md `20px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm` (other): `rgb(128, 128, 128) 0px 0px 5px 0px`

The page is primarily flat: white and pastel bands define structure more than borders or shadows. Cards use measured rounded treatments, with 12px and 20px radii represented in the component data. Apply only restrained soft shadowing to layered call imagery or media; avoid heavy elevation and decorative outlines.

## Imagery

Use warm, natural photography of people in video calls, with telehealth and real practitioner-patient contexts as the strongest fit. The hero image is a large rectangular call scene with a smaller participant view layered over it. Product screenshots sit in simple cards; customer logos retain their own brand colours. Small decorative illustrations add personality around testimonial and CTA sections, but should remain secondary to content.

## Components

### Primary CTA

Indigo-filled, white-label action such as “Get started”; the screenshot presents it as a rounded pill with compact text.

### Header navigation

Brand wordmark at left, four central navigation groups with dropdown cues, and outlined login plus filled signup actions at right.

### Use-case cards

Two side-by-side product paths with screenshot imagery, small category labels, serif titles, short bullet lists and indigo action buttons.

### Testimonial panel

Wide blush card with centered oversized serif quotation, compact attribution and small decorative illustrations.

### Feature grid

Centered section heading above a three-column set of simple monochrome feature icons and labels, followed by a centered CTA.

### FAQ rows

Centered heading and stacked question rows separated by fine horizontal rules, each ending with a small disclosure chevron.

### Footer

White background with six aligned link columns, serif column headings and compact Inter links.

### Measured component styles

- **Primary button**: background #cccccc · text #000000 · radius 40px · padding 0px · 400 16px sans-serif
- **Link** (“Get started”): transparent background · text #0000ee · radius 12px · padding 0px · 400 16px sans-serif
- **Card** (“Whereby for Telehealth Connecting practi”): background #f4f4f4 · text #000000 · radius 20px · padding 80px 16px · 400 16px sans-serif
- **Navigation item** (“Products Pricing Developers Resources Lo”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px sans-serif

## Do

- Use blush and apricot as broad section backgrounds, not noisy decoration.
- Set large headings in an elegant condensed serif.
- Keep body copy and navigation clear in Inter.
- Reserve Signal Indigo (#2b189b) for key actions and selective emphasis.
- Use real human video-call imagery with natural, warm lighting.
- Maintain a centered content frame and generous separation between sections.

## Don't

- Do not turn the page into a dark or gradient-heavy interface.
- Do not use indigo for large background areas.
- Do not replace the editorial serif headings with generic geometric sans.
- Do not add heavy borders or prominent card shadows.
- Do not let decorative illustrations overpower product content.
- Do not crowd the hero or collapse the varied section rhythm.

## Agent prompt

Build a new SaaS page in Whereby’s warm editorial style. Use Gallery White (#ffffff) as the main canvas, Soft Ink (#000000) for text, and broad Blush Band (#f8dbd5) or Apricot Band (#f8e3c8) panels to mark selected sections. Keep Signal Indigo (#2b189b) for primary CTAs and restrained emphasis; use Quiet Gray (#f4f4f4) for neutral cards. Pair large condensed serif headlines with readable Inter body text and navigation. Use a centered content frame, airy section transitions, rounded media cards, and a clear mix of split layouts and centered grids. Prefer warm, natural video-call photography and keep illustrations secondary. Use subtle depth only where imagery overlaps; keep the rest flat and uncluttered.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero on blush background: headline and copy left, layered video-call imagery right. | Primary get-started action, Top navigation, Login and signup entry points | Warm blush band, Condensed serif headline, Pill CTA, Overlapping call imagery |
| 2 | logo-cloud | Centered heading above one horizontal row of customer logos. | Social proof | White background, Centered label, Multicolor logos |
| 3 | feature-grid | Centered section heading above two side-by-side use-case cards. | Choose a use case, Explore product path | Product screenshots, Short bullet lists, Indigo action buttons |
| 4 | testimonials | Wide centered testimonial panel followed by a separate use-case carousel card. | Customer quote, Carousel navigation | Blush quote panel, Large serif quotation, Neutral gray card |
| 5 | feature-split | Apricot full-width band with large heading on the left and stacked benefits on the right. | Scan benefit list | Apricot background, Oversized serif title, Compact explanatory text |
| 6 | feature-grid | Centered heading above three columns of feature icons, arranged across two rows. | Browse capabilities, Explore all features | Minimal monochrome icons, White canvas, Centered indigo CTA |
| 7 | gallery | Centered title above three aligned story cards with images and buttons. | Read customer stories | Three-column cards, Editorial titles, Indigo story links |
| 8 | faq | Centered title over a narrow single-column stack of question rows. | Expandable questions | Fine row separators, Trailing chevrons, White canvas |
| 9 | cta | Centered heading and paired actions between decorative illustrations at both edges. | Sign up, See pricing | Soft neutral background, Indigo filled and outlined buttons, Illustrated side framing |
| 10 | footer | White footer with six horizontally arranged link columns. | Explore company and product links, Find support and policies | Serif column headings, Compact text links, Open white layout |

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