What is Zapier's primary brand color?

Zapier's accent is a single saturated orange — #ff4f00 — and it carries every primary CTA across the marketing surface. The rest of the palette is a warm-neutral ladder: cream canvas at #fffefb, soft cream at #f8f4f0, and coffee ink at #201515. Orange is never used as a secondary fill or as decoration; it exists only to point at the next conversion action. Pair it with ink on cream and you have the brand's entire three-token conversion rhythm.

What typography does Zapier use, and what should I use as a substitute?

Zapier runs a two-face system: the proprietary Degular Display at weight 500 for hero headlines (56px, 48px, 32px) and the eyebrow uppercase label, plus Inter at weights 400–700 for every sub-display, body row, button label, and caption. The pairing reads as restrained — one custom typeface for the loud moments, one workhorse for everything else. If Degular Display isn't available, Inter weight 500 at hero scale comes closest, with Mona Sans weight 500 as a softer alternative.

Why does Zapier use a cream canvas instead of pure white?

The warmth IS the brand voice. Canvas at #fffefb and soft canvas at #f8f4f0 are cream-tinted off-whites rather than pure #ffffff, and even the body greys (#605d52, #939084, #c5c0b1) carry brown warmth instead of cool slate. The same logic extends to the ink at #201515 — a deep coffee rather than pure black. The temperature signal is what separates Zapier from a generic cool-tech SaaS palette.

What is Zapier's signature corner radius?

Buttons and cards share a single 12px radius (rounded.md), which positions the brand between the friendly-rounded camp (pills, 9999px) and the technical-square camp (sharp corners, 0px). Inputs drop to a tighter 6px (rounded.sm). The pill radius (9999px) is reserved for status badges and inline metadata pills. The 12px middle is the brand's shape signature — never CTAs as pills, never CTAs as sharp rectangles.

Can I use this DESIGN.md to build my own React workflow app?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured tokens. The agent reproduces Zapier's discipline: single orange CTA, warm-cream surfaces, 12px middle radius, Degular-for-hero and Inter-for-everything-else type split. Every color, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or your own component library.

What's missing from this DESIGN.md spec?

A few things: no separate semantic palette is documented (status and validation cues borrow from the ink + orange hierarchy), elevation is capped at a single soft surface-contrast tier rather than progressive shadow stops, and hover-state colors aren't extracted. The auto-derived examples (ex-pricing-tier, ex-toast, ex-modal-card) reference brand-native primitives but a handful of fields rely on an LLM judgment pass to fully resolve. Spec captures the dominant marketing surface — sub-product palettes are not covered.

Zapier Inspired Design System

Zapier's design language as a DESIGN.md file.

About Zapier Inspired DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source zapier.com

Workflow & No-code
Productivity & SaaS

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 color 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 30 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

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

Live at zapier.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

zapier.com

Explore Zapier Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Zapier Inspired design system FAQ

Common questions about Zapier Inspired's tokens, components, and how to use this DESIGN.md in your project.

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

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Zapier Inspired in your project

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

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→