Zapier

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 a 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} 12 px. Buttons share the same 12 px 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} 12 px 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.

Colors

Brand & Accent

• Zapier Orange ({colors.primary} — #ff4f00): The single brand accent. Every primary CTA pill, every conversion target. The saturated orange IS the brand.

Surface

• Canvas ({colors.canvas} — #fffefb): Warm off-white page background.
• Canvas Soft ({colors.canvas-soft} — #f8f4f0): Cream-tinted soft surface for cards / inset regions.

Text

• Ink ({colors.ink} — #201515): Deep coffee — every heading and primary text.
• Ink Soft ({colors.ink-soft} — #2f2a26): Near-black with brown warmth.
• Ink Mid ({colors.ink-mid} — #36342e): Mid-emphasis text.
• Body ({colors.body} — #605d52): Default body text color.
• Body Mid ({colors.body-mid} — #939084): Secondary body / metadata.
• Mute ({colors.mute} — #c5c0b1): Lowest-priority text — fine print, low-emphasis captions.

Semantic

The brand doesn't surface a separate semantic palette on its marketing pages. Status / validation cues borrow from the ink + orange hierarchy.

Typography

Font Family

Two faces ladder the system: 1. Degular Display — proprietary geometric display sans used for hero headlines at weight 500. The brand's typographic signature. 2. Inter — used for sub-displays, body, links, buttons, and eyebrows. Weights 400 / 500 / 600 / 700 are present.

Hierarchy

Principles

• Degular Display 500 for hero, Inter for everything else. Strict role separation.
• Positive tracking on the Degular eyebrow — 1 px at 14 px is the brand's signature label style.
• Sentence-case headlines. The brand never uppercases display sizes.

Note on Font Substitutes

Degular Display is proprietary. Open-source substitutes: - Display — Inter weight 500 at hero scale comes closest. Mona Sans weight