# Zapier — Design System
> The most connected AI orchestration platform for building and scaling workflows across 9,000+ apps.
- **Canonical:** https://uiuxskills.com/library/zapier
- **Source:** https://zapier.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:07.125Z

---

---
version: alpha
name: Zapier
description: >-
  The most connected AI orchestration platform for building and scaling workflows across 9,000+
  apps.
tone: >-
  Authoritative, clear, and action-oriented. The voice is professional yet accessible, focusing on
  'governance' and 'reliability' to appeal to both IT decision-makers and builders.
color-scheme: light
colors:
  primary: "#FF4F00"
  surface: "#FFFEFB"
  surface-dim: "#ECEAE3"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#C5C0B1"
  error: "#D93025"
  success: "#1E8E3E"
  surface-container: "#F7F5F0"
  focus-ring: "#FF4F00"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#E64700"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#E64700"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDE7E7"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Zapier maintains a professional, high-trust aesthetic that balances enterprise-grade reliability with accessible, no-code utility. The visual identity is anchored by a bold orange primary color, signaling action and energy, set against a clean, neutral background palette that emphasizes clarity and data density.

## Colors

The color strategy relies on a high-contrast, neutral foundation that allows the brand's signature orange to serve as the primary driver for user action and focus.

*   Primary (#FF4F00): The signature Zapier orange used for primary CTAs and brand highlights.
*   Surface (#FFFEFB): The primary background color for main content areas.
*   Surface-dim (#ECEAE3): A soft neutral used for secondary backgrounds and section dividers.
*   On-surface (#1A1A1A) (inferred): Primary text color for high readability on light surfaces.
*   On-primary (#FFFFFF) (inferred): Text color for buttons and elements using the primary brand color.
*   Outline (#C5C0B1): Border color for cards and input fields.
*   Error (#D93025) (inferred): Standard semantic color for errors and alerts.
*   Success (#1E8E3E) (inferred): Standard semantic color for success states.
*   Surface-container (#F7F5F0) (inferred): Light container background for grouping related content.
*   Focus-ring (#FF4F00) (inferred): High-visibility focus state for accessibility.

## Typography

Typography is strictly sans-serif, prioritizing legibility and clear information hierarchy for complex technical content.

*   Display-lg (inferred): Used for hero headlines to establish immediate impact.
*   Headline-lg (inferred): Used for section headers.
*   Headline-md (inferred): Used for sub-headers and card titles.
*   Body-md (inferred): Standard paragraph text.
*   Body-sm (inferred): Secondary text and captions.
*   Label-md (inferred): Button labels and UI controls.
*   Label-sm (inferred): Small badges and metadata tags.

## Layout

The site utilizes a responsive grid system with a max-width container that centers content on larger screens. Spacing follows a consistent 8px base unit, ensuring vertical rhythm across sections. The page structure generally follows: nav, hero, social-proof, features, use-cases, pricing, and footer. The hero pattern features a centered headline and subhead with two primary CTA buttons, followed by a data-driven social proof bar. On smaller viewports, the navigation collapses into a drawer and grid layouts stack vertically.

## Elevation & Depth

Depth is used sparingly to highlight interactive elements and cards. The elevation scale is inferred based on standard SaaS design patterns, using subtle shadows to separate content from the background.

*   Elevation.sm: Card lift.
*   Elevation.md: Dropdown/popover.
*   Elevation.lg: Modal/drawer overlay.

## Shapes

The brand uses a moderate corner radius (8px) for cards and inputs, balancing a modern, approachable feel with professional structure. Buttons and badges often use full rounding (9999px) to emphasize action and distinguish interactive components from static content.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use {colors.primary} for primary actions with {typography.label-md}. Secondary buttons are transparent with a {colors.primary} border. Use these for clear, imperative calls to action.

### Card
Cards utilize {colors.surface} with {rounded.md} and {colors.outline} borders. Use these to group related content or feature highlights. Elevated cards may omit the border in favor of {elevation.md}.

### Input Field
Inputs feature {colors.surface} backgrounds and {rounded.sm} corners. On focus, the border must transition to {colors.focus-ring} to ensure accessibility and clear state indication.

### Badge
Badges use {colors.surface-dim} and {typography.label-sm} for metadata. Semantic variants like {badge-error} and {badge-success} should be reserved strictly for status indicators.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Use {colors.primary} for non-interactive text. |
| Apply {typography.headline-lg} for hero sections. | Use {typography.display-lg} for body copy. |
| Use {colors.surface-dim} for background sections. | Use high-contrast shadows on flat UI elements. |
| Ensure input fields use {colors.outline} borders. | Mix different corner radii in one component. |
| Use {rounded.md} for all card components. | Apply {colors.error} to non-alert components. |
| Apply {typography.body-md} for body copy. | Use more than two font weights per page. |
| Use {rounded.full} for primary action buttons. | Use square corners on primary buttons. |
| Use {colors.focus-ring} for keyboard navigation. | Disable default focus ring styles. |

## Content Style

CTA labels should use imperative verbs in sentence case, kept short and direct (e.g., "Start free with email").

Headings should focus on concrete benefit statements, specifically highlighting themes of governance, connectivity, and reliability.

Copy density should be kept low; use short, scannable paragraphs and frequent bullet points to break up technical information.

## Imagery & Icons

The brand uses a mixed imagery style, combining clean, flat-style iconography with high-quality product screenshots. Icons are generally filled and rounded to maintain an approachable, consistent tone. Avoid overly decorative imagery; all visuals should serve a functional purpose in explaining the platform's utility.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Zapier, a minimal enterprise automation platform with an authoritative, action-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never as a hardcoded hex, px value, or font size.
2. Use only the component variants defined under `components:`. Do not invent a `button-tertiary`, `card-flat`, or any unlisted variant; instead compose from existing tokens.
3. Follow the Layout section for grid, spacing rhythm, and responsive behavior. Default to mobile-first; stack grids vertically below 768px.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., applying `{colors.primary}` to body text), surface the conflict explicitly before proceeding.
5. Apply elevation tokens (`{elevation.sm}`, `{elevation.md}`, `{elevation.lg}`) only at the semantic levels described — card lift, dropdown, and modal respectively. Do not add shadows to flat UI elements.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for any interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.full}` to primary buttons and `{rounded.md}` to all card components; never mix radii within a single component.
- Use `{colors.focus-ring}` for all keyboard navigation focus indicators; never suppress the focus ring.
- Write CTA labels as short imperative verbs in sentence case, per the Content Style section.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values absent from the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a named token exists.
- Apply `{colors.primary}` to non-interactive or body text.
- Apply `{colors.error}` or `{colors.success}` outside semantic status indicators.
- Add emoji, decorative imagery, or filler copy.
- Rewrite existing page copy, button labels, headings, or navigation items as a side effect of applying design tokens.

## When in doubt
- If the spec does not define a value, ask the user before inventing one.
- For background roles, default to `{colors.surface-container}` for grouped content and `{colors.surface-dim}` for section backgrounds.
- For text on light surfaces, default to `{colors.on-surface}`; for text on `{colors.primary}` backgrounds, use `{colors.on-primary}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, metadata) is available, those values override the spec.
- Prefer composing existing components over introducing any new token or variant.