Skip to content

Zapier Inspired Design System

A cream #fffefb canvas, coffee-brown ink, one orange #ff4f00 CTA and Degular Display with Inter: Zapier's tokens for React, Next.js and AI tools.

Get ProDownload DESIGN.md
Primary color
#ff4f00
Typeface
Inter
Shape
Mixed
Base radius
12px
Colors
10
Type tokens
16
Components
29
Spacing values
9

About Zapier Inspired DESIGN.md

Curated by Dov Azencot, updated May 12, 2026. Source zapier.com (opens in a new tab).

Zapier is the original "connect your apps" automation platform, and the marketing surface today reads as confidently mature rather than playfully startup. The brand pairs a warm-cream canvas at #fffefb with deep coffee ink at #201515 and one saturated orange CTA at #ff4f00. The temperature is the trick — every neutral leans slightly warm, none are cool grey, and the cream-not-white canvas is what carries the brand voice before a single word is read. Cards and buttons share a 12px radius, putting Zapier between the friendly-rounded and technical-square camps with a deliberate middle position.

This page packages the system into a single DESIGN.md file using the Google Labs open spec. Inside: 10 colors tokens covering the orange accent, four ink stops, three body greys, and two canvas surfaces; 17 typography styles split between Degular Display 500 for hero work and Inter 400–700 for everything else; 5 radius tokens; 9 spacing tokens on a 4px base unit running up to 64px section padding; and 29 components covering buttons, cards, pricing tiers, hero bands, eyebrows, badges, and a footer along with 11 auto-derived example surfaces.

Feed the file to Claude, Cursor, or GitHub Copilot, and the agent writes React components that respect the warm-cream temperature, the 12px middle radius, and the strict role separation between Degular hero work and Inter body work. Reference tokens directly — every hex, font, weight, and pixel is a quoted value you can drop into Tailwind config or CSS variables. The system is worth studying because it shows how a single saturated accent over a warm neutral ladder can carry a conversion-driven product without ever introducing a second chromatic voice.

What makes it distinct

5 highlights

  1. Single saturated CTAZapier Orange #ff4f00 carries every primary action; cream and coffee fill the rest of the palette
  2. Warm-cream canvas #fffefb instead of pure whiteThe brand's defining temperature signal lives in the neutrals
  3. Two-face type systemDegular Display weight 500 for hero, Inter 400–700 for sub-display, body, buttons, eyebrows
  4. Universal 12px radiusButtons and cards share rounded.md, sitting between friendly-pill and technical-square camps
  5. Coffee-ink #201515 replaces pure blackEven the darkest text carries brown warmth across every surface

Live at zapier.com

Zapier in production, as captured. Scroll the window to see the whole page.

Visit zapier.com (opens in a new tab)
Zapier's website at zapier.com

10 colors

Zapier's system runs on #ff4f00 as its primary voltage, used in 2 of 29 components. Type is set in Inter across 16 tokens from 14px to 56px, weights 400–700. Shape language is mixed across 29 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 1

Surface

Page and card backgrounds · 2

Text

Headlines, body, captions · 6

Other

Specialty colors · 1

16 type tokens

Set in Inter across 16 tokens, from 14px to 56px, weights 400–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-xl56px · weight 500 · lh 56pxThe quick brown fox jumps over the lazy dog
  • display-lg48px · weight 500 · lh 48pxThe quick brown fox jumps over the lazy dog
  • display-md32px · weight 500 · lh 36px · tracking 1pxThe quick brown fox jumps over the lazy dog
  • display-sub-lg48px · weight 500 · lh 49.92pxThe quick brown fox jumps over the lazy dog
  • display-sub-md32px · weight 400 · lh 40pxThe quick brown fox jumps over the lazy dog
  • display-sub-sm24px · weight 600 · lh 30px · tracking -0.6pxThe quick brown fox jumps over the lazy dog
  • display-xs20px · weight 700 · lh 25px · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • body-lg20px · weight 400 · lh 30px · tracking -0.2pxThe quick brown fox jumps over the lazy dog
  • body-md18px · weight 400 · lh 27pxThe quick brown fox jumps over the lazy dog
  • body-md-strong18px · weight 600 · lh 27pxThe quick brown fox jumps over the lazy dog
  • body-sm16px · weight 400 · lh 24pxThe quick brown fox jumps over the lazy dog
  • body-sm-strong16px · weight 600 · lh 24pxThe quick brown fox jumps over the lazy dog
  • caption14px · weight 400 · lh 21pxThe quick brown fox jumps over the lazy dog
  • eyebrow-uppercase14px · weight 500 · lh 14px · tracking 1pxThe quick brown fox jumps over the lazy dog
  • button-md18px · weight 600 · lh 27pxThe quick brown fox jumps over the lazy dog
  • button-sm14.4px · weight 700 · lh 14.4px · tracking 0.144pxThe quick brown fox jumps over the lazy dog

Radii and spacing

5 corner radii and 9 spacing values. Shape language: mixed, on a 12px base radius.

Radii5

  • none0px
  • sm6px
  • md12px
  • pill9999px
  • full9999px

Spacing9

  • xxs2px
  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl24px
  • 2xl32px
  • 3xl48px
  • 4xl64px

29 components

Each rendered from its tokens (color, type, radius, padding) on Zapier's own canvas.

  • Nav Bar
    Nav Barnav-bar
  • Nav Link
    Nav Linknav-link
  • Button Primary
    Button Primarybutton-primary
  • Button Secondary
    Button Secondarybutton-secondary
  • Button Tertiary
    Button Tertiarybutton-tertiary
  • Button Text
    Button Textbutton-text
  • Type here…
    Text Inputtext-input
  • Card Content
    Card Contentcard-content
  • Card Feature Cream
    Card Feature Creamcard-feature-cream
  • Card Feature Dark
    Card Feature Darkcard-feature-dark
  • Pricing Card
    Pricing Cardpricing-card
  • Pricing Card Featured
    Pricing Card Featuredpricing-card-featured
  • Hero Band
    Hero Bandhero-band
  • Hero Band Dark
    Hero Band Darkhero-band-dark
  • Content Band Cream
    Content Band Creamcontent-band-cream
  • Content Band Light
    Content Band Lightcontent-band-light
  • Eyebrow Uppercase
    Eyebrow Uppercaseeyebrow-uppercase
  • Badge Pill
    Badge Pillbadge-pill
  • Footer
    Footerfooter
  • Ex Pricing Tier
    Ex Pricing Tierex-pricing-tier
  • Ex Pricing Tier Featured
    Ex Pricing Tier Featuredex-pricing-tier-featured
  • Ex Product Selector
    Ex Product Selectorex-product-selector
  • Ex Cart Drawer
    Ex Cart Drawerex-cart-drawer
  • Ex App Shell Row
    Ex App Shell Rowex-app-shell-row
  • Ex Data Table Cell
    Ex Data Table Cellex-data-table-cell
  • Ex Auth Form Card
    Ex Auth Form Cardex-auth-form-card
  • Ex Modal Card
    Ex Modal Cardex-modal-card
  • Ex Empty State Card
    Ex Empty State Cardex-empty-state-card
  • Ex Toast
    Ex Toastex-toast

The system, in use

Zapier's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Zapier
Get started

Plan, build and ship in one place

Bring your team's work together, from the first idea to the final release.

Get startedBook a demo
ZapierA
Active users12,489
Projects342
Tasks done8,921
Avg. response1.8h
ActivityLast 30 days

Zapier design system FAQ

Zapier's tokens, its components and how to use this DESIGN.md in your project.

Related reading

Specs, directories and component libraries that pair with this design system.

Use Zapier Inspired in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Zapier Inspired.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Zapier Inspired's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

Overview

Zapier is the original "connect your apps" workflow automation platform, and the marketing surface today reads as confidently mature. The brand pairs a warm-cream canvas ({colors.canvas} — #fffefb) with deep coffee ink ({colors.ink} — #201515) and a single saturated orange ({colors.primary} — #ff4f00) CTA. The warmth in the neutrals — slightly cream rather than pure white — is the brand's defining temperature signal.

Type carries the second voice. The proprietary Degular Display family carries hero displays at weight 500. The brand uses Inter for everything else — sub-displays, body, button, eyebrow. The two-face pairing reads as "the brand has its own typeface for the loud moments and uses the workhorse for the rest" — modest and unflashy.

Cards are universally {rounded.md} 12px. Buttons share the same 12px radius — not pills, not square. The brand sits between the friendly-rounded and the technical-square camps with a deliberate middle position.

Key Characteristics:

  • A single primary CTA color ({colors.primary} — #ff4f00) — saturated orange. The brand's conversion signature.
  • Warm-cream canvas ({colors.canvas} — #fffefb) — not pure white. The temperature IS the brand voice.
  • Deep coffee ink ({colors.ink} — #201515) — not pure black. Warmth carries through to text.
  • Proprietary Degular Display for hero-scale, Inter for everything else. Two-face system.
  • {rounded.md} 12px for buttons and cards — the brand's middle-radius signature.
  • A muted cream / coffee neutral ladder — {colors.canvas-soft} (#f8f4f0), {colors.mute} (#c5c0b1), {colors.body-mid} (#939084), {colors.body} (#605d52) — every neutral carries warmth, none are cool grey.

Known Gaps

  • Semantic palette: the brand doesn't surface a separate status / validation palette on the marketing pages — error, success, and warning cues borrow from the ink + orange hierarchy rather than dedicated tokens.
  • Elevation tiers: depth is captured as a flat / hairline / soft-card three-step ladder, but progressive shadow stops (sm / md / lg / xl) aren't documented. Cards rely on surface contrast against canvas rather than layered shadows.
  • Hover and focus states: the spec captures resting colors, not pointer-down or keyboard-focus variants. Primary CTA hover, outline button focus rings, and text-input focus borders need to be inferred from the resting tokens.
  • Sub-brand and dark mode: Zapier's product surface uses dark mode and a denser sidebar palette inside the app, but this spec captures only the public marketing surface — the product chrome is out of scope.
  • Auto-derived examples: the ex-* surfaces reference brand-native primitives but a handful of fields (e.g., ex-toast elevation, ex-empty-state-card caption typography) carry TO_FILL markers that need an LLM judgment pass to resolve fully.

More systems like this

Airtable, Coda, Miro and 4 more in Workflow & No-code: each brand's colors, type and components in one file your AI agent builds from.

All 8 in Workflow & No-code

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped