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

# Customer.io · Design System

> Quiet whitespace, deep teal, vivid product proof.

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

A spacious SaaS homepage pairs oversized, dark-teal typography with clean product imagery and restrained calls to action. White feature sections give way to a deep-teal enterprise band, followed by colorful customer proof and a matching dark footer.

## North star

Let generous white space and dark-teal typography lead, using saturated color only to clarify actions or frame product and customer proof.

## Overview

The page uses white as its defining canvas, letting deep teal text carry the identity rather than relying on decorative backgrounds. Large, left-aligned headlines use a clean, softly weighted sans serif; concise supporting copy and clear CTA pairs keep the hero direct. The layout moves from a two-column opening into broad product and feature areas, with generous vertical separation and compact text within individual modules. Most sections remain flat and white, while a full-width deep-teal enterprise band and dark footer create strong visual anchors. Product screenshots and interface imagery provide tangible proof; small illustrations and partner marks add detail without replacing the product story. Customer testimonials introduce pale peach and pale blue panels, with portraits and colored geometric framing. Borders and fine dividers define modules, while rounded CTA outlines and a subtle bright focus halo supply the main interface accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, light CTA text, and occasional text on dark surfaces. |
| Slate Teal | `#4e6366` | `--color-slate-teal` | semantic | Muted teal seen in gradient and illustration details, not a defining page surface. |
| Harbor Gray | `#354d51` | `--color-harbor-gray` | neutral | Muted body copy and secondary explanatory text on light backgrounds. |
| Midnight Teal | `#00191c` | `--color-midnight-teal` | brand | Full-width enterprise section and footer backgrounds; establishes the strongest dark anchor. |
| Quiet Divider | `#ebebeb` | `--color-quiet-divider` | neutral | Fine borders and separators around sections, navigation, and interface elements. |
| Deep Ink | `#00262b` | `--color-deep-ink` | brand | Primary headings, navigation, body text, links, and outlined CTA labels. |
| Estuary Teal | `#0b363b` | `--color-estuary-teal` | brand | Filled primary CTAs and selected dark-surface details. |
| Burnt Sienna | `#863d1c` | `--color-burnt-sienna` | accent | Selective colored words and links; also appears in customer-case visual details. |
| Cobalt Ink | `#123a88` | `--color-cobalt-ink` | accent | Selective link and text accents, with stronger appearances in customer-case graphics. |
| Deep Lagoon | `#032125` | `--color-deep-lagoon` | surface | Secondary dark backgrounds and reversed link or card areas. |
| Mist Teal | `#a1c2c6` | `--color-mist-teal` | semantic | Soft supporting text on dark footer and dark sections. |
| Ice Teal | `#cde3e5` | `--color-ice-teal` | semantic | Pale text accent within dark-surface content. |
| Peach Wash | `#fdf0e9` | `--color-peach-wash` | surface | Warm customer testimonial panel; distinct proof-section background, not the core canvas. |
| Sky Wash | `#e2f4ff` | `--color-sky-wash` | surface | Cool customer testimonial panel that contrasts with the warm case-study panel. |
| Olive Gold | `#866006` | `--color-olive-gold` | accent | Small case-study and section-label accents, including the customer story badge. |
| Night Card | `#021d21` | `--color-night-card` | surface | Dark card background within the enterprise-style interface content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#00191c` (Midnight Teal) · `--color-surface-2` → `#032125` (Deep Lagoon) · `--color-surface-3` → `#0b363b` (Estuary Teal) · `--color-surface-4` → `#ebebeb` (Quiet Divider) · `--color-text` → `#00262b` (Deep Ink) · `--color-text-muted` → `#354d51` (Harbor Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#ebebeb` (Quiet Divider) · `--color-accent` → `#863d1c` (Burnt Sienna) · `--color-accent-2` → `#123a88` (Cobalt Ink) · `--color-accent-3` → `#866006` (Olive Gold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#00262b` | `#ffffff` | 16:1 | AAA |
| `#00262b` | `#00191c` | 1.14:1 | fail |
| `#00262b` | `#032125` | 1.05:1 | fail |
| `#00262b` | `#0b363b` | 1.22:1 | fail |
| `#354d51` | `#ffffff` | 9.01:1 | AAA |
| `#354d51` | `#00191c` | 2.02:1 | fail |
| `#354d51` | `#032125` | 1.87:1 | fail |
| `#354d51` | `#0b363b` | 1.45:1 | fail |
| `#ffffff` | `#00191c` | 18.17:1 | AAA |
| `#ffffff` | `#032125` | 16.83:1 | AAA |

### Gradients

- `radial-gradient(circle, oklab(0.228 -0.0319411 -0.0166062 / 0.7) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| saansFont | `--font-body` | webfont | 475, 500, 600, 700 | All page typography, from oversized hero headings to navigation, body copy, links, and labels. | DM Sans |

- **saansFont:** Use softly weighted 475–700 weights; headings are sentence case with slightly open tracking, while navigation and links are semibold.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 475 | 1 | 0.002em | — | saansFont | Oversized display headlines where featured. |
| h1 | 64px | 475 | 1 | 0.003em | — | saansFont | Hero headline and primary page-level heading. |
| h2 | 40px | 475 | 1.13 | 0.005em | — | saansFont | Major section headings and prominent CTA heading. |
| h3 | 30px | 475 | 1.13 | 0.007em | — | saansFont | Feature, capability, and solution card titles. |
| h4 | 24px | 500 | 1.25 | 0.008em | — | saansFont | Compact content headings and nested feature titles. |
| body | 16px | 475 | 1.38 | 0.013em | — | saansFont | Descriptions, supporting copy, and testimonial text. |
| caption | 14px | 475 | 1.38 | 0.014em | — | saansFont | Small labels, trial notes, and case-study metadata. |
| nav | 16px | 600 | 1.38 | 0 | — | saansFont | Top navigation and footer navigation links. |
| link | 16px | 600 | 1.38 | 0.013em | — | saansFont | Text links and secondary actions. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 16, 24, 32, 40, 64, 96 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1256px.

Use a centered content frame capped at the measured 1256px, with broad full-width bands for the product showcase, enterprise section, and footer. The hero is a two-column composition with left-aligned copy and media; subsequent feature groups use one-, two-, or three-column arrangements. Keep the overall density compact within modules but generous between major sections. Maintain the measured 8px spacing base and align headings, cards, and text consistently to the left, reserving centered alignment for the enterprise introduction and closing CTA.

## Shape & elevation

- Radius: button `2px` · media `6px` · nav `9999px` · xs `2px` · sm `4px` · pill `9999px`
- Shadow `hairline` (button): `oklch(0.9263 0.136 145.2) 0px 0px 0px 4px`
- Shadow `hairline-2` (button): `oklch(0.97 0 0) 0px 0px 0px 4px`
- Motion: standard transition `0.2s cubic-bezier(0, 0, 0.35, 1)` on interactive elements.

The page is predominantly flat: white sections and most cards rely on spacing rather than deep shadows. Use fine pale-gray dividers to define boundaries, with a brighter focus halo around the primary CTA. Dark enterprise panels and pale testimonial blocks create contrast through surface color, not layered elevation.

## Imagery

Prioritize real product interface imagery: the hero’s broad dashboard screenshot makes the platform immediately tangible, while later sections use interface panels and smaller feature visuals. Use customer portraits in testimonial cards with bold clipped geometric framing. Partner logos and simple illustrations are supporting details; keep them crisp and restrained rather than treating them as decorative hero art.

## Components

### Primary CTA

Filled Estuary Teal (#0b363b) pill button with white semibold text, a fine matching border, and a bright focus halo.

### Secondary CTA

White or transparent pill button with Deep Ink (#00262b) text and a dark-teal outline, paired beside the primary action.

### Hero

Left-aligned oversized headline, short supporting copy, two CTAs, and compact trial reassurance above a broad product showcase.

### Feature modules

Open white layouts with short titles, concise descriptions, and product or feature imagery; organize content in varied column counts.

### Enterprise panel

Midnight Teal (#00191c) band with a centered introduction and a darker, divided grid for integrations, security, and support.

### Customer case studies

Alternating testimonial compositions use peach (#fdf0e9) and sky (#e2f4ff) panels, customer portraits, outcome metrics, and compact links.

### Footer

Deep Midnight Teal (#00191c) multi-column navigation with muted light links, brand mark, and a restrained bottom utility row.

### Measured component styles

- **Primary button** (“case study”): background #fffcf5 · text #866006 · radius 2px · padding 4px 8px · 475 12px saansFont
- **Secondary button** (“Get started Get started”): background #0b363b · text #ffffff · border 2px solid #0b363b · radius 3.35544e+07px · padding 8px 28px · 600 16px saansFont · shadow oklch(0.9263 0.136 145.2) 0px 0px 0px 4px
- **Link** (“Activation Guide new users toward meanin”): background #ffffff · text #00262b · radius 0px · padding 40px · 475 16px saansFont
- **Card**: background #fafafa · text #00262b · radius 0px · padding 0px · 475 16px saansFont
- **Navigation item** (“Platform Solutions Resources Pricing Sig”): transparent background · text #00262b · radius 0px · padding 0px · 475 16px saansFont

## Do

- Use white as the default canvas.
- Set primary text in Deep Ink (#00262b).
- Reserve Midnight Teal (#00191c) for strong full-width anchors.
- Pair a filled CTA with a clearly outlined alternative.
- Show authentic interface imagery as product proof.
- Keep feature copy concise and left aligned.
- Use pale testimonial colors as distinct case-study panels.

## Don't

- Do not turn every section into a dark block.
- Do not use saturated accents as large page backgrounds.
- Do not crowd headlines with supporting paragraphs.
- Do not add heavy shadows to otherwise flat modules.
- Do not replace product screenshots with generic stock imagery.
- Do not make all content cards equally prominent.
- Do not use unmeasured spacing, colors, or corner radii.

## Agent prompt

Build a SaaS page in Customer.io’s visual language: start with a Gallery White (#ffffff) canvas, Deep Ink (#00262b) typography, and a spacious, left-aligned hero. Use the measured saansFont or a close DM Sans substitute, with oversized, softly weighted headlines and compact supporting copy. Pair a filled Estuary Teal (#0b363b) pill CTA with a white outlined alternative. Give product interface imagery a prominent, clean presentation. Keep most feature sections flat and light, with clear alignment and generous separation; use Midnight Teal (#00191c) for one strong enterprise band and the footer. Frame customer proof in Peach Wash (#fdf0e9) and Sky Wash (#e2f4ff), with portraits, metrics, and concise quotes. Use pale dividers, restrained accent colors, and no heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned headline and copy; product media follows below. | Primary and secondary CTA, Trial reassurance | Oversized dark-teal headline, Pill buttons |
| 2 | product-showcase | Broad, full-width media band with a centered product interface image. | Visual product proof | Large dashboard screenshot, Pale background |
| 3 | logo-cloud | Centered trust statement with a multi-column strip of customer marks. | Social proof | Partner logos, Small case-study labels |
| 4 | other | Single centered, multi-line statement on white. | Value proposition | Inline colored emphasis |
| 5 | feature-grid | Three-column feature row with left-aligned titles and descriptions. | Scannable benefits | Small line icons, Compact copy |
| 6 | category-nav | Single-column section heading with a compact overview link. | Browse platform overview | Small category label, Text link |
| 7 | feature-grid | Multi-column row of capability cards with imagery and links. | Feature discovery, Card links | Product imagery, Short card descriptions |
| 8 | feature-split | Text and actions on one side; product interface visual on the other. | Explore agent, Feature progression | Tabbed feature text, Interface mockup |
| 9 | category-nav | Single-column heading above solution modules. | Solution discovery | Small section label, Large heading |
| 10 | feature-grid | Two-column solution grid with small illustrations and linked copy. | Journey-stage browsing | Illustrated feature tiles, Divided card areas |
| 11 | other | Centered heading on a full-width Midnight Teal band. | Enterprise transition | Light text on dark surface, Small label |
| 12 | integrations | Dark two-column area with a larger integrations feature and stacked assurance modules. | Integration discovery, Trust reassurance | Logo and icon grid, Subtle panel dividers |
| 13 | category-nav | Left-aligned heading with a small link to more case studies. | Browse case studies | Small section label, Text link |
| 14 | testimonials | Two-column testimonial panel with portrait, metrics, and quote. | Customer outcome proof, Read case study | Peach Wash panel, Geometric portrait frame |
| 15 | testimonials | Two-column testimonial panel with quote, outcomes, and portrait. | Customer outcome proof, Read case study | Sky Wash panel, Geometric portrait frame |
| 16 | cta | Centered headline, paired actions, and reassurance on white. | Start free trial, Book a demo | Paired pill CTAs, Trust notes |
| 17 | footer | Full-width dark footer with four navigation columns and a bottom utility row. | Explore site sections, Legal and status links | Light navigation text, Brand mark, Social icons |

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