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 개발자 플랫폼처럼 읽혀집니다. 기본 캔버스는 **순백색**(`` — #ffffff)이며 히어로 밴드 뒤에는 부드러운 **하늘색 그라데이션 대기 워시**가 있습니다. 검정색에 가까운 잉크 ``(#171717)는 본체와 디스플레이를 동일하게 전달합니다. 단일 브랜드 전압은 기본 CTA의 경우 **순수한 검정색**(`` — #000000)으로 최소한의 편집 느낌을 줍니다. 작은 파란색 텍스트 링크 악센트(`` — #0d74ce)는 인라인 본문 링크용으로 예약되어 있으며 CTA로는 사용되지 않습니다.

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

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

**주요 특성:**

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

색상

브랜드 및 액센트

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

표면

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

분위기 있는 배경

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

헤어라인

• **가는 선** (`` — #f0f0f3): 기본 1px 구분선.
• **헤어라인 소프트**(`` — #f5f5f7): 더 가벼운 칸막이.
• **가는 선 강함** (`` — #dcdee0): 패널 윤곽선이 더 강해졌습니다.

텍스트

• **잉크** (`` — #171717): 디스플레이, 본문 강조.
• **본문**(`` — #60646c): 기본 실행 텍스트 — 약간 차가운 회색.
• **바디 스트롱**(`` — #171717): 잉크와 동일합니다.
• **음소거됨**(`` — #999999): 부제목.
• **음소거 소프트**(`` — #cccccc): 비활성화된 텍스트.
• **기본**(`` — #ffffff): 검은색 CTA에 흰색 텍스트.
• **어두운 부분**(`` — #ffffff): 어두운 카드의 흰색 텍스트.
• **어두운 소프트**(`` — #b0b4ba): 어두운 바탕에 음소거된 황백색.

의미

• **경고** (`` — #ab6400): 문서 콜아웃 내부의 경고 텍스트.
• **미리보기** (`` — #8145b5): "미리보기" 태그 색상.
• **성공**(`` — #16a34a): 확인.
• **오류**(`` — #eb8e90): 유효성 검사 오류.

타이포그래피

글꼴군

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

계층

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

사용

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

| _`` | 64px | 600 | 1.05 | -1.92px | 홈페이지 히어로 h1 |

| _`` | 48px | 600 | 1.1 | -1.44px | 자회사 히어로 |

| _`` | 36px | 600 | 1.15 | -1.08px | 섹션 헤드 |

| _`` | 28px | 600 | 1.2 | -0.84px | 하위 섹션 머리 |

| _`` | 22px | 600 | 1.25 | -0.5px | 카드 그룹 제목 |

| _`` | 18px | 600 | 1.4 | 0 | 구성요소 제목 |

| _`` | 16px | 600 | 1.4 | 0 | 라벨 목록 |

| _`` | 16px | 400 | 1.5 | 0 | 기본 본문 |

| _`` | 14px | 400 | 1.5 | 0 | 바닥글 본문 |

| _`` | 13px | 400 | 1.4 | 0 | 사진 캡션 |

| _`` | 11px | 600 | 1.4 | 0.88px | 섹션 라벨, 배지 |

| _`` | 13px | 400 | 1.5 | 0 | 코드 블록 — JetBrains Mono |

| _`` | 14px | 500 | 1.0 | 0 | CTA 라벨 |

| _`` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 |

원칙

• **디스플레이 무게는 600으로 유지됩니다** - 자신감은 있지만 과격하지는 않습니다. 600의 Inter는 700보다 더 깔끔하게 읽습니다.
• **디스플레이의 음수 문자 간격** — -0.5px ~ -1.92px 추적.
• **모든 코드 표면에 JetBrains Mono가 있습니다.**

글꼴 대체에 대한 참고사항

Inter와 JetBrains Mono는 모두 무료로 사용할 수 있으며 시스템에서 직접 사용합니다.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 96px.
• **섹션 패딩:** 96px.

그리드 및 컨테이너

• 최대 콘텐츠 너비: ~1200px.
• 편집 본문: 12열 그리드.
• 기능 카드 그리드: 영웅 분할을 위한 데스크탑의 2-up, 혜택 그리드의 3-up.
• 생태계 타일 그리드: 데스크탑의 8-up.
• 바닥글: 데스크탑의 5열.

공백 철학

풍부한 편집 속도. 흰색 캔버스는 영웅의 그라데이션 하늘색과 경쟁하지 않습니다. 밀집된 워크플로 섹션 내부의 카드는 가깝게 위치합니다(16~24픽셀 간격).

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 플랫(캔버스) | _`` (#ffffff) | 바디 밴드, 바닥글 |

| 카드 | _`` (#ffffff) | 콘텐츠 카드 |

| 헤어라인 테두리 | 1픽셀 `` | 카드 개요 |

| 소프트 드롭 | _`0 4px 12px rgba(0, 0, 0, 0.04)` | 마우스오버된 카드(단일 섀도우 계층) |

| 대기 그라데이션 | 하늘색 방사형 워시 | 영웅 배경화면만 |

| 다크 반전 | _`` (#171717) | 다크 기능 카드, 코드 블록, 주요 가격 |

장식적 깊이

• **하늘색 그라데이션 배경**은 영웅 전용 — 브랜드 색상을 주장하지 않으면서도 분위기 있는 깊이를 선사합니다.
• **페이지 크롬으로 장치 모형 합성** — 실제 Expo 개발 표면을 보여주는 MacBook + iPhone.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 0픽셀 | 예약됨 |

| _`` | 4픽셀 | 인라인 태그 |

| _`` | 6픽셀 | 압축 행 |

| _`` | 8픽셀 | CTA 버튼, 양식 입력, 생태계 타일 |

| _`` | 12px | 기능 카드, 코드 블록, 가격 책정 계층 |

| _`` | 16px | 기기 모형 카드 |

| _`` | 24px | 더 큰 대기 카드(희귀) |

| _`` | 9999px | 배지만 |

| _`` | 9999px | 아바타 플레이트(희귀) |

개발자를 위한 컴팩트한 인체공학적 반경 — 8px CTA, 12px 카드. 알약 모양은 CTA가 아닌 배지용으로 예약되어 있습니다.

구성요소

상단 탐색

_**`top-nav`** — 배경 ``, 텍스트 ``, 높이 64px. 레이아웃: 왼쪽 Expo 워드마크, 기본 가로 메뉴(도구/워크플로/EAS/가격/문서/쇼케이스), 로그인 + CTA 시작하기 오른쪽.

버튼

**`button-primary`** — 순수한 검은색 알약. 배경 ``, 텍스트 ``, 유형 ``(14px/500), 패딩 10px × 18px, 높이 40px, 반올림 ``(8px).

**`button-primary-active`** — 프레스 상태. 배경 ``.

**`button-secondary`** — 1px 가는 테두리가 있는 흰색 카드입니다. 배경 ``, 텍스트 ``, 1px `` 테두리.

**`button-tertiary-text`** — 인라인 파란색 텍스트 링크. 배경 투명, 텍스트 ``.

영웅 및 장치 모형

**`hero-band`** — 중앙 헤드라인 뒤에 부드러운 하늘색 그라데이션 워시가 있는 배경 ``. ``(64px / 600 / -1.92px)의 헤드라인, ``의 하위 헤드, 단일 기본 CTA, 그 아래 — 장치 모형 복합물.

**`device-mockup-card`** — 실제 Expo 개발 표면을 보여주는 계층화된 MacBook + iPhone 합성물입니다. 배경 ``, 반올림 ``. MacBook에는 EAS 대시보드 또는 Expo Studio 스크린샷이 들어 있습니다. iPhone 오버레이는 Expo Go에서 실행 중인 앱을 보여줍니다. 크롬페이지입니다.

카드

**`feature-card`** — 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px, 1px `` 테두리.

**`feature-card-dark`** — 어두운 변형. 배경 ``, 텍스트 ``. 같은 모양, 어두운 반전.

_**`workflow-step-card`** — '모든 기기에 앱 다운로드' 워크플로 행의 단계로 이동합니다. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 20px. 레이아웃: 32px 정사각형 `` + 단계 번호 + 라벨 + 본문.

**`workflow-step-icon`** — 정사각형 플레이트. 배경 ``, 반올림 ``, 32px 크기.

**`testimonial-card`** — 견적 카드. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 24px.

코드 및 IDE

**`code-block`** — 인라인 코드 블록. 배경 ``, ``(JetBrains Mono 13px)의 텍스트 ``, 반올림 ``, 패딩 20px. 어두운 바탕에 흰색 텍스트.

**`ide-mockup-card`** — 양식화된 IDE 모형. 배경 ``, 반올림 ``. 다중 창 편집기 + 터미널 미리보기.

가격

**`pricing-tier-card`** — 표준 가격 책정 계층. 배경 ``, 둥근 ``, 패딩 32px, 1px `` 테두리.

**`pricing-tier-featured`** — 주요 계층. 배경 ``, 텍스트 ``. 같은 모양, 어두운 반전.

생태계

**`ecosystem-tile`** — 생태계 파트너 로고(TypeScript, React, Sentry 등)용 사각형 로고 플레이트. 배경 ``, 둥근 ``, 64px 크기, 1px `` 테두리.

양식 및 태그

**`text-input`** — 배경 ``, 텍스트 ``, 반올림 ``(8px), 패딩 12px × 16px, 높이 44px, 1px `` 테두리. 초점이 테두리를 2px 잉크로 두꺼워집니다.

**`badge-pill`** — 작은 대문자 알약입니다. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 4px × 10px.

CTA/바닥글

**`cta-band`** — 프리풋터 밴드. 배경 ``, ``의 중앙 표시 헤드라인, 단일 검정색 알약 CTA. 96px 패딩.

**`footer-light`** — 흰색 바닥글을 닫습니다. 배경 ``, 텍스트 ``. 5열 링크 목록. 64×48px 패딩.

_**`footer-link`** — 배경 투명, 텍스트 ``, 유형 ``.

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

하라

• 기본 CTA용으로 ``(검은색)을 예약합니다.
• 인라인 본문 링크에만 ``(파란색)을 사용하세요. CTA나 버튼에는 절대 사용하지 마세요.
• 모든 CTA를 ``(8px)에 설정하세요. — 개발자 방언
• 디스플레이에는 무게 600, 본체에는 400의 Inter를 사용하세요.
• JetBrains Mono에서 모든 코드 표면을 렌더링합니다.
• 영웅을 기기 모형 합성물과 결합하세요. 페이지 크롬입니다.

하지 마세요

• 포화되어 있는 브랜드 액션 색상을 소개하지 마세요. 검정색이 유일한 CTA 채우기입니다.
• CTA에 파란색(``)을 사용하지 마세요. 인라인 링크만 해당됩니다.
• 디스플레이를 가중치 600 이하 또는 700 이상으로 떨어뜨리지 마세요.
• CTA에 전체 알약을 사용하지 마세요. 알약은 배지에만 사용됩니다.
• 주인공 외부에 하늘색 그라데이션 배경을 복제하지 마세요.
• 타사 위젯(쿠키 동의, OneTrust)에서 CTA 색상을 추출하지 마세요. 브랜드의 CTA는 실제 페이지 CTA에 표시됩니다.

반응적 행동

중단점

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

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

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

| 태블릿 | 640~1024px | 영웅 h1 48px; 장치 모형 압축; 피쳐 그리드 2-up. |

| 데스크탑 | 1024~1280px | 전체 영웅 h1 64px; 전체 MacBook + iPhone 복합; 기능 그리드 3업. |

| 와이드 | > 1280px | 콘텐츠는 1200px로 제한됩니다. |

터치 대상

• 40픽셀 높이의 기본 CTA — WCAG AA, AAA용으로 패딩됨.
• 검색 입력 44px — AAA에서.

축소 전략

• 상위 탐색은 768px 미만의 햄버거로 전환됩니다.
• 기기 모형 MacBook + iPhone이 모바일에서 단일 iPhone 미리보기로 축소됩니다.
• 피처 그리드: 3개 → 2개 → 1개.
• 생태계 타일 그리드: 8-up → 4-up → 3-up → 2-up.

반복 가이드

1. 한 번에 하나의 구성요소에 집중하세요.

2. CTA의 기본값은 ``(8px)입니다. 카드는 ``(12px)을 사용합니다.

3. 변형은 별도의 항목으로 표시됩니다.

4. 어디에서나 __CODEBCK_741___을 사용하세요. 16진수 인라인은 사용하지 마세요.

5. 호버 상태는 문서화되지 않았습니다.

6. 디스플레이용은 인터 600, 바디용은 인터 400입니다. 코드의 JetBrains Mono.

7. 검정색은 유일한 CTA 색상으로 유지됩니다. 텍스트 링크 파란색은 인라인 전용으로 유지됩니다.

알려진 격차

• Inter 및 JetBrains Mono는 라이선스 문제 없이 무료로 사용할 수 있습니다.
• 애니메이션 타이밍(기기 모형 시차, 영웅 등장)이 범위를 벗어났습니다.
• 인앱 표면(EAS 대시보드 대화형, Expo Go 시뮬레이터)은 마케팅 모형을 통해 부분적으로만 캡처되었습니다.
• 초점을 벗어난 양식 유효성 검사 상태는 캡처된 표면에 표시되지 않습니다.

概要

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

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

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

_**主な特徴:**

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

色

ブランドとアクセント

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

サーフェス

• **キャンバス** (`` — #ffffff): 真っ白なページフロア。
• **キャンバス ソフト** (`` — #fafafa): 微妙な交互バンド。
• **表面カード** (`` — #ffffff): 純白のカード。
• **強力な表面** (`` — #f0f0f3): バッジ、エコシステム タイル、二次ボタン。
• **Surface Dark** (`` — #171717): ダーク機能カード、コード ブロック、IDE モックアップ、注目の価格設定。
• **サーフェス ダーク エレベーテッド** (`` — #1a1a1a): ダーク カード内で 1 段階明るくなります。

雰囲気のある背景

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

ヘアライン

• **ヘアライン** (`` — #f0f0f3): デフォルトの 1 ピクセルの分割線。
• **ヘアライン ソフト** (`` — #f5f5f7): より軽い分割線。
• **強いヘアライン** (`` — #dcdee0): より強力なパネル アウトライン。

テキスト

• **インク** (`` — #171717): 表示、本文強調。
• **本文** (`` — #60646c): デフォルトの実行テキスト — ややクールなグレー。
• **ボディ ストロング** (`` — #171717): インクと同じ。
• **ミュート** (`` — #999999): 字幕。
• **ミュートソフト** (`` — #cccccc): 無効なテキスト。
• **プライマリ** (`` — #ffffff): 黒の CTA に白のテキスト。
• **ダーク上** (`` — #ffffff): ダーク カードに白いテキスト。
• **ダーク ソフト上** (`` — #b0b4ba): ダークでミュートされたオフホワイト。

セマンティック

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

タイポグラフィ

フォント ファミリー

**Inter** は、すべてのテキスト ロールにわたる単一のファミリーのないものです。 **JetBrains Mono** はあらゆるコード サーフェスをサポートします。フォールバック: `-apple-system, system-ui, sans-serif`.

階層_

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

を使用します

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

| `` | 64ピクセル | 600 | 1.05 | -1.92ピクセル |ホームページのヒーロー h1 |

| `` | 48ピクセル | 600 | 1.1 | -1.44ピクセル |補助ヒーロー |

| `` | 36ピクセル | 600 | 1.15 | -1.08ピクセル |セクションヘッド |

| `` | 28ピクセル | 600 | 1.2 | -0.84ピクセル |サブセクションの見出し |

| `` | 22ピクセル | 600 | 1.25 | -0.5ピクセル |カード グループのタイトル |

| `` | 18ピクセル | 600 | 1.4 | 0 |コンポーネントのタイトル |

| `` | 16ピクセル | 600 | 1.4 | 0 |リストラベル |

| `` | 16ピクセル | 400 | 1.5 | 0 |デフォルトの本文 |

| `` | 14ピクセル | 400 | 1.5 | 0 |フッター本文 |

| `` | 13ピクセル | 400 | 1.4 | 0 |写真のキャプション |

| `` | 11ピクセル | 600 | 1.4 | 0.88ピクセル |セクションのラベル、バッジ |

| `` | 13ピクセル | 400 | 1.5 | 0 |コードブロック — JetBrains Mono |

| `` | 14ピクセル | 500 | 1.0 | 0 | CTA ラベル |

| `` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーション メニュー |

原則

• **表示ウェイトは 600 のまま** — 自信はありますが、大げさではありません。 600 のインテルは 700 よりもきれいに読み取ります。
• **表示上の負の文字間隔** — -0.5 ピクセルから -1.92 ピクセルの追跡。
• _**すべてのコード サーフェスに JetBrains Mono を使用します。**

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

Inter と JetBrains Mono はどちらも無料で利用できます。システムはそれらを直接使用します。

レイアウト

間隔システム

• **基本単位:** 4px.
• **トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 96px.
• **セクションのパディング:** 96px.

グリッドとコンテナ

• コンテンツの最大幅: ~1200px。
• 編集本文: 12 列グリッド
• フィーチャー カード グリッド: ヒーロー スプリットの場合はデスクトップで 2 アップ、特典グリッドの場合は 3 アップ。
• エコシステム タイル グリッド: デスクトップで 8 アップ。
• フッター: デスクトップでは 5 列。

ホワイトスペースの哲学

寛大な編集ペース。白いキャンバスは、主人公のグラデーションの空のウォッシュと競合しません。高密度のワークフロー セクション内のカードは近くに配置されます (16 ～ 24 ピクセルのギャップ)。

標高と深さ

|レベル |治療 | |

を使用します

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

|フラット（キャンバス） | `` (#ffffff) |ボディバンド、フッター |

|カード | `` (#ffffff) |コンテンツ カード |

|ヘアラインボーダー | ヘアラインボーダー1px `` |カードの概要 |

|ソフトドロップ | `0 4px 12px rgba(0, 0, 0, 0.04)` |ホバーされたカード (単一シャドウ層) |

|大気の勾配 |スカイブルーラジアルウォッシュ |ヒーロー背景のみ |

|ダーク反転 | `` (#171717) |ダーク機能カード、コード ブロック、注目の価格設定 |

装飾の深さ

• **ヒーローのみのスカイブルーのグラデーション背景** - ブランドカラーであることを主張せず、雰囲気の深みを与えます。
• **ページ クロムとしてのデバイス モックアップ コンポジット** — 実際の Expo 開発面を表示する MacBook + iPhone。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 0ピクセル |予約済み |

| `` | 4ピクセル |インライン タグ |

| `` | 6ピクセル |コンパクトな行 |

| `` | 8ピクセル | CTA ボタン、フォーム入力、エコシステム タイル |

| `` | 12ピクセル |フィーチャー カード、コード ブロック、価格帯 |

| `` | 16ピクセル |デバイス モックアップ カード |

| `` | 24ピクセル |より大きな雰囲気のカード (レア) |

| `` | 9999ピクセル |バッジのみ |

| `` | 9999ピクセル |アバター プレート (レア) |

_開発者にとって人間工学に基づいたコンパクトな半径 - 8 ピクセルの CTA、12 ピクセルのカード。 ピルのジオメトリはバッジ用に予約されており、CTA には使用されません。

コンポーネント

トップナビゲーション

_**`top-nav`** — 背景 ``、テキスト ``、高さ 64 ピクセル。レイアウト: Expo のワードマークが左側、メインの水平メニュー (ツール / ワークフロー / EAS / 価格設定 / ドキュメント / ショーケース)、右側にサインイン + 開始 CTA が表示されます。

ボタン

**`button-primary`** — 純粋な黒い錠剤。背景 ``、テキスト ``、タイプ `` (14px / 500)、パディング 10px × 18px、高さ 40px、丸め `` (8px).

**`button-primary-active`** — プレス状態。背景 ``.

**`button-secondary`** — 1 ピクセルのヘアラインの強い境界線を持つ白いカード。背景 ``、テキスト ``、1 ピクセル `` 境界線。

_**`button-tertiary-text`** — インラインの青色のテキスト リンク。背景は透明、テキスト ``.

ヒーローとデバイスのモックアップ

**`hero-band`** — 背景__CODEBCK_670___、中央の見出しの後ろに柔らかい空色のグラデーションが施されています。 `` (64px / 600 / -1.92px) で見出しを表示し、__CODEBCK_672___ で小見出しを表示し、単一のプライマリ CTA を表示し、その下にデバイス モックアップ コンポジットを表示します。

**`device-mockup-card`** — 実際の Expo dev サーフェスを示すレイヤー化された MacBook + iPhone の合成。背景__CODEBCK_674___、角丸__CODEBCK_675___。 MacBook には EAS ダッシュボードまたは Expo Studio のスクリーンショットが保存されます。 iPhone オーバーレイには、Expo Go で実行中のアプリが表示されます。これはクロムのページです。

カード

_**`feature-card`** — 背景 ``、テキスト ``、タイプ ``、丸め ``、パディング 24 ピクセル、1 ピクセル `` 境界線。

**`feature-card-dark`** — ダークバリアント。背景__CODEBCK_683___、テキスト__CODEBCK_684___。同じ形状、ダーク反転。

**`workflow-step-card`** — 「すべてのデバイスにアプリをインストールする」ワークフロー行のステップに進みます。背景__CODEBCK_686___、テキスト__CODEBCK_687___、丸め__CODEBCK_688___、パディング20ピクセル。レイアウト: 32 ピクセル正方形 `` + ステップ番号 + ラベル + 本文.

**`workflow-step-icon`** — 正方形のプレート。背景__CODEBCK_691___、角丸__CODEBCK_692___、32ピクセルサイズ。

**`testimonial-card`** — 引用カード。背景__CODEBCK_694___、テキスト__CODEBCK_695___、角丸__CODEBCK_696___、パディング24ピクセル。

コードとIDE

**`code-block`** — インライン コード ブロック。背景__CODEBCK_698___、テキスト__CODEBCK_699___、__CODEBCK_700___ (JetBrains Mono 13px)、丸め__CODEBCK_701___、パディング20ピクセル。暗い背景に白い文字。

**`ide-mockup-card`** — 様式化された IDE モックアップ。背景__CODEBCK_703___、角丸__CODEBCK_704___。マルチペイン エディタ + ターミナル プレビュー

価格

_**`pricing-tier-card`** — 標準の価格レベル。背景__CODEBCK_706___、角丸__CODEBCK_707___、パディング32ピクセル、1ピクセル__CODEBCK_708___境界線。

**`pricing-tier-featured`** — 注目の層。背景__CODEBCK_710___、テキスト__CODEBCK_711___。同じ形状、ダーク反転。

エコシステム

_**`ecosystem-tile`** — エコシステム パートナーのロゴ (TypeScript、React、Sentry など) 用の正方形のロゴ プレート。 背景__CODEBCK_713___、角丸__CODEBCK_714___、64ピクセルのサイズ、1ピクセル__CODEBCK_715___の境界線。

フォームとタグ

_**`text-input`** — 背景 ``、テキスト ``、角丸 `` (8 ピクセル)、パディング 12 ピクセル × 16 ピクセル、高さ 44 ピクセル、1 ピクセル `` 境界線。フォーカスすると、境界線が 2 ピクセルのインクに太くなります。

**`badge-pill`** — 小さな大文字の錠剤。背景__CODEBCK_722___、テキスト__CODEBCK_723___、タイプ__CODEBCK_724___、丸め__CODEBCK_725___、パディング4px × 10px.

CTA / フッター

_**`cta-band`** — プレフッター バンド。背景__CODEBCK_727___、__CODEBCK_728___の中央に表示される見出し、単一の黒い錠剤CTA。 96 ピクセルのパディング。

_**`footer-light`** — 白いフッターを閉じます。背景__CODEBCK_730___、テキスト__CODEBCK_731___。 5列のリンクリスト。 64×48 ピクセルのパディング。

**`footer-link`** - 背景透明、テキスト__CODEBCK_733___、タイプ__CODEBCK_734___.

推奨事項と禁止事項

実行

• __CODEBCK_735___ (黒) はプライマリ CTA 用に予約してください。
• __CODEBCK_736___ (青) はインライン本文リンクにのみ使用し、CTA やボタンには使用しないでください。
• すべての CTA を `` (8 ピクセル) に設定します - 開発者の方言。
• ディスプレイにはウェイト 600、ボディには 400 の Inter を使用します。
• JetBrains Mono ですべてのコード サーフェスをレンダリングします。
• ヒーローとデバイス モックアップ コンポジットを組み合わせます。これはページ クロムです。

しないでください

• _飽和したブランド アクション カラーを導入しないでください。 CTA の塗りつぶしは黒のみです。
• CTA では青 (``) を使用しないでください。インライン リンクのみ。
• ディスプレイをウェイト 600 未満または 700 を超えてドロップしないでください。
• CTA では丸薬を使用しないでください。丸薬はバッジ専用です。
• ヒーローの外側に空色のグラデーションの背景を複製しないでください。
• _サードパーティのウィジェットから CTA カラーを抽出しないでください (Cookie 同意、OneTrust)。ブランドの CTA は、実際のページの CTA に表示されるものです。

応答動作

ブレークポイント_

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

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

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

|タブレット | 640–1024ピクセル |ヒーロー h1 48px;デバイスのモックアップは圧縮されます。フィーチャーグリッド 2 アップ。 |

|デスクトップ | 1024–1280ピクセル |フルヒーロー h1 64px; MacBook + iPhone のフルコンポジット。フィーチャーグリッド 3 アップ。 |

|ワイド | > 1280ピクセル |コンテンツの上限は 1200 ピクセルです。 |

タッチターゲット

• 高さ 40 ピクセルのプライマリ CTA — WCAG AA で、AAA 用にパディングされます。
• 検索入力 44 ピクセル — AAA で。

戦略の崩壊

• 768 ピクセル以下では、上部のナビゲーションがハンバーガーに切り替わります。
• デバイス モックアップ MacBook + iPhone は、モバイル上で 1 つの iPhone プレビューに折りたたまれます。
• 機能グリッド: 3-up → 2-up → 1-up.
• エコシステム タイル グリッド: 8 アップ → 4 アップ → 3 アップ → 2 アップ。

反復ガイド

1.一度に 1 つのコンポーネントに注目してください。

2. CTA のデフォルトは `` (8px) です。カードは__CODEBCK_740___ (12ピクセル).

を使用します。

3.バリアントは個別のエントリとして存在します。

4.どこでも `` を使用します。16 進数をインライン化しないでください。

5.ホバー状態は文書化されていません。

6.ディスプレイはインター600、ボディはインター400。 JetBrains Mono のコード。

7。 CTA の色は引き続き黒のみです。テキストリンクの青色はインラインのみのままです。

既知のギャップ

• Inter と JetBrains Mono は無料で利用できます。ライセンスの問題はありません。
• アニメーションのタイミング (デバイス モックアップの視差、ヒーローの入場) は範囲外です。
• アプリ内サーフェス (EAS ダッシュボード インタラクティブ、Expo Go シミュレーター) はマーケティング モックアップから部分的にのみキャプチャされています。
• フォーカスを超えたフォーム検証状態は、キャプチャされたサーフェスには表示されません。

Industry Context

In the landscape of modern digital products, Expo's design system stands out for its distinctive visual identity. Compared to peers, Expo invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Expo's design system stands out for its distinctive visual identity. Compared to peers, Expo invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Industry Context

In the landscape of modern digital products, Expo's design system stands out for its distinctive visual identity. Compared to peers, Expo invests more in establishing a recognizable brand presence through thoughtful design token systems. This approach signals maturity in how the organization thinks about design scalability — treating its visual language as an asset that requires documentation, guidelines, and governance.

Related Design Systems

Explore similar design languages from the same category:

• Nvidia Design System
• Stripe Design System