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

# TheyDo · Design System

> Editorial clarity with a vivid pink signal

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

A bright, spacious SaaS homepage pairs expressive serif headlines with restrained black-and-white interface design. Vivid pink accents and soft pink testimonial surfaces add warmth to product-led storytelling.

## North star

Let spacious white layouts and expressive serif headlines lead; use pink sparingly to direct attention to meaningful actions and ideas.

## Overview

TheyDo’s homepage is built around a predominantly white canvas, with black and charcoal text providing clear contrast and vivid pink reserved for emphasis. Oversized, elegant serif headlines create an editorial voice, while DM Sans keeps navigation, body copy, and controls practical and legible. The first screen centers its message and paired calls to action; the rest of the page alternates centered introductions with broad product imagery and two-column feature storytelling. The product UI is shown in context rather than isolated as glossy device photography, often softened by pale backgrounds and pink-tinted glows. Light gray media panels and pale pink cards distinguish content without turning the page into a sequence of heavy color bands. Spacing feels generous and measured, with recurring sections given room to breathe. The dark footer provides a strong visual endpoint, while pink links, badges, and selected headline words act as a consistent navigational signal.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas, navigation background, and most section backgrounds. |
| Signal Pink | `#e82183` | `--color-signal-pink` | accent | Primary brand accent for highlighted headline words, badges, links, and pink hairlines. |
| Soft Black | `#131110` | `--color-soft-black` | brand | Footer surface, filled primary buttons, and dark high-contrast text. |
| Warm Graphite | `#56504d` | `--color-warm-graphite` | neutral | Muted supporting text and secondary navigation or button text. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Main headline and body text where the strongest text contrast is needed. |
| Blush Card | `#fce4f1` | `--color-blush-card` | surface | Pale pink testimonial and closing CTA card backgrounds. |
| Footer Ash | `#7b7674` | `--color-footer-ash` | neutral | Quiet secondary text, especially lower-emphasis footer and button copy. |
| Mist Gray | `#edeef1` | `--color-mist-gray` | surface | Cool gray stop in a measured illustration or link gradient; not a defining page section color. |
| Cloud Gray | `#f8f8f9` | `--color-cloud-gray` | surface | Near-white gradient stop appearing in interface or link treatments, not a dominant brand surface. |
| Pale Hairline | `#e8e8e8` | `--color-pale-hairline` | semantic | Subtle measured border color; use for quiet separators rather than prominent outlines. |
| Footer Umber | `#2b2627` | `--color-footer-umber` | semantic | Dark footer-associated detail, not a primary surface or headline color. |
| Petal Pink | `#f679bd` | `--color-petal-pink` | accent | Secondary pink accent seen in link details; subordinate to Signal Pink. |
| Pale Petal | `#fad6e9` | `--color-pale-petal` | surface | Soft pink card surface used sparingly for content panels. |
| Near Ink | `#161616` | `--color-near-ink` | neutral | Near-black text detail supporting the stronger black and charcoal typography. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#131110` (Soft Black) · `--color-surface-2` → `#fce4f1` (Blush Card) · `--color-surface-3` → `#fad6e9` (Pale Petal) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#56504d` (Warm Graphite) · `--color-text-subtle` → `#7b7674` (Footer Ash) · `--color-border` → `#e82183` (Signal Pink) · `--color-accent` → `#e82183` (Signal Pink) · `--color-accent-2` → `#f679bd` (Petal Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#131110` | 1.12:1 | fail |
| `#000000` | `#fce4f1` | 17.51:1 | AAA |
| `#000000` | `#fad6e9` | 15.86:1 | AAA |
| `#56504d` | `#ffffff` | 7.92:1 | AAA |
| `#56504d` | `#131110` | 2.38:1 | fail |
| `#56504d` | `#fce4f1` | 6.61:1 | AA |
| `#56504d` | `#fad6e9` | 5.98:1 | AA |
| `#7b7674` | `#ffffff` | 4.48:1 | AA-large |
| `#7b7674` | `#131110` | 4.2:1 | AA-large |

### Gradients

- `linear-gradient(16deg, rgb(237, 238, 241) 19.34%, rgba(237, 238, 241, 0.4) 57.57%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 600, 500, 700 | Navigation, body copy, captions, links, and buttons. | Inter |
| wulkan | `--font-display` | webfont | 400, 500 | Display and heading typography, including the large editorial hero. | Cormorant Garamond |

- **DM Sans:** Use practical sans-serif text with measured regular-to-bold weights; navigation is semibold, with no forced uppercase.
- **wulkan:** Keep the refined serif character, light heading weights, and tight negative tracking; use mixed case.

### Type scale — Augmented Fourth (ratio ≈ 1.456, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.11 | -0.03em | — | wulkan | Large editorial hero statement. |
| h1 | 40px | 400 | 1.2 | -0.022em | — | wulkan | Primary page and major section headings. |
| h2 | 28px | 400 | 1.29 | -0.025em | — | wulkan | Feature and subsection headings. |
| h3 | 24px | 400 | 1.25 | -0.029em | — | wulkan | Smaller feature or card headings. |
| body | 16px | 400 | 1.44 | -0.006em | — | DM Sans | Explanatory paragraphs and standard supporting copy. |
| caption | 14px | 400 | 1.29 | -0.014em | — | DM Sans | Compact supporting labels and metadata. |
| button | 16px | 400 | 1.44 | -0.006em | — | DM Sans | Calls to action and button labels. |
| nav | 15px | 600 | 1.5 | 0 | — | DM Sans | Top navigation labels. |
| link | 14px | 500 | 1.4 | 0 | — | DM Sans | Inline and secondary action links. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 3, 5, 8, 10, 13, 15, 18, 20, 25, 30, 40, 50, 80 px.
- Section rhythm 80px · element gap 10px · card padding 15px · max content width 1120px.

The page uses a centered content frame with a measured maximum width of 1120px, opening with centered hero copy and a broad product visual. Long-form content alternates centered section introductions with split feature rows and a two-column use-case grid. A six-column logo row and four-column results band provide compact changes in rhythm. Sections have generous separation, with comfortable content density rather than tightly packed cards. Product screens and testimonial cards sit alongside copy, while the final dark footer spans the full width and organizes links into columns.

## Shape & elevation

- Radius: button `5px` · card `8px` · media `8px` · badge `9999px` · nav `8px` · link `8px` · xs `5px` · sm `8px` · md `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is mostly flat: no measured shadows define the interface. Cards and media use restrained borders or soft background contrast, with rounded corners rather than pronounced elevation. Pink glow around product imagery is part of the supplied visual treatment; keep it subtle and use layering only to distinguish interface panels.

## Imagery

Product-interface imagery is the dominant visual asset: dashboards, journey views, charts, and AI assistant panels appear in broad, softly framed compositions. Customer portraits are integrated into pink testimonial cards rather than presented as standalone photography. The MCP section uses a simple integration-style graphic. Interface screenshots often have pale gray surroundings and faint pink glow, creating depth without competing with the headline or body copy.

## Components

### Announcement bar

A narrow Soft Black strip above the white navigation, with centered small copy and a pink report link.

### Primary CTA

Filled Soft Black button with white semibold DM Sans text and a compact rounded rectangle shape.

### Secondary CTA

White or transparent button with a thin dark outline, paired next to the filled primary action.

### Pink badge

Small outlined pill using Signal Pink text and border for labels such as feature stages.

### Feature split

Alternating copy and product-interface media in a spacious two-column composition.

### Testimonial card

Pale pink or vivid pink portrait-backed card with an editorial quote and concise attribution.

### Footer

Full-width Soft Black region with a serif brand statement and dense, muted multi-column link groups.

### Measured component styles

- **Primary button** (“Get a demo”): background #131110 · text #ffffff · border 1px solid · radius 5px · padding 0px 15px · 600 15px DM Sans
- **Secondary button** (“Login”): transparent background · text #131110 · border 1px solid #131110 · radius 5px · padding 0px 15px · 600 15px DM Sans
- **Link** (“Prove the value of CX Connect CX work to”): transparent background · text #000000 · radius 8px · padding 0px · 400 16px Times New Roman
- **Card** (““It’s no longer a collection of data. It”): background #fce4f1 · text #131110 · radius 8px · padding 15px · 400 16px Times New Roman
- **Badge** (“Build context”): transparent background · text #e82183 · border 1px solid #e82183 · radius 16px · padding 2.5px 12.5px · 500 14px DM Sans
- **Navigation item** (“Platform Solutions Resources Customers G”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Use a white canvas as the default.
- Set major headings in an expressive serif.
- Use DM Sans for navigation, copy, and controls.
- Reserve vivid pink for emphasis and links.
- Give feature sections generous breathing room.
- Show product UI in contextual, pale compositions.

## Don't

- Do not turn every section into a colored band.
- Do not use pink as the default body-text color.
- Do not crowd the hero with competing elements.
- Do not add heavy shadows or excessive elevation.
- Do not replace the editorial serif with a generic display sans.
- Do not make product screenshots look like unrelated stock imagery.

## Agent prompt

Build a new TheyDo-style SaaS page with a predominantly white Gallery White (#ffffff) canvas and spacious, centered sections. Use refined serif display headings, substituting Cormorant Garamond for wulkan, and DM Sans for navigation, controls, and body copy. Set text mainly in Pure Ink (#000000) or Soft Black (#131110), with Warm Graphite (#56504d) for quieter supporting copy. Use Signal Pink (#e82183) selectively for highlighted words, links, badges, and fine accents; keep pale pink surfaces such as Blush Card (#fce4f1) for testimonials or a closing CTA. Pair concise product storytelling with contextual dashboard and AI interface imagery in broad split layouts. Keep buttons compact and dark, secondary actions outlined, cards softly rounded, and elevation restrained. Finish with a full-width dark footer and organized muted link columns.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy with paired actions above a broad product image. | primary and secondary CTA | serif headline, pink emphasis, centered composition |
| 2 | product-showcase | Wide, full-bleed product-interface composition. | visual product explanation | dashboard collage, soft pink glow, pale framing |
| 3 | logo-cloud | Centered heading above a compact six-column logo arrangement. | enterprise trust signal | monochrome logo grid, centered heading |
| 4 | other | Centered icon and serif heading with ample surrounding white space. | section introduction | small graphic, editorial heading |
| 5 | feature-split | Two-column feature storytelling with stage tabs, copy, interface media, and quote cards. | switchable capability stages, learn-more link | pink stage badge, product UI, testimonial card |
| 6 | other | Short centered heading separating platform overview from feature details. | narrative transition | centered serif heading |
| 7 | feature-split | Left-aligned copy beside a broad product-interface image. | feature explanation, contextual product proof | pink outline badge, split layout |
| 8 | feature-split | Alternating split row with product image on one side and copy on the other. | feature explanation | alternating image and text, pink stage badge |
| 9 | feature-split | Copy and interface media in a spacious split feature row. | outcome explanation | serif heading, product report visual |
| 10 | other | Centered label and heading introducing the use-case grid. | content orientation | small badge, centered serif title |
| 11 | feature-grid | Two-column arrangement of product cards, a testimonial, and concise use-case copy. | use-case discovery, customer proof | soft gray media cards, pink quote card |
| 12 | feature-grid | Two-column feature row with product imagery and short explanatory copy. | operational use-case discovery | dashboard screenshots, light media panels |
| 13 | integrations | Integration diagram and copy arranged as a spacious split section. | waitlist CTA, integration explanation | connection diagram, small availability badge |
| 14 | testimonials | Centered heading above three portrait-backed testimonial cards. | social proof | pink quote cards, portrait photography, attribution |
| 15 | cta | Centered CTA content on a wide pale pink panel. | contact conversion, paired actions | blush background, serif heading, dark button |
| 16 | stats | Four evenly distributed metric columns in a pale pink band. | impact proof | large serif metrics, compact labels |
| 17 | footer | Full-width dark footer with brand statement and four-column link groups. | deep navigation, social links, trial link | dark surface, muted links, serif brand heading |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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