Expo Design System
Light · Generated 15/04/2026 · 23 colors · 33 type tokens · 24 spacing steps · 1 breakpoint · 3 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
White
#FFFFFF
White 2 (base)
#F9F9FB
White 3
#FCFCFD
Light Gray 4
#F0F0F3
Blue
#0072DE
Blue 3
#0190FF
Cyan 2
#2B9A66
Text Colors
Dark Gray
#1C2024
Dark Gray 2
#60646C
Mid Gray
#80838D
Light Gray 3
#B0B4BA
Yellow
#B8AE63
Dark Gray 4
#171717
Border Colors
Light Gray
#D9D9E0
Light Gray 2
#E0E1E6
Dark Gray 3
#363A3F
Light Gray 5
#CDCED6
Light Gray 6
#E7E8EC
Fill & Gradient Colors
Dark Cyan
#00824D
Blue 2
#405D96
Blue 4
#0587F0
Cyan
#3DD68C
Typography
Base Font · Inter
Inter
Build apps for Android, iOS, and web. One codebase, all platforms.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Mono Font · JetBrains Mono
JetBrains Mono
npx create-expo-app@latest my-app
Regular · 400 Medium · 500
Display
font-size-2xl · 64px · Bold · letter-spacing: −3px · line-height: 70.4px
Build Once, Ship Everywhere.
font-size-xl · 48px · Bold · letter-spacing: −3px · line-height: 52.8px
Heading — The universal React Native framework
font-size-lg · 20px · Semibold · letter-spacing: −0.25px · line-height: 28px
Build cross-platform apps for Android, iOS, and the web with a single JavaScript codebase.
font-size-base · 18px · Regular · line-height: 25.2px
Default body copy — 16px for the standard interface reading size.
font-size-sm · 16px · Regular · line-height: 22.4px
Smaller body copy — 14px for supporting text and descriptions.
font-size-xs · 14px · Regular · line-height: 19.6px
CAPTION · LABEL · META
font-size-2xs · 12px · Semibold · letter-spacing: −0.07px · line-height: 16px
Line Heights
tight
12px
snug
14px
normal
16px
relaxed
16.8px
loose
19.2px
lh-6
19.6px
lh-7
22.4px
lh-8
22.75px
lh-9
24px
lh-10
25.2px
lh-11
28px
lh-12
52.8px
lh-13
70.4px
Letter Spacing
Tight Display
letter-spacing-tight
−3px · hero displays, 48–64px text
Heading Normal
letter-spacing-normal
−2px · large headings
Body Wide
letter-spacing-wide
−0.25px · subheadings, 20px+
LABEL
letter-spacing-widest
−0.07px · labels, captions
Spacing
Spacing Scale
24 tokens — 1px → 491.5px
1
2
4
6
8
12
16
20
24
32
36
48
64
88
96
98.75
102
120
128
144
240
242.5
256
491.5
Borders
Border Radii
SM
8px
MD
12px
LG
14px
XL
16px
2XL
20px
Full
24px
R7
32px
R8
36px
R9
48px
R10 / Pill
9999px
Border Widths
Hairline
1px · standard borders
Thin
2px · focus, emphasis
The hairline 1px is used universally for cards, inputs, and dividers. The thin 2px appears on focus states and selected elements.
Shadows / Elevation
Shadow Tokens
6 levels
shadow-xl
Subtle lift
rgba(0,0,0,.08) 3px 6px + rgba(0,0,0,.07) 2px 4px — standard card elevation
shadow-sm
Floating panels
rgba(0,0,0,.1) 10px 20px + rgba(0,0,0,.05) 3px 6px — dropdowns, modals
shadow-5
High elevation
rgba(0,0,0,.05) 5px 10px + rgba(0,0,0,.12) 15px 25px — deep dialogs
shadow-lg
Large surface
rgba(0,0,0,.15) 20px 40px — hero sections, full-bleed cards
shadow-md
Flat / no shadow
All layers transparent — no elevation, relies on border
shadow-6
Inner glow
rgba(255,255,255,.3) 0 0 0 1px inset — white inner ring on dark surfaces
Z-Index
LayerValueUsage
z-1 · Background-10Background decorations, canvas elements behind content
z-2 · Navigation10Sticky headers, bottom tabs, navigation bars
z-3 · Overlay50Modals, drawers, sidesheets, command palette
z-4 · System999999998System-level overlays — critical alerts, cookie banners, top-priority UI
Breakpoints
📱
breakpoint-xs
640px
Single breakpoint — layouts adapt at 640px viewport width (mobile / small tablet threshold)
Opacity
Opacity Tokens
2 tokens — 0.08 and 0.60
opacity-8
8% — subtle tints
opacity-60
60% — muted elements
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray--color-black1.28:1Fail
--color-dark-gray--color-white16.39:1AAA
--color-dark-gray--color-white-215.58:1AAA
--color-dark-gray--color-blue3.48:1AA Large
--color-dark-gray--color-light-gray-414.41:1AAA
--color-dark-gray-2--color-black3.54:1AA Large
--color-dark-gray-2--color-white5.94:1AA
--color-dark-gray-2--color-white-25.65:1AA
--color-dark-gray-2--color-blue1.26:1Fail
--color-dark-gray-2--color-light-gray-45.22:1AA
--color-mid-gray--color-black5.55:1AA
--color-mid-gray--color-white3.78:1AA Large
--color-mid-gray--color-white-23.6:1AA Large
--color-mid-gray--color-blue1.24:1Fail
--color-mid-gray--color-light-gray-43.33:1AA Large
--color-light-gray-3--color-black10.08:1AAA
--color-light-gray-3--color-white2.08:1Fail
--color-light-gray-3--color-light-gray-41.83:1Fail
--color-yellow--color-black9.27:1AAA
--color-yellow--color-white2.26:1Fail
--color-yellow--color-light-gray-41.99:1Fail
CSS Variables Reference
Background Colors
Black--color-black#000000
White--color-white#FFFFFF
White 2 (base)--color-white-2#F9F9FB
White 3--color-white-3#FCFCFD
Light Gray 4--color-light-gray-4#F0F0F3
Blue--color-blue#0072DE
Blue 3--color-blue-3#0190FF
Cyan 2--color-cyan-2#2B9A66
Text & Border Colors
Dark Gray (primary)--color-dark-gray#1C2024
Dark Gray 2--color-dark-gray-2#60646C
Mid Gray--color-mid-gray#80838D
Light Gray 3--color-light-gray-3#B0B4BA
Yellow--color-yellow#B8AE63
Dark Gray 4--color-dark-gray-4#171717
Light Gray (border)--color-light-gray#D9D9E0
Light Gray 2--color-light-gray-2#E0E1E6
Dark Gray 3 (border)--color-dark-gray-3#363A3F
Dark Cyan (fill)--color-dark-cyan#00824D
Blue 2 (fill)--color-blue-2#405D96
Cyan (gradient)--color-cyan#3DD68C
Typography
Base (Inter)--font-family-baseInter
Mono (JetBrains)--font-family-2JetBrains Mono
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2xs (12px)--font-size-2xs12px
xs (14px)--font-size-xs14px
sm (16px)--font-size-sm16px
base (18px)--font-size-base18px
lg (20px)--font-size-lg20px
xl (48px)--font-size-xl48px
2xl (64px)--font-size-2xl64px
Tight (−3px)--letter-spacing-tight−3px
Normal (−2px)--letter-spacing-normal−2px
Wide (−0.25px)--letter-spacing-wide−0.25px
Wider (−0.08px)--letter-spacing-wider−0.08px
Widest (−0.07px)--letter-spacing-widest−0.07px
Spacing (selected)
1 (1px)--space-11px
2 (2px)--space-22px
3 (4px)--space-34px
5 (8px)--space-58px
6 (12px)--space-612px
8 (16px)--space-816px
10 (20px)--space-1020px
12 (24px)--space-1224px
16 (32px)--space-1632px
32 (48px)--space-3248px
48 (64px)--space-4864px
64 (88px)--space-6488px
80 (96px)--space-8096px
160 (144px)--space-160144px
Borders & Radius
Hairline--border-width-hairline1px
Thin--border-width-thin2px
SM--radius-sm8px
MD--radius-md12px
LG--radius-lg14px
XL--radius-xl16px
2XL--radius-2xl20px
Full--radius-full24px
R7--radius-r732px
R8--radius-r836px
R9--radius-r948px
R10 / Pill--radius-r109999px
Motion, Opacity, Layers & Breakpoints
Instant--duration-instant150ms
Fast--duration-fast300ms
Easing--easing-ease-outease-out
Ghost--opacity-88%
Muted--opacity-6060%
Background--z-1-10
Navigation--z-210
Overlay / Modal--z-350
System Layer--z-4999999998
Mobile threshold--breakpoint-xs640px
Design System Preview · Expo · Generated 15/04/2026 · 23 color tokens · 7 font-size · 4 font-family · 4 font-weight · 13 line-height · 5 letter-spacing · 24 spacing · 10 radius · 2 border-width · 6 shadow · 2 duration · 1 easing · 4 z-index · 1 breakpoint · 2 opacity