Skip to content
DesignMunkDesignMunk Submit a site

Zapier Careers

zapier.com
No-code automation across 9,000+ apps
Productivity Software Next.js Careers Degular Inter
Share Visit site
zapier.com DESKTOP · 1440
Zapier Careers

AI Breakdown

Design export

# Design brief: the Zapier Careers design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/12080522/zapier-com-jobs-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/12080522/zapier-com-jobs-featured.webp
- On DesignMunk: https://designmunk.com/zapier-careers-page/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Zapier Careers: Big, Bookish Headlines Over Warm Off-White

## Overview

Zapier's careers UI is warm, direct, and copy-led. The palette is restrained—black text on an off-white surface with a single vivid orange accent for calls to action. Layouts are spacious rather than dense, prioritizing skimmability for long-form culture content and role lists. When tokens don't cover a case, default to clarity: generous whitespace, readable body copy, and one clear primary action.

## Colors

- **primary (#000000):** Core text and icons for maximum legibility.
- **secondary (#fca47a):** Soft accent for supportive highlights or badges.
- **tertiary (#ff4f00):** Primary CTA and interactive emphasis (e.g., "View job openings").
- **neutral (#fffdf9):** Warm off-white base for pages and cards.
- **border (#e5e7eb):** Subtle dividers, card outlines, and section separators.
- **brand-used-oil (#241414):** Deep neutral for strong text moments or over imagery.
- **surface ({colors.neutral}):** Default section and card backgrounds.
- **on-surface ({colors.primary}):** Standard text color over surface.

## Typography

- Headline Large — Degular Display Semibold, 70px/1.2. Used for marquee culture statements and section intros. Availability: custom/self-hosted; agents should not attempt to load it directly.
- Headline Medium — Degular Display Semibold, 51px/1.02, letter-spacing 0.02em. Ideal for hero headings and key section titles. Availability: custom; suggest substitutes with similar warmth and high x-height: Plus Jakarta Sans, Manrope, or Sora (all Google-available).
- Headline Small — Inter, 37px/1.19, letter-spacing -0.014em. Bridges large display and body; use for sub-section headings.
- Headline X-Small — Inter, 27px/1.19. For list section headers (e.g., departments) and card titles.
- Body Medium — Inter, 20px/1.4, letter-spacing -0.025em. Primary reading size across the site; keep paragraphs short and use spacing tokens for rhythm.
- Font sourcing: Inter is Google-hosted and can be loaded directly. For Degular, use a fallback stack in order: "Degular Display Semibold", "Plus Jakarta Sans", "Manrope", system sans.

## Layout

Spacing follows a roomy, linear scale: 10, 20, 36, 60, 96px. Use 60–96px vertical section gutters, 36px between grouped blocks, and 20px for internal card padding. Grids are typically 2-column at desktop (copy + media), collapsing to a single column on mobile. Lists (values, benefits, roles) should favor a single column with 20–36px item spacing for scanability.

## Elevation & Depth

Hierarchy is primarily typographic and spatial. Subtle shadows are allowed: sm (0 0 12px 2px rgb(199,197,199)) or md (0 2px 10px -3px rgb(153,153,153)) for media frames or floating cards. Large shadows are none; when stronger separation is needed, use the border token or a tonal section background while keeping text as on-surface.

## Shapes

Corner radii communicate intent: 3px for utility elements and small controls, 8px for cards and media frames, and 25px for high-prominence buttons and chips. The pill shape (25px) signals primary action and should be reserved for the main CTA.

## Components

The following components map to measured tokens. Use the specified sizes, radii, and colors consistently.

- Buttons
  - Primary: background #ff4f00, text #fffdf9, 25px radius, 50px height, 8px 20px padding.
  - Secondary: text #3d4592, 3px radius, 50px height, 8px 20px padding; no fill by default.
  - Link: text #3d4592, 0px radius.
- Card: background #fffdf9, text #000000, 8px radius, 16px padding; optional sm or md shadow.

### Careers Hero Split
Two-column layout: left uses Headline Medium (51px) with 36px paragraph stack; right is a media card (8px radius, md shadow) for the team video. Primary CTA uses the orange pill.

### Mission Banner
A full-width section with Headline Large (70px) and 20px body copy. Keep vertical padding at 96px and constrain text width to improve readability. Text stays on-surface (#000000).

### Values List
A vertical list of principle blocks: subhead in Headline X-Small (27px) followed by Body (20px). Use 20–36px between items and optional top dividers in border #e5e7eb.

### Remote Together Block
Media-left or media-right card featuring a YouTube playlist link. Use card styles (8px radius) and md shadow; body text at 20px with a link styled as button-link (#3d4592).

### How We Work Trio
Three informational cards (remote work, complex problems, DIBE). Each uses Headline Small (37px) for the title and 20px body, with 36px internal spacing and 8px radius.

### Total Rewards Panel
Benefit items (Competitive pay, Wellness, Personal growth, Next Play Program) stack as cards: 8px radius, 16px padding, 20px body. Use Headline X-Small (27px) for item titles.

### Testimonials
Quote card with large body text (20px) and attribution set as Headline X-Small (27px) or emphasized body. Apply sm shadow and 36px vertical rhythm.

### Job Openings by Department
Section headers use Headline X-Small (27px) with a simple list of links styled as button-link (#3d4592). Keep 20px between links and 36px between departments.

## Do's and Don'ts

- Do reserve #ff4f00 for the primary CTA and the most important interactive moment on a view.
- Do keep body copy at 20px/1.4 and limit line length; increase section padding to 60–96px for long-form content.
- Do use 8px radii for cards/media and 25px only for primary buttons or chips.
- Don't introduce heavy drop shadows; use sm/md shadows or the border token for separation.
- Don't add additional accent colors beyond #fca47a and #ff4f00 without brand approval.
- Don't reduce headline sizes below the provided 51px/70px levels for primary sections; scale down only at responsive breakpoints.

## Agent Prompt Guide

Quick reference — text: #000000, background: #fffdf9, border: #e5e7eb, accent: #ff4f00.

1) Build the split hero
- Section bg: #fffdf9; padding-top: 96px; padding-bottom: 96px.
- Left: h1 font-family: "Degular Display Semibold", "Plus Jakarta Sans", "Manrope", sans-serif; font-size: 51px; line-height: 1.02; letter-spacing: 0.02em; color: #000000. Paragraphs: Inter 20px/1.4.
- CTA button: bg #ff4f00; color #fffdf9; height 50px; padding 8px 20px; border-radius: 25px.
- Right: video card 8px radius; shadow: 0 2px 10px -3px rgb(153,153,153).

2) Create the Values list
- Wrapper max-width: 720px; gap between items: 36px.
- Each item: title Inter 27px/1.19, body Inter 20px/1.4.
- Optional top border: 1px solid #e5e7eb; item padding-top: 20px.

3) Design the three benefit cards
- Grid: 3 columns, 36px gap; card bg #fffdf9; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; shadow: 0 0 12px 2px rgb(199,197,199) (optional).
- Titles: Inter 37px/1.19; body: Inter 20px/1.4; link style color #3d4592.

4) Jobs by department
- Section header: Inter 27px/1.19; margin-bottom: 20px.
- Job links: font-family Inter; color #3d4592; text-decoration: underline on hover; item spacing 20px; department spacing 36px; section padding 60px 0.

## Similar Brands

- Asana — Similarly warm, copy-led careers content with restrained color and a single accent; Asana uses softer gradients where Zapier stays flatter.
- GitHub — Typographic hierarchy and off-white neutrals on careers pages; GitHub's accenting is cooler and uses monospace details.
- Notion — Black on white with oversized headings; Notion leans more minimal and monochrome than Zapier's orange-forward CTAs.
- Airtable — Friendly sans typography and ample white space; Airtable introduces more color blocks and illustration than Zapier's text-first approach.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #fca47a;
  --color-tertiary: #ff4f00;
  --color-neutral: #fffdf9;
  --color-border: #e5e7eb;
  --color-brand-used-oil: #241414;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 70px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 51px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.02;
  --text-headline-md-tracking: 0.02em;
  --text-headline-sm-size: 37px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.014em;
  --text-headline-xs-size: 27px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --text-body-md-tracking: -0.025em;
  --font-degular-display-semibold: "Degular Display - Semibold";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 25px;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 36px;
  --spacing-lg: 60px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-lg);
  --button-primary-padding: 8px 20px;
  --button-primary-height: 50px;
  --button-secondary-text-color: #3d4592;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 20px;
  --button-secondary-height: 50px;
  --button-link-text-color: #3d4592;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #fca47a;
  --color-tertiary: #ff4f00;
  --color-neutral: #fffdf9;
  --color-border: #e5e7eb;
  --color-brand-used-oil: #241414;
  --color-surface: #fffdf9;
  --color-on-surface: #000000;
  --font-headline-lg: "Degular Display - Semibold";
  --font-headline-md: "Degular Display - Semibold";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 70px;
  --text-headline-md: 51px;
  --text-headline-sm: 37px;
  --text-headline-xs: 27px;
  --text-body-md: 20px;
  --tracking-headline-md: 0.02em;
  --tracking-headline-sm: -0.014em;
  --tracking-body-md: -0.025em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 25px;
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 36px;
  --spacing-lg: 60px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.643,
                    0.478
                ],
                "hex": "#fca47a"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.31,
                    0
                ],
                "hex": "#ff4f00"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.992,
                    0.976
                ],
                "hex": "#fffdf9"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-used-oil": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.141,
                    0.078,
                    0.078
                ],
                "hex": "#241414"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.992,
                    0.976
                ],
                "hex": "#fffdf9"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 36,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 60,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 3,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 25,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Degular Display - Semibold",
                "fontSize": {
                    "value": 70,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Degular Display - Semibold",
                "fontSize": {
                    "value": 51,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": 0.02,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 37,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.014,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 27,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Zapier Careers**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Productivity →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery