---
name: Zapier
description: "A masterclass in clean, enterprise SaaS design that balances approachable warmth with authoritative professionalism through strong typography and intentional whitespace."
version: alpha

colors:
  background: "#FFFDFB"
  primary: "#201515"
  secondary: "#36342E"
  tertiary: "#FF4F00"
  neutral: "#605D52"
  bg-soft: "#F8F4F0"
  bg-quiet: "#ECEAE3"
  muted-soft: "#C5C0B1"
  line: "rgba(32,21,21,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1px"
  heading-lg:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.5px"
  stat:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.32px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "0.48px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A neutral command center for connecting AI to business tools*

## Colors

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

- **Background (`#FFFDFB`)** — uses `bg` token
- **Primary text (`#201515`)** — uses `ink` token
- **Secondary text (`#36342E`)** — uses `ink-soft` token
- **Accent (`#FF4F00`)** — uses `accent` token
- **Muted (`#605D52`)** — uses `muted` token
- **Borders (`rgba(32,21,21,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- 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

## Layout

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

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

## Elevation & Depth

- 0 1px 3px rgba(0,0,0,0.08)
- 0 4px 12px rgba(0,0,0,0.05)
- Borders: Subtle 1px solid borders using muted neutral tones

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```