Expo

version alpha

name Expo

description A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (

#171717

) carries body and display alike. The single brand voltage is pure black (

#000000

) for primary CTAs — minimal and editorial-feeling, paired with a small blue text-link accent (

#0d74ce

) reserved for inline body links. Type pairs Inter at modest weights (display 600, body 400) with JetBrains Mono on every code surface. The brand's strongest visual signature is the device-mockup hero — a centered MacBook + iPhone composite showing real Expo dev surfaces — over the gradient sky wash.

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" hairline-soft: "#f5f5f7" hairline-strong: "#dcdee0" canvas: "#ffffff" canvas-soft: "#fafafa" surface-card: "#ffffff" surface-strong: "#f0f0f3" surface-dark: "#171717" surface-dark-elevated: "#1a1a1a" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#b0b4ba" gradient-sky-light: "#cfe7ff" gradient-sky-mid: "#a8c8e8" accent-warning: "#ab6400" accent-preview: "#8145b5" accent-link-bright: "#47c2ff" semantic-error: "#eb8e90" semantic-success: "#16a34a"

typography display-mega: fontFamily: "'Inter', -apple-system, system-ui, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1.05 letterSpacing: -1.92px display-xl: fontFamily: "'Inter', sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 1.1 letterSpacing: -1.44px display-lg: fontFamily: "'Inter', sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 1.15 letterSpacing: -1.08px display-md: fontFamily: "'Inter', sans-serif" fontSize: 28px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.84px display-sm: fontFamily: "'Inter', sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.5px title-md: fontFamily: "'Inter', sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "'Inter', sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "'Inter', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "'Inter', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "'Inter', sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 caption-uppercase: fontFamily: "'Inter', sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.88px textTransform: uppercase code: fontFamily: "'JetBrains Mono', 'Fira Code', monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: "'Inter', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 nav-link: fontFamily: "'Inter', sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded none: 0px xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px pill: 9999px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px base: 16px md: 20px lg: 24px xl: 32px xxl: 48px section: 96px

components top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 9px 17px height: 40px button-tertiary-text: backgroundColor: transparent textColor: "{colors.text-link}" typography: "{typography.button}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-mega}" padding: 96px device-mockup-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 0 feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 24px feature-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 24px workflow-step-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 20px workflow-step-icon: backgroundColor: "{colors.surface-strong}" rounded: "{rounded.md}" size: 32px code-block: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.code}" rounded: "{rounded.lg}" padding: 20px ide-mockup-card: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.lg}" padding: 0 pricing-tier-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px pricing-tier-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 44px badge-pill: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px ecosystem-tile: backgroundColor: "{colors.surface-card}" rounded: "{rounded.md}" size: 64px cta-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 96px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px 48px footer-link: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.body-sm}"

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.

Colors

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.

Typography

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.

Layout

Spacing System

• Base unit: 4px.

• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.

• Section padding: 9