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

# Zapier · Design System

> Warm editorial clarity for connected automation

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

Zapier’s homepage pairs warm off-white surfaces and crisp black typography with vivid orange calls to action. Large editorial headlines, generous section spacing, and embedded product visuals make complex automation feel approachable and dependable.

## North star

Use warm, spacious editorial layouts to make automation feel clear, credible, and easy to act on.

## Overview

The visual system is built on a warm near-white canvas (#fffefb), with pale cream and soft stone section bands creating broad, calm transitions down the page. Zapier orange (#ff4f00) is reserved for high-intent actions and selective headline emphasis, while near-black text provides strong contrast. Inter carries navigation, body copy, labels, and buttons; a light serif adds an editorial voice to selected section headings and testimonials, supported by a distinctive display face for the hero. The opening is centered and spacious, followed by alternating split layouts, product demonstrations, and wide testimonial and trust sections. Product imagery appears in large rectangular frames and is treated as contextual evidence rather than decoration. Most surfaces stay flat: fine borders define cards and security panels, while minimal shadowing keeps the interface crisp. Generous vertical gaps separate dense information into readable, purposeful blocks.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Zapier Orange | `#ff4f00` | `--color-zapier-orange` | accent | Primary signup and story CTAs; selective emphasis within headings and interactive accents. |
| Warm Canvas | `#fffefb` | `--color-warm-canvas` | surface | Main page background and light button text, including the hero and footer directory. |
| Roasted Ink | `#201515` | `--color-roasted-ink` | brand | Primary text and navigation; also forms the dark testimonial and closing CTA bands. |
| Soft Charcoal | `#36342e` | `--color-soft-charcoal` | semantic | Muted body copy, secondary links, and text on lighter surfaces. |
| Oat Cream | `#f8f4f0` | `--color-oat-cream` | surface | Warm feature-section background behind product explanations and demonstrations. |
| Stone Mist | `#eceae3` | `--color-stone-mist` | surface | Broad customer-story and security section background bands. |
| Pale Pebble | `#dfdcd2` | `--color-pale-pebble` | neutral | Measured primarily in a dotted decorative gradient; not a defining interface surface. |
| Olive Gray | `#605d52` | `--color-olive-gray` | semantic | Secondary muted text, especially supporting and footer copy. |
| Warm Divider | `#c5c0b1` | `--color-warm-divider` | semantic | Fine card and component outlines that separate content without heavy elevation. |

### Semantic aliases

`--color-canvas` → `#fffefb` (Warm Canvas) · `--color-surface` → `#f8f4f0` (Oat Cream) · `--color-surface-2` → `#eceae3` (Stone Mist) · `--color-surface-3` → `#201515` (Roasted Ink) · `--color-text` → `#201515` (Roasted Ink) · `--color-text-muted` → `#36342e` (Soft Charcoal) · `--color-text-subtle` → `#605d52` (Olive Gray) · `--color-border` → `#c5c0b1` (Warm Divider) · `--color-accent` → `#ff4f00` (Zapier Orange) · `--color-on-accent` → `#fffefb` (Warm Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#201515` | `#fffefb` | 17.65:1 | AAA |
| `#201515` | `#f8f4f0` | 16.27:1 | AAA |
| `#201515` | `#eceae3` | 14.79:1 | AAA |
| `#36342e` | `#fffefb` | 12.34:1 | AAA |
| `#36342e` | `#f8f4f0` | 11.37:1 | AAA |
| `#36342e` | `#eceae3` | 10.34:1 | AAA |
| `#36342e` | `#201515` | 1.43:1 | fail |
| `#605d52` | `#fffefb` | 6.54:1 | AA |
| `#605d52` | `#f8f4f0` | 6.03:1 | AA |
| `#605d52` | `#eceae3` | 5.48:1 | AA |

### Gradients

- `radial-gradient(rgb(223, 220, 210) 1px, rgba(0, 0, 0, 0) 0px)`
- `linear-gradient(90deg, rgb(255, 79, 0), rgb(240, 208, 219) 33.656%, rgb(222, 164, 200) 66.828%, rgb(101, 88, 230))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 500, 700 | Navigation, body copy, captions, labels, buttons, and most interface text. | Inter |
| Serrif | `--font-display` | webfont | 300, 200 | Light editorial section headings and longer testimonial quotations. | Lora |
| Degular Display | `--font-degular-display` | system | 500 | Hero display headline and primary large display typography. | DM Sans |

- **Inter:** Neutral sans with measured weights from regular to bold; uppercase eyebrow labels use lightly expanded tracking.
- **Serrif:** Measured as a light serif; use restrained weight and tight negative tracking on larger headings.
- **Degular Display:** Medium-weight display styling, compact line height, and clean, unembellished casing.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1 | 0 | — | Degular Display | Large display headings that establish the page’s strongest typographic moments. |
| h1 | 48px | 500 | 1 | 0 | — | Degular Display | Hero headline announcing automation in the agentic era. |
| h2 | 40px | 300 | 1.08 | -0.04em | — | Serrif | Light, editorial section headings, including feature and testimonial areas. |
| h3 | 28px | 300 | 1.25 | -0.015em | — | Serrif | Secondary editorial headings within product and customer-story content. |
| h4 | 20px | 400 | normal | -0.01em | — | Inter | Compact interface or card headings. |
| body | 14px | 400 | 1.5 | 0 | — | Inter | Explanatory copy, product descriptions, and customer-story details. |
| caption | 12px | 400 | 1.5 | 0 | — | Inter | Small supporting notes, metadata, and fine-print labels. |
| button | 16px | 600 | normal | 0 | — | Inter | Prominent action labels, primarily signup and exploration CTAs. |
| nav | 14px | 400 | 1.71 | 0 | — | Inter | Header navigation and utility links. |
| eyebrow | 12px | 400 | 1.5 | 0.04em | uppercase | Inter | Small uppercase category labels above major section headings. |

## Spacing & layout

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

The homepage alternates a centered hero with broad media, single-column feature introductions, and two-column product or testimonial splits. Customer stories and security content expand into wider multi-column arrangements. The measured spacing system uses an 8px base, with a 96px section gap and 16px element gap; keep the overall rhythm spacious rather than tightly packed. Align hero and trust messaging centrally, then use left-aligned copy alongside right-side product media in feature bands. Avoid inventing a fixed max width; retain the generous margins and broad content frames visible in the screenshots.

## Shape & elevation

- Radius: button `4px` · nav `4px` · xs `4px` · sm `8px` · md `12px` · pill `9999px`
- Shadow `hairline` (button): `rgb(32, 21, 21) 0px 0px 0px 1px`
- Motion: standard transition `0.25s ease` on interactive elements.

The page is predominantly flat, with section background changes doing most of the structural work. Use fine warm-gray borders for cards, story panels, and security elements; the measured button shadow is only a one-pixel dark hairline. Keep product media and floating UI layers distinct through framing, not heavy drop shadows.

## Imagery

Use large, rectangular product demonstrations and interface screenshots as the main proof of functionality. The hero media is a soft-focus atmospheric video or image with a small floating control; later sections show app integrations, workflow diagrams, and governance screens. Customer-story imagery uses branded fields or photography. Keep media cleanly framed and let its native color carry visual interest rather than adding decorative overlays.

## Components

### Primary CTA

Zapier-orange button with warm-white text and a thin orange border; measured variants use compact or standard padding and subtle corner rounding.

### Outlined secondary action

Light surface with a dark fine outline and dark Inter label, paired beside orange signup actions or below feature copy.

### Top navigation

Slim light header with dark Inter links, wordmark, utility actions, and an orange signup button at the right.

### Product feature split

Left-aligned eyebrow, editorial heading, explanatory copy, and compact actions paired with a large right-side product demonstration.

### Customer story panel

Warm-gray story area combining a serif quotation, customer identity, outcome figures, and branded media, with fine divider lines.

### Security capability grid

Broad pale-stone band with centered heading, thinly outlined capability cells, and a contained governance control illustration.

### Measured component styles

- **Primary button** (“See more customer stories”): background #ff4f00 · text #fffefb · border 1px solid #ff4f00 · radius 4px · padding 12px 24px · 600 18px Inter
- **Secondary button** (“Start free with Google”): transparent background · text #201515 · border 1px solid #201515 · radius 4px · padding 8px 16px · 600 16px Inter
- **Link** (“Read full story”): transparent background · text #36342e · radius 0px · padding 20px 40px · 400 20px Inter
- **Card** (“Implementing AI in customer service is n”): transparent background · text #201515 · border 1px solid #c5c0b1 · radius 0px · padding 0px · 400 16px Inter
- **Navigation item** (“Skip to content Products Solutions Resou”): transparent background · text #201515 · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep the canvas warm and near-white rather than stark blue-white.
- Reserve Zapier Orange for key actions and selective emphasis.
- Use Inter for interface text and a light serif for editorial contrast.
- Give major sections generous vertical breathing room.
- Pair product copy with large, clear demonstrations.
- Use fine borders instead of heavy card shadows.

## Don't

- Do not flood whole sections with the accent orange.
- Do not make every heading serif or decorative.
- Do not compress the page into a dense dashboard layout.
- Do not add strong shadows or glossy gradients to interface panels.
- Do not treat product imagery as generic ornament.
- Do not invent fixed spacing, widths, or component radii beyond measured values.

## Agent prompt

Build a new SaaS page in Zapier’s warm, editorial visual style. Use Warm Canvas (#fffefb) as the main background, Oat Cream (#f8f4f0) and Stone Mist (#eceae3) for broad section bands, and Roasted Ink (#201515) for primary text and occasional dark blocks. Apply Zapier Orange (#ff4f00) sparingly to primary CTAs and selected heading emphasis. Use Inter for navigation, body, labels, and buttons; reserve a light serif for editorial headings and quotes. Structure the page with a centered opening, generous vertical gaps, alternating copy-and-product-media splits, and wider story or capability sections. Keep product visuals rectangular and informative. Favor fine Warm Divider (#c5c0b1) outlines over shadows, and maintain a calm, spacious reading rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero and broad media frame, followed by a compact customer logo row. | Email signup CTA, Google signup option, Customer trust logos | Centered display headline, Orange primary button, Embedded product video |
| 2 | feature-split | Warm feature band with a centered intro followed by left copy and right demo. | Feature accordions, Template discovery, Enterprise contact action | Warm cream background, Split product demonstration, Paired action buttons |
| 3 | feature-split | Two-column feature row with explanatory copy beside workflow interface imagery. | Expandable feature details, Early-access action, Workflow exploration | Editorial heading, Product flow screenshot, Compact paired buttons |
| 4 | testimonials | Dark two-column testimonial between thin horizontal rules. | Customer proof, Named attribution | Dark background, Serif quotation, Branded customer media |
| 5 | how-it-works | Light section with explanatory introduction, model comparison, and a visual workflow example. | Concept comparison, Interactive progression, Step-by-step explanation | Editorial heading, Multi-column comparison cards, Large illustrative demo |
| 6 | feature-split | Cream feature band pairing explanatory copy with an administration interface image. | Governance feature list, Explore governance action | Left-aligned copy, Right-side audit interface, Warm cream background |
| 7 | testimonials | Stone-toned customer section with centered introduction and side-by-side story content. | Customer story carousel, Read full story link, See more stories action | Large serif quote, Outcome statistics, Customer-branded media |
| 8 | feature-grid | Centered security heading above a wide row of capability cells and a lower control panel. | Security capability overview, Explore security action | Pale stone background, Fine outlined grid, Governance diagram |
| 9 | cta | Centered headline and supporting line on a full-width dark band. | Start free, Talk to sales | Dark inverse surface, Orange text emphasis, Paired action buttons |
| 10 | footer | Light footer with an app-title index, multiple link columns, social links, and legal details. | Alphabetical app browsing, Popular search links, Utility navigation | Multi-column link directory, Small muted labels, Compact brand signature |

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