Expo

Overview

Expo's marketing site reads like a quietly-confident React-Native developer platform. The base canvas is **pure white** (`{colors.canvas}` — #ffffff) with a soft **sky-blue gradient atmospheric wash** behind the hero band. Near-black ink `{colors.ink}` (#171717) carries body and display alike. The single brand voltage is **pure black** (`{colors.primary}` — #000000) for primary CTAs — minimal and editorial-feeling. A small blue text-link accent (`{colors.text-link}` — #0d74ce) is reserved for inline body links, never as a CTA.

Type runs **Inter** as the single sans family at modest weights (display 600, body 400). JetBrains Mono carries every code surface. No custom typeface — the brand trusts Inter's editorial neutrality.

The brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces (Expo Studio, EAS Build dashboard, the Expo Go simulator) — over a sky-blue gradient atmospheric wash. The composite is the page's chrome instead of an illustration.

**Key Characteristics:**

• Pure white canvas with sky-blue gradient atmospheric backdrop in hero only.
• Single primary CTA: pure black pill at `{rounded.md}` (8px) — compact developer-tool dialect.
• Text-link blue (`{colors.text-link}`) for inline links only — never on a CTA.
• Inter as the single sans family — no custom display typeface.
• JetBrains Mono on every code surface.
• Device-mockup hero with real Expo product surfaces is the brand chrome.
• Hairline + soft drop depth; no atmospheric brand decoration outside the hero.
• 96px section rhythm.

Colors

Brand & Accent

• **Black** (`{colors.primary}` — #000000): Primary CTA fill. Used scarcely.
• **Black Active** (`{colors.primary-active}` — #1a1a1a): Press state.
• **Text Link Blue** (`{colors.text-link}` — #0d74ce): Inline body links inside long-form copy. Scoped narrowly — never on CTAs.
• **Legal Link Blue** (`{colors.text-link-secondary}` — #476cff): Inline links inside legal copy footer.
• **Bright Cyan** (`{colors.accent-link-bright}` — #47c2ff): Used very sparingly inside docs widget links.

Surface

• **Canvas** (`{colors.canvas}` — #ffffff): Pure white page floor.
• **Canvas Soft** (`{colors.canvas-soft}` — #fafafa): Subtle alternating band.
• **Surface Card** (`{colors.surface-card}` — #ffffff): Pure white card.
• **Surface Strong** (`{colors.surface-strong}` — #f0f0f3): Badges, ecosystem tiles, secondary buttons.
• **Surface Dark** (`{colors.surface-dark}` — #171717): Dark feature cards, code blocks, IDE mockups, featured pricing.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): One step lighter inside dark cards.

Atmospheric Backdrop

• **Sky Light** (`{colors.gradient-sky-light}` — #cfe7ff) + **Sky Mid** (`{colors.gradient-sky-mid}` — #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.

Hairlines

• **Hairline** (`{colors.hairline}` — #f0f0f3): Default 1px divider.
• **Hairline Soft** (`{colors.hairline-soft}` — #f5f5f7): Lighter divider.
• **Hairline Strong** (`{colors.hairline-strong}` — #dcdee0): Stronger panel outline.

Text

• **Ink** (`{colors.ink}` — #171717): Display, body emphasis.
• **Body** (`{colors.body}` — #60646c): Default running-text — slightly cool gray.
• **Body Strong** (`{colors.body-strong}` — #171717): Same as ink.
• **Muted** (`{colors.muted}` — #999999): Sub-titles.
• **Muted Soft** (`{colors.muted-soft}` — #cccccc): Disabled text.
• **On Primary** (`{colors.on-primary}` — #ffffff): White text on black CTA.
• **On Dark** (`{colors.on-dark}` — #ffffff): White text on dark cards.
• **On Dark Soft** (`{colors.on-dark-soft}` — #b0b4ba): Muted off-white on dark.

Semantic

• **Warning** (`{colors.accent-warning}` — #ab6400): Warning text inside docs callouts.
• **Preview** (`{colors.accent-preview}` — #8145b5): "Preview" tag color.
• **Success** (`{colors.semantic-success}` — #16a34a): Confirmation.
• **Error** (`{colors.semantic-error}` — #eb8e90): Validation errors.

Typography

Font Family

**Inter** is the single sans family across every text role. **JetBrains Mono** carries every code surface. Fallback: `-apple-system, system-ui, sans-serif`.

Hierarchy

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

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

| `{typography.display-mega}` | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |

| `{typography.display-xl}` | 48px | 600 | 1.1 | -1.44px | Subsidiary heroes |

| `{typography.display-lg}` | 36px | 600 | 1.15 | -1.08px | Section heads |

| `{typography.display-md}` | 28px | 600 | 1.2 | -0.84px | Sub-section heads |

| `{typography.display-sm}` | 22px | 600 | 1.25 | -0.5px | Card group titles |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | List labels |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |

| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |

| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |

| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, badges |

| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |

| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |

Principles

• **Display weight stays at 600** — confident but not bombastic. Inter at 600 reads cleaner than 700.
• **Negative letter-spacing on display** — -0.5px to -1.92px tracking.
• **JetBrains Mono on every code surface.**

Note on Font Substitutes

Inter and JetBrains Mono are both freely available — the system uses them directly.

Layout

Spacing System

• **Base unit:** 4px.
• **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
• **Section padding:** 96px.

Grid & Container

• Max content width: ~1200px.
• Editorial body: 12-column grid.
• Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.
• Ecosystem tile grid: 8-up at desktop.
• Footer: 5-column at desktop.

Whitespace Philosophy

Generous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).

Elevation & Depth

| Level | Treatment | Use |

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

| Flat (canvas) | `{colors.canvas}` (#ffffff) | Body bands, footer |

| Card | `{colors.surface-card}` (#ffffff) | Content cards |

| Hairline border | 1px `{colors.hairline}` | Card outlines |

| Soft drop | `0 4px 12px rgba(0, 0, 0, 0.04)` | Hovered cards (single shadow tier) |

| Atmospheric gradient | Sky-blue radial wash | Hero backdrop only |

| Dark inversion | `{colors.surface-dark}` (#171717) | Dark feature cards, code blocks, featured pricing |

Decorative Depth

• **Sky-blue gradient backdrop** in the hero only — atmospheric depth without claiming to be a brand color.
• **Device mockup composite** as page chrome — MacBook + iPhone showing real Expo dev surfaces.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.none}` | 0px | Reserved |

| `{rounded.xs}` | 4px | Inline tags |

| `{rounded.sm}` | 6px | Compact rows |

| `{rounded.md}` | 8px | CTA buttons, form inputs, ecosystem tiles |

| `{rounded.lg}` | 12px | Feature cards, code blocks, pricing tiers |

| `{rounded.xl}` | 16px | Device mockup cards |

| `{rounded.xxl}` | 24px | Larger atmospheric cards (rare) |

| `{rounded.pill}` | 9999px | Badges only |

| `{rounded.full}` | 9999px | Avatar plates (rare) |

Compact developer-ergonomic radii — 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.

Components

Top Navigation

**`top-nav`** — Background `{colors.canvas}`, text `{colors.ink}`, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.

Buttons

**`button-primary`** — Pure black pill. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px × 18px, height 40px, rounded `{rounded.md}` (8px).

**`button-primary-active`** — Press state. Background `{colors.primary-active}`.

**`button-secondary`** — White card with 1px hairline-strong border. Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}` border.

**`button-tertiary-text`** — Inline blue text link. Background transparent, text `{colors.text-link}`.

Hero & Device Mockup

**`hero-band`** — Background `{colors.canvas}` with a soft sky-blue gradient wash behind the centered headline. Display headline in `{typography.display-mega}` (64px / 600 / -1.92px), subhead in `{typography.body-md}`, single primary CTA, then below — the device mockup composite.

**`device-mockup-card`** — A layered MacBook + iPhone composite showing real Expo dev surfaces. Background `{colors.surface-card}`, rounded `{rounded.xl}`. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.

Cards

**`feature-card`** — Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.title-md}`, rounded `{rounded.lg}`, padding 24px, 1px `{colors.hairline-strong}` border.

**`feature-card-dark`** — Dark variant. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.

**`workflow-step-card`** — Step in the "Get your app on every device" workflow row. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 20px. Layout: 32px square `{component.workflow-step-icon}` + step number + label + body.

**`workflow-step-icon`** — Square plate. Background `{colors.surface-strong}`, rounded `{rounded.md}`, 32px size.

**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.

Code & IDE

**`code-block`** — Inline code block. Background `{colors.surface-dark}`, text `{colors.on-dark}` in `{typography.code}` (JetBrains Mono 13px), rounded `{rounded.lg}`, padding 20px. White text on dark.

**`ide-mockup-card`** — Stylized IDE mockup. Background `{colors.surface-dark}`, rounded `{rounded.lg}`. Multi-pane editor + terminal preview.

Pricing

**`pricing-tier-card`** — Standard pricing tier. Background `{colors.surface-card}`, rounded `{rounded.lg}`, padding 32px, 1px `{colors.hairline-strong}` border.

**`pricing-tier-featured`** — Featured tier. Background `{colors.surface-dark}`, text `{colors.on-dark}`. Same shape, dark inversion.

Ecosystem

**`ecosystem-tile`** — Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background `{colors.surface-card}`, rounded `{rounded.md}`, 64px size, 1px `{colors.hairline}` border.

Forms & Tags

**`text-input`** — Background `{colors.surface-card}`, text `{colors.ink}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px, 1px `{colors.hairline-strong}` border. Focus thickens border to 2px ink.

**`badge-pill`** — Small uppercase pill. Background `{colors.surface-strong}`, text `{colors.ink}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.

CTA / Footer

**`cta-band`** — Pre-footer band. Background `{colors.canvas}`, centered display headline in `{typography.display-lg}`, single black pill CTA. 96px padding.

**`footer-light`** — Closing white footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.

**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.

Do's and Don'ts

Do

• Reserve `{colors.primary}` (black) for primary CTAs.
• Use `{colors.text-link}` (blue) for inline body links only — never on CTAs or buttons.
• Set every CTA at `{rounded.md}` (8px) — developer dialect.
• Use Inter at weight 600 for display, 400 for body.
• Render every code surface in JetBrains Mono.
• Pair the hero with the device-mockup composite — it's the page chrome.

Don't

• Don't introduce a saturated brand action color. Black is the only CTA fill.
• Don't use blue (`{colors.text-link}`) on a CTA. Inline links only.
• Don't drop display below weight 600 or above 700.
• Don't use full pills on CTAs — pills are for badges only.
• Don't replicate the sky-blue gradient backdrop outside the hero.
• Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual page CTAs.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

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

| Mobile | < 640px | Hero h1 64→32px; device mockup → single iPhone screen; feature grid 1-up; nav hamburger. |

| Tablet | 640–1024px | Hero h1 48px; device mockup compresses; feature grid 2-up. |

| Desktop | 1024–1280px | Full hero h1 64px; full MacBook + iPhone composite; feature grid 3-up. |

| Wide | > 1280px | Content caps at 1200px. |

Touch Targets

• Primary CTA at 40px height — at WCAG AA, padded for AAA.
• Search input 44px — at AAA.

Collapsing Strategy

• Top nav switches to hamburger below 768px.
• Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.
• Feature grid: 3-up → 2-up → 1-up.
• Ecosystem tile grid: 8-up → 4-up → 3-up → 2-up.

Iteration Guide

1. Focus on a single component at a time.

2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` (12px).

3. Variants live as separate entries.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.

7. Black stays the only CTA color; text-link blue stays inline-only.

Known Gaps

• Inter and JetBrains Mono are freely available — no licensing concerns.
• Animation timings (device mockup parallax, hero entrance) out of scope.
• In-app surfaces (EAS dashboard interactive, Expo Go simulator) only partially captured via marketing mockups.
• Form validation states beyond focus not visible on captured surfaces.

개요

Expo의 마케팅 사이트는 조용하고 자신감 넘치는 React-Native 개발자 플랫폼처럼 보입니다. 기본 캔버스는 **순백색**(`{colors.canvas}` — #ffffff)이며 영웅 밴드 뒤에는 부드러운 **하늘색 그라데이션 대기 워시**가 있습니다. 검정에 가까운 잉크 `{colors.ink}`(#171717)는 본체와 디스플레이를 모두 전달합니다. 단일 브랜드 전압은 기본 CTA의 경우 **순수한 검정색**(`{colors.primary}` - #000000)으로 최소한의 편집 느낌을 줍니다. 작은 파란색 텍스트 링크 액센트(`{colors.text-link}` — #0d74ce)는 인라인 본문 링크용으로 예약되어 있으며 CTA로는 사용되지 않습니다.

Type은 적당한 무게(디스플레이 600, 본문 400)의 단일 산세 제품군으로 **Inter**를 실행합니다. JetBrains Mono는 모든 코드 표면을 담고 있습니다. 맞춤 서체 없음 - 브랜드는 Inter의 편집 중립성을 신뢰합니다.

브랜드의 가장 강력한 시각적 시그니처는 하늘색 그라데이션 대기 워시 위에 실제 Expo 개발 표면(Expo Studio, EAS Build 대시보드, Expo Go 시뮬레이터)을 보여주는 중앙 MacBook + iPhone 합성물인 **장치 모형 영웅**입니다. 합성물은 그림이 아닌 페이지의 크롬입니다.

**주요 특징:**

• 영웅 전용 하늘색 그라데이션 분위기의 순백색 캔버스.
• 단일 기본 CTA: `{rounded.md}`(8px)의 순수한 검은색 알약 — 컴팩트 개발자 도구 방언.
• 인라인 링크 전용 텍스트 링크 파란색(`{colors.text-link}`) — CTA에는 절대 사용되지 않습니다.
• Inter는 단일 산세 제품군으로 사용자 정의 디스플레이 서체가 없습니다.
• 모든 코드 표면의 JetBrains Mono.
• 실제 Expo 제품 표면을 갖춘 기기 모형의 주인공은 브랜드 크롬입니다.
• 헤어라인 + 소프트 드롭 깊이; 영웅 외부에는 대기 브랜드 장식이 없습니다.
• 96px 섹션 리듬.

색상

브랜드 및 액센트

• **검정색**(`{colors.primary}` — #000000): 기본 CTA 채우기. 거의 사용되지 않았습니다.
• **Black Active** (`{colors.primary-active}` — #1a1a1a): 프레스 상태.
• **텍스트 링크 파란색** (`{colors.text-link}` — #0d74ce): 긴 형식 사본 내의 인라인 본문 링크입니다. 범위가 좁습니다. CTA에는 적용되지 않습니다.
• **법적 링크 블루**(`{colors.text-link-secondary}` — #476cff): 법적 사본 바닥글 내부의 인라인 링크입니다.
• **밝은 청록색** (`{colors.accent-link-bright}` — #47c2ff): 문서 위젯 링크 내에서는 매우 드물게 사용됩니다.

표면

• **캔버스** (`{colors.canvas}` — #ffffff): 순수한 흰색 페이지 바닥.
• **캔버스 소프트** (`{colors.canvas-soft}` — #fafafa): 미묘한 교대 밴드.
• **표면 카드**(`{colors.surface-card}` — #ffffff): 순백색 카드.
• **Surface Strong** (`{colors.surface-strong}` — #f0f0f3): 배지, 생태계 타일, 보조 버튼.
• **Surface Dark** (`{colors.surface-dark}` — #171717): 다크 기능 카드, 코드 블록, IDE 모형, 주요 가격.
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): 어두운 카드 내부에서 한 단계 더 밝아집니다.

분위기 있는 배경화면

• **스카이 라이트** (`{colors.gradient-sky-light}` — #cfe7ff) + **스카이 미드** (`{colors.gradient-sky-mid}` — #a8c8e8): 홈페이지 히어로 뒤에만 있는 부드러운 하늘색 그라데이션 워시입니다. 브랜드 액션 컬러가 아닙니다.

헤어라인

• **헤어라인** (`{colors.hairline}` — #f0f0f3): 기본 1px 구분선.
• **헤어라인 소프트** (`{colors.hairline-soft}` — #f5f5f7): 더 가벼운 구분선.
• **Hairline Strong** (`{colors.hairline-strong}` — #dcdee0): 패널 윤곽선이 더 강해졌습니다.

텍스트

• **잉크** (`{colors.ink}` — #171717): 표시, 본문 강조.
• **본문**(`{colors.body}` — #60646c): 기본 실행 텍스트 — 약간 차가운 회색.
• **Body Strong** (`{colors.body-strong}` — #171717): 잉크와 동일합니다.
• **음소거됨** (`{colors.muted}` — #999999): 부제목.
• **음소거 소프트**(`{colors.muted-soft}` — #cccccc): 비활성화된 텍스트입니다.
• **On Primary** (`{colors.on-primary}` — #ffffff): 검은색 CTA에 흰색 텍스트입니다.
• **On Dark** (`{colors.on-dark}` — #ffffff): 어두운 카드에 흰색 텍스트입니다.
• **어두운 부드러움** (`{colors.on-dark-soft}` — #b0b4ba): 어두운 바탕에 음소거된 황백색.

의미론

• **경고** (`{colors.accent-warning}` — #ab6400): 문서 콜아웃 내부의 경고 텍스트입니다.
• **미리보기** (`{colors.accent-preview}` — #8145b5): "미리보기" 태그 색상.
• **성공** (`{colors.semantic-success}` — #16a34a): 확인.
• **오류**(`{colors.semantic-error}` — #eb8e90): 유효성 검사 오류입니다.

타이포그래피

글꼴 계열

**Inter**는 모든 텍스트 역할에 걸쳐 단일 산세 제품군입니다. **JetBrains Mono**는 모든 코드 표면을 담고 있습니다. 대체: `-apple-system, system-ui, sans-serif`.

계층 구조

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

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

| `{typography.display-mega}` | 64px | 600 | 1.05 | -1.92px | 홈페이지 히어로 h1 |

| `{typography.display-xl}` | 48px | 600 | 1.1 | -1.44px | 자회사 영웅 |

| `{typography.display-lg}` | 36px | 600 | 1.15 | -1.08px | 부문장 |

| `{typography.display-md}` | 28px | 600 | 1.2 | -0.84px | 하위 부문장 |

| `{typography.display-sm}` | 22px | 600 | 1.25 | -0.5px | 카드 그룹 제목 |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | 구성 요소 제목 |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | 라벨 목록 |

| `{타이포그래피

概要

Expo のマーケティング サイトは、密かに自信を持っている React-Native 開発者プラットフォームのように見えます。ベースのキャンバスは **純白** (`{colors.canvas}` — #ffffff) で、ヒーロー バンドの後ろには柔らかい **スカイブルーのグラデーションの大気ウォッシュ**が施されています。黒に近いインク「{colors.ink}」(#171717) は、本体とディスプレイを同様に保持します。単一ブランドのボルテージは、プライマリ CTA 用の **ピュア ブラック** (`{colors.primary}` — #000000) で、最小限で編集的な雰囲気があります。小さな青いテキストリンクのアクセント (`{colors.text-link}` — #0d74ce) は、CTA としてではなく、インライン本文リンク用に予約されています。

タイプは、控えめな重量 (ディスプレイ 600、本体 400) でファミリーなしの単一として **Inter** を実行します。 JetBrains Mono はあらゆるコード サーフェスをサポートします。カスタム書体はありません - ブランドはインテルの編集上の中立性を信頼しています。

このブランドの最も強力な視覚的特徴は、**デバイス モックアップ ヒーロー**です。これは、スカイブルーのグラデーションの大気ウォッシュの上に、実際の Expo 開発面 (Expo Studio、EAS Build ダッシュボード、Expo Go シミュレーター) を示す、中央に配置された MacBook + iPhone の合成画像です。コンポジットは、イラストではなくページのクロムです。

**主な特徴:**

• ヒーローのみ、スカイブルーのグラデーションの大気背景を持つ純白のキャンバス。
• 単一のプライマリ CTA: `{rounded.md}` (8px) の純粋な黒い錠剤 — コンパクトな開発者ツールの方言。
• テキストリンクの青色 (`{colors.text-link}`) はインライン リンクのみであり、CTA では使用できません。
• ファミリーを持たない単一の Inter — カスタム表示書体はありません。
• すべてのコード表面に JetBrains Mono。
• 実際の Expo 製品の表面を備えたデバイス モックアップのヒーローは、ブランド クロムです。
• ヘアライン + ソフト ドロップの深さ。主人公以外には雰囲気のあるブランド装飾はありません。
• 96pxセクションリズム。

色

ブランドとアクセント

• **黒** (`{colors.primary}` — #000000): プライマリ CTA 塗りつぶし。ほとんど使用されていません。
• **ブラックアクティブ** (`{colors.primary-active}` — #1a1a1a): プレス状態。
• **テキスト リンク ブルー** (`{colors.text-link}` — #0d74ce): 長い形式のコピー内のインライン本文リンク。範囲は狭く、CTA には決して適用されません。
• **法的リンク ブルー** (`{colors.text-link-secondary}` — #476cff): 法的コピー フッター内のインライン リンク。
• **明るいシアン** (`{colors.accent-link-bright}` — #47c2ff): ドキュメント ウィジェット リンク内では非常に控えめに使用されます。

表面

• **キャンバス** (`{colors.canvas}` — #ffffff): 真っ白なページフロア。
• **Canvas Soft** (`{colors.canvas-soft}` — #fafafa): 微妙な交互バンド。
• **Surface Card** (`{colors.surface-card}` — #ffffff): 純白のカード。
• **Surface Strong** (`{colors.surface-strong}` — #f0f0f3): バッジ、エコシステム タイル、二次ボタン。
• **Surface Dark** (`{colors.surface-dark}` — #171717): ダーク機能カード、コード ブロック、IDE モックアップ、注目の価格設定。
• **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): ダーク カード内で 1 段階明るくなります。

雰囲気のある背景

• **スカイ ライト** (`{colors.gradient-sky-light}` — #cfe7ff) + **スカイ ミッド** (`{colors.gradient-sky-mid}` — #a8c8e8): ホームページ ヒーローのみの背後にある柔らかいスカイブルーのグラデーション ウォッシュ。ブランドのアクションカラーではありません。

ヘアライン

• **ヘアライン** (`{colors.hairline}` — #f0f0f3): デフォルトの 1 ピクセルの分割線。
• **Hairline Soft** (`{colors.hairline-soft}` — #f5f5f7): より軽いディバイダー。
• **強いヘアライン** (`{colors.hairline-strong}` — #dcdee0): より強いパネル アウトライン。

テキスト

• **インク** (`{colors.ink}` — #171717): ディスプレイ、ボディ強調。
• **本文** (`{colors.body}` — #60646c): デフォルトの実行テキスト — わずかにクールなグレー。
• **ボディ ストロング** (`{colors.body-strong}` — #171717): インクと同じ。
• **ミュート** (`{colors.muted}` — #999999): サブタイトル。
• **ミュート ソフト** (`{colors.muted-soft}` — #cccccc): 無効なテキスト。
• **プライマリ上** (`{colors.on-primary}` — #ffffff): 黒の CTA に白のテキスト。
• **オン ダーク** (`{colors.on-dark}` — #ffffff): ダーク カードに白いテキスト。
• **オン ダーク ソフト** (`{colors.on-dark-soft}` — #b0b4ba): 暗い色のミュートされたオフホワイト。

セマンティック

• **警告** (`{colors.accent-warning}` — #ab6400): ドキュメントの吹き出し内の警告テキスト。
• **プレビュー** (`{colors.accent-preview}` — #8145b5): 「プレビュー」タグの色。
• **成功** (`{colors.semantic-success}` — #16a34a): 確認。
• **エラー** (`{colors.semantic-error}` — #eb8e90): 検証エラー。

タイポグラフィー

フォントファミリー

**Inter** は、あらゆるテキストの役割にわたって、家族を持たない単一の存在です。 **JetBrains Mono** はあらゆるコード サーフェスをサポートします。フォールバック: `-apple-system、system-ui、sans-serif`。

階層

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

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

| `{typography.display-mega}` | 64ピクセル | 600 | 1.05 | -1.92ピクセル |ホームページ ヒーロー h1 |

| `{typography.display-xl}` | 48ピクセル | 600 | 1.1 | -1.44ピクセル |サブヒーロー |

| `{typography.display-lg}` | 36ピクセル | 600 | 1.15 | -1.08ピクセル |課長 |

| `{typography.display-md}` | 28ピクセル | 600 | 1.2 | -0.84ピクセル |サブセクションの責任者 |

| `{typography.display-sm}` | 22ピクセル | 600 | 1.25 | -0.5ピクセル |カードグループタイトル |

| `{typography.title-md}` | 18ピクセル | 600 | 1.4 | 0 |コンポーネントのタイトル |

| `{typography.title-sm}` | 16ピクセル | 600 | 1.4 | 0 |リストラベル |

| `{タイポグラフィー