CURATED · OPEN · FREE

Zapier

An enterprise-grade SaaS platform that unifies AI governance and workflow automation

SaaSDeveloper ToolsProductivityAIClean

Zapier screenshot

↓ Download design system (15 MB)Open in OpenDesign

Visit: https://zapier.com

📦 Browse pack contents →

01

Identity DNA

automationAI governanceintegrationenterpriseworkflow

A neutral command center for connecting AI to business tools

02

Color

#FF4F00Accent

#201515Ink

#36342EInk soft

#FFFDFBBG

#F8F4F0BG soft

#ECEAE3BG quiet

#605D52Muted

rgba(32,21,21,0.1)Line

Warm, paper-like neutrals paired with a high-chroma, energetic orange

03

Typography

geometric-sans · humanist-sans · monospace

display56px · 600
heading-lg48px · 500
stat32px · 500
body-lg20px · 400
body16px · 400
caption14px · 500

Use geometric-sans for impactful headlines with tight letter-spacing · Use humanist-sans for readable body text at standard sizes · Uppercase transform with letter-spacing for small metadata labels

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous whitespace defines the layout, with a base 4px unit scaling up to large structural blocks

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Subtle 1px solid borders using muted neutral tones

0 1px 3px rgba(0,0,0,0.08) · 0 4px 12px rgba(0,0,0,0.05)

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered single-column hero layout transitioning to grid-based feature sections

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.22, 1, 0.36, 1)easing

Smooth opacity fades on state changes · Accelerating entrance animations for content blocks

Cursor changes to pointer; button and link colors subtly shift or brighten · Instant visual feedback with minimal micro-interaction delay

08

Components

button Pill-shaped solid filled with the accent color, or outlined with a neutral border and text
card Subtly rounded corners with light borders, used for templates and feature previews
chip Used for tab-like navigation with rounded corners and alternating fill states
input Rounded rectangular fields with subtle borders and clear labels
hero Large, centered typography stack with prominent dual CTAs

09

Voice & Don'ts

Tone Empowering, authoritative, and highly professional
Headlines Concise, high-impact statements emphasizing user control
CTAs Direct and action-oriented (e.g., 'Start free with email')

Don't use vibrant gradients — the screenshot shows a clean, mostly flat layout with warm neutrals
Don't use heavy drop shadows — the screenshot shows subtle, soft elevation or flat borders
Don't use wide letter-spacing on headlines — the screenshot shows tightly tracked display text
Don't center-align body paragraphs — the screenshot shows left-aligned readable copy
Don't use cold blue accents — the screenshot shows a warm, energetic orange as the primary action color
Don't use highly decorative typography — the screenshot shows legible, geometric and humanist sans-serifs
Avoid: Hype-driven buzzwords without substance
Avoid: Passive or overly formal language
Avoid: Ambiguous or confusing technical jargon

10

Inside the pack — real screenshots

Zapier — 桌面首屏（hero） — 桌面首屏（hero）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Zapier — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

Zapier is a professional SaaS platform focused on AI governance and workflow automation. The core palette uses warm, paper-like off-whites (#FFFDFB, #F8F4F0) and deep inks (#201515, #36342E) paired with a singular, high-chroma orange (#FF4F00) for primary actions. Typography relies on clean geometric-sans for display and humanist-sans for body text. The layout is spacious and centered, transitioning from large hero sections to organized content grids. Avoid using decorative fonts, heavy shadows, or cold color temperatures. Prioritize clear hierarchy, generous whitespace, and subtle borders to maintain the platform's clean, trustworthy, and enterprise-grade aesthetic.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko