Design System

# Design System Inspiration of Zapier

A workflow-automation brand whose surface combines warm-cream neutrals (#fffefb canvas, #f8f4f0 soft cream) with deep coffee ink (#201515) and a single saturated orange CTA accent (#ff4f00). Type pairs the proprietary Degular Display family at hero scale with Inter for sub-displays and body, giving the brand a confident-warm rather than cool-tech voice.

Sign up free Talk to sales

Color Palette

## A single orange on warm cream.

The brand operates from a single chromatic signature — Zapier orange — used as every primary CTA. It sits against a warm-cream canvas, never pure white, and pairs with deep coffee ink, never pure black. Every neutral in the ladder is warm-toned; there is no cool grey in the system.

### Brand & Accent

Zapier Orange#ff4f00The brand's universal primary CTA color.
On Primary#fffefbWarm-white label on orange and dark fills.

### Surface — Warm Creams

Canvas#fffefbWarm off-white page background.
Canvas Soft#f8f4f0Cream-tinted inset for cards and bands.

### Text — Warm Coffee Scale

Ink#201515Deep coffee — every heading and primary text.
Ink Soft#2f2a26Near-black with brown warmth.
Ink Mid#36342eMid-emphasis text.
Body#605d52Default body text color.
Body Mid#939084Secondary body / metadata.
Mute#c5c0b1Fine print, low-emphasis captions.

Typography

## Two faces, two roles.

Degular Display weight 500 carries the loud moments — hero displays and the UPPERCASE eyebrow. Inter handles everything else: sub-displays, body, links, buttons. Hero is 56 px / weight 500 / sentence case; the brand never uppercases display sizes. (Substitute used here: Inter weight 500 in place of proprietary Degular Display.)

display-xl56 / 500 · Inter (Degular sub)
Automate at scale.
display-lg48 / 500 · Inter (Degular sub)
Built for the busy.
display-md32 / 500 / 36 · 1px track
Section display headline.
display-sub-lg48 / 500 / 49.92 · Inter
Inter sub-display.
display-sub-md32 / 400 / 40 · Inter
Inter sub-display, regular.
display-sub-sm24 / 600 / 30 · −0.6 track
Card title in Inter semibold.
display-xs20 / 700 / 25 · −0.5 track
Inline micro-heading.
body-lg20 / 400 / 30 · −0.2 track
Lead paragraph for hero supporting text.
body-md18 / 400 / 27 · Inter
Default body paragraph for marketing copy.
body-md-strong18 / 600 / 27 · Inter
Bolded inline body for emphasis.
body-sm16 / 400 / 24 · Inter
Secondary body for captions and meta.
body-sm-strong16 / 600 / 24 · Inter
Bold caption for labels.
caption14 / 400 / 21 · Inter
Fine print for legal copy and footnotes.
eyebrow-uppercase14 / 500 / 14 · 1px track
Section eyebrow
button-md18 / 600 / 27 · Inter
Primary button label
button-sm14.4 / 700 / 14.4 · 0.144 track
Small button label

Button Variants

## Four roles, one 12 px shape.

Every CTA shares the 12 px middle radius — not a pill, not a square. Primary is saturated orange, secondary is dark coffee ink, tertiary is an outline on cream, and text-only sits inside nav and cards.

Sign up free
button-primary
Saturated orange — the brand's conversion signature. Used for every hero CTA and primary form action.
Talk to sales
button-secondary
Dark coffee ink fill. Paired with the orange primary for two-CTA hero rows.
Learn more
button-tertiary
Outline on cream — 1 px ink border. Used inside cards and feature rows.
button-text
Text-only CTA. Lives inside content cards and the top nav.

Cards & Containers

## Cream cards on cream canvas.

Default content cards use canvas-soft cream as a subtle inset on the canvas page. Feature-dark cards flip polarity to deep coffee. Pricing cards use 1 px ink hairline borders; the featured tier polarity-flips to ink fill.

card-content

#### The default cream card.

Canvas-soft cream fill on canvas page. Ink coffee text. 12 px radius, 24 px padding.

card-feature-cream

#### Feature card, cream.

Same chrome as card-content. Hosts a headline, body, and product illustration.

card-feature-dark

#### Feature card, dark.

Polarity-flipped to deep coffee ink. Warm-white text. Used for visual rhythm between cream rows.

pricing-card

#### Default pricing tier.

Canvas fill with 1 px solid ink hairline border. Ink coffee text.

pricing-card-featured

#### Featured tier, dark.

Polarity-flipped to ink coffee fill. Warm-white text. Marks the recommended plan.

Form Elements

## A hairline ink border.

Text inputs share a 6 px radius (smaller than buttons and cards) with a 1 px solid ink hairline border on canvas. Body text in Inter 18 px regular.

Work email
Company
Team size

Spacing Scale

## A 4 px ladder.

Nine tokens climb from 2 px to 64 px. Section bands use 64 px top/bottom; cards use 24 px interior.

xxs2 px
xs4 px
sm8 px
md12 px
lg16 px
xl24 px
2xl32 px
3xl48 px
4xl64 px

Border Radius Scale

## 12 px is the brand's middle.

Five shape tokens: zero for full-bleed bands, 6 px for inputs, 12 px for buttons and cards (the brand signature), and 9999 px for status pills and circular icons.

none0 px
sm6 px
md12 px
pill9999 px
full9999 px

Elevation & Depth

## Three levels, no shadow.

The brand carries elevation through surface contrast and 1 px hairline borders — never drop shadows. Cream-on-canvas IS the visual lift.

Level 0 — Flat No shadow, no border. Default for hero text.
Level 1 — Hairline 1 px solid ink border. Pricing cards and outline buttons.
Level 2 — Soft Card Canvas card on cream wrap. Surface contrast IS the elevation.

Signature Components

## The pieces that make this Zapier.

A cream hero band hosting the 56 px Degular weight 500 headline, a polarity-flipped dark coffee hero, a cream content band that follows hero, the UPPERCASE Degular eyebrow with positive tracking, and the cream badge-pill for in-product status.

hero-band — display-xl · Degular sub w500

### Automate the work.

hero-band-dark — polarity-flipped

### Stay in flow.

### A cream content band that follows hero.

Canvas-soft surface, 12 px radius, 48 px Degular sub display headline. Used for editorial sections beneath the hero.

### A canvas content band, hairline.

Canvas fill with a 1 px cream hairline. The lighter polarity for the second editorial row.

Eyebrow — uppercase, 1 px track
badge-pill — inline status
New feature Beta Free forever

Responsive Behavior

## Three breakpoints, one rhythm.

The marketing grid collapses cleanly: hero stays text-first at every viewport. Section padding steps from 48 px desktop to 32 px tablet to 20 px mobile.

Breakpoint | Width | Key changes
--- | --- | ---
Mobile | < 768 px | Hero scales 56 → 40 px. All grids 1-up. Hamburger nav.
Tablet | 768 – 1023 px | 2-up feature grids. Section padding 72 / 32.
Desktop | ≥ 1024 px | Full marketing grid. Section padding 96 / 48.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding