Design System
A workflow-automation brand whose surface combines warm-cream neutrals (#fffefb canvas, #f8f4f0 soft cream) with deep coffee ink (#201515) and a single saturated orange CTA accent (#ff4f00). Type pairs the proprietary Degular Display family at hero scale with Inter for sub-displays and body, giving the brand a confident-warm rather than cool-tech voice.
Color Palette
The brand operates from a single chromatic signature — Zapier orange — used as every primary CTA. It sits against a warm-cream canvas, never pure white, and pairs with deep coffee ink, never pure black. Every neutral in the ladder is warm-toned; there is no cool grey in the system.
Typography
Degular Display weight 500 carries the loud moments — hero displays and the UPPERCASE eyebrow. Inter handles everything else: sub-displays, body, links, buttons. Hero is 56 px / weight 500 / sentence case; the brand never uppercases display sizes. (Substitute used here: Inter weight 500 in place of proprietary Degular Display.)
Cards & Containers
Default content cards use canvas-soft cream as a subtle inset on the canvas page. Feature-dark cards flip polarity to deep coffee. Pricing cards use 1 px ink hairline borders; the featured tier polarity-flips to ink fill.
card-content
Canvas-soft cream fill on canvas page. Ink coffee text. 12 px radius, 24 px padding.
card-feature-cream
Same chrome as card-content. Hosts a headline, body, and product illustration.
card-feature-dark
Polarity-flipped to deep coffee ink. Warm-white text. Used for visual rhythm between cream rows.
pricing-card
Canvas fill with 1 px solid ink hairline border. Ink coffee text.
pricing-card-featured
Polarity-flipped to ink coffee fill. Warm-white text. Marks the recommended plan.
Form Elements
Text inputs share a 6 px radius (smaller than buttons and cards) with a 1 px solid ink hairline border on canvas. Body text in Inter 18 px regular.
Spacing Scale
Nine tokens climb from 2 px to 64 px. Section bands use 64 px top/bottom; cards use 24 px interior.
Border Radius Scale
Five shape tokens: zero for full-bleed bands, 6 px for inputs, 12 px for buttons and cards (the brand signature), and 9999 px for status pills and circular icons.
Elevation & Depth
The brand carries elevation through surface contrast and 1 px hairline borders — never drop shadows. Cream-on-canvas IS the visual lift.
Signature Components
A cream hero band hosting the 56 px Degular weight 500 headline, a polarity-flipped dark coffee hero, a cream content band that follows hero, the UPPERCASE Degular eyebrow with positive tracking, and the cream badge-pill for in-product status.
hero-band — display-xl · Degular sub w500
hero-band-dark — polarity-flipped
Canvas-soft surface, 12 px radius, 48 px Degular sub display headline. Used for editorial sections beneath the hero.
Canvas fill with a 1 px cream hairline. The lighter polarity for the second editorial row.
Responsive Behavior
The marketing grid collapses cleanly: hero stays text-first at every viewport. Section padding steps from 48 px desktop to 32 px tablet to 20 px mobile.
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768 px | Hero scales 56 → 40 px. All grids 1-up. Hamburger nav. |
| Tablet | 768 – 1023 px | 2-up feature grids. Section padding 72 / 32. |
| Desktop | ≥ 1024 px | Full marketing grid. Section padding 96 / 48. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.