--- version: alpha name: Zapier Inspired website: "https://zapier.com" description: An inspired interpretation of Zapier's design language — a workflow-automation platform whose surface combines warm-cream neutrals (`#fffefb` canvas, `#f8f4f0` soft cream) with deep coffee ink (`#201515`) and a single saturated orange CTA accent (`#ff4f00`); typography 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. seo: title: "Zapier Design System for React — Orange #ff4f00, Degular, 30 components" metaDescription: "Zapier's design language as a DESIGN.md file. Orange #ff4f00, cream #fffefb canvas, Degular Display + Inter, 30 components. For React, Next.js, and AI tools." highlights: - "Single saturated CTA — Zapier Orange #ff4f00 carries every primary action; cream and coffee fill the rest of the palette" - "Warm-cream canvas #fffefb instead of pure white — the brand's defining temperature signal lives in the neutrals" - "Two-face type system — Degular Display weight 500 for hero, Inter 400–700 for sub-display, body, buttons, eyebrows" - "Universal 12px radius — buttons and cards share rounded.md, sitting between friendly-pill and technical-square camps" - "Coffee-ink #201515 replaces pure black — even the darkest text carries brown warmth across every surface" tags: - "Workflow & No-code" - "Productivity & SaaS" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is Zapier's primary brand color?" answer: "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." - id: "typography" title: "What typography does Zapier use, and what should I use as a substitute?" answer: "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." - id: "warm-canvas" title: "Why does Zapier use a cream canvas instead of pure white?" answer: "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." - id: "shape-language" title: "What is Zapier's signature corner radius?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React workflow app?" answer: "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." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "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." colors: primary: "#ff4f00" on-primary: "#fffefb" ink: "#201515" ink-soft: "#2f2a26" ink-mid: "#36342e" body: "#605d52" body-mid: "#939084" mute: "#c5c0b1" canvas: "#fffefb" canvas-soft: "#f8f4f0" typography: display-xl: fontFamily: Degular Display, Inter, system-ui, -apple-system, sans-serif fontSize: 56px fontWeight: 500 lineHeight: 56px display-lg: fontFamily: Degular Display, Inter, system-ui, sans-serif fontSize: 48px fontWeight: 500 lineHeight: 48px display-md: fontFamily: Degular Display, Inter, system-ui, sans-serif fontSize: 32px fontWeight: 500 lineHeight: 36px letterSpacing: 1px display-sub-lg: fontFamily: Inter, system-ui, sans-serif fontSize: 48px fontWeight: 500 lineHeight: 49.92px display-sub-md: fontFamily: Inter, system-ui, sans-serif fontSize: 32px fontWeight: 400 lineHeight: 40px display-sub-sm: fontFamily: Inter, system-ui, sans-serif fontSize: 24px fontWeight: 600 lineHeight: 30px letterSpacing: -0.6px display-xs: fontFamily: Inter, system-ui, sans-serif fontSize: 20px fontWeight: 700 lineHeight: 25px letterSpacing: -0.5px body-lg: fontFamily: Inter, system-ui, sans-serif fontSize: 20px fontWeight: 400 lineHeight: 30px letterSpacing: -0.2px body-md: fontFamily: Inter, system-ui, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 27px body-md-strong: fontFamily: Inter, system-ui, sans-serif fontSize: 18px fontWeight: 600 lineHeight: 27px body-sm: fontFamily: Inter, system-ui, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 24px body-sm-strong: fontFamily: Inter, system-ui, sans-serif fontSize: 16px fontWeight: 600 lineHeight: 24px caption: fontFamily: Inter, system-ui, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 21px eyebrow-uppercase: fontFamily: Degular Display, Inter, system-ui, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 14px letterSpacing: 1px button-md: fontFamily: Inter, system-ui, sans-serif fontSize: 18px fontWeight: 600 lineHeight: 27px button-sm: fontFamily: Inter, system-ui, sans-serif fontSize: 14.4px fontWeight: 700 lineHeight: 14.4px letterSpacing: 0.144px rounded: none: 0px sm: 6px md: 12px pill: 9999px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "{spacing.md} {spacing.xl}" nav-link: textColor: "{colors.ink}" typography: "{typography.body-sm}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.xl}" button-secondary: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.xl}" button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.xl}" button-text: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.lg}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" card-content: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" card-feature-cream: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" card-feature-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" pricing-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" pricing-card-featured: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.xl}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "{spacing.4xl} {spacing.xl}" hero-band-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.display-xl}" padding: "{spacing.4xl} {spacing.xl}" content-band-cream: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "{spacing.4xl} {spacing.xl}" content-band-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "{spacing.4xl} {spacing.xl}" eyebrow-uppercase: textColor: "{colors.ink}" typography: "{typography.eyebrow-uppercase}" badge-pill: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "{spacing.xs} {spacing.md}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas-soft}" typography: "{typography.body-sm}" padding: "{spacing.3xl} {spacing.xl}" # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ─── ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.mute}" rounded: "{rounded.md}" padding: "{spacing.xl}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" padding: "{spacing.xl}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.xl}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.xl}" item-divider: "{colors.mute}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.mute}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.xl}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.xl}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.md}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}" --- ## 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.