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는 최초의 "앱 연결" 워크플로 자동화 플랫폼이며 오늘날 마케팅 표면은 자신있게 성숙한 것으로 읽혀집니다. 이 브랜드는 따뜻한 크림색 캔버스 `{colors.canvas}`(`#fffefb`)와 진한 커피 잉크 `{colors.ink}`(`#201515`) 및 단일 포화 오렌지색 `{colors.primary}`(`#ff4f00`) CTA를 결합합니다. 순수한 흰색이 아닌 약간 크림색인 중성색의 따뜻함이 브랜드를 정의하는 온도 신호입니다.

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

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

**주요 특징:**

• 단일 기본 CTA 색상 `{colors.primary}`(`#ff4f00`) — 포화 주황색. 브랜드의 전환 시그니처.
• 따뜻한 크림색 캔버스 `{colors.canvas}`(`#fffefb`) — 순백색이 아닙니다. 온도는 브랜드의 목소리입니다.
• 딥 커피 잉크 `{colors.ink}`(`#201515`) — 순수한 검정색이 아닙니다. 따뜻함이 문자로 전달됩니다.
• 히어로 스케일을 위한 독점적인 Degular 디스플레이, 그 밖의 모든 것을 위한 Inter. 양면 시스템.
• `{rounded.md}` 버튼 및 카드용 12픽셀 - 브랜드의 중간 반경 시그니처입니다.
• 차분한 크림/커피 중성 사다리 — `{colors.canvas-soft}`(`#f8f4f0`), `{colors.mute}`(`#c5c0b1`), `{colors.body-mid}`(`#939084`), `{colors.body}`(`#605d52`) — 모든 중성색은 따뜻함을 전달하며 차가운 회색은 없습니다.

색상

브랜드 및 액센트

• **Zapier Orange** (`{colors.primary}` — `#ff4f00`): 단일 브랜드 액센트입니다. 모든 기본 CTA 알약, 모든 전환 목표. 포화 오렌지가 브랜드입니다.

표면

• **캔버스** (`{colors.canvas}` — `#fffefb`): 따뜻한 황백색 페이지 배경.
• **캔버스 소프트** (`{colors.canvas-soft}` — `#f8f4f0`): 카드/삽입 영역용 크림색 부드러운 표면.

텍스트

• **잉크**(`{colors.ink}` — `#201515`): 진한 커피 — 모든 제목과 기본 텍스트.
• **잉크 소프트**(`{colors.ink-soft}` — `#2f2a26`): 갈색의 따뜻함이 있는 검정색에 가깝습니다.
• **잉크 중간** (`{colors.ink-mid}` — `#36342e`): 중간 강조 텍스트입니다.
• **본문**(`{colors.body}` — `#605d52`): 기본 본문 텍스트 색상입니다.
• **Body Mid** (`{colors.body-mid}` — `#939084`): 보조 본문/메타데이터.
• **음소거**(`{colors.mute}` — `#c5c0b1`): 가장 낮은 우선순위 텍스트 — 작은 글씨, 낮은 강조 캡션.

의미론

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

타이포그래피

글꼴 계열

두 얼굴이 시스템에 사다리를 추가합니다.

1. **Degular 디스플레이** — 무게 500의 영웅 헤드라인에 사용되는 독점 기하학적 디스플레이가 없습니다. 브랜드의 활자체 시그니처입니다.

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

계층 구조

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

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

| `{typography.display-xl}` | 56px | 500 | 56px | 0 | Hero 헤드라인(Degular Display). |

| `{typography.display-lg}` | 48px | 500 | 48px | 0 | 서브 히어로 디스플레이(Degular Display). |

| `{typography.display-md}` | 32px | 500 | 36px | 1픽셀 | 섹션 표시(Degular Display, 포지티브 추적) |

| `{typography.display-sub-lg}` | 48px | 500 | 49.92px | 0 | 상호 렌더링된 하위 디스플레이. |

| `{typography.display-sub-md}` | 32px | 400 | 40px | 0 | 하위 디스플레이 간. |

| `{typography.display-sub-sm}` | 24px | 600 | 30px | -0.6px | 카드 제목(Inter, 세미볼드). |

| `{typography.display-xs}` | 20픽셀 | 700 | 25픽셀 | -0.5px | 인라인 디스플레이 마이크로 제목. |

| `{typography.body-lg}` | 20픽셀 | 400 | 30px | -0.2px | 단락을 리드합니다. |

| `{typography.body-md}` | 18px | 400 | 27px | 0 | 기본 본체. |

| `{typography.body-md-strong}` | 18px | 600 | 27px | 0 | 굵은 글씨의 인라인 본문. |

| `{typography.body-sm}` | 16px | 400 | 24px | 0 | 보조 본체. |

| `{typography.body-sm-strong}` | 16px | 600 | 24px | 0 | 굵은 캡션. |

| `{typography.caption}` | 14px | 400 | 21px | 0 | 작은 글씨. |

| `{typography.eyebrow-uppercase}` | 14px | 500 | 14px | 1픽셀 | 대문자 눈썹(Degular Display, 포지티브 추적). |

| `{typography.button-md}` | 18px | 600 | 27px | 0 | 기본 버튼 라벨. |

| `{typography.button-sm}` | 14.4px | 700 | 14.4px | 0.144px | 작은 버튼 라벨. |

원칙

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

글꼴 대체에 대한 참고 사항

Degular Display는 독점적입니다. 오픈사워

概要

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

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

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

**主な特徴:**

• 単一のプライマリ CTA カラー `{colors.primary}` (`#ff4f00`) — 飽和したオレンジ。ブランドの変換署名。
• ウォームクリーム色のキャンバス `{colors.canvas}` (`#ffefb`) — 真っ白ではありません。温度はブランドの声です。
• 濃いコーヒー インク `{colors.ink}` (`#201515`) — 純粋な黒ではありません。温かさが文章にも伝わってきます。
• ヒーロースケールには独自の Degular ディスプレイ、その他すべてには Inter。 2面システム。
• `{rounded.md}` ボタンとカード用の 12 ピクセル — ブランドの中間半径の署名。
• 落ち着いたクリーム/コーヒーのニュートラルラダー — `{colors.canvas-soft}` (`#f8f4f0`)、`{colors.mute}` (`#c5c0b1`)、`{colors.body-mid}` (`#939084`)、`{colors.body}` (`#605d52`) — どのニュートラルも暖かさを感じさせますが、どれもクールなグレーではありません。

色

ブランドとアクセント

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

表面

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

テキスト

• **インク** (`{colors.ink}` — `#201515`): 深いコーヒー — すべての見出しと主要なテキスト。
• **Ink Soft** (`{colors.ink-soft}` — `#2f2a26`): 茶色に近い温かみのある黒に近い色。
• **インクミッド** (`{colors.ink-mid}` — `#36342e`): 中間強調テキスト。
• **本文** (`{colors.body}` — `#605d52`): デフォルトの本文テキストの色。
• **Body Mid** (`{colors.body-mid}` — `#939084`): セカンダリ ボディ/メタデータ。
• **ミュート** (`{colors.mute}` — `#c5c0b1`): 優先度が最も低いテキスト — 細かい文字で強調度の低いキャプション。

セマンティック

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

タイポグラフィー

フォントファミリー

2 つの面がシステムを梯子します。

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

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

階層

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

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

| `{typography.display-xl}` | 56ピクセル | 500 | 56ピクセル | 0 |ヒーローの見出し (Degular Display)。 |

| `{typography.display-lg}` | 48ピクセル | 500 | 48ピクセル | 0 |サブヒーローディスプレイ（Degular Display）。 |

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

| `{typography.display-sub-lg}` | 48ピクセル | 500 | 49.92ピクセル | 0 |インターレンダリングされたサブディスプレイ。 |

| `{typography.display-sub-md}` | 32ピクセル | 400 | 40ピクセル | 0 |インターサブディスプレイ。 |

| `{typography.display-sub-sm}` | 24ピクセル | 600 | 30ピクセル | -0.6ピクセル |カードのタイトル (Inter、半太字)。 |

| `{typography.display-xs}` | 20ピクセル | 700 | 25ピクセル | -0.5ピクセル |インライン表示のマイクロ見出し。 |

| `{typography.body-lg}` | 20ピクセル | 400 | 30ピクセル | -0.2ピクセル |段落をリードします。 |

| `{typography.body-md}` | 18ピクセル | 400 | 27ピクセル | 0 |デフォルトの本体。 |

| `{typography.body-md-strong}` | 18ピクセル | 600 | 27ピクセル | 0 |太字のインライン本文。 |

| `{typography.body-sm}` | 16ピクセル | 400 | 24ピクセル | 0 |二次本体。 |

| `{typography.body-sm-strong}` | 16ピクセル | 600 | 24ピクセル | 0 |太字のキャプション。 |

| `{typography.caption}` | 14ピクセル | 400 | 21ピクセル | 0 |細かい文字。 |

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

| `{typography.button-md}` | 18ピクセル | 600 | 27ピクセル | 0 |プライマリボタンのラベル。 |

| `{typography.button-sm}` | 14.4ピクセル | 700 | 14.4ピクセル | 0.144ピクセル |小さなボタンのラベル。 |

原則

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

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

Degular Display は独自仕様です。オープンサワー