Design System Analysis 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

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
NameWidthKey Changes
Mobile< 640pxHero h1 64→32px; device mockup → single iPhone; feature grid 1-up; nav hamburger.
Tablet640–1024pxHero h1 48px; device mockup compresses; feature grid 2-up.
Desktop1024–1280pxFull hero h1 64px; full MacBook + iPhone composite; feature grid 3-up.
Wide> 1280pxContent caps at 1200px.
375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

Touch Targets

Collapsing Strategy