Design System
Inspired by Zapier

A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value — visualized.

Get Started View Documentation
01 / Colors

Color Palette

Primary
Zapier Black
#201515
Primary text, headings
Cream White
#fffefb
Page background
Off White
#fffdf9
Secondary surface
Brand Accent
Zapier Orange
#ff4f00
Primary CTA, active states
Neutral Scale
Dark Charcoal
#36342e
Secondary text, borders
Warm Gray
#939084
Muted text, labels
Sand
#c5c0b1
Borders, dividers
Mid Warm
#b5b2aa
Alternate borders
Light Sand
#eceae3
Ghost button bg, surfaces
02 / Typography

Typography Scale

Display Hero
Display Hero — 56px / 500 / 0.90 / Degular Display
Display Hero SM
Display Hero SM — 40px / 500 / 0.90 / Degular Display
Section Heading
Section Heading — 48px / 500 / 1.04 / Inter
Sub-heading Large
Sub-heading LG — 36px / 500 / normal / -1px / Inter
Card Title
Card Title — 24px / 600 / normal / -0.48px / Inter
Body Large — Automate your work across thousands of app integrations. Build powerful workflows in minutes.
Body Large — 20px / 400 / 1.40 / -0.2px / Inter
Body Emphasis
Body Emphasis — 18px / 600 / 1.00 / Inter
Body Medium — Navigation and interface text
Body Medium — 16px / 500 / 1.25 / Inter
Body Semibold — Active states
Body Semibold — 16px / 600 / 1.16 / Inter
Button Label
Button — 14px / 600 / normal / Inter
Caption — Labels and metadata
Caption — 14px / 500 / 1.43 / Inter
SECTION LABEL
Caption Upper — 14px / 600 / uppercase / 0.5px / Inter
MICRO LABEL
Micro — 12px / 600 / uppercase / 0.5px / Inter
03 / Buttons

Button Variants

Start Free
Primary Orange
Get Started
Dark CTA
Learn More
Ghost / Light
Integrations
Pill
Play Video
Overlay
Tab Navigation
Overview
Integrations
Pricing
Enterprise
04 / Cards

Card Examples

Integration

Connect Your Apps

Link your favorite tools and automate workflows between them. No code required, set up in minutes.

Featured

AI Automation

Build intelligent workflows with AI-powered actions. Transform, summarize, and route data automatically.

Workflow

Multi-step Zaps

Chain multiple actions together for complex automations. Trigger once, automate everything downstream.

05 / Forms

Form Elements

Default (sand border)
Focus (orange border)
Error (red border)
06 / Spacing

Spacing Scale

4
8
12
16
20
24
32
40
48
64
07 / Radius

Border Radius Scale

3px
Spans
4px
Buttons
5px
Cards
8px
Large buttons
14px
Social icons
20px
Pills
08 / Elevation

Elevation & Depth

Level 0: Flat
No border emphasis
Level 1: Sand Border
1px solid #c5c0b1
Level 1b: Strong
1px solid #36342e
Level 2: Active Tab
Inset orange underline
Level 2b: Hover Tab
Inset sand underline
Focus
Orange focus ring