Zapier

Overview

Zapier is the original "connect your apps" workflow automation platform — and the marketing surface today reads as confidently-mature. The brand pairs a warm-cream canvas `{colors.canvas}` (`#fffefb`) with a deep coffee-ink `{colors.ink}` (`#201515`) and a single saturated orange `{colors.primary}` (`#ff4f00`) CTA. The warmth in the neutrals — slightly cream rather than pure white — is the brand's defining temperature signal.

Type carries the second voice. The proprietary `Degular Display` family carries hero displays at weight 500. The brand uses `Inter` for everything else — sub-displays, body, button, eyebrow. The two-face pairing reads as "the brand has its own typeface for the loud moments and uses the workhorse for the rest" — modest and unflashy.

Cards are universally `{rounded.md}` 12 px. Buttons share the same 12 px radius — not pills, not square. The brand sits between the friendly-rounded and the technical-square camps with a deliberate middle position.

**Key Characteristics:**

• A single primary CTA color `{colors.primary}` (`#ff4f00`) — saturated orange. The brand's conversion signature.
• Warm-cream canvas `{colors.canvas}` (`#fffefb`) — not pure white. The temperature IS the brand voice.
• Deep coffee ink `{colors.ink}` (`#201515`) — not pure black. Warmth carries through to text.
• Proprietary Degular Display for hero-scale, Inter for everything else. Two-face system.
• `{rounded.md}` 12 px for buttons and cards — the brand's middle-radius signature.
• A muted cream / coffee neutral ladder — `{colors.canvas-soft}` (`#f8f4f0`), `{colors.mute}` (`#c5c0b1`), `{colors.body-mid}` (`#939084`), `{colors.body}` (`#605d52`) — every neutral carries warmth, none are cool grey.

Colors

Brand & Accent

• **Zapier Orange** (`{colors.primary}` — `#ff4f00`): The single brand accent. Every primary CTA pill, every conversion target. The saturated orange IS the brand.

Surface

• **Canvas** (`{colors.canvas}` — `#fffefb`): Warm off-white page background.
• **Canvas Soft** (`{colors.canvas-soft}` — `#f8f4f0`): Cream-tinted soft surface for cards / inset regions.

Text

• **Ink** (`{colors.ink}` — `#201515`): Deep coffee — every heading and primary text.
• **Ink Soft** (`{colors.ink-soft}` — `#2f2a26`): Near-black with brown warmth.
• **Ink Mid** (`{colors.ink-mid}` — `#36342e`): Mid-emphasis text.
• **Body** (`{colors.body}` — `#605d52`): Default body text color.
• **Body Mid** (`{colors.body-mid}` — `#939084`): Secondary body / metadata.
• **Mute** (`{colors.mute}` — `#c5c0b1`): Lowest-priority text — fine print, low-emphasis captions.

Semantic

The brand doesn't surface a separate semantic palette on its marketing pages. Status / validation cues borrow from the ink + orange hierarchy.

Typography

Font Family

Two faces ladder the system:

1. **Degular Display** — proprietary geometric display sans used for hero headlines at weight 500. The brand's typographic signature.

2. **Inter** — used for sub-displays, body, links, buttons, and eyebrows. Weights 400 / 500 / 600 / 700 are present.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 56px | 500 | 56px | 0 | Hero headline (Degular Display). |

| `{typography.display-lg}` | 48px | 500 | 48px | 0 | Sub-hero displays (Degular Display). |

| `{typography.display-md}` | 32px | 500 | 36px | 1px | Section displays (Degular Display, positive tracking). |

| `{typography.display-sub-lg}` | 48px | 500 | 49.92px | 0 | Inter-rendered sub-display. |

| `{typography.display-sub-md}` | 32px | 400 | 40px | 0 | Inter sub-display. |

| `{typography.display-sub-sm}` | 24px | 600 | 30px | -0.6px | Card titles (Inter, semibold). |

| `{typography.display-xs}` | 20px | 700 | 25px | -0.5px | Inline display micro-headings. |

| `{typography.body-lg}` | 20px | 400 | 30px | -0.2px | Lead paragraphs. |

| `{typography.body-md}` | 18px | 400 | 27px | 0 | Default body. |

| `{typography.body-md-strong}` | 18px | 600 | 27px | 0 | Bolded inline body. |

| `{typography.body-sm}` | 16px | 400 | 24px | 0 | Secondary body. |

| `{typography.body-sm-strong}` | 16px | 600 | 24px | 0 | Bold caption. |

| `{typography.caption}` | 14px | 400 | 21px | 0 | Fine print. |

| `{typography.eyebrow-uppercase}` | 14px | 500 | 14px | 1px | UPPERCASE eyebrow (Degular Display, positive tracking). |

| `{typography.button-md}` | 18px | 600 | 27px | 0 | Primary button label. |

| `{typography.button-sm}` | 14.4px | 700 | 14.4px | 0.144px | Small button label. |

Principles

• **Degular Display 500 for hero, Inter for everything else.** Strict role separation.
• **Positive tracking on the Degular eyebrow** — `1 px` at 14 px is the brand's signature label style.
• **Sentence-case headlines.** The brand never uppercases display sizes.

Note on Font Substitutes

Degular Display is proprietary. Open-source substitutes:

• **Display** — *Inter* weight 500 at hero scale comes closest. *Mona Sans* weight 500 is a softer alternative.
• **Sub-display + body** — *Inter* is the brand's actual second face.

Layout

Spacing System

• **Base unit**: 4 px.
• **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 24 px · `{spacing.2xl}` 32 px · `{spacing.3xl}` 48 px · `{spacing.4xl}` 64 px.
• **Section padding**: bands use `{spacing.4xl}` 64 px top/bottom.
• **Card interior**: cards at `{spacing.xl}` 24 px.

Grid & Container

• Marketing container ~1280 px wide; centred with gutters.
• Hero: split at desktop (headline left, illustration right); stacked at mobile.
• Pricing tier grid: 3 / 4-up at desktop.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 768px | Hero stacks; grids 1-up; hamburger nav. |

| Tablet | 768–1023px | 2-up grids. |

| Desktop | ≥ 1024px | Full grids; hero split. |

#### Touch Targets

Buttons render ~48 px tall (12 vertical padding + 27 line). WCAG AAA met.

#### Image Behavior

The brand uses illustrative SVGs of zaps / workflows + product screenshots inside `{rounded.md}` framed cards. Photography is rare.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| Level 0 — Flat | No shadow, no border. | Default for hero. |

| Level 1 — Hairline | 1 px solid `{colors.ink}` border. | Pricing-tier card chrome, outline buttons. |

| Level 2 — Soft Card | `{colors.canvas-soft}` cream fill against `{colors.canvas}` page. | Default content cards — surface contrast carries elevation. |

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Full-bleed bands. |

| `{rounded.sm}` | 6px | Inline pills, form inputs. |

| `{rounded.md}` | 12px | The brand's canonical button + card radius. |

| `{rounded.pill}` | 9999px | Status pills, badges. |

| `{rounded.full}` | 9999px | Circular icon containers. |

Components

Buttons

**`button-primary`** — the orange CTA.

• Background `{colors.primary}`, text `{colors.on-primary}` (warm white), label `{typography.button-md}`, padding `{spacing.md} {spacing.xl}`, shape `{rounded.md}` 12 px.

**`button-secondary`** — the dark coffee-ink CTA.

• Background `{colors.ink}`, text `{colors.on-primary}`, same typography / padding / shape.

**`button-tertiary`** — the outline CTA.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, same typography / padding / shape.

**`button-text`** — text-only CTA used inside cards / nav.

• Background `{colors.canvas}`, text `{colors.ink}`, body in `{typography.button-sm}`, padding `{spacing.sm} {spacing.lg}`, shape `{rounded.md}`.

Cards & Containers

**`card-content`** — the default cream content card.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.xl}`, shape `{rounded.md}`.

**`card-feature-cream`** — the cream feature card.

• Same chrome as `card-content`. Hosts headline + body + illustration.

**`card-feature-dark`** — the polarity-flipped dark coffee card.

• Background `{colors.ink}`, text `{colors.on-primary}`, padding `{spacing.xl}`, shape `{rounded.md}`.

**`pricing-card`** — the default pricing tier card.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, padding `{spacing.xl}`, shape `{rounded.md}`.

**`pricing-card-featured`** — the polarity-flipped featured pricing tier.

• Background `{colors.ink}`, text `{colors.on-primary}`, same shape / padding.

Inputs & Forms

**`text-input`** — the canonical text input.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.ink}` border, body in `{typography.body-md}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.sm}` 6 px.

Navigation

**`nav-bar`** — the sticky top nav.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.xl}`.

**`nav-link`** — link items inside nav.

• Text `{colors.ink}`, set in `{typography.body-sm}`.

**`footer`** — the dark coffee footer.

• Background `{colors.ink}`, text `{colors.canvas-soft}`, padding `{spacing.3xl} {spacing.xl}`. Body in `{typography.body-sm}`.

Signature Components

**`hero-band`** — the cream hero band.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.4xl} {spacing.xl}`. Headline in `{typography.display-xl}` (Degular Display 56 px / 500).

**`hero-band-dark`** — the polarity-flipped dark coffee hero.

• Background `{colors.ink}`, text `{colors.on-primary}`, same scale.

**`content-band-cream`** — the cream content band that follows hero.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.4xl} {spacing.xl}`. Section headline in `{typography.display-lg}`.

**`content-band-light`** — the white content band.

• Background `{colors.canvas}`, text `{colors.ink}`, same padding / scale.

**`eyebrow-uppercase`** — the small UPPERCASE Degular eyebrow above section headlines.

• Text `{colors.ink}`, set in `{typography.eyebrow-uppercase}` (14 px / 500 / `1 px` tracking).

**`badge-pill`** — the inline pill for metadata / tag.

• Background `{colors.canvas-soft}`, text `{colors.ink}`, body in `{typography.body-sm}`, padding `{spacing.xs} {spacing.md}`, shape `{rounded.pill}`.

Examples (illustrative)

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame.

• Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.

• Properties: `backgroundColor`, `rounded`, `padding`, `typography`

Do's and Don'ts

Do

• Reserve `{colors.primary}` Zapier orange for every primary CTA. The saturated orange IS the conversion signature.
• Keep canvas WARM — `{colors.canvas}` `#fffefb` cream, not pure white. The temperature is the brand voice.
• Set hero headlines in `{typography.display-xl}` Degular Display weight 500. Sentence-case, no uppercase.
• Pair Degular Display (hero, eyebrow) with Inter (everything else). Two faces, two roles.
• Use `{rounded.md}` 12 px for buttons + cards. The middle radius is the brand's signature.
• Pair orange CTA with ink-dark text on cream backgrounds — the three-token rhythm is the brand's whole conversion story.

Don't

• Don't replace cream canvas with pure white. The warmth is the brand.
• Don't use pure black ink. The coffee-warmth in `#201515` carries through every text color.
• Don't render CTAs as pills. The brand's button is 12 px rounded rectangle.
• Don't introduce a second chromatic accent. Orange + cream + coffee is the entire palette.
• Don't substitute Degular Display with a cool geometric sans (e.g., generic Helvetica) — the brand's display face has warm proportions that the substitute doesn't capture.

개요

Zapier는 독창적인 '앱 연결' 워크플로 자동화 플랫폼이며 오늘날 마케팅 표면은 자신감 있게 성숙한 것으로 읽혀집니다. 이 브랜드는 따뜻한 크림색 캔버스 ``(``)와 진한 커피 잉크 ``(``) 및 단일 포화 오렌지 ``(``) CTA를 결합합니다. 순수한 흰색이 아닌 약간 크림색인 중성색의 따뜻함이 브랜드를 정의하는 온도 신호입니다.

Type은 두 번째 성부를 전달합니다. 독점 `Degular Display` 제품군은 무게 500의 히어로 디스플레이를 제공합니다. 이 브랜드는 하위 디스플레이, 본체, 버튼, 눈썹 등 모든 것에 `Inter`을 사용합니다. 양면 조합은 "브랜드는 시끄러운 순간을 위한 자체 서체를 가지고 있으며 나머지는 주력 제품을 사용합니다"라고 읽습니다. 겸손하고 화려하지 않습니다.

카드는 보편적으로 `` 12픽셀입니다. 버튼은 알약이나 정사각형이 아닌 동일한 12px 반경을 공유합니다. 이 브랜드는 의도적인 중간 위치를 갖고 우호적인 진영과 기술적인 진영 사이에 자리잡고 있습니다.

**주요 특성:**

• 단일 기본 CTA 색상 `` (``) — 포화 주황색. 브랜드의 전환 서명입니다.
• 따뜻한 크림색 캔버스 `` (``) — 순백색이 아닙니다. 온도는 브랜드의 목소리입니다.
• 딥 커피 잉크 `` (``) — 순수한 검정색이 아닙니다. 따뜻함이 텍스트로 전달됩니다.
• 히어로급을 위한 독점 Degular 디스플레이, 그 밖의 모든 것을 위한 Inter. 양면 시스템.
• `` 버튼 및 카드용 12픽셀 — 브랜드의 중간 반경 시그니처.
• 음소거 크림/커피 중립 사다리 — ``(``), ``(``), ``(``), `` (_``) — 모든 중성색은 따뜻함을 전달하며 차가운 회색은 없습니다.

색상

브랜드 및 액센트

• **Zapier Orange** (`` — ``): 단일 브랜드 액센트. 모든 기본 CTA 알약, 모든 전환 목표. 강렬한 오렌지색이 브랜드입니다.

표면

• **캔버스**(`` — ``): 따뜻한 황백색 페이지 배경.
• **부드러운 캔버스**(`` — ``): 카드용 크림색 부드러운 표면/삽입 영역.

텍스트

• **잉크** (`` — ``): 딥 커피 — 모든 제목과 기본 텍스트.
• **부드러운 잉크**(`` — ``): 갈색의 따뜻함이 있는 검정색에 가깝습니다.
• **잉크 중간**(`` — ``): 중간 강조 텍스트.
• **본문**(`` — ``): 기본 본문 텍스트 색상.
• **본문 중간**(`` — ``): 보조 본문/메타데이터.
• **음소거** (`` — ``): 가장 낮은 우선순위 텍스트 — 작은 글씨, 낮은 강조 캡션.

의미

브랜드는 마케팅 페이지에 별도의 의미 체계 팔레트를 표시하지 않습니다. 상태/검증 신호는 잉크 + 주황색 계층 구조에서 차용되었습니다.

타이포그래피

글꼴군

두 얼굴이 시스템을 구성합니다.

1. **Degular Display** — 무게 500의 영웅 헤드라인에 사용되는 독점적인 기하학적 디스플레이. 브랜드의 활자체 서명.

2. **인터** — 하위 디스플레이, 본문, 링크, 버튼 및 눈썹에 사용됩니다. 무게 400/500/600/700이 존재합니다.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 56px | 500 | 56px | 0 | Hero 헤드라인(Degular Display). |_

| _`` | 48px | 500 | 48px | 0 | 서브 히어로 디스플레이(Degular Display). |_

| _`` | 32px | 500 | 36px | 1픽셀 | 섹션 표시(Degular Display, 포지티브 추적) |_

| _`` | 48px | 500 | 49.92px | 0 | 상호 렌더링된 하위 디스플레이. |_

| _`` | 32px | 400 | 40px | 0 | 하위 디스플레이 간. |

| _`` | 24px | 600 | 30px | -0.6px | 카드 제목(Inter, 세미볼드). |_

| _`` | 20픽셀 | 700 | 25픽셀 | -0.5px | 인라인 디스플레이 마이크로 제목. |_

| _`` | 20픽셀 | 400 | 30px | -0.2px | 단락을 리드합니다. |_

| _`` | 18px | 400 | 27px | 0 | 기본 본체. |_

| _`` | 18px | 600 | 27px | 0 | 굵은 글씨의 인라인 본문. |

| _`` | 16px | 400 | 24px | 0 | 보조 본체. |

| _`` | 16px | 600 | 24px | 0 | 굵은 캡션. |

| _`` | 14px | 400 | 21px | 0 | 작은 글씨. |_

| _`` | 14px | 500 | 14px | 1픽셀 | 대문자 눈썹(Degular Display, 포지티브 추적). |_

| _`` | 18px | 600 | 27px | 0 | 기본 버튼 라벨. |

| _`` | 14.4px | 700 | 14.4px | 0.144px | 작은 버튼 라벨. |_

원칙

• **영웅을 위한 Degular Display 500, 그 밖의 모든 것을 위한 Inter.** 엄격한 역할 분리.
• **Degular 눈썹의 긍정적인 추적** — 14px의 `1 px`은 브랜드의 시그니처 라벨 스타일입니다.
• **문장 헤드라인.** 브랜드는 디스플레이 크기를 절대로 대문자로 표시하지 않습니다.

글꼴 대체에 대한 참고사항

Degular Display는 독점적입니다. 오픈 소스 대체물:

• **디스플레이** — 영웅 규모에서 *간* 무게 500이 가장 가깝습니다. *Mona Sans* 웨이트 500은 더 부드러운 대안입니다.
• **하위 디스플레이 + 본체** — *인터*는 브랜드의 실제 두 번째 얼굴입니다.

레이아웃

간격 시스템

• **기본 단위**: 4픽셀.
• **토큰**: `` 2px · `` 4px · `` 8px · `` 12px · `` 16px · `` 24픽셀 · `` 32픽셀 · `` 48픽셀 · `` 64픽셀.
• **섹션 패딩**: 밴드는 `` 64px 상단/하단을 사용합니다.
• **카드 내부**: `` 24px
의 카드

그리드 및 컨테이너

• 마케팅 컨테이너 ~1280픽셀 너비; 중앙에 홈통이 있습니다.
• Hero: 데스크톱에서 분할(제목 왼쪽, 그림 오른쪽); 모바일에 쌓여있습니다.
• 가격 등급 표: 데스크탑에서 3/4-up.

반응형 전략

#### 중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일 | _< 768px | Hero stacks; grids 1-up; hamburger nav. |

| 태블릿 | 768~1023px | 2업 그리드. |_

| 데스크탑 | ≥ 1024px | 전체 그리드; 영웅 분할. |

#### 터치 대상

버튼은 높이가 ~48px(세로 패딩 12개 + 줄 27개)로 렌더링됩니다. WCAG AAA 충족

#### 이미지 동작

브랜드는 `` 프레임 카드 내부에 Zaps/워크플로 + 제품 스크린샷의 예시 SVG를 사용합니다. 사진 촬영은 드물다.

고도 및 깊이

| 레벨 | 치료 | |

사용

|---|---|---|

| 레벨 0 — 평면 | 그림자도 없고 국경도 없습니다. | 영웅의 기본값입니다. |

| 레벨 1 - 헤어라인 | 1픽셀 실선 `` 테두리. | 가격 등급 카드 크롬, 개요 버튼. |

| 레벨 2 — 소프트 카드 | _`` 크림을 `` 페이지에 채우세요. | 기본 콘텐츠 카드 - 표면 대비가 높이를 전달합니다. |

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 0픽셀 | 풀 블리드 밴드. |

| _`` | 6픽셀 | 인라인 알약, 양식 입력. |

| _`` | 12px | 브랜드의 표준 버튼 + 카드 반경. |

| _`` | 9999px | 상태 알약, 배지. |

| _`` | 9999px | 원형 아이콘 컨테이너. |

구성요소

버튼

**`button-primary`** — 주황색 CTA.

• 배경 ``, 텍스트 ``(따뜻한 흰색), 라벨 ``, 패딩 ` `, 모양 `` 12px.

**`button-secondary`** — 진한 커피 잉크 CTA.

• 배경 ``, 텍스트 ``, 동일한 타이포그래피/패딩/모양.

**`button-tertiary`** — 개요 CTA.

• 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 동일한 타이포그래피/패딩/모양.

_**`button-text`** — 카드/nav 내부에 사용되는 텍스트 전용 CTA.

• 배경 ``, 텍스트 ``, 본문 ``, 패딩 ` `, 모양 ``.

카드 및 용기

**`card-content`** — 기본 크림 콘텐츠 카드.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``.

**`card-feature-cream`** — 크림 기능 카드.

• `card-content`와 동일한 크롬입니다. 호스트 헤드라인 + 본문 + 일러스트레이션.

**`card-feature-dark`** — 극성이 반전된 다크 커피 카드.

• 배경 ``, 텍스트 ``, 패딩 ``, 모양 ``.

**`pricing-card`** — 기본 가격 책정 등급 카드.

• 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 패딩 ``, 모양 ``.

**`pricing-card-featured`** — 극성이 반대인 추천 가격 책정 계층입니다.

• 배경 ``, 텍스트 ``, 동일한 모양/패딩.

입력 및 양식

_**`text-input`** — 표준 텍스트 입력.

• 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 본문 ``, 패딩 ` `, 모양 `` 6px.

탐색

**`nav-bar`** — 고정 상단 탐색

• 배경 ``, 텍스트 ``, 패딩 ` `.

**`nav-link`** — 탐색 내부 항목 링크

• 텍스트 ``, ``에 설정됨.

**`footer`** — 다크 커피 바닥글.

• 배경 ``, 텍스트 ``, 패딩 ` `. ``.
의 본문

서명 구성요소

**`hero-band`** — 크림 히어로 밴드.

• 배경 ``, 텍스트 ``, 패딩 ` `. ``의 헤드라인(Degular Display 56px / 500).

**`hero-band-dark`** — 극성이 뒤집힌 다크 커피 영웅.

• 배경 ``, 텍스트 ``, 동일한 배율.

_**`content-band-cream`** — 영웅을 따르는 크림 콘텐츠 밴드

• 배경 ``, 텍스트 ``, 패딩 ` `. ``.
의 섹션 헤드라인

**`content-band-light`** — 흰색 콘텐츠 밴드.

• 배경 ``, 텍스트 ``, 동일한 패딩/크기.

**`eyebrow-uppercase`** — 섹션 헤드라인 위의 작은 대문자 Degular 눈썹.

• 텍스트 ``, ``(14px/500/`1 px` 추적)에 설정됨

**`badge-pill`** — 메타데이터/태그에 대한 인라인 알약입니다.

• 배경 ``, 텍스트 ``, 본문 ``, 패딩 ` `, 모양 ``.

예(설명)

> 자동 파생 키트-미러 데모 표면(`scripts/derive-examples-block.mjs`). 각 `ex-*` 항목은 브랜드 기본 기본 요소를 참조하므로 다운스트림 소비자(`/preview-design`, `/generate-kit`)는 동일한 10개 표면을 일관되게 다시 스킨합니다. `TO_FILL` 마커는 누락된 기본 요소를 나타냅니다. LLM 판단 단계에서 해결됩니다.

**`ex-pricing-tier`** — 기본 가격 등급 카드. 브랜드 캔버스처럼 부드러운 표면에 기능 카드 크롬을 재사용합니다.

• 속성: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — 추천/강조 표시된 계층 — 극성이 반전된 표면(밝은 모드에서 어두운 채우기 + 밝은 텍스트, 어두운 모드에서 밝은 채우기 + 어두운 텍스트).

• 속성: `backgroundColor`, `textColor`, `rounded`, `padding`

_**`ex-product-selector`** — 포함된 내용 요약 카드 — SaaS/B2B 업종에 맞게 용도가 변경되었습니다(문자 그대로의 제품 갤러리 아님).

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — 구독 요약 — SaaS/B2B용으로 재사용됨(리터럴 카트가 아닌 추가 기능당 항목).

• 속성: `backgroundColor`, `rounded`, `padding`, `item-divider`

_**`ex-app-shell-row`** — 앱 셸 예시 내부의 사이드바 탐색 행. 활성 상태는 기본 브랜드를 지표로 사용합니다.

• 속성: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — 기본 데이터 테이블 th + td chrome. 헤더는 모노 캡 눈썹 타이포그래피를 사용합니다. body는 body-sm을 사용합니다.

• 속성: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — 로그인/가입 카드. 내부에 텍스트 입력 기본 요소가 포함된 기능 카드 크롬을 재사용합니다.

• 속성: `backgroundColor`, `rounded`, `padding`

_**`ex-modal-card`** — 모달 대화 상자 표면 — 높은 그림자가 있는 기능 카드와 동일한 크롬.

• 속성: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — 빈 상태 그림 프레임.

• 속성: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — 토스트 알림 표면 — 기능 카드 모양 + 중간 그림자.

• 속성: `backgroundColor`, `rounded`, `padding`, `typography`

해야 할 일과 하지 말아야 할 일

하세요

• 모든 기본 CTA에 대해 `` Zapier 오렌지를 예약하세요. 진한 주황색은 변환 서명입니다.
• 캔버스를 따뜻하게 유지하세요. — `` `` 크림색, 순백색이 아님. 온도는 브랜드의 목소리입니다.
• 영웅 헤드라인을 `` Degular 표시 가중치 500으로 설정합니다. 문장 대소문자, 대문자 없음.
• Degular Display(영웅, 눈썹)를 Inter(다른 모든 것)와 페어링합니다. 두 얼굴, 두 역할.
• 버튼 + 카드에는 `` 12픽셀을 사용하세요. 중간 반경은 브랜드의 시그니처입니다.
• 주황색 CTA와 크림색 배경의 어두운 잉크 텍스트를 결합하세요. 3토큰 리듬이 브랜드의 전체 전환 스토리입니다.

하지 마세요

• 크림색 캔버스를 순백색으로 바꾸지 마세요. 따뜻함이 바로 브랜드입니다.
• 순수한 검정색 잉크를 사용하지 마세요. ``의 커피 따뜻함이 모든 텍스트 색상에 전달됩니다.
• CTA를 알약으로 렌더링하지 마세요. 브랜드 버튼은 12픽셀의 둥근 직사각형입니다.
• 두 번째 반음계 악센트를 도입하지 마세요. 오렌지+크림+커피가 전체 팔레트입니다.
• Degular Display를 멋진 기하학적 산세(예: 일반 Helvetica)로 대체하지 마십시오. 브랜드의 디스플레이 표면은 대체 제품이 포착할 수 없는 따뜻한 비율을 가지고 있습니다.

概要

Zapier は、オリジナルの「アプリを接続する」ワークフロー自動化プラットフォームであり、今日のマーケティング面では自信を持って成熟しているように見えます。このブランドは、ウォームクリーム色のキャンバス `` (``) と、深いコーヒーインク `` (``) および単一の飽和オレンジ `` (``) の CTA を組み合わせています。純白ではなくわずかにクリーム色のニュートラルカラーの暖かさは、ブランドを定義する温度シグナルです。

Type は 2 番目の音声を伝えます。独自の `Degular Display` ファミリは、重量 500 のヒーロー ディスプレイを搭載しています。このブランドは、サブディスプレイ、ボディ、ボタン、アイブロウなど、その他すべてに `Inter` を使用しています。 2 つの顔の組み合わせは、「ブランドは騒々しい瞬間には独自の書体を使用し、残りの部分には主力の書体を使用します」と読み取れます。控えめで派手ではありません。

カードは一般的に__CODEBCK_589___ 12 ピクセルです。ボタンは同じ 12 ピクセルの半径を共有します。錠剤や正方形ではありません。このブランドは、フレンドリーなチームとテクニカルなチームの間に位置し、意図的に中間の位置にあります。

_**主な特徴:**

• 単一のプライマリ CTA カラー `` (``) — 飽和したオレンジ。ブランドのコンバージョン署名
• ウォームクリーム色のキャンバス `` (``) — 真っ白ではありません。温度はブランドの声です。
• 濃いコーヒーインク `` (``) — 純粋な黒ではありません。温かみがテキストに伝わります。
• ヒーロースケールには独自の Degular ディスプレイ、その他すべてには Inter。 2 面システム。
• `` ボタンとカード用の 12 ピクセル - ブランドの中半径の署名。
• 落ち着いたクリーム/コーヒーのニュートラルラダー — `` (``)、__CODEBCK_599___ (``)、__CODEBCK_601___ (``)、__CODEBCK_603___ (``) — すべてのニュートラルには暖かさがあり、クールなグレーはありません。

色

ブランドとアクセント

• **ザピア オレンジ** (`` — ``): 単一ブランドのアクセント。すべての主要 CTA ピル、すべてのコンバージョン ターゲット。飽和したオレンジがブランドです。

サーフェス

• **キャンバス** (`` — ``): 温かみのあるオフホワイトのページ背景。
• **キャンバス ソフト** (`` — ``): カード/差し込み領域用のクリーム色の柔らかい表面。

テキスト

• **インク** (`` — ``): 濃いコーヒー — すべての見出しと主要なテキスト。
• **インク ソフト** (`` — ``): 茶色に近い温かみのある黒。
• **インク中間** (`` — ``): 中間強調テキスト。
• **本文** (`` — ``): デフォルトの本文テキストの色。
• **Body Mid** (`` — ``): セカンダリ本文/メタデータ。
• **ミュート** (`` — ``): 優先度が最も低いテキスト — 細かい文字で強調度の低いキャプション。

セマンティック

_このブランドは、マーケティング ページに別個のセマンティック パレットを表示していません。 ステータス/検証キューは、インク + オレンジ階層から借用します。

タイポグラフィ

フォント ファミリー

2 つの顔がシステムをはしごする:

1。 **Degular Display** — ウェイト 500 のヒーロー見出しに使用されない独自の幾何学的なディスプレイ。ブランドのタイポグラフィーの署名。

2. **Inter** — サブディスプレイ、ボディ、リンク、ボタン、眉毛に使用されます。ウェイト 400 / 500 / 600 / 700 が存在します。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 56ピクセル | 500 | 56ピクセル | 0 |ヒーローの見出し (Degular Display)。 |

| `` | 48ピクセル | 500 | 48ピクセル | 0 |サブヒーローディスプレイ（Degular Display）。 |

| `` | 32ピクセル | 500 | 36ピクセル | 1ピクセル |セクション表示 (Degular Display、ポジティブ トラッキング)。 |

| `` | 48ピクセル | 500 | 49.92ピクセル | 0 |インターレンダリングされたサブディスプレイ。 |

| `` | 32ピクセル | 400 | 40ピクセル | 0 |インターサブディスプレイ。 |

| `` | 24ピクセル | 600 | 30ピクセル | -0.6ピクセル |カードのタイトル (Inter、半太字)。 |

| `` | 20ピクセル | 700 | 25ピクセル | -0.5ピクセル |インライン表示のマイクロ見出し。 |

| `` | 20ピクセル | 400 | 30ピクセル | -0.2ピクセル |段落をリードします。 |

| `` | 18ピクセル | 400 | 27ピクセル | 0 |デフォルトの本体。 |

| `` | 18ピクセル | 600 | 27ピクセル | 0 |太字のインライン本文。 |

| `` | 16ピクセル | 400 | 24ピクセル | 0 |二次本体。 |

| `` | 16ピクセル | 600 | 24ピクセル | 0 |太字のキャプション。 |

| `` | 14ピクセル | 400 | 21ピクセル | 0 |細かい文字。 |

| `` | 14ピクセル | 500 | 14ピクセル | 1ピクセル |大文字の眉 (Degular Display、ポジティブ トラッキング)。 |

| `` | 18ピクセル | 600 | 27ピクセル | 0 |プライマリボタンのラベル。 |

| `` | 14.4ピクセル | 700 | 14.4ピクセル | 0.144ピクセル |小さなボタンのラベル。 |

原則

• **ヒーローには Degular Display 500、その他すべてには Inter。** 厳密な役割の分離。
• **Degular アイブロウのポジティブ トラッキング** — 14 ピクセルの `1 px` は、ブランドの特徴的なラベル スタイルです。
• **センテンスケースの見出し。** ブランドでは表示サイズを大文字にすることはありません。

フォントの代替に関する注意

Degular Display は独自仕様です。オープンソースの代替品:

• **表示** — ヒーロー スケールでの *インター* ウェイト 500 が最も近くなります。 *Mona Sans* ウェイト 500 は、よりソフトな代替手段です。
• **サブディスプレイ + ボディ** — *Inter* はブランドの実際の第 2 の顔です。

レイアウト

間隔システム_

• **基本単位**: 4 ピクセル
• **トークン**: `` 2 px · `` 4 px · `` 8 px · `` 12 px · `` 16 px · `` 24 px · `` 32 ピクセル · `` 48 ピクセル · `` 64 ピクセル.
• **セクション パディング**: バンドは `` 64 ピクセルの上部/下部を使用します。
• **カード内部**: `` 24 ピクセルのカード。

グリッドとコンテナ

• マーケティング コンテナ幅 ~1280 ピクセル。中央に溝があります。
• ヒーロー: デスクトップで分割 (見出しは左、イラストは右)。モバイルにスタックされています。
• 価格階層グリッド: デスクトップでは 3 / 4 以上。

レスポンシブ戦略

#### ブレークポイント

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル | < 768px | Hero stacks; grids 1-up; hamburger nav. |

|タブレット | 768–1023ピクセル | 2アップグリッド。 |

|デスクトップ | ≥ 1024 ピクセル |フルグリッド。主人公分裂。 |

#### タッチターゲット

ボタンは高さ約 48 ピクセル (垂直方向のパディング 12 + 27 行) でレンダリングされます。 WCAG AAA が開催されました。

#### 画像の動作

このブランドは、__CODEBCK_651___ フレーム カード内でザップ/ワークフローのイラスト SVG + 製品のスクリーンショットを使用しています。写真は珍しいです。

標高と深さ

|レベル |治療 | |

を使用します

|---|---|---|

|レベル 0 — フラット |影も境界線もありません。 |ヒーローのデフォルト。 |

|レベル 1 — ヘアライン | 1 ピクセルの実線__CODEBCK_652___ の境界線。 |価格帯カードのクロム、アウトライン ボタン。 |

|レベル 2 — ソフトカード | `` ページに対して `` クリームを塗りつぶします。 |デフォルトのコンテンツ カード — 表面のコントラストが高さを伝えます。 |

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 0ピクセル |フルブリードバンド。 |

| `` | 6ピクセル |インライン錠剤、フォーム入力。 |

| `` | 12ピクセル |ブランドの正規のボタン + カードの半径。 |

| `` | 9999ピクセル |ステータスの丸薬、バッジ。 |

| `` | 9999ピクセル |円形のアイコンコンテナー。 |

コンポーネント

ボタン

**`button-primary`** — オレンジ色の CTA。

• 背景 ``、テキスト__CODEBCK_662___ (温白色)、ラベル__CODEBCK_663___、パディング__CODEBCK_664___、形状__CODEBCK_665___ 12 ピクセル

**`button-secondary`** — ダークコーヒーインクの CTA。

• 背景__CODEBCK_667___、テキスト__CODEBCK_668___、同じタイポグラフィ/パディング/形状。

**`button-tertiary`** — アウトライン CTA。

• 背景__CODEBCK_670___、テキスト__CODEBCK_671___、1ピクセルの実線__CODEBCK_672___枠線、同じタイポグラフィ/パディング/形状。

**`button-text`** — カード内で使用されるテキストのみの CTA / ナビゲーション

• 背景__CODEBCK_674___、テキスト__CODEBCK_675___、本文__CODEBCK_676___、パディング__CODEBCK_677___、形状__CODEBCK_678___.

カードとコンテナ

**`card-content`** — デフォルトのクリーム コンテンツ カード。

• 背景__CODEBCK_680___、テキスト__CODEBCK_681___、パディング__CODEBCK_682___、形状__CODEBCK_683___.

**`card-feature-cream`** — クリーム色のフィーチャー カード。

• __CODEBCK_685___ と同じクロム。見出し + 本文 + イラストをホストします。

**`card-feature-dark`** — 極性を反転したダーク コーヒー カード。

• 背景__CODEBCK_687___、テキスト__CODEBCK_688___、パディング__CODEBCK_689___、形状__CODEBCK_690___.

**`pricing-card`** — デフォルトの価格帯カード。

• 背景__CODEBCK_692___、テキスト__CODEBCK_693___、1ピクセルの実線__CODEBCK_694___境界線、パディング__CODEBCK_695___、形状__CODEBCK_696___.

**`pricing-card-featured`** — 極性を反転した注目の価格帯。

• 背景__CODEBCK_698___、テキスト__CODEBCK_699___、同じ形状/パディング。

入力とフォーム

**`text-input`** — 正規のテキスト入力。

• 背景__CODEBCK_701___、テキスト__CODEBCK_702___、1ピクセルの実線__CODEBCK_703___境界線、本文__CODEBCK_704___、パディング__CODEBCK_705___、形状__CODEBCK_706___ 6ピクセル

ナビゲーション

**`nav-bar`** — スティッキートップナビゲーション

• 背景__CODEBCK_708___、テキスト__CODEBCK_709___、パディング__CODEBCK_710___.

**`nav-link`** — ナビゲーション内の項目をリンクします

• テキスト__CODEBCK_712___、__CODEBCK_713___に設定。

**`footer`** — ダークコーヒーのフッター。

• 背景__CODEBCK_715___、テキスト__CODEBCK_716___、パディング__CODEBCK_717___。 ``.
の本文

署名コンポーネント

**`hero-band`** — クリーム ヒーロー バンド。

• 背景__CODEBCK_720___、テキスト__CODEBCK_721___、パディング__CODEBCK_722___。 `` の見出し (Degular Display 56 px / 500).

**`hero-band-dark`** — 極性を反転したダーク コーヒーのヒーロー。

• 背景__CODEBCK_725___、テキスト__CODEBCK_726___、同じ縮尺。

**`content-band-cream`** — ヒーローに続くクリーム コンテンツ バンド。

• 背景__CODEBCK_728___、テキスト__CODEBCK_729___、パディング__CODEBCK_730___。 ``.
のセクション見出し

**`content-band-light`** — 白いコンテンツ バンド。

• 背景__CODEBCK_733___、テキスト__CODEBCK_734___、同じパディング/スケール。

**`eyebrow-uppercase`** — セクション見出しの上の小さな大文字の緩やかな眉。

• テキスト__CODEBCK_736___、__CODEBCK_737___で設定(14ピクセル/500/__CODEBCK_738___追跡)。

_**`badge-pill`** — メタデータ/タグのインライン ピル。

• 背景__CODEBCK_740___、テキスト__CODEBCK_741___、本文__CODEBCK_742___、パディング__CODEBCK_743___、形状__CODEBCK_744___.

例 (説明)

> 自動派生キットミラー デモンストレーション サーフェス (`scripts/derive-examples-block.mjs`)。各 `ex-*` エントリはブランドネイティブのプリミティブを参照するため、下流のコンシューマ (`/preview-design`、__CODEBCK_748___) は同じ 10 個のサーフェスを一貫して再スキンします。 `TO_FILL` マーカーはプリミティブが欠落していることを示しています — LLM 判定パスで解決されます。

**`ex-pricing-tier`** — デフォルトの価格帯カード。ブランドキャンバスのような柔らかい表面を備えたフィーチャーカードクロムを再利用します。

• プロパティ: `backgroundColor`、__CODEBCK_752___、__CODEBCK_753___、__CODEBCK_754___、__CODEBCK_755___

**`ex-pricing-tier-featured`** — 注目/ハイライト層 — 極性反転サーフェス (ライト モードでは暗い塗りつぶし + 明るいテキスト、ダーク モードでは明るい塗りつぶし + 暗いテキスト)。

• プロパティ: `backgroundColor`、__CODEBCK_758___、__CODEBCK_759___、__CODEBCK_760___

**`ex-product-selector`** — 含まれるもの概要カード — SaaS / B2B 業種向けに再利用されています (文字通りの製品ギャラリーではありません)。

• プロパティ: `backgroundColor`、__CODEBCK_763___、__CODEBCK_764___

**`ex-cart-drawer`** — サブスクリプションの概要 — SaaS / B2B 用に再利用されました (文字通りのカートではなく、アドオンごとの品目)。

• プロパティ: `backgroundColor`、__CODEBCK_767___、__CODEBCK_768___、__CODEBCK_769___

_**`ex-app-shell-row`** — App Shell サンプル内のサイドバーのナビゲーション行。アクティブな状態では、ブランドのプライマリを指標として使用します。

• プロパティ: `backgroundColor`、__CODEBCK_772___、__CODEBCK_773___、__CODEBCK_774___

**`ex-data-table-cell`** — デフォルトのデータテーブル th + td chrome。ヘッダーにはモノキャップの眉毛タイポグラフィが使用されています。 body は body-sm を使用します。

• プロパティ: `headerBackground`、__CODEBCK_777___、__CODEBCK_778___、__CODEBCK_779___、__CODEBCK_780___

**`ex-auth-form-card`** — サインイン/サインアップ カード。 テキスト入力プリミティブを内部に備えた機能カード クロムを再利用します。

• プロパティ: `backgroundColor`、__CODEBCK_783___、__CODEBCK_784___

_**`ex-modal-card`** — モーダル ダイアログ サーフェス — 影が高くなったフィーチャー カードと同じクロム。

• プロパティ: `backgroundColor`、__CODEBCK_787___、__CODEBCK_788___

**`ex-empty-state-card`** — 空の状態のイラスト フレーム。

• プロパティ: `backgroundColor`、__CODEBCK_791___、__CODEBCK_792___、__CODEBCK_793___

**`ex-toast`** — トースト通知面 — フィーチャー カードの形状 + 中程度の影。

• プロパティ: `backgroundColor`、__CODEBCK_796___、__CODEBCK_797___、__CODEBCK_798___

推奨事項と禁止事項

実行

• `` プライマリ CTA ごとに Zapier オレンジを予約します。飽和したオレンジ色は変換の署名です。
• キャンバスを暖かく保つ — `` `` 真っ白ではなく、クリーム色。温度はブランドの声です。
• _`` でヒーローの見出しを設定します。 Degular 表示ウェイト 500。文のみを使用し、大文字は使用しません。
• Degular Display (ヒーロー、眉) と Inter (その他すべて) をペアにします。 2 つの顔、2 つの役割。
• __CODEBCK_803___ ボタンとカードには 12 ピクセルを使用します。中央の半径はブランドの特徴です。
• オレンジ色の CTA とクリーム色の背景に濃い色のテキストを組み合わせます。3 つのトークンのリズムがブランドのコンバージョン ストーリー全体です。

しないでください

• クリーム色のキャンバスを真っ白に置き換えないでください。暖かさがブランドです。
• 純粋な黒のインクは使用しないでください。 `` のコーヒーの暖かさは、すべてのテキストの色に反映されます。
• _CTA を錠剤として表示しないでください。ブランドのボタンは 12 ピクセルの角丸長方形です。
• 2 番目の半音アクセントを導入しないでください。オレンジ + クリーム + コーヒーがパレット全体です。
• Degular Display を、クールな幾何学模様のないもの (例: 一般的な Helvetica) で置き換えないでください。ブランドのディスプレイ面には、代替品では表現できない温かみのあるプロポーションがあります。

Design Approach

Zapier's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #fffefb anchor, creating an immediate visual signature that differentiates Zapier from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Design Approach

Zapier's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #fffefb anchor, creating an immediate visual signature that differentiates Zapier from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Design Approach

Zapier's design system reflects a deliberate visual strategy that prioritizes expressive richness in every interface. The brand language centers on a #fffefb anchor, creating an immediate visual signature that differentiates Zapier from competitors in the same space. What makes this system particularly effective is how consistently the brand identity carries across surfaces — from marketing pages to product UI — without feeling repetitive or rigid.

Related Design Systems

Explore similar design languages from the same category:

• Airbnb Design System
• Superhuman Design System
• Airtable Design System
• Slack Design System