git:20260403.74adb86 to git:20260404.5a6bf86

- ## 1. Visual Theme & Atmosphere

-

- 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

-

- ## 2. Color Palette & Roles

-

- ### Primary

-

- - **Zapier Black** (`#201515`): Primary text, headings, dark button backgrounds. A warm near-black with reddish undertones -- never cold.

- - **Cream White** (`#fffefb`): Page background, card surfaces, light button fills. Not pure white; the yellowish warmth is intentional.

- - **Off-White** (`#fffdf9`): Secondary background surface, subtle alternate tint. Nearly indistinguishable from cream white but creates depth.

-

- ### Brand Accent

-

- - **Zapier Orange** (`#ff4f00`): Primary CTA buttons, active underline indicators, accent borders. The signature color -- vivid and warm.

-

- ### Neutral Scale

-

- - **Dark Charcoal** (`#36342e`): Secondary text, footer text, border color for strong dividers. A warm dark gray-brown with 70% opacity variant.

- - **Warm Gray** (`#939084`): Tertiary text, muted labels, timestamp-style content. Mid-range with greenish-warm undertone.

- - **Sand** (`#c5c0b1`): Primary border color, hover state backgrounds, divider lines. The backbone of Zapier's structural elements.

- - **Light Sand** (`#eceae3`): Secondary button backgrounds, light borders, subtle card surfaces.

- - **Mid Warm** (`#b5b2aa`): Alternate border tone, used on specific span elements.

-

- ### Interactive

-

- - **Orange CTA** (`#ff4f00`): Primary action buttons and active tab underlines.

- - **Dark CTA** (`#201515`): Secondary dark buttons with sand hover state.

- - **Light CTA** (`#eceae3`): Tertiary/ghost buttons with sand hover.

- - **Link Default** (`#201515`): Standard link color, matching body text.

- - **Hover Underline**: Links remove `text-decoration: underline` on hover (inverse pattern).

-

- ### Overlay & Surface

-

- - **Semi-transparent Dark** (`rgba(45, 45, 46, 0.5)`): Overlay button variant, backdrop-like elements.

- - **Pill Surface** (`#fffefb`): White pill buttons with sand borders.

-

- ### Shadows & Depth

-

- - **Inset Underline** (`rgb(255, 79, 0) 0px -4px 0px 0px inset`): Active tab indicator -- orange underline using inset box-shadow.

- - **Hover Underline** (`rgb(197, 192, 177) 0px -4px 0px 0px inset`): Inactive tab hover -- sand-colored underline.

-

- ## 3. Typography Rules

-

- ### Font Families

-

- - **Display**: `Degular Display` -- wide geometric display face for hero headlines

- - **Primary**: `Inter`, with fallbacks: `Helvetica, Arial`

- - **Editorial**: `GT Alpina` -- thin-weight serif for editorial moments

- - **System**: `Arial` -- fallback for form elements and system UI

-

- ### Hierarchy

-

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

-

- ### Principles

-

- - **Three-font system, clear roles**: Degular Display commands attention at hero scale only. Inter handles everything functional. GT Alpina adds editorial warmth sparingly.

- - **Compressed display**: Degular at 0.90 line-height creates vertically compressed headline blocks that feel modern and architectural.

- - **Weight as hierarchy signal**: Inter uses 400 (reading), 500 (navigation/emphasis), 600 (headings/CTAs). Degular uses 500 (display) and 600 (buttons).

- - **Uppercase for labels**: Section labels (like "01 / Colors") and small categorization use `text-transform: uppercase` with 0.5px letter-spacing.

- - **Negative tracking for elegance**: GT Alpina uses -1.6px to -1.92px letter-spacing for its thin-weight editorial headlines.

-

- ## 4. Component Stylings

-

- ### Buttons

-

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

-

- ### Cards & Containers

-

- - Background: `#fffefb`

- - Border: `1px solid #c5c0b1` (warm sand border)

- - Radius: 5px (standard), 8px (featured)

- - No shadow elevation by default -- borders define containment

- - Hover: subtle border color intensification

-

- ### Inputs & Forms

-

- - Background: `#fffefb`

- - Text: `#201515`

- - Border: `1px solid #c5c0b1`

- - Radius: 5px

- - Focus: border color shifts to `#ff4f00` (orange)

- - Placeholder: `#939084`

-

- ### Navigation

-

- - Clean horizontal nav on cream background

- - Zapier logotype left-aligned, 104x28px

- - Links: Inter 16px weight 500, `#201515` text

- - CTA: Orange button ("Start free with email")

- - Tab navigation uses inset box-shadow underline technique

- - Mobile: hamburger collapse

-

- ### Image Treatment

-

- - Product screenshots with `1px solid #c5c0b1` border

- - Rounded corners: 5-8px

- - Dashboard/workflow screenshots prominent in feature sections

- - Light gradient backgrounds behind hero content

-

- ### Distinctive Components

-

- **Workflow 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

-

- ## 5. Layout Principles

-

- ### Spacing System

-

- - Base unit: 8px

- - Scale: 1px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px

- - CTA buttons use generous padding: 20px 24px for large, 8px 16px for standard

- - Section padding: 64px-80px vertical

-

- ### Grid & Container

-

- - Max content width: approximately 1200px

- - Hero: centered single-column with large top padding

- - Feature sections: 2-3 column grids for integration cards

- - Full-width sand-bordered dividers between sections

- - Footer: multi-column dark background (`#201515`)

-

- ### Whitespace Philosophy

-

- - **Warm breathing room**: Generous vertical spacing between sections (64px-80px), but content areas are relatively dense -- Zapier packs information efficiently within its cream canvas.

- - **Architectural compression**: Degular Display headlines at 0.90 line-height compress vertically, contrasting with the open spacing around them.

- - **Section rhythm**: Cream background throughout, with sections separated by sand-colored borders rather than background color changes.

-

- ### Border Radius Scale

-

- - Tight (3px): Small inline spans

- - Standard (4px): Buttons (orange CTA), tags, small elements

- - Content (5px): Cards, links, general containers

- - Comfortable (8px): Featured cards, large buttons, tabs

- - Social (14px): Social icon buttons, pill-like elements

- - Pill (20px): Play buttons, large pill buttons, floating actions

-

- ## 6. Depth & Elevation

-

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

-

- ### Decorative Depth

-

- - Orange inset underline on active tabs creates visual "weight" at the bottom of elements

- - Sand hover underlines provide preview states without layout shifts

- - No background gradients in main content -- the cream canvas is consistent

- - Footer uses full dark background (`#201515`) for contrast reversal

-

- ## 7. Do's and Don'ts

-

- ### Do

-

- - Use Degular Display exclusively for hero-scale headlines (40px+) with 0.90 line-height for compressed impact

- - Use Inter for all functional UI -- navigation, body text, buttons, labels

- - Apply warm cream (`#fffefb`) as the background, never pure white

- - Use `#201515` for text, never pure black -- the reddish warmth matters

- - Keep Zapier Orange (`#ff4f00`) reserved for primary CTAs and active state indicators

- - Use sand (`#c5c0b1`) borders as the primary structural element instead of shadows

- - Apply generous button padding (20px 24px) for large CTAs to match Zapier's spacious button style

- - Use inset box-shadow underlines for tab navigation rather than border-bottom

- - Apply uppercase with 0.5px letter-spacing for section labels and micro-categorization

-

- ### Don't

-

- - Don't use Degular Display for body text or UI elements -- it's display-only

- - Don't use pure white (`#ffffff`) or pure black (`#000000`) -- Zapier's palette is warm-shifted

- - Don't apply box-shadow elevation to cards -- use borders instead

- - Don't scatter Zapier Orange across the UI -- it's reserved for CTAs and active states

- - Don't use tight padding on large CTA buttons -- Zapier's buttons are deliberately spacious

- - Don't ignore the warm neutral system -- borders should be `#c5c0b1`, not gray

- - Don't use GT Alpina for functional UI -- it's an editorial accent at thin weights only

- - Don't apply positive letter-spacing to GT Alpina -- it uses aggressive negative tracking (-1.6px to -1.92px)

- - Don't use rounded pill shapes (9999px) for primary buttons -- pills are for tags and social icons

-

- ## 8. Responsive Behavior

-

- ### Breakpoints

-

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

-

- ### Touch Targets

-

- - Large CTA buttons: 20px 24px padding (comfortable 60px+ height)

- - Standard buttons: 8px 16px padding

- - Navigation links: 16px weight 500 with adequate spacing

- - Social icons: 14px radius circular buttons

- - Tab items: 12px 16px padding

-

- ### Collapsing Strategy

-

- - Hero: Degular 80px display scales to 40-56px on smaller screens

- - Navigation: horizontal links + CTA collapse to hamburger menu

- - Feature cards: 3-column grid to 2-column to single-column stacked

- - Integration workflow illustrations: maintain aspect ratio, may simplify

- - Footer: multi-column dark section collapses to stacked

- - Section spacing: 64-80px reduces to 40-48px on mobile

-

- ### Image Behavior

-

- - Product screenshots maintain sand border treatment at all sizes

- - Integration app icons maintain fixed sizes within responsive containers

- - Hero illustrations scale proportionally

- - Full-width sections maintain edge-to-edge treatment

- ## 9. Agent Prompt Guide

- ### Quick Color Reference

- - Primary CTA: Zapier Orange (`#ff4f00`)

- - Background: Cream White (`#fffefb`)

- - Heading text: Zapier Black (`#201515`)

- - Body text: Dark Charcoal (`#36342e`)

- - Border: Sand (`#c5c0b1`)

- - Secondary surface: Light Sand (`#eceae3`)

- - Muted text: Warm Gray (`#939084`)

- ### Example Component Prompts

- - "Create a hero section on cream background (`#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)."

- - "Design a card: cream background (`#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."

- - "Build a tab navigation: transparent background. Inter 16px weight 500, `#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."

- - "Create navigation: cream sticky header (`#fffefb`). Inter 16px weight 500 for links, `#201515` text. Orange pill CTA 'Start free with email' right-aligned (`#ff4f00`, 4px radius, 8px 16px padding)."

- - "Design a footer with dark background (`#201515`). Text `#fffefb`. Links in `#c5c0b1` with hover to `#fffefb`. Multi-column layout. Social icons as 14px-radius circles with sand borders."

- ### Iteration Guide

- 1. Always use warm cream (`#fffefb`) background, never pure white -- the warmth defines Zapier

- 2. Borders (`1px solid #c5c0b1`) are the structural backbone -- avoid shadow elevation

- 3. Zapier Orange (`#ff4f00`) is the only accent color; everything else is warm neutrals

- 4. Three fonts, strict roles: Degular Display (hero), Inter (UI), GT Alpina (editorial)

- 5. Large CTA buttons need generous padding (20px 24px) -- Zapier buttons feel spacious

- 6. Tab navigation uses inset box-shadow underlines, not border-bottom

- 7. Text is always warm: `#201515` for dark, `#36342e` for body, `#939084` for muted

- 8. Uppercase labels at 12-14px with 0.5px letter-spacing for section categorization