# Design System Inspiration of Expo

React Native developer-platform. Pure black CTAs, Inter at modest weights, JetBrains Mono on every code surface — quietly-confident infrastructure voice.

01 — Color Palette

## Black + white, sky-blue atmosphere

Pure black CTAs on white canvas. Sky-blue atmospheric wash behind hero only. Text-link blue is for inline links — never on CTAs.

### Brand

primary (Black)
#000000
Primary CTA fill.
primary-active
#1a1a1a
Press state.
text-link
#0d74ce
Inline body links — never on CTAs.
text-link-secondary
#476cff
Legal-copy links.

### Atmospheric Backdrop

gradient-sky-light
#cfe7ff
Hero gradient top stop.
gradient-sky-mid
#a8c8e8
Hero gradient mid stop.

### Surface

canvas
#ffffff
Pure white page floor.
canvas-soft
#fafafa
Subtle alternating band.
surface-strong
#f0f0f3
Badges, ecosystem tiles.
surface-dark
#171717
Dark feature cards, code blocks.
surface-dark-elevated
#1a1a1a
One step lighter on dark.

### Text & Hairlines

ink
#171717
Display, body emphasis.
body
#60646c
Default running-text.
muted
#999999
Sub-titles.
muted-soft
#cccccc
Disabled text.
hairline-strong
#dcdee0
Stronger panel outline.
hairline
#f0f0f3
1px divider.

### Semantic

success
#16a34a
Build success.
warning
#ab6400
Docs warning callouts.
accent-preview
#8145b5
"Preview" tag color.
error
#eb8e90
Validation errors.
02 — Typography

## Inter 600 + JetBrains Mono

Display weight at 600 — confident but not bombastic. Single sans family.

display-mega64px / 600 / 1.05 / -1.92px
Everything you need to build apps
display-xl48px / 600 / 1.1 / -1.44px
Build your app with the best tools
display-lg36px / 600 / 1.15 / -1.08px
Section heading
display-md28px / 600 / 1.2 / -0.84px
Sub-section heading
display-sm22px / 600 / 1.25 / -0.5px
Card group title
title-md18px / 600 / 1.4
Component title
body-md16px / 400 / 1.5
Default body text. Inter at 400 reads cleanly.
body-sm14px / 400 / 1.5
Footer body, fine print.
caption-uppercase11px / 600 / 1.4 / 0.88px
Section label
code13px / 400 / 1.5 (JetBrains Mono)
npx create-expo-app my-app
button14px / 500 / 1.0
Get started
nav-link14px / 500 / 1.4
Tools · Workflows · EAS · Pricing
03 — Buttons

## Black-and-white CTA system

Primary black, white-card secondary, blue inline text-link.

button-primary
Black / white text / 8px / 40px
button-primary-active
Slightly lighter black press state.
button-secondary
White card + 1px hairline.
button-tertiary-text
Inline text-link blue.
04 — Workflow Step Cards

## Get your app on every device

A 4-step horizontal workflow. Each step has a numbered icon plate, label, and one-line description.

①
Step 01

##### Connect repo

Link your GitHub repository to start building.

②
Step 02

##### Configure EAS

Set up build profiles for iOS and Android.

③
Step 03

##### Build and sign

EAS handles signing certificates and provisioning.

④
Step 04

##### Submit to stores

Push directly to App Store and Google Play.

05 — Cards (light + dark inversion)

## Feature cards

#### Universal apps

One codebase for iOS, Android, and web. Native performance everywhere.

#### EAS Build

Cloud builds in minutes. No Xcode setup, no Android Studio configuration.

#### Over-the-air updates

Ship JavaScript changes instantly without waiting for app store review.

06 — Code Block + IDE Mockup

## Dark code surfaces

JetBrains Mono on dark canvas. The single mode for code regardless of surrounding section.

// Quickstart
npx create-expo-app my-app
cd my-app
npx expo start
app.config.ts
export default { expo: { name: 'My App', slug: 'my-app', version: '1.0.0', ios: { bundleIdentifier: 'com.example.app' }, android: { package: 'com.example.app' } } }
07 — Pricing Tiers

## Featured tier inverts to dark

#### Free

$0

- 30 builds / month
- Community support
- Public apps only

#### Production

$99/mo

- Unlimited builds
- Priority support
- Private apps
- EAS Update + Submit

#### Enterprise

Custom

- Everything in Production
- Dedicated support
- SOC 2 compliance

08 — Ecosystem Tiles

## Works with everything

8-up grid of partner logos at desktop. 64px square tiles with hairline borders.

TS
RN
MX
FB
SE
DD
JS
RV
09 — Forms

## Inputs

Email
Project slug
EAS token
10 — Badges

Small uppercase pills.

NewBetaPreviewWarning
11 — Spacing Scale
xxs · 4
xs · 8
sm · 12
base · 16
md · 20
lg · 24
xl · 32
xxl · 48
section · 96
12 — Border Radius

8px CTAs, 12px cards. Pill reserved for badges.

0 · none
4 · xs
6 · sm
8 · md
12 · lg
16 · xl
24 · xxl
pill
13 — Elevation & Depth

Hairline + soft drop. Hero atmospheric backdrop is sky-blue gradient. Dark inversion for code surfaces and featured pricing.

##### Flat / Canvas

Body bands, footer.

##### Card

White card with 1px hairline border.

##### Soft drop

0 4px 12px rgba(0,0,0,0.04). Single shadow tier.

##### Atmospheric gradient

Sky-blue radial wash — hero only.

##### Dark inversion

Code surfaces, featured pricing, dark feature cards.

14 — Responsive Behavior

Name | Width | Key Changes
--- | --- | ---
Mobile | < 640px | Hero h1 64→32px; device mockup → single iPhone; 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.

375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

#### Touch Targets

- Primary CTA at 40px height — at WCAG AA, padded for AAA.
- Form inputs at 44px — at AAA.

#### Collapsing Strategy

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