Skip to content
DesignMunkDesignMunk Submit a site

Zapier Pricing

zapier.com
No-code automation across 9,000+ apps
AI Software Next.js Pricing Degular Inter
Share Visit site
zapier.com DESKTOP · 1440
Zapier Pricing

AI Breakdown

Design export

---
version: alpha
name: Zapier
description: No-code automation across 9,000+ apps
colors:
  primary: "#201515"
  secondary: "#fca47a"
  tertiary: "#ff4f00"
  neutral: "#fffefb"
  border: "#dfdcd2"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Degular Display
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
  headline-md:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.014em
  headline-sm:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.21
  headline-xs:
    fontFamily: Inter
    fontSize: 21px
    fontWeight: 500
    lineHeight: 1.19
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
  lg: 18px
spacing:
  xs: 4px
  sm: 16px
  md: 24px
  lg: 28px
  xl: 40px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.lg}"
    padding: 6px 12px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "#939084"
    rounded: "{rounded.sm}"
    padding: 6px 12px
    height: 44px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 32px 24px
---

# Zapier Pricing: Bone Background, Pill CTAs, Task Slider

## Overview

Zapier's UI favors clarity over spectacle: warm surface tones, high-contrast ink for copy, and restrained weights that keep long pricing content legible. The personality is practical and confident—tools-forward with a single accent color for momentum. Layouts read dense but orderly, suitable for enterprise comparison while staying approachable for individuals.

## Colors

- **primary (#201515):** Deep ink for headlines, body text, and high-contrast UI states.
- **secondary (#fca47a):** Apricot highlight for informational tags or mild emphasis; avoid for primary actions.
- **tertiary (#ff4f00):** Brand orange for primary CTAs and key interactive accents.
- **neutral (#fffefb):** Bone surface for page backgrounds and cards.
- **border (#dfdcd2):** Warm parchment stroke for dividers, tables, and input borders.
- **surface ({colors.neutral}):** Default card and section surfaces; identical to neutral.
- **on-surface ({colors.primary}):** Standard text color on neutral surfaces.

## Typography

- Degular Display (custom): Used for large brand headlines. It's self-hosted; agents should not attempt to load it directly. Suitable substitutes with similar warmth and generous x-height: Plus Jakarta Sans (Google), Sora (Google), and DM Sans (Google).
- Inter (Google): Working family for headings, subheads, UI, and body. Load from Google Fonts. Roles by level:
  - headline-lg: 48px/1, weight 500 — primary page headlines when Degular Display isn't available.
  - headline-md: 36px/1.19, weight 500, letter-spacing -0.014em — section headers and price points.
  - headline-sm: 28px/1.21, weight 500 — card titles and module headings.
  - headline-xs: 21px/1.19, weight 500 — labels, table section headers, and control titles.
  - body-md: 16px/1.5, weight 500 — paragraphs, feature bullets, and table cells.

## Layout

Spacing uses a 4px root with functional steps: xs 4, sm 16, md 24, lg 28, xl 40. Build sections with xl vertical padding; use md for inner card padding and gaps, and sm for element spacing inside controls. A responsive 12-column grid works well: pricing tiers render 4-up on desktop, collapse to 2-up then 1-up on smaller screens. Tables use sm row padding with border dividers for scannability.

## Elevation & Depth

No shadows are used; hierarchy is established through whitespace, 1px border (#dfdcd2) rules, and tonal contrast between the bone surface and the ink text. Emphasis relies on color (tertiary for CTAs) and size rather than elevation. Dividers segment long tables; banners and cards rely on padding and borders instead of drop shadows.

## Shapes

Corner radii communicate role: sm 4px for inputs and secondary buttons; md 8px for cards and tabs; lg 18px for primary CTAs and prominent interactive pills. The larger pill silhouette signals action and continuity across the page.

## Components

- Buttons
  - Primary: #ff4f00 background, #fffefb text, 18px radius, 44px height, 6px 12px padding. Use for main CTAs like "Try it free".
  - Secondary: #fffefb background, #939084 text, 4px radius, 44px height. Use for alternative actions or less-prominent choices.
  - Link: #201515 text, 0px radius. Use for inline actions.
- Card: #fffefb background, #201515 text, 8px radius, 32px x 24px padding. Use for pricing tiers and informational modules.

### Pricing Tier Card
- Structure: headline-sm title, price set in headline-md, body-md feature list, and a primary CTA.
- Spacing: md (24px) between sections, sm (16px) inside lists. Optional top/bottom borders (#dfdcd2) for sub-sections.

### Task Tier Slider
- Horizontal track with tick labels from 100 to 2M. Use border color (#dfdcd2) for the rail and body-md for labels.
- Handle and active segment may use tertiary (#ff4f00); handle corners can follow lg (18px) for a pill thumb.

### Billing Cycle Toggle
- Two options: "Pay monthly" and "Pay yearly (Save 33%)." Implement as segmented control on neutral with border #dfdcd2 and sm (4px) radius. Active state can invert to on-surface text over a filled chip.

### Currency Selector
- Dropdown styled as an input: neutral fill, border #dfdcd2, sm (4px) radius, body-md text. Use md (24px) min-height to align with controls.

### Plan Category Tabs
- Tabs for Platform and Add-ons (Agents, Chatbots). Use md (8px) radius and border #dfdcd2. Active tab uses a filled state with on-surface text.

### Announcement Banner
- Full-width band near the hero. Inner card uses card token values with a concise headline-xs and link-style CTA.

### Feature Comparison Table
- Multi-section matrix. Row and column dividers in #dfdcd2; cells in body-md; section headers in headline-xs. Use sm (16px) cell padding and md (24px) section spacing.

### FAQ Accordion
- Question set in headline-xs; answer in body-md. Each item separated by a top/bottom border (#dfdcd2); no shadows; neutral background.

## Do's and Don'ts

- Do reserve #ff4f00 for primary CTAs and key interactive highlights; avoid using it for backgrounds or large blocks of copy.
- Do keep button height at 44px with the supplied radii (18px primary, 4px secondary) for consistency.
- Do use #201515 for all body and headline text on neutral surfaces; pair with #dfdcd2 borders to separate dense content.
- Don't add drop shadows; rely on borders, spacing, and typography for hierarchy.
- Don't mix radii within a single component; choose sm, md, or lg according to role and apply consistently.
- Don't increase headline weights beyond 500; the system's tone depends on mid-weight clarity over bolder styles.

## Agent Prompt Guide

Quick color reference — Text: #201515; Background: #fffefb; Border: #dfdcd2; Accent/CTA: #ff4f00.

1) Build a pricing hero with headline and CTA
- Background #fffefb. H1 set in Degular Display or Inter headline-lg 48px/1, weight 500, color #201515. Body copy in Inter 16px/1.5. Primary button 44px tall, 18px radius, background #ff4f00, text #fffefb. Section padding: 40px top/bottom.

2) Create a 4-card pricing grid
- Use a 12-column layout. Each card uses background #fffefb, border #dfdcd2, radius 8px, padding 32px top/bottom and 24px sides. Title in Inter headline-sm 28px/1.21; price in headline-md 36px/1.19; features in 16px/1.5 with 16px spacing. CTA uses primary button spec above.

3) Implement task-tier slider with controls
- Place a horizontal rail using #dfdcd2 at 2px. Tick labels at 16px Inter, color #201515. Active segment and thumb use #ff4f00; thumb radius 18px. Add "Pay monthly / Pay yearly (Save 33%)" segmented toggle with neutral fill, border #dfdcd2, radius 4px.

4) Build a comparison table section
- Table on #fffefb with row/column dividers #dfdcd2 (1px). Header cells in Inter 21px/1.19 weight 500; body cells 16px/1.5. Cell padding 16px; section gap 24px. Links styled as button-link with #201515 text.

5) Add announcement banner
- Full-width band with inner card: background #fffefb, border #dfdcd2, radius 8px, padding 24px. Headline in Inter 21px/1.19; action as link button (#201515).

## Similar Brands

- Airtable — Similar warm neutrals and hairline rules; Airtable skews brighter with stronger color-coding inside tables.
- Mailchimp — Friendly off-whites and approachable tone; Mailchimp's illustration style is louder where Zapier stays utilitarian.
- Notion — Minimal, border-driven layouts and restrained weights; Notion is cooler in tone and more monochrome.
- Asana — Clean UI with soft radii and thoughtful spacing; Asana uses multi-color accents versus Zapier's single orange.
- Stripe (pricing) — Dense, scannable comparison tables; Stripe is higher-contrast on pure white with cooler grays.

More like this

Browse AI →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 3 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 3 minutes ago
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 2 hours ago