A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Expo, in one page
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.
Do's and don'ts
Do
- Reserve
{colors.primary}(black) for primary CTAs. - Use
{colors.text-link}(blue) for inline body links only — never on CTAs or buttons. - Set every CTA at
{rounded.md}(8px) — developer dialect. - Use Inter at weight 600 for display, 400 for body.
- Render every code surface in JetBrains Mono.
- Pair the hero with the device-mockup composite — it's the page chrome.
Don't
- Don't introduce a saturated brand action color. Black is the only CTA fill.
- Don't use blue (
{colors.text-link}) on a CTA. Inline links only. - Don't drop display below weight 600 or above 700.
- Don't use full pills on CTAs — pills are for badges only.
- Don't replicate the sky-blue gradient backdrop outside the hero.
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual page CTAs.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Expo design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #000000
- primary-active: #1a1a1a
- text-link: #0d74ce
- text-link-secondary: #476cff
- ink: #171717
- body: #60646c
- body-strong: #171717
- muted: #999999
- muted-soft: #cccccc
- hairline: #f0f0f3
Type:
- families: Inter, -apple-system, JetBrains Mono, Fira Code
- scale: 11, 13, 14, 16, 18, 22, 28, 36, 48
- weights: 400, 500, 600
Shape:
- radius: 0, 4, 6, 8, 12, 16, 24
Spacing: 4, 8, 10, 12, 16, 20, 24, 32, 48, 96
Rules:
- Reserve `{colors.primary}` (black) for primary CTAs.
- Use `{colors.text-link}` (blue) for inline body links only — never on CTAs or buttons.
- Set every CTA at `{rounded.md}` (8px) — developer dialect.
- Use Inter at weight 600 for display, 400 for body.
- Render every code surface in JetBrains Mono.
- Pair the hero with the device-mockup composite — it's the page chrome.
Avoid:
- Don't introduce a saturated brand action color. Black is the only CTA fill.
- Don't use blue (`{colors.text-link}`) on a CTA. Inline links only.
- Don't drop display below weight 600 or above 700.
- Don't use full pills on CTAs — pills are for badges only.
- Don't replicate the sky-blue gradient backdrop outside the hero.
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA is what appears on actual page CTAs.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Brand & Accent
- Black (
{colors.primary}— #000000): Primary CTA fill. Used scarcely. - Black Active (
{colors.primary-active}— #1a1a1a): Press state. - Text Link Blue (
{colors.text-link}— #0d74ce): Inline body links inside long-form copy. Scoped narrowly — never on CTAs. - Legal Link Blue (
{colors.text-link-secondary}— #476cff): Inline links inside legal copy footer. - Bright Cyan (
{colors.accent-link-bright}— #47c2ff): Used very sparingly inside docs widget links.
Surface
- Canvas (
{colors.canvas}— #ffffff): Pure white page floor. - Canvas Soft (
{colors.canvas-soft}— #fafafa): Subtle alternating band. - Surface Card (
{colors.surface-card}— #ffffff): Pure white card. - Surface Strong (
{colors.surface-strong}— #f0f0f3): Badges, ecosystem tiles, secondary buttons. - Surface Dark (
{colors.surface-dark}— #171717): Dark feature cards, code blocks, IDE mockups, featured pricing. - Surface Dark Elevated (
{colors.surface-dark-elevated}— #1a1a1a): One step lighter inside dark cards.
Atmospheric Backdrop
- Sky Light (
{colors.gradient-sky-light}— #cfe7ff) + Sky Mid ({colors.gradient-sky-mid}— #a8c8e8): The soft sky-blue gradient wash behind the homepage hero only. Not a brand action color.
Hairlines
- Hairline (
{colors.hairline}— #f0f0f3): Default 1px divider. - Hairline Soft (
{colors.hairline-soft}— #f5f5f7): Lighter divider. - Hairline Strong (
{colors.hairline-strong}— #dcdee0): Stronger panel outline.
Text
- Ink (
{colors.ink}— #171717): Display, body emphasis. - Body (
{colors.body}— #60646c): Default running-text — slightly cool gray. - Body Strong (
{colors.body-strong}— #171717): Same as ink. - Muted (
{colors.muted}— #999999): Sub-titles. - Muted Soft (
{colors.muted-soft}— #cccccc): Disabled text. - On Primary (
{colors.on-primary}— #ffffff): White text on black CTA. - On Dark (
{colors.on-dark}— #ffffff): White text on dark cards. - On Dark Soft (
{colors.on-dark-soft}— #b0b4ba): Muted off-white on dark.
Semantic
- Warning (
{colors.accent-warning}— #ab6400): Warning text inside docs callouts. - Preview (
{colors.accent-preview}— #8145b5): "Preview" tag color. - Success (
{colors.semantic-success}— #16a34a): Confirmation. - Error (
{colors.semantic-error}— #eb8e90): Validation errors.
Type scaleRead the full spec
Font Family
Inter is the single sans family across every text role. JetBrains Mono carries every code surface. Fallback: -apple-system, system-ui, sans-serif.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-mega} | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |
{typography.display-xl} | 48px | 600 | 1.1 | -1.44px | Subsidiary heroes |
{typography.display-lg} | 36px | 600 | 1.15 | -1.08px | Section heads |
{typography.display-md} | 28px | 600 | 1.2 | -0.84px | Sub-section heads |
{typography.display-sm} | 22px | 600 | 1.25 | -0.5px | Card group titles |
{typography.title-md} | 18px | 600 | 1.4 | 0 | Component titles |
{typography.title-sm} | 16px | 600 | 1.4 | 0 | List labels |
{typography.body-md} | 16px | 400 | 1.5 | 0 | Default body |
{typography.body-sm} | 14px | 400 | 1.5 | 0 | Footer body |
{typography.caption} | 13px | 400 | 1.4 | 0 | Photo captions |
{typography.caption-uppercase} | 11px | 600 | 1.4 | 0.88px | Section labels, badges |
{typography.code} | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |
{typography.button} | 14px | 500 | 1.0 | 0 | CTA labels |
{typography.nav-link} | 14px | 500 | 1.4 | 0 | Top-nav menu |
Principles
- Display weight stays at 600 — confident but not bombastic. Inter at 600 reads cleaner than 700.
- Negative letter-spacing on display — -0.5px to -1.92px tracking.
- JetBrains Mono on every code surface.
Note on Font Substitutes
Inter and JetBrains Mono are both freely available — the system uses them directly.
Components and layoutRead the full spec
Top Navigation
top-nav — Background {colors.canvas}, text {colors.ink}, height 64px. Layout: Expo wordmark left, primary horizontal menu (Tools / Workflows / EAS / Pricing / Docs / Showcase), Sign In + Get started CTA right.
Buttons
button-primary — Pure black pill. Background {colors.primary}, text {colors.on-primary}, type {typography.button} (14px / 500), padding 10px × 18px, height 40px, rounded {rounded.md} (8px).
button-primary-active — Press state. Background {colors.primary-active}.
button-secondary — White card with 1px hairline-strong border. Background {colors.surface-card}, text {colors.ink}, 1px {colors.hairline-strong} border.
button-tertiary-text — Inline blue text link. Background transparent, text {colors.text-link}.
Hero & Device Mockup
hero-band — Background {colors.canvas} with a soft sky-blue gradient wash behind the centered headline. Display headline in {typography.display-mega} (64px / 600 / -1.92px), subhead in {typography.body-md}, single primary CTA, then below — the device mockup composite.
device-mockup-card — A layered MacBook + iPhone composite showing real Expo dev surfaces. Background {colors.surface-card}, rounded {rounded.xl}. The MacBook holds the EAS dashboard or Expo Studio screenshot; the iPhone overlay shows the running app in Expo Go. This is the page chrome.
Cards
feature-card — Background {colors.surface-card}, text {colors.ink}, type {typography.title-md}, rounded {rounded.lg}, padding 24px, 1px {colors.hairline-strong} border.
feature-card-dark — Dark variant. Background {colors.surface-dark}, text {colors.on-dark}. Same shape, dark inversion.
workflow-step-card — Step in the "Get your app on every device" workflow row. Background {colors.surface-card}, text {colors.body}, rounded {rounded.lg}, padding 20px. Layout: 32px square {component.workflow-step-icon} + step number + label + body.
workflow-step-icon — Square plate. Background {colors.surface-strong}, rounded {rounded.md}, 32px size.
testimonial-card — Quote card. Background {colors.surface-card}, text {colors.body}, rounded {rounded.lg}, padding 24px.
Code & IDE
code-block — Inline code block. Background {colors.surface-dark}, text {colors.on-dark} in {typography.code} (JetBrains Mono 13px), rounded {rounded.lg}, padding 20px. White text on dark.
ide-mockup-card — Stylized IDE mockup. Background {colors.surface-dark}, rounded {rounded.lg}. Multi-pane editor + terminal preview.
Pricing
pricing-tier-card — Standard pricing tier. Background {colors.surface-card}, rounded {rounded.lg}, padding 32px, 1px {colors.hairline-strong} border.
pricing-tier-featured — Featured tier. Background {colors.surface-dark}, text {colors.on-dark}. Same shape, dark inversion.
Ecosystem
ecosystem-tile — Square logo plate for ecosystem partner logos (TypeScript, React, Sentry, etc.). Background {colors.surface-card}, rounded {rounded.md}, 64px size, 1px {colors.hairline} border.
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | Hero h1 64→32px; device mockup → single iPhone screen; feature grid 1-up; nav hamburger. |
| Tablet | 640–1024px | Hero h1 48px; device mockup compresses; feature grid 2-up. |
| Desktop | 1024–1280px | Full hero h1 64px; full MacBook + iPhone composite; feature grid 3-up. |
| Wide | > 1280px | Content caps at 1200px. |
Touch Targets
- Primary CTA at 40px height — at WCAG AA, padded for AAA.
- Search input 44px — at AAA.
Collapsing Strategy
- Top nav switches to hamburger below 768px.
- Device mockup MacBook + iPhone collapses to a single iPhone preview on mobile.
- Feature grid: 3-up → 2-up → 1-up.
- Ecosystem tile grid: 8-up → 4-up → 3-up → 2-up.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-expo {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #171717;
--heading-color: #171717;
--link-color: #000000;
--link-hover-color: #000000;
--border-color: #d5d5d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(23,23,23,0.06);
--card-hover-shadow: 0 6px 18px rgba(23,23,23,0.12);
--header-bg: #171717;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #686868;
--button-bg: #000000;
--button-text-color: #ffffff;
--button-hover-bg: #000000;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #171717;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d5d5d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #171717;
--base-font: var(--font-inter);
--heading-font: var(--font-helvetica);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- composio 82.7%
- intercom 81.7%
- coinbase 81.6%
- elevenlabs 79.0%
- cursor 78.9%
Where this came from
- Source document
volt/design-md/expo/DESIGN.md· 21.0 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.