# Zapier — Marketing site Design Spec

> Source: zapier.com (live DOM, computed styles), 2026-07-19.
> Coverage: home / product landing. Logged-in editor not captured (needs login).
> Note: no CSS custom properties are published — every value below is read from computed styles.

## 1. Visual Theme & Atmosphere

Zapier is warm-neutral rather than white: the canvas is an off-white `#fffefb` and every "black" is a warm near-brown `#201515`, so the page reads as paper and ink rather than screen. Structure comes from a visible **1px `#eceae3` grid of vertical rails** that bracket the 1280px container and run the full height of the page — an unusual, almost editorial-layout device that most SaaS sites hide. Display type is Degular Display, a warm geometric face, set at a single weight 500 and pushed to a very large 80/72 for section headlines, while all body and UI copy drops to Inter. The Zapier orange `#ff4f00` is used sparingly and specifically: the sign-up button, the logo rule, and one hairline. Inverted `#201515` sections break the rhythm without introducing new colour. Feels: warm, editorial, structured, plainspoken.

## 2. Color Palette & Roles

### Text

| Token | Hex | Role / usage |
|---|---|---|
| `ink` | `#201515` | Headlines, nav links, primary text (warm near-black) |
| `body` | `#36342e` | Body copy (the most common text colour) |
| `body-alpha` | `rgba(54,53,46,.70)` | De-emphasised body |
| `muted` | `#605d52` | Eyebrow labels |
| `faint` | `#939084` | Meta / caption |
| `on-dark` | `#eceae3` | Body text on inverted sections |
| `on-dark-strong` | `#fffefb` | Headings / labels on inverted sections |
| `on-dark-muted` | `#c5c0b1` | Muted text on dark |

### Surfaces & borders

| Token | Hex | Role / usage |
|---|---|---|
| `canvas` | `#fffefb` | Page background (warm off-white) |
| `cream` | `#f8f4f0` | Section band, inverted-section headline colour |
| `cream-2` | `#eceae3` | Card fill, tab rest state, **and the vertical rail hairline** |
| `dark` | `#201515` | Inverted full-bleed sections, filled buttons, dark tabs |
| `border` | `#c5c0b1` | Control borders on cream surfaces |
| `border-rail` | `#eceae3` | 1px vertical rails + nav bottom border |
| `plum` | `#381933` | Skip-to-content chip |
| `scrim` | `rgba(53,52,45,.75)` / `rgba(0,0,0,.70)` | Media overlays |

### Accent

| Token | Hex | Role / usage |
|---|---|---|
| `zapier-orange` | `#ff4f00` | THE accent: sign-up + primary CTA fill, logo rule, one hairline, focus glow |

**Rules.** One accent. Orange is a button fill and a rule — never a text colour in body copy, never a section background. There is no semantic (success/warning/error) palette on the marketing surface. Every neutral is warmed toward brown; there is no cool gray anywhere.

## 3. Typography Rules

- Display: `DegularDisplay, "DegularDisplay Fallback"` (also referenced as `"Degular Display"`)
- UI + body: `Inter, "Inter Fallback", sans-serif`

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Section h2 (large) | Degular Display | 80/72 | 500 | normal |
| Feature h3 | Degular Display | 56/61.6 | 500 | normal |
| Section h2 (medium) | Degular Display | 48/48 | 500 | normal |
| Hero h1 | Degular Display | 40/36 | 500 | normal |
| Eyebrow | Degular Display | 14 | 500 | **+1px**, uppercase (`#605d52`) |
| Kicker h2 | Inter | 12 | 500 | normal, uppercase |
| Card h3 | Inter | 20/25 | 600 | -0.5px |
| Hero sub | Inter | 18/21.6 | 400 | normal |
| Nav link | Inter | 16 | 400 | normal |
| Button label (large) | Inter | 18 | 600 | normal |
| Button label (nav) | Inter | 14 | 600 | normal |
| Tab label | Inter | 24 | 600 | normal |

Patterns: **Degular for display, Inter for everything else**, and Degular never leaves weight 500 — size alone carries hierarchy, which is why headlines run to 80px. Line-height goes *below* 1.0 on the display roles (80/72, 40/36), giving the tight stacked-headline look. Tracking is normal everywhere except the eyebrow, which is the one uppercase, positively-tracked role (+1px). Inter carries the only bold weights (600).

## 4. Component Stylings

**Nav** — 56px, `#fffefb`, with a 1px `#eceae3` bottom border and no backdrop blur. Wordmark (with its orange rule) then four dropdown links at Inter 16/400, right cluster of text links plus a small orange pill.

**Buttons** — note the two radii: the nav pill is 18px (fully rounded at 36px) while every in-page CTA is a near-square **4px**:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Nav sign-up | `#ff4f00` | `#fffefb` | 1px `#ff4f00` | 18px | 36px | 6px 12px | 14/600 |
| Primary CTA | `#ff4f00` | `#fffefb` | 1px `#ff4f00` | 4px | 48px | 12px 24px | 18/600 |
| Secondary CTA | `#fffefb` | `#201515` | 1px `#201515` | 4px | 48px | 12px 24px | 18/600 |
| Dark CTA | `#201515` | `#fffefb` | 1px `#201515` | 4px | 48px | 12px 24px | 18/600 |
| Tertiary / text | transparent | `#201515` | none | 4px | 40px | 8px 0 | 16/600 |
| Chip (on dark) | `#201515` | `#eceae3` | 1px `#36342e` | 0px | 40px | 12px | 14/400 |
| Skip link | `#381933` | `#fffefb` | none | 0 0 6px 6px | 33px | 4px 16px | 14/400 |

**Tabs / segmented cards** — large 66px tabs at 8px radius, 24/600: active is `#201515` fill with `#fffefb` text; rest is `#eceae3` fill, `#36342e` text, 1px `#c5c0b1` border.

**Cards** — `#eceae3` or `#fffefb` on the canvas, 8px radius, separated by the rail hairlines.

**Focus ring** — `rgba(255,79,0,.4) 0 0 0 0` (an orange glow, animated outward on focus).

**Inputs** — not captured (no exposed form fields on the landing page).

## 5. Layout Principles

A **1280px container bracketed by 1px `#eceae3` vertical rails**, with an inner 894px column also railed — the rails are the page's primary structural device and stay visible through every section. Hero is left-aligned (headline, 18px sub, two CTAs, a small compliance line), not centered. Below, the page alternates the `#fffefb` canvas with `#f8f4f0` cream bands and inverted `#201515` sections. Radius census: `2 / 2.5 / 4 / 5 / 8 / 14 / 18 / 20 / 50%`, plus `0 0 6px 6px`.

## 6. Depth & Elevation

Radius scale: `2px` / `2.5px` / `4px` (all in-page buttons) / `5px` / `8px` (cards, tabs) / `14px` / `18px` (nav pill) / `20px` / `50%`.

Shadow recipes observed:

- `rgba(0, 0, 0, 0.1) 0px 8px 32px 0px` — floating product card
- `rgb(153, 153, 153) 0px 2px 10px -3px` — soft raised element
- `rgb(199, 197, 199) -3px -3px 5px -2px` — an inverted top-left shadow (soft-emboss detail)
- `rgba(255, 79, 0, 0.4) 0px 0px 0px 0px` — the orange focus glow

Depth is mostly carried by the rail-and-band grid rather than elevation; shadows are reserved for genuinely floating product imagery.

## 7. Motion

`all 0.25s` on interactive surfaces and `transform 0.25s ease-*` on cards and tabs — a single, consistent quarter-second timing. The orange focus ring animates from a 0-spread glow. No scroll-jacking or entrance-animation library detected.

## 8. Backgrounds, Effects & WebGL

Flat warm surfaces — no WebGL and no canvas elements. Gradients appear only as media scrims (`rgba(53,52,45,.75)`, `rgba(0,0,0,.70)` overlays). No backdrop-filter on the nav, no grain or noise texture. Product motion is carried by `<video>`.

## 9. Do's and Don'ts

### Do
- Warm every neutral toward brown: canvas `#fffefb`, ink `#201515`, body `#36342e`.
- Set display headlines in Degular at weight 500 and let size do the work (up to 80px).
- Use sub-1.0 line-height on display roles (80/72, 40/36) for tightly stacked headlines.
- Draw the 1px `#eceae3` vertical rails and keep them visible through the page.
- Give in-page CTAs a near-square 4px radius at 48px; reserve the 18px pill for the nav.
- Keep orange `#ff4f00` to the CTA fill, the logo rule and the focus glow.
- Make eyebrows uppercase Degular at 14/500 with +1px tracking — the only tracked role.

### Don't
- Don't use pure white, pure black, or any cool gray.
- Don't set Degular above weight 500, or use it for body copy.
- Don't make in-page CTAs pills — they are 4px rectangles.
- Don't use orange as body text or as a section background.
- Don't add a semantic colour palette.
- Don't replace the rail grid with card shadows.

## 10. Responsive Behavior

Media-query census: not fully resolved (styles are largely inlined/atomic). The hero h1 was captured at 40/36 while section headlines render at 80/72, indicating a fluid display scale between breakpoints. Exact breakpoints and mobile nav pattern: not captured.

## 11. Agent Prompt Guide

- Canvas `#fffefb` · Cream `#f8f4f0` / `#eceae3` · Dark `#201515` · Text `#201515` · Body `#36342e` · Muted `#605d52` · Rail `#eceae3` · Border `#c5c0b1` · Accent `#ff4f00`
- Font: Degular Display 500 (display), Inter 400/600 (UI/body) · Body: 18/21.6 · Radius: 4px CTA / 8px card / 18px nav pill · Control height: 48px (36px nav)
- Focus: `rgba(255,79,0,.4) 0 0 0 0` orange glow · Hover fill: not captured · Transition `all 0.25s`

<zapier_design_language>
Warm editorial automation brand — paper and ink, not screen. Canvas is off-white #fffefb, every black is a warm near-brown #201515, body copy sits at #36342e, and cream bands (#f8f4f0, #eceae3) and inverted #201515 sections carry the rhythm; there is no cool gray anywhere. The page's signature structural device is a visible 1px #eceae3 vertical rail grid bracketing a 1280px container and an inner 894px column, kept visible through every section instead of card shadows. Display type is Degular Display at a single weight 500, pushed large with sub-1.0 line-height for tightly stacked headlines (80/72 sections, 56/61.6 features, 40/36 hero); all body and UI is Inter (18/21.6 sub, 16/400 nav, 20/25 at 600 with -0.5px for card titles). Eyebrows are the one tracked role: uppercase Degular 14/500 at +1px in #605d52. One accent, Zapier orange #ff4f00, appears only as the CTA fill, the logo rule and a rgba(255,79,0,.4) focus glow — never body text, never a section background, and there is no semantic palette. Controls split by context: in-page CTAs are near-square 4px rectangles at 48px, while the nav sign-up is an 18px pill at 36px; large 66px tabs at 8px flip between a #201515 fill and an #eceae3 fill with a 1px #c5c0b1 border. Motion is a single consistent all 0.25s with transform 0.25s on cards. Feels: warm, editorial, structured, plainspoken. Avoid: pure white/black or cool grays, Degular above 500 or in body copy, pill-shaped in-page CTAs, orange as text or background, and replacing the rail grid with drop shadows.
</zapier_design_language>