Warm editorial automation brand that reads as paper and ink rather than screen: an off-white canvas with warm near-brown ink and no cool gray anywhere, structured by a visible 1px vertical rail grid kept in view through every section instead of card shadows, with Degular Display headlines held at a single weight 500 and pushed to 80/72 with sub-1.0 line-height, and one Zapier orange reserved for the CTA fill, the logo rule and the focus glow.
Browse Zapier in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
DegularDisplay, "DegularDisplay Fallback" (also referenced as "Degular Display")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).
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.