Design System

Automate
anything.
No code needed.

A friendly, approachable design system with bold orange accents, clean typography, and generous whitespace that makes powerful automation feel simple.

18 color tokens 9 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Clean light palette with bold Zapier Orange accents. 18 tokens across neutrals, brand, semantic states, and status indicators.

Clean White
#ffffff
Primary background, cards
Snow Gray
#f9fafb
Alternating sections
Cloud Gray
#f3f4f6
Disabled states, muted
Border Light
#e5e7eb
Borders, dividers
Border Medium
#d1d5db
Input outlines, grids
Slate
#6b7280
Placeholders, labels
Iron
#4b5563
Secondary text
Midnight
#1a1a2e
Primary text, headings
Zapier Orange
#ff4a00
Brand, CTAs, links
Orange Hover
#e64300
Hover states
Orange Light
#fff4ed
Light tint backgrounds
Orange Glow
#ff6b2b
Decorative highlights
Blue Link
#2563eb
Info links, help text
Green Success
#059669
Active, connected
Red Error
#dc2626
Errors, disconnected
Typography

Type Scale

DM Sans as primary typeface (Inter substitute). Geometric structure with friendly curves for an approachable, modern voice.

Display Automate anything 48px / 1.0 / -0.025em
Heading-xl Build workflows 36px / 1.2 / -0.025px
Heading-lg Connect your apps 30px / 1.2 / -0.02px
Heading Section heading 24px / 1.3 / -0.02px
Body Default body text for readable content 16px / 1.6 / 0
Body-sm Dense data, comparison rows 14px / 1.5 / 0
Caption Meta info · Labels · Helper text 13px / 1.5 / 0

Fonts

Primary DM Sans 400-700 · 13-18px
Body DM Sans Text 400-700 · 14-18px · Longer reading
Mono DM Mono 400-700 · 13-14px · Code only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Friendly density with generous breathing room. 14-step spacing scale, 5 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
4040px
6464px
120120px

Border Radius

sm 4px
default 6px
buttons 8px
cards 12px
pill 9999px
Elevation

Surfaces

Clean, layered surface system with subtle shadows on hover. 4 distinct levels from white canvas to bordered containers.

Clean White #ffffff
Snow Gray #f9fafb
Cloud Gray #f3f4f6
Bordered #d1d5db

Status Indicators

Active
Zap running normally
Error
Zap needs attention
Paused
Zap turned off
Components

Button Variants

Primary CTA (Zapier Orange), secondary, and ghost variants. Clean, friendly, and accessible across all interaction states.

Primary CTA Button
Main call to action — highest visual weight
.btn-primary
Zapier Orange (#ff4a00) background, white text, 8px radius, subtle shadow. Use exclusively for the single most important action.
Secondary Button
Supporting actions, navigation
.btn-secondary
White background, Midnight text, Border Medium outline. For less prominent actions that still need visual presence.
Ghost Button
Tertiary actions, inline links
.btn-ghost
Zapier Orange text, transparent background. For less prominent actions that maintain brand connection.
Input Field
User text input
input
White background, Border Medium outline, 8px radius. Focus state uses Zapier Orange border with subtle glow ring.
Feature Card
Showcasing integrations and features
.card
⚡
Connect 6,000+ apps
Link your favorite tools and automate workflows without writing a single line of code.
Clean White background, Border Light outline, 12px radius, 24px padding. Hover adds subtle shadow for depth.
Guidelines

Do's & Don'ts

Do — Embrace
  • Clean White (#ffffff) as primary background
  • Midnight (#1a1a2e) for all primary text
  • Zapier Orange (#ff4a00) for CTAs and key actions
  • Green Success (#059669) for active states
  • 8px radius for buttons, 12px for cards
  • 4px-based spacing with friendly breathing room
  • Subtle shadows on hover for depth
Don't — Avoid
  • Orange for large background surfaces
  • More than two accent colors per view
  • Hard sharp corners on cards or buttons
  • Orange text on light orange backgrounds
  • Dense packing without breathing room
  • Font families outside DM Sans / Inter
  • Mono fonts for non-code content