Dark Mode

# 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

Zap Name
Default (sand border)
Trigger App
Focus (orange border)
Webhook URL
Error (red border)
Description

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