Zapier

Overview

Zapier is the world's leading AI orchestration platform, enabling businesses to automate workflows and agents across 9,000+ integrated applications. The design system embodies Pragmatic Minimalism—a philosophy that prioritizes clarity, action, and conversion over decorative flourish. The aesthetic is deliberately restrained: a warm, neutral canvas (off-white #fffefb with warm grays #eceae3 to #605d52) provides a calm, professional backdrop, while a bold, action-orange primary (#ff4f00) cuts through the interface to signal clickable intent and drive user engagement. Every pixel serves a purpose; every color choice reinforces the brand's core promise: make automation real, make it simple, make it work.

The voice is direct, confident, and outcome-focused. Zapier speaks in the language of builders and operators—no hype, no jargon, just clear statements about what the platform does and why it matters. Tone examples: 'Actions speak louder than prompts' (headline), 'Use Zapier's AI-powered automation to take real action in 9,000+ apps' (value prop), 'Easily switch between models or providers without slowing work down' (benefit). The brand personality is that of a trusted technical partner—approachable but authoritative, modern but not trendy, focused on outcomes not aesthetics.

Colors

The color system is built on a warm, neutral foundation with strategic accent deployment. Surface colors range from #fffefb (primary background) through a carefully calibrated gray scale (#f8f4f0, #eceae3, #dfdcd2, #d8d8d8) that provides visual hierarchy without coldness. The on-surface text color is #201515, a warm near-black that maintains readability while avoiding harsh contrast. Primary (#ff4f00) is the brand's signature accent—used exclusively on call-to-action buttons, key interactive elements, and data highlights (e.g., stat values like '450K+', '9,000+', '3.39M+'). Secondary (#3860be) and tertiary (#0976b4) are reserved for supporting UI elements, secondary buttons, and informational badges. The outline and outline-variant tokens (#939084, #c5c0b1) define subtle borders and divide

Typography

The type system pairs Degular Display (a geometric, modern display face) for headlines and hero text with Inter (a humanist sans-serif) for body, labels, and UI copy. This pairing creates visual distinction between marketing moments (headlines at 56px, 40px) and functional content (body at 16px, labels at 14px). Display text (56px, fontWeight 500, lineHeight 64px, letterSpacing -0.02em) anchors hero sections with authority; headline-lg (40px, 500 weight) scales down for section headers; body-md (16px, 400 weight, lineHeight 24px) ensures comfortable reading at standard viewport sizes. Label-md (14px, 600 weight, letterSpacing 0.01em) is applied to buttons and form labels to signal interactivity through weight and tracking. Code snippets use JetBrains Mono at 14px with 0.4em letter-spacing

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. Horizontal padding (gutter) is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Sections are separated by lg spacing (40px) vertically, creating a rhythm that feels spacious without excess. The hero section occupies the full viewport height with centered content; CTAs are positioned 24px below the hero copy. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. The system avoids full-width layouts; instead, content is constrained to the container-max (1280px) with breathing room on either side. Stat cards (e.g., '450K+ Agents built') are laid out in a 3-column grid on desktop, collapsing to 1 column on mobile. Form inputs us

Elevation & Depth

Depth in Zapier's design is conveyed through subtle shadows and layered surfaces rather than dramatic drop-shadows. The elevation system defines three levels: sm (0 3px 8px rgba(0, 0, 0, 0.06)) for subtle cards and hover states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated containers and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like tooltips and popovers. Cards at rest use sm elevation; on hover, they transition to md elevation with a 150ms ease-out timing function. Modals and overlays use md elevation with a semi-transparent backdrop (rgba(0, 0, 0, 0.3)). The s

Shapes

The shape philosophy is Architectural Precision—clean, rectilinear forms with minimal rounding that convey professionalism and technical competence. Buttons use a 4px border-radius (DEFAULT), creating a subtle softness without appearing playful or casual. Cards and containers use 8px (md) rounding, balancing approachability with formality. Input fields use 50% border-radius (full), creating pill-shaped inputs that feel modern and friendly while maintaining visual distinction from buttons. Modals and popovers use 12px (lg) rounding. Badges and tags use full (50%) rounding for maximum visual dis

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses backgroundColor: {colors.primary} (#ff4f00), textColor: {colors.on-primary} (#fffefb), padding: 8px 16px, height: 40px, rounded: {rounded.DEFAULT} (4px), and fontWeight: 600. On hover, the background transitions to #e64500 (a darker orange) with a 100ms ease-out timing function. On active/pressed state, the background darkens further to #cc3d00. The button-secondary component uses a transparent background with a 1px border in {colors.outline-variant} (#c5c0b1), textColor: {colors.on-surface} (#201515), and the same padding/height as primary. On hover, the background fills with {colors.surface-container-high} (#dfdcd2) and the border darkens to {colors.outline} (#939084). Button-ghost is

Do's and Don'ts

**Do**

• Do use the primary orange (#ff4f00) exclusively on CTAs, interactive elements, and data highlights—never on backgrounds or decorative elements.
• Do maintain the warm neutral palette (#fffefb, #eceae3, #605d52) as the dominant visual language; accents should feel like punctuation, not the main text.
• Do apply 4px border-radius to buttons and 8px to cards to reinforce the Architectural Precision aesthetic—avoid rounded corners exceeding 20px.
• Do use Inter for body copy and labels, Degular Display for headlines; never mix serif fonts or use system fonts in place of these brand typefaces.
• Do layer surfaces using the surface-container tokens (lowest through highest) to convey information hierarchy without relying on shadows or blur.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to cards and containers, with a 150ms ease-out transition.
• Do use lg spacing (40px) between major sections and md spacing (24px) for internal card padding to maintain generous whitespace.
• Do apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to small labels on colored backgrounds to ensure legibility.

**Don't**

• Don't use the primary orange on non-interactive elements (backgrounds, borders, decorative shapes)—it must remain reserved for actions and highlights.
• Don't apply shadows exceeding lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) or use blur/glassmorphism effects; the system relies on color layering and precise shadows.
• Don't use rounded corners smaller than 3px (sm) or larger than 20px (xl); the Architectural Precision aesthetic requires restraint.
• Don't mix typefaces within a single component; headlines use Degular Display, body/labels use Inter, code uses JetBrains Mono—no exceptions.
• Don't reduce padding below sm (12px) on cards or containers; whitespace is a design principle, not a constraint to minimize.
• Don't apply color transitions longer than 150ms on interactive elements; the system prioritizes responsiveness and clarity.
• Don't use secondary (#3860be) or tertiary (#0976b4) as primary CTAs; these are supporting accents only.
• Don't apply opacity or transparency to the primary orange; use the fixed-dim variant (#ffb380) or container variant (#ffe8d9) for secondary states.