Skip to content

Expo Design System

Expo's calm infrastructure look: white canvas, a soft sky-blue hero wash, pure black CTAs, Inter and JetBrains Mono. For React, Next.js and AI tools.

Get ProDownload DESIGN.md
Primary color
#000000
Typeface
Inter
Shape
Mixed
Base radius
8px
Colors
28
Type tokens
14
Components
22
Spacing values
9

About Expo DESIGN.md

Curated by Dov Azencot, updated May 12, 2026. Source expo.dev (opens in a new tab).

Expo's marketing site reads like a quietly-confident React Native developer platform. The canvas is pure white with a soft sky-blue gradient wash behind the hero band — the only atmospheric decoration on the page. Near-black ink at #171717 carries both display and body, and the single brand voltage is pure black at #000000, reserved for primary CTAs. A small blue text-link accent at #0d74ce shows up inside body copy, never on a button. The brand's strongest signature is the device-mockup hero: a centered MacBook plus iPhone composite showing real Expo dev surfaces — Expo Studio, the EAS Build dashboard, the Expo Go simulator — sitting over the sky gradient. The composite is the page chrome instead of an illustration, and it tells you what the product does without a single bullet point.

This page packages all of that into a single DESIGN.md file using the Google Labs spec format. Inside: 28 colors tokens grouped into brand, surface, atmospheric, hairline, text, and semantic; 15 type styles all running Inter except for the JetBrains Mono code style; 9 corner radii from 4px hairlines to a 9999px pill reserved for badges only; a 4px-based spacing scale that tops out at a 96px section rhythm; and 22 components recipes covering top nav, three button tiers, hero band, device mockup, feature cards in light and dark, workflow steps, code blocks, IDE mockups, two pricing tiers, text input, badge pill, ecosystem tile, CTA band, and footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Expo's editorial restraint — pure black CTAs at 8px radius, Inter 600 for display, JetBrains Mono on every code surface — instead of inventing a saturated brand color the page doesn't have. Reference the tokens directly inside Tailwind config or CSS variables when you want a developer-tool surface that earns trust through neutrality rather than chrome. The discipline of refusing a saturated action color and trusting Inter at weight 600 is what makes this system worth studying.

What makes it distinct

5 highlights

  1. Single CTA voltagePure black #000000 on every primary button, never the blue inline link color
  2. Inter at 600 across display, JetBrains Mono on every code surfaceNo custom typeface
  3. Device-mockup hero is the page chromeMacBook plus iPhone composite over a sky-blue gradient wash
  4. 8px CTA radius, 12px card radiusCompact developer-tool dialect, no pill geometry on actions
  5. 96px section rhythm with hairline borders and one soft drop shadowAtmospheric depth only inside the hero

Live at expo.dev

Expo in production, as captured. Scroll the window to see the whole page.

Visit expo.dev (opens in a new tab)
Expo's website at expo.dev

28 colors

Expo's system runs on #000000 as its primary voltage, used in 1 of 22 components. Type is set in Inter across 14 tokens from 11px to 64px, weights 400–600. Shape language is mixed across 22 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 5

Surface

Page and card backgrounds · 6

Text

Headlines, body, captions · 10

Borders & Hairlines

Dividers, outlines, rules · 3

Semantic

Status, errors, success, links · 2

Other

Specialty colors · 2

14 type tokens

Set in Inter across 14 tokens, from 11px to 64px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-mega64px · weight 600 · lh 1.05 · tracking -1.92pxThe quick brown fox jumps over the lazy dog
  • display-xl48px · weight 600 · lh 1.1 · tracking -1.44pxThe quick brown fox jumps over the lazy dog
  • display-lg36px · weight 600 · lh 1.15 · tracking -1.08pxThe quick brown fox jumps over the lazy dog
  • display-md28px · weight 600 · lh 1.2 · tracking -0.84pxThe quick brown fox jumps over the lazy dog
  • display-sm22px · weight 600 · lh 1.25 · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • title-md18px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
  • title-sm16px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
  • body-md16px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • body-sm14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • caption13px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
  • caption-uppercase11px · weight 600 · lh 1.4 · tracking 0.88pxThe quick brown fox jumps over the lazy dog
  • code13px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • button14px · weight 500 · lh 1The quick brown fox jumps over the lazy dog
  • nav-link14px · weight 500 · lh 1.4The quick brown fox jumps over the lazy dog

Radii and spacing

9 corner radii and 9 spacing values. Shape language: mixed, on a 8px base radius.

Radii9

  • none0px
  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • xxl24px
  • pill9999px
  • full9999px

Spacing9

  • xxs4px
  • xs8px
  • sm12px
  • base16px
  • md20px
  • lg24px
  • xl32px
  • xxl48px
  • section96px

22 components

Each rendered from its tokens (color, type, radius, padding) on Expo's own canvas.

  • Top Nav
    Top Navtop-nav
  • Button Primary
    Button Primarybutton-primary
  • Button Primary Active
    Button Primary Activebutton-primary-active
  • Button Secondary
    Button Secondarybutton-secondary
  • Button Tertiary Text
    Button Tertiary Textbutton-tertiary-text
  • Hero Band
    Hero Bandhero-band
  • Device Mockup Card
    Device Mockup Carddevice-mockup-card
  • Feature Card
    Feature Cardfeature-card
  • Feature Card Dark
    Feature Card Darkfeature-card-dark
  • Workflow Step Card
    Workflow Step Cardworkflow-step-card
  • Workflow Step Icon
    Workflow Step Iconworkflow-step-icon
  • Code Block
    Code Blockcode-block
  • Ide Mockup Card
    Ide Mockup Cardide-mockup-card
  • Pricing Tier Card
    Pricing Tier Cardpricing-tier-card
  • Pricing Tier Featured
    Pricing Tier Featuredpricing-tier-featured
  • Type here…
    Text Inputtext-input
  • Badge Pill
    Badge Pillbadge-pill
  • Ecosystem Tile
    Ecosystem Tileecosystem-tile
  • Cta Band
    Cta Bandcta-band
  • Testimonial Card
    Testimonial Cardtestimonial-card
  • Footer Light
    Footer Lightfooter-light
  • Footer Link
    Footer Linkfooter-link

The system, in use

Expo's tokens on the kind of product it builds.

Marketing heroThe homepage: its nav, a headline and the main call to action.
Expo
Sign up

The fastest way to build and ship software

Deploy from git in seconds, scale on demand and keep every environment in sync.

Start deployingRead the docs
ExpoA
Requests2.4M
Deployments148
Error rate0.08%
p95 latency182ms
RequestsLast 30 days

Expo design system FAQ

Expo's tokens, its components and how to use this DESIGN.md in your project.

Related reading

Specs, directories and component libraries that pair with this design system.

Use Expo in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.

Download DESIGN.md

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Expo.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Expo's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md overview, rationale, do’s and don’ts

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.

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.

More systems like this

Algolia, Astro, Biome and 67 more in Developer Tools & IDEs: each brand's colors, type and components in one file your AI agent builds from.

All 71 in Developer Tools & IDEs

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped