A calm near-black React Native developer brand that gets its confidence entirely from restraint. The canvas is #111113 with content stepping up through #18191b to #212225, and across ~4,500 elements there is NOT ONE box-shadow — depth is purely those surface steps plus 1px #2e3135 hairlines, which is the single fastest way to break the system if ignored. Inter does everything at a hard weight ceiling of 600, with unusually aggressive negative tracking (-3px at the 64/70.4 display, -2px at 48/52.8) that gives headlines a dense engineered look; JetBrains Mono handles UPPERCASE eyebrow labels and the inline code chips that sit mid-headline. Every control is a full 9999px pill at a compact 36px height and 0 16px padding, and the primary CTA is WHITE #ffffff with #111113 text, hovering to #cccccc — treat white, not a brand hue, as the accent. A custom hocus: variant styles :focus-visible identically to :hover, so there is no separate focus ring at all. Below the hero sits a bento grid of 40px-radius tiles holding device mockups. Colour is rationed to a #6abaff link, a #30a46c status dot and one oklab React-rainbow gradient wash; interaction runs at 0.15s cubic-bezier(.4,0,.2,1) while ambient keyframes (arc-sweep 16s, ai-glow 11s, logo-carousel 30s) crawl slowly and infinitely.
Browse Expo in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: expo.dev (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Dashboard: behind login (needs-dashboard). Extracted withscripts/extract.js; 1 of the loaded stylesheets was cross-origin and unread, so the rule-level lists below are near-complete rather than exhaustive. Reality check: the queue hint said "near-black, restrained monochrome dev brand" — accurate. What it misses is that every control is a full pill (9999px), and that the one moment of colour is a React-flavoured rainbow gradient used as an accent wash.
Expo is a calm, near-black developer brand that gets its confidence from restraint rather than decoration. The canvas is #111113; content sits on barely-lighter #18191b and #212225 cards, so the page reads as a soft stack of dark planes with no shadows anywhere — depth comes entirely from these one- or two-step surface shifts and 1px #2e3135 hairlines. Type is Inter at large display sizes with unusually tight tracking (-3px at 64px), which gives headlines a dense, engineered look. Everything else is quiet: mono eyebrows in uppercase JetBrains Mono, muted grey body copy, and fully-rounded pill controls at a compact 36px height. Colour is rationed — a single sky blue #6abaff for links, a green #30a46c status dot, and one React-style rainbow gradient reserved for AI/SDK moments. The layout below the hero is a bento grid of large-radius cards holding device mockups. Feels: dark, engineered, calm, precise.
| Token | Hex | Role / usage |
|---|---|---|
| text-primary | #edeef0 | headings and body — the dominant text colour |
| text-secondary | #b0b4ba | lede paragraphs, muted supporting copy |
| text-tertiary | #777b84 | captions, eyebrow labels, footer meta |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #111113 | page background (set on html) |
| surface | #18191b | section bands and bento cards — the main raised plane |
| surface-raised | #212225 | nested chips, inline code, inset controls |
| canvas-deep | #0c0d0e | deepest wells, device-mockup interiors |
| border | #2e3135 | default hairline, card edges |
| border-strong | #363a3f | control borders, dividers (also seen at 0.5px) |
| Token | Hex | Role / usage |
|---|---|---|
| button-primary | #ffffff | primary CTA fill — white on near-black is the signature control |
| button-primary-hover | #cccccc | the only hover fill in the system |
| link | #6abaff | inline links |
| success | #30a46c | status dots ("What's new?" pip) |
| success-deep | #28684a | success backgrounds |
Rules: the accent budget is tiny — blue is for links only, green only for status. The primary CTA is *white*, not a brand colour; treat white as the accent. Never place a saturated fill on a large surface: colour appears as small dots, thin links, or the rainbow gradient, never as a section background.
Inter for everything (1081 elements), JetBrains Mono for code and eyebrow labels. Preview substitutes Inter from Google Fonts (matching the real face) and JetBrains Mono.
| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1/h2) | 64 / 70.4 | 600 | -3px (-4.7%) |
| Section (h3) | 48 / 52.8 | 600 | -2px (-4.2%) |
| Lede / body-large | 24 / 28.8 | 500 | -0.5px |
| Nav link | 14 / 19.6 | 400 | normal |
| Button label | 14 | 500 | normal |
| Mono eyebrow | size not captured | — | uppercase JetBrains Mono, #777b84 |
Pattern: weight ceiling is 600 — nothing is 700 or heavier. Tracking tightens aggressively as size grows (-3px at 64px is the signature), and returns to normal at UI sizes. Only the mono eyebrow is uppercase; headings are sentence case.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.