---
title: "Expo design system"
variant: extended
source: https://expo.dev/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/expo-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Expo · Design System

> Quiet, spacious design for building native apps.

**Theme:** light · **Industry:** devtools · **Source:** https://expo.dev/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Expo presents its mobile app development platform through an airy, mostly monochrome page with bold typography and rounded product panels. Product interfaces and diagrams carry the detail, while concise copy and black pill-shaped calls to action keep the experience focused.

## North star

Keep the canvas quiet and spacious so bold type and clear product evidence do the explaining.

## Overview

The page relies on a white canvas and alternating very pale gray section bands to create a calm, uncluttered foundation. Near-black headings provide strong contrast; muted gray copy keeps supporting explanations secondary, while blue accents are sparse and reserved for links or small interface details. Inter is used throughout, with substantial, tightly tracked display headings balanced by readable body copy and compact navigation. A wide, centered composition gives the hero and product panels room to breathe, then shifts into carefully arranged two-column features, cards, statistics, and testimonials. Large rounded panels soften the technical subject matter without making the interface feel decorative. Product screenshots, diagrams, and small customer marks provide most of the visual texture; they sit against quiet surfaces with restrained shadowing. The overall rhythm alternates generous open areas with denser product demonstrations, guiding users from platform overview toward evidence, community, and conversion.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, open section backgrounds, and the light framing around product media. |
| Cloud Surface | `#f9f9fb` | `--color-cloud-surface` | surface | Soft alternating section bands and large feature cards, including device and workflow showcases. |
| Graphite Ink | `#1c2024` | `--color-graphite-ink` | neutral | Primary headings, body copy, navigation text, and dark interface details. |
| Slate Copy | `#60646c` | `--color-slate-copy` | neutral | Supporting paragraphs, subdued navigation labels, and secondary button text. |
| Link Blue | `#0d74ce` | `--color-link-blue` | accent | Text-link accent; used sparingly rather than as a dominant page color. |
| Signal Blue | `#0090ff` | `--color-signal-blue` | accent | Measured blue button accent, most visibly used for the compact newsletter subscribe control. |
| Divider Gray | `#e0e1e6` | `--color-divider-gray` | semantic | Hairline borders around testimonial and other outlined link surfaces. |
| Control Gray | `#d9d9e0` | `--color-control-gray` | semantic | Minor borders and control details; not a defining page surface. |
| Button Black | `#000000` | `--color-button-black` | brand | High-contrast pill CTAs such as Get started and Learn more. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f9fb` (Cloud Surface) · `--color-text` → `#1c2024` (Graphite Ink) · `--color-text-muted` → `#60646c` (Slate Copy) · `--color-border` → `#e0e1e6` (Divider Gray) · `--color-accent` → `#0d74ce` (Link Blue) · `--color-accent-2` → `#0090ff` (Signal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c2024` | `#ffffff` | 16.39:1 | AAA |
| `#1c2024` | `#f9f9fb` | 15.58:1 | AAA |
| `#60646c` | `#ffffff` | 5.94:1 | AA |
| `#60646c` | `#f9f9fb` | 5.65:1 | AA |
| `#0d74ce` | `#ffffff` | 4.77:1 | AA |
| `#0d74ce` | `#f9f9fb` | 4.53:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, color(srgb 0.976471 0.976471 0.984314 / 0.72) 58%, rgb(249, 249, 251) 100%)`
- `linear-gradient(to top in oklab, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%)`
- `radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 34%, color(srgb 0.976471 0.976471 0.984314 / 0.024) 40.6%, color(srgb 0.976471 0.976471 0.984314 / 0.095) 47.2%, color(srgb 0.976471 0.976471 0.984314 / 0.206`
- `linear-gradient(to right bottom in oklab, rgb(228, 72, 87) 0%, rgb(199, 17, 225) 50%, rgb(127, 82, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 600, 400 | Display and section headings, body copy, navigation, links, and buttons. | Inter |
| JetBrains Mono | `--font-mono` | webfont | 400, 500, 600 | Small uppercase technical labels, metrics captions, and compact code-like details. | Roboto Mono |

- **Inter:** Use measured 400–600 weights; headings are semibold with tight negative tracking, while body and nav remain restrained.
- **JetBrains Mono:** Keep it limited to small labels and technical metadata; measured at regular to semibold weights.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.1 | -0.047em | — | Inter | Oversized hero and closing CTA headlines. |
| h1 | 48px | 600 | 1.1 | -0.042em | — | Inter | Primary page or major section headlines. |
| h2 | 32px | 600 | 1.1 | -0.016em | — | Inter | Feature-section titles and prominent product headings. |
| h3 | 24px | 600 | 1.2 | -0.021em | — | Inter | Card titles and smaller feature headings. |
| body | 16px | 500 | 1.4 | 0 | — | Inter | Explanatory paragraphs and general content. |
| caption | 14px | 500 | 1.4 | 0 | — | Inter | Small supporting labels and compact interface copy. |
| button | 24px | 600 | 1.2 | -0.021em | — | Inter | Prominent CTA labels. |
| nav | 14px | 400 | 1.63 | 0 | — | Inter | Header and footer navigation links. |
| link | 16px | 500 | 1.4 | 0 | — | Inter | Inline links and feature-card actions. |
| code | 12px | 400 | 1.6 | 0 | uppercase | JetBrains Mono | Compact uppercase technical labels and metrics. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 16, 24, 32, 40, 48, 64 px.
- Section rhythm 200px · element gap 8px · card padding 64px · max content width —.

Use a wide centered content area, with the hero arranged in three visual zones: headline and actions, central Expo mark, and supporting copy. The measured section structure alternates broad single-column bands with two-column feature groups, then narrows into centered statistics and community content. Preserve generous vertical pauses between major groups and keep card content spacious rather than tightly packed. The measured page width is unspecified, so follow the screenshot’s broad desktop composition without asserting a fixed maximum.

## Shape & elevation

- Radius: button `9999px` · card `40px` · media `12px` · nav `9999px` · link `16px` · xs `12px` · sm `16px` · md `24px` · lg `29px` · xl `34px` · 2xl `36px` · pill `9999px`
- Shadow `lg` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 20px 0px, rgba(0, 0, 0, 0.05) 0px 3p`
- Shadow `hairline` (button, footer): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg-2` (card, other, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 5px 10px 0px, rgba(0, 0, 0, 0.12) 0px 15`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 3px 6px 0px, rgba(0, 0, 0, 0.07) 0px 2px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.9) 0px 2.5px 21px 0px inset, rgba(134, 134`
- Shadow `inset-2` (footer): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections and cards read as flat pale surfaces, with subtle separation provided by background bands and occasional fine borders. Reserve soft shadows for product mockups and layered media, not text containers. Use clear overlap only within interface previews; keep primary content visually grounded and avoid heavy drop shadows.

## Imagery

Favor product UI screenshots, device previews, workflow panels, and clean technical diagrams over lifestyle photography. Frame media inside pale, generously rounded cards, often paired with centered headings or explanatory copy. The hero’s radial technical illustration is delicate and low contrast. Customer logos and testimonial avatars add small bursts of color; treat those as supporting media rather than the brand palette.

## Components

### Primary CTA

Black, white-text pill button for actions such as Get started and Learn more; use high contrast and a compact, direct label.

### Top navigation

A restrained horizontal header with the Expo mark, Inter navigation links, and compact account actions.

### Feature card

Pale #f9f9fb surface with a large rounded form, spacious internal padding, a clear heading, supporting copy, and product media.

### Product showcase

Screenshots, device imagery, or a diagram arranged beside or beneath concise explanatory text inside a soft panel.

### Testimonial tile

Light link-like card with a fine #e0e1e6 border, rounded corners, author identification, and short quote.

### Newsletter subscribe

Compact footer signup with a bright #0090ff subscribe button and otherwise muted, minimal presentation.

### Measured component styles

- **Primary button** (“Subscribe”): background #0090ff · text #ffffff · border 1px solid #0090ff · radius 32px · padding 0px 12px · 600 12px Inter
- **Secondary button** (“Product”): transparent background · text #60646c · border 1px solid · radius 36px · padding 0px 8px 0px 12px · 500 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Peter Piekarczyk @peterpme Expo is amazi”): transparent background · text #1c2024 · border 1px solid #e0e1e6 · radius 16px · padding 32px · 400 16px Inter
- **Card** (“Get your app on every device Build your ”): background #f9f9fb · text #1c2024 · border 1px solid · radius 40px · padding 64px · 400 16px Inter
- **Navigation item** (“Docs Product Solutions DEV TOOLS Expo SD”): transparent background · text #1c2024 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use white as the primary canvas and pale gray bands to separate major groups.
- Make headline hierarchy bold and compact with Inter.
- Give technical product panels generous internal breathing room.
- Use black pill CTAs for the most important actions.
- Let screenshots and diagrams explain product capabilities.
- Keep bright blue accents sparse and purposeful.

## Don't

- Do not introduce saturated full-page color backgrounds.
- Do not crowd feature cards with dense paragraphs.
- Do not use heavy shadows on every container.
- Do not replace the calm layout with a dense dashboard grid.
- Do not treat illustration-only colors as core brand colors.
- Do not make secondary copy compete with the headings.

## Agent prompt

Build a new developer-tools page in Expo’s visual style. Use Gallery White (#ffffff) as the main canvas, alternating Cloud Surface (#f9f9fb) bands for feature groups, Graphite Ink (#1c2024) for headings, and Slate Copy (#60646c) for supporting text. Keep Link Blue (#0d74ce) and Signal Blue (#0090ff) rare; use Button Black (#000000) for primary pill CTAs. Set Inter across navigation, headings, body, and buttons, with tight tracking on bold headings; reserve JetBrains Mono for small technical labels. Compose a spacious centered desktop layout with clear hero zones, rounded product cards, and varied two-column and centered sections. Use product screenshots, device previews, and restrained diagrams as evidence. Favor fine borders and subtle media shadows over heavy elevation. Keep copy concise and hierarchy unmistakable.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Three-part hero with left headline and actions, central Expo graphic, and right supporting copy. | Primary and secondary actions, Product capability summary | Bold left-aligned heading, Central radial illustration, Black pill CTA |
| 2 | logo-cloud | Centered trust statement above a horizontal strip of customer marks. | Social proof, Customer recognition | Compact mono-style label, Small logo row |
| 3 | feature-grid | Large rounded feature surface with text and workflow illustration in two columns. | Workflow overview, Selectable feature steps | Pale card surface, Stacked feature labels, Technical diagram |
| 4 | product-showcase | Asymmetric group of product cards with one larger showcase and smaller supporting panels. | Product capability discovery, Connector trial action | Rounded pale panels, Device and API imagery, Compact CTA |
| 5 | integrations | Centered heading above a compact horizontal row of platform and framework marks. | Ecosystem comparison, Learn-more navigation | Logo and label row, Black pill action |
| 6 | feature-grid | Two similarly sized feature panels arranged side by side. | Feature comparison, Learn-more links | Pale rounded cards, Centered device media, Short explanatory copy |
| 7 | feature-split | Centered text above a broad, multi-part simulator and logs visual. | Product explanation, Learn-more navigation | Pale section band, Device mockup, Simulator and log panels |
| 8 | feature-grid | Two feature panels arranged side by side with separate product previews. | Feature discovery, Learn-more links | Rounded cards, Release flow preview, Monitoring chart |
| 9 | feature-split | Centered heading and description above a wide workflow interface preview. | Workflow overview, Learn-more navigation | Pale rounded section, Large dashboard screenshot |
| 10 | stats | Three-column measured section containing centered headline metrics in a compact group. | Scale proof, Metric scanning | Large bold numbers, Inline product marks |
| 11 | other | Centered community heading, supporting copy, Discord action, and member count. | Community invitation, Membership proof | Centered text, Compact pill action |
| 12 | testimonials | Multi-column collection of varied-height testimonial tiles. | Peer endorsements, Author attribution | Fine bordered cards, Small avatars, Quote snippets |
| 13 | cta | Centered headline and primary action inside a soft, visually distinct area. | Final conversion action | Large bold heading, Black pill CTA, Subtle background treatment |
| 14 | other | A slim horizontal row of compact trust and compliance marks. | Trust reassurance | Small certification labels, Inline icons |
| 15 | footer | Multi-column footer with newsletter at left and grouped navigation links across the page. | Newsletter signup, Grouped site navigation | Compact link columns, Blue subscribe control, Small legal row |

## Source CSS custom properties (selected)

```css
--expo-color-white: #fff;
--expo-color-black: #000;
--expo-color-app-cyan: #07c0cb;
--expo-color-app-light-blue: #1e92c4;
--expo-color-app-dark-blue: #0b67af;
--expo-color-app-indigo: #4b50b2;
--expo-color-app-purple: #8945a3;
--expo-color-app-pink: #c04891;
--expo-color-app-orange: #e96d3c;
--expo-color-app-gold: #f38f2f;
--expo-color-app-yellow: #eebc01;
--expo-color-app-lime: #aabd04;
--expo-color-app-light-green: #6aa72a;
--expo-color-app-dark-green: #3a8e39;
--expo-theme-background-default: #fff;
--expo-theme-background-screen: #fcfcfd;
--expo-theme-background-subtle: #f9f9fb;
--expo-theme-background-element: #f0f0f3;
--expo-theme-background-hover: #e8e8ec;
--expo-theme-background-selected: #e0e1e6;
--expo-theme-background-overlay: #fff;
--expo-theme-background-success: #e6f6eb;
--expo-theme-background-warning: #fff7c2;
--expo-theme-background-danger: #feebec;
--expo-theme-background-info: #e6f4fe;
--expo-theme-background-preview: #f7edfe;
--expo-theme-icon-secondary: #80838d;
--expo-theme-text-default: #1c2024;
--expo-theme-text-secondary: #60646c;
--expo-theme-text-tertiary: #80838d;
--expo-theme-text-quaternary: #8b8d98;
--expo-theme-text-link: #0d74ce;
--expo-theme-text-success: #218358;
--expo-theme-text-warning: #ab6400;
--expo-theme-text-danger: #ce2c31;
--expo-theme-text-info: #0d74ce;
--expo-theme-text-preview: #8145b5;
--expo-theme-border-default: #d9d9e0;
--expo-theme-border-secondary: #e0e1e6;
--expo-theme-border-success: #8eceaa;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/expo-dev