Expo Design System

---

version: alpha

name: Expo-design-analysis

description: A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (`#171717`) carries body and display alike. The single brand voltage is **pure black** (`#000000`) for primary CTAs — minimal and editorial-feeling, paired with a small blue text-link accent (`#0d74ce`) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the **device-mockup hero** — a centered MacBook + iPhone composite showing real Expo dev surfaces — over the gradient sky wash.

colors:

primary: "#000000"

primary-active: "#1a1a1a"

text-link: "#0d74ce"

text-link-secondary: "#476cff"

ink: "#171717"

body: "#60646c"

body-strong: "#171717"

muted: "#999999"

muted-soft: "#cccccc"

hairline: "#f0f0f3"

hairline-soft: "#f5f5f7"

hairline-strong: "#dcdee0"

canvas: "#ffffff"

canvas-soft: "#fafafa"

surface-card: "#ffffff"

surface-strong: "#f0f0f3"

surface-dark: "#171717"

surface-dark-elevated: "#1a1a1a"

on-primary: "#ffffff"

on-dark: "#ffffff"

on-dark-soft: "#b0b4ba"

gradient-sky-light: "#cfe7ff"

gradient-sky-mid: "#a8c8e8"

accent-warning: "#ab6400"

accent-preview: "#8145b5"

accent-link-bright: "#47c2ff"

semantic-error: "#eb8e90"

semantic-success: "#16a34a"

typography:

display-mega:

fontFamily: "'Inter', -apple-system, system-ui, sans-serif"

fontSize: 64px

fontWeight: 600

lineHeight: 1.05

letterSpacing: -1.92px

display-xl:

fontFamily: "'Inter', sans-serif"

fontSize: 48px

fontWeight: 600

lineHeight: 1.1

letterSpacing: -1.44px

display-lg:

fontFamily: "'Inter', sans-serif"

fontSize: 36px

fontWeight: 600

lineHeight: 1.15

letterSpacing: -1.08px

display-md:

fontFamily: "'Inter', sans-serif"

fontSize: 28px

fontWeight: 600

lineHeight: 1.2

letterSpacing: -0.84px

display-sm:

fontFamily: "'Inter', sans-serif"

fontSize: 22px

fontWeight: 600

lineHeight: 1.25

letterSpacing: -0.5px

title-md:

fontFamily: "'Inter', sans-serif"

fontSize: 18px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

title-sm:

fontFamily: "'Inter', sans-serif"

fontSize: 16px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

body-md:

fontFamily: "'Inter', sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

body-sm:

fontFamily: "'Inter', sans-serif"

fontSize: 14px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

caption:

fontFamily: "'Inter', sans-serif"

fontSize: 13px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0

caption-uppercase:

fontFamily: "'Inter', sans-serif"

fontSize: 11px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0.88px

textTransform: uppercase

code:

fontFamily: "'JetBrains Mono', 'Fira Code', monospace"

fontSize: 13px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

button:

fontFamily: "'Inter', sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

nav-link:

fontFamily: "'Inter', sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

rounded:

none: 0px

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 24px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

base: 16px

md: 20px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

top-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.nav-link}"

height: 64px

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

height: 40px

button-primary-active:

backgroundColor: "{colors.primary-active}"

textColor: "{colors.on-primary}"

rounded: "{rounded.md}"

button-secondary:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 9px 17px

height: 40px

button-tertiary-text:

backgroundColor: transparent

textColor: "{colors.text-link}"

typography: "{typography.button}"

hero-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-mega}"

padding: 96px

device-mockup-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

rounded: "{rounded.xl}"

padding: 0

feature-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 24px

feature-card-dark:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.title-md}"

rounded: "{rounded.lg}"

padding: 24px

workflow-step-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 20px

workflow-step-icon:

backgroundColor: "{colors.surface-strong}"

rounded: "{rounded.md}"

size: 32px

code-block:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.code}"

rounded: "{rounded.lg}"

padding: 20px

ide-mockup-card:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

rounded: "{rounded.lg}"

padding: 0

pricing-tier-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

pricing-tier-featured:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

text-input:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 12px 16px

height: 44px

badge-pill:

backgroundColor: "{colors.surface-strong}"

textColor: "{colors.ink}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

ecosystem-tile:

backgroundColor: "{colors.surface-card}"

rounded: "{rounded.md}"

size: 64px

cta-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.display-lg}"

padding: 96px

testimonial-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 24px

footer-light:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.body-sm}"

padding: 64px 48px

footer-link:

backgroundColor: transparent

textColor: "{colors.body}"

typography: "{typography.body-sm}"

---

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:**

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

| 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 |

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

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).

| 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 |

| 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.

**`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.

**`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-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.

**`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-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-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-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.

**`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-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}`.

| 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. |

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.