# Zapier · Design system migration spec

> Source: https://zapier.com  ·  Curated by OpenDesign  ·  en

> A masterclass in clean, enterprise SaaS design that balances approachable warmth with authoritative professionalism through strong typography and intentional whitespace.

## 1. Identity DNA

The system's identity is defined by four core principles: automation, integration, governance, and AI. It operates with the clarity and control of an enterprise dashboard for AI automation, where every interface element reinforces a sense of professional reliability.

**One-liner:** An enterprise-grade SaaS platform that unifies AI governance and workflow automation
**Keywords:** automation · AI governance · integration · enterprise · workflow
**Analogy:** A neutral command center for connecting AI to business tools

## 2. Color

The palette is built for high contrast and trust, with a single orange accent reserved exclusively for primary calls to action. This restrained approach ensures CTAs are unmistakable and the overall interface remains professional and distraction-free.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFDFB` | main background |
| `--bg-soft` | `#F8F4F0` | card background |
| `--bg-quiet` | `#ECEAE3` | quiet area |
| `--ink` | `#201515` | body text |
| `--ink-soft` | `#36342E` | secondary text |
| `--muted` | `#605D52` | placeholder |
| `--muted-soft` | `#C5C0B1` | weak hint |
| `--accent` | `#FF4F00` | single accent |
| `--line` | `rgba(32,21,21,0.1)` | divider |

**Color principle:** Warm, paper-like neutrals paired with a high-chroma, energetic orange

The principle is to use color sparingly, reserving its most vibrant expression for the single most important action on any given screen.

## 3. Typography

Typography employs a clean, professional grotesque-sans throughout, establishing a voice that is clear and authoritative without being sterile. Headlines are set with tight letter-spacing and semi-bold weight for presence, while body text uses regular weight and comfortable line-height for extended readability.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 600 | -1px | Main hero headline |
| heading-lg | 48px | 1.0 | 500 | -0.5px | Section headlines |
| stat | 32px | 1.0 | 500 | -0.32px | Large metric numbers |
| body-lg | 20px | 1.2 | 400 | -0.2px | Hero subheadline |
| body | 16px | 1.5 | 400 | normal | General body text and labels |
| caption | 14px | 1.1 | 500 | 0.48px | Small uppercase labels and metadata |

**Type rules:**
- Use geometric-sans for impactful headlines with tight letter-spacing
- Use humanist-sans for readable body text at standard sizes
- Uppercase transform with letter-spacing for small metadata labels

## 4. Spacing

A consistent vertical rhythm, underpinned by generous whitespace, structures every component and section.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace defines the layout, with a base 4px unit scaling up to large structural blocks

## 5. Surfaces

Depth is communicated through minimal, precise shadow and border treatments—just enough to separate elements from the background. Surfaces are defined by subtle elevation, not heavy ornamentation.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 1px 3px rgba(0,0,0,0.08)
  - 0 4px 12px rgba(0,0,0,0.05)
- **Borders:** Subtle 1px solid borders using muted neutral tones

## 6. Layout

The layout skeleton is a centered single-column composition with a full-width hero to capture attention. Content below is constrained to a comfortable reading width, creating a clear and focused path from value proposition to conversion.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column hero layout transitioning to grid-based feature sections

## 7. Motion & Interaction

Motion is applied with deliberate subtlety, used to provide feedback and guide focus rather than to decorate. Interactions like hover states and transitions are smooth and immediate, reinforcing the system's responsiveness and control.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
- **Patterns:**
  - Smooth opacity fades on state changes
  - Accelerating entrance animations for content blocks

- **Hover:** Cursor changes to pointer; button and link colors subtly shift or brighten
- **Click:** Instant visual feedback with minimal micro-interaction delay
- **Transition:** 0.25s ease-in-out for border-color changes, 0.2s for text color
- **Keyboard:** Standard sequential focus navigation with clear, subtle focus indicators

## 8. Voice & Don'ts

The editorial voice is professional yet approachable, delivering clear value propositions in short, declarative statements. It avoids jargon and aggressive sales language, opting instead for confidence built on clarity.

- **Tone:** Empowering, authoritative, and highly professional
- **Headline style:** Concise, high-impact statements emphasizing user control
- **CTA style:** Direct and action-oriented (e.g., 'Start free with email')
- **Avoid:** Hype-driven buzzwords without substance / Passive or overly formal language / Ambiguous or confusing technical jargon

### Don'ts
- ❌ Don't use vibrant gradients — the screenshot shows a clean, mostly flat layout with warm neutrals
- ❌ Don't use heavy drop shadows — the screenshot shows subtle, soft elevation or flat borders
- ❌ Don't use wide letter-spacing on headlines — the screenshot shows tightly tracked display text
- ❌ Don't center-align body paragraphs — the screenshot shows left-aligned readable copy
- ❌ Don't use cold blue accents — the screenshot shows a warm, energetic orange as the primary action color
- ❌ Don't use highly decorative typography — the screenshot shows legible, geometric and humanist sans-serifs

The system deliberately avoids decorative fonts, heavy shadows, and cluttered layouts to maintain its core promise of clean, trustworthy professionalism.

## System Prompt (paste into AI tool)

```
Zapier is a professional SaaS platform focused on AI governance and workflow automation. The core palette uses warm, paper-like off-whites (#FFFDFB, #F8F4F0) and deep inks (#201515, #36342E) paired with a singular, high-chroma orange (#FF4F00) for primary actions. Typography relies on clean geometric-sans for display and humanist-sans for body text. The layout is spacious and centered, transitioning from large hero sections to organized content grids. Avoid using decorative fonts, heavy shadows, or cold color temperatures. Prioritize clear hierarchy, generous whitespace, and subtle borders to maintain the platform's clean, trustworthy, and enterprise-grade aesthetic.
```
