Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Inter| Mono:system monospace stack- Font stack (CSS):font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Zapier's website radiates warm, approachable professionalism. It rejects the cold monochrome minimalism of developer tools in favor of a cream-tinted canvas (#fffefb) that feels like unbleached paper -- the digital equivalent of a well-organized notebook. The near-black (#201515) text has a faint reddish-brown warmth, creating an atmosphere more human than mechanical. This is automation designed to feel effortless, not technical.
The typographic system is a deliberate interplay of two distinct personalities. Degular Display -- a geometric, wide-set display face -- handles hero-scale headlines at 56-80px with medium weight (500) and extraordinarily tight line-heights (0.90), creating headlines that compress vertically like stacked blocks. Inter serves as the workhorse for everything else, from section headings to body text and navigation, with fallbacks to Helvetica and Arial. GT Alpina, an elegant thin-weight serif with aggressive negative letter-spacing (-1.6px to -1.92px), makes occasional appearances for softer editorial moments. This three-font system gives Zapier the ability to shift register -- from bold and punchy (Degular) to clean and functional (Inter) to refined and literary (GT Alpina).
The brand's signature orange (#ff4f00) is unmistakable -- a vivid, saturated red-orange that sits precisely between traffic-cone urgency and sunset warmth. It's used sparingly but decisively: primary CTA buttons, active state underlines, and accent borders. Against the warm cream background, this orange creates a color relationship that feels energetic without being aggressive.
Key Characteristics:
- Warm cream canvas (#fffefb) instead of pure white -- organic, paper-like warmth
- Near-black with reddish undertone (#201515) -- text that breathes rather than dominates
- Degular Display for hero headlines at 0.90 line-height -- compressed, impactful, modern
- Inter as the universal UI font across all functional typography
- GT Alpina for editorial accents -- thin-weight serif with extreme negative tracking
- Zapier Orange (#ff4f00) as the single accent -- vivid, warm, sparingly applied
- Warm neutral palette: borders (#c5c0b1), muted text (#939084), surface tints (#eceae3)
- 8px base spacing system with generous padding on CTAs (20px 24px)
- Border-forward design: 1px solid borders in warm grays define structure over shadows
#201515): Primary text, headings, dark button backgrounds. A warm near-black with reddish undertones -- never cold.#fffefb): Page background, card surfaces, light button fills. Not pure white; the yellowish warmth is intentional.#fffdf9): Secondary background surface, subtle alternate tint. Nearly indistinguishable from cream white but creates depth.#ff4f00): Primary CTA buttons, active underline indicators, accent borders. The signature color -- vivid and warm.#36342e): Secondary text, footer text, border color for strong dividers. A warm dark gray-brown with 70% opacity variant.#939084): Tertiary text, muted labels, timestamp-style content. Mid-range with greenish-warm undertone.#c5c0b1): Primary border color, hover state backgrounds, divider lines. The backbone of Zapier's structural elements.#eceae3): Secondary button backgrounds, light borders, subtle card surfaces.#b5b2aa): Alternate border tone, used on specific span elements.#ff4f00): Primary action buttons and active tab underlines.#201515): Secondary dark buttons with sand hover state.#eceae3): Tertiary/ghost buttons with sand hover.#201515): Standard link color, matching body text.text-decoration: underline on hover (inverse pattern).rgba(45, 45, 46, 0.5)): Overlay button variant, backdrop-like elements.#fffefb): White pill buttons with sand borders.rgb(255, 79, 0) 0px -4px 0px 0px inset): Active tab indicator -- orange underline using inset box-shadow.rgb(197, 192, 177) 0px -4px 0px 0px inset): Inactive tab hover -- sand-colored underline.Degular Display -- wide geometric display face for hero headlinesInter, with fallbacks: Helvetica, ArialGT Alpina -- thin-weight serif for editorial momentsArial -- fallback for form elements and system UI| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero XL | Degular Display | 80px (5.00rem) | 500 | 0.90 (tight) | normal | Maximum impact, compressed block |
| Display Hero | Degular Display | 56px (3.50rem) | 500 | 0.90-1.10 (tight) | 0-1.12px | Primary hero headlines |
| Display Hero SM | Degular Display | 40px (2.50rem) | 500 | 0.90 (tight) | normal | Smaller hero variant |
| Display Button | Degular Display | 24px (1.50rem) | 600 | 1.00 (tight) | 1px | Large CTA button text |
| Section Heading | Inter | 48px (3.00rem) | 500 | 1.04 (tight) | normal | Major section titles |
| Editorial Heading | GT Alpina | 48px (3.00rem) | 250 | normal | -1.92px | Thin editorial headlines |
| Editorial Sub | GT Alpina | 40px (2.50rem) | 300 | 1.08 (tight) | -1.6px | Editorial subheadings |
| Sub-heading LG | Inter | 36px (2.25rem) | 500 | normal | -1px | Large sub-sections |
| Sub-heading | Inter | 32px (2.00rem) | 400 | 1.25 (tight) | normal | Standard sub-sections |
| Sub-heading MD | Inter | 28px (1.75rem) | 500 | normal | normal | Medium sub-headings |
| Card Title | Inter | 24px (1.50rem) | 600 | normal | -0.48px | Card headings |
| Body Large | Inter | 20px (1.25rem) | 400-500 | 1.00-1.20 (tight) | -0.2px | Feature descriptions |
| Body Emphasis | Inter | 18px (1.13rem) | 600 | 1.00 (tight) | normal | Emphasized body text |
| Body | Inter | 16px (1.00rem) | 400-500 | 1.20-1.25 | -0.16px | Standard reading text |
| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.16 (tight) | normal | Strong labels |
| Button | Inter | 16px (1.00rem) | 600 | normal | normal | Standard buttons |
| Button SM | Inter | 14px (0.88rem) | 600 | normal | normal | Small buttons |
| Caption | Inter | 14px (0.88rem) | 500 | 1.25-1.43 | normal | Labels, metadata |
| Caption Upper | Inter | 14px (0.88rem) | 600 | normal | 0.5px | Uppercase section labels |
| Micro | Inter | 12px (0.75rem) | 600 | 0.90-1.33 | 0.5px | Tiny labels, often uppercase |
| Micro SM | Inter | 13px (0.81rem) | 500 | 1.00-1.54 | normal | Small metadata text |
text-transform: uppercase with 0.5px letter-spacing.Primary Orange
- Background: #ff4f00
- Text: #fffefb
- Padding: 8px 16px
- Radius: 4px
- Border: 1px solid #ff4f00
- Use: Primary CTA ("Start free with email", "Sign up free")
Primary Dark
- Background: #201515
- Text: #fffefb
- Padding: 20px 24px
- Radius: 8px
- Border: 1px solid #201515
- Hover: background shifts to #c5c0b1, text to #201515
- Use: Large secondary CTA buttons
Light / Ghost
- Background: #eceae3
- Text: #36342e
- Padding: 20px 24px
- Radius: 8px
- Border: 1px solid #c5c0b1
- Hover: background shifts to #c5c0b1, text to #201515
- Use: Tertiary actions, filter buttons
Pill Button
- Background: #fffefb
- Text: #36342e
- Padding: 0px 16px
- Radius: 20px
- Border: 1px solid #c5c0b1
- Use: Tag-like selections, filter pills
Overlay Semi-transparent
- Background: rgba(45, 45, 46, 0.5)
- Text: #fffefb
- Radius: 20px
- Hover: background becomes fully opaque #2d2d2e
- Use: Video play buttons, floating actions
Tab / Navigation (Inset Shadow)
- Background: transparent
- Text: #201515
- Padding: 12px 16px
- Shadow: rgb(255, 79, 0) 0px -4px 0px 0px inset (active orange underline)
- Hover shadow: rgb(197, 192, 177) 0px -4px 0px 0px inset (sand underline)
- Use: Horizontal tab navigation
#fffefb1px solid #c5c0b1 (warm sand border)#fffefb#2015151px solid #c5c0b1#ff4f00 (orange)#939084#201515 text1px solid #c5c0b1 borderWorkflow Integration Cards - Display connected app icons in pairs - Arrow or connection indicator between apps - Sand border containment - Inter weight 500 for app names
Stat Counter
- Large display number using Inter 48px weight 500
- Muted description below in #36342e
- Used for social proof metrics
Social Proof Icons
- Circular icon buttons: 14px radius
- Sand border: 1px solid #c5c0b1
- Used for social media follow links in footer
#201515)| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Bordered (Level 1) | 1px solid #c5c0b1 |
Standard cards, containers, inputs |
| Strong Border (Level 1b) | 1px solid #36342e |
Dark dividers, emphasized sections |
| Active Tab (Level 2) | rgb(255, 79, 0) 0px -4px 0px 0px inset |
Active tab underline (orange) |
| Hover Tab (Level 2b) | rgb(197, 192, 177) 0px -4px 0px 0px inset |
Hover tab underline (sand) |
| Focus (Accessibility) | 1px solid #ff4f00 outline |
Focus ring on interactive elements |
Shadow Philosophy: Zapier deliberately avoids traditional shadow-based elevation. Structure is defined almost entirely through borders -- warm sand (#c5c0b1) borders for standard containment, dark charcoal (#36342e) borders for emphasis. The only shadow-like technique is the inset box-shadow used for tab underlines, where a 0px -4px 0px 0px inset shadow creates a bottom-bar indicator. This border-first approach keeps the design grounded and tangible rather than floating.
#201515) for contrast reversal#fffefb) as the background, never pure white#201515 for text, never pure black -- the reddish warmth matters#ff4f00) reserved for primary CTAs and active state indicators#c5c0b1) borders as the primary structural element instead of shadows#ffffff) or pure black (#000000) -- Zapier's palette is warm-shifted#c5c0b1, not gray| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <450px | Tight single column, reduced hero text |
| Mobile | 450-600px | Standard mobile, stacked layout |
| Mobile Large | 600-640px | Slight horizontal breathing room |
| Tablet Small | 640-680px | 2-column grids begin |
| Tablet | 680-768px | Card grids expand |
| Tablet Large | 768-991px | Full card grids, expanded padding |
| Desktop Small | 991-1024px | Desktop layout initiates |
| Desktop | 1024-1280px | Full layout, maximum content width |
| Large Desktop | >1280px | Centered with generous margins |
#ff4f00)#fffefb)#201515)#36342e)#c5c0b1)#eceae3)#939084)#fffefb). Headline at 56px Degular Display weight 500, line-height 0.90, color #201515. Subtitle at 20px Inter weight 400, line-height 1.20, color #36342e. Orange CTA button (#ff4f00, 4px radius, 8px 16px padding, white text) and dark button (#201515, 8px radius, 20px 24px padding, white text)."#fffefb), 1px solid #c5c0b1 border, 5px radius. Title at 24px Inter weight 600, letter-spacing -0.48px, #201515. Body at 16px weight 400, #36342e. No box-shadow."#201515 text. Active tab: box-shadow: rgb(255, 79, 0) 0px -4px 0px 0px inset. Hover: box-shadow: rgb(197, 192, 177) 0px -4px 0px 0px inset. Padding 12px 16px."#fffefb). Inter 16px weight 500 for links, #201515 text. Orange pill CTA 'Start free with email' right-aligned (#ff4f00, 4px radius, 8px 16px padding)."#201515). Text #fffefb. Links in #c5c0b1 with hover to #fffefb. Multi-column layout. Social icons as 14px-radius circles with sand borders."#fffefb) background, never pure white -- the warmth defines Zapier1px solid #c5c0b1) are the structural backbone -- avoid shadow elevation#ff4f00) is the only accent color; everything else is warm neutrals#201515 for dark, #36342e for body, #939084 for muted