awesome-design-md/design-md/expo/DESIGN.md

version	name	description	colors	typography	rounded	spacing	components
alpha	Expo	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.	primary primary-active text-link text-link-secondary ink body body-strong muted muted-soft hairline hairline-soft hairline-strong canvas canvas-soft surface-card surface-strong surface-dark surface-dark-elevated on-primary on-dark on-dark-soft gradient-sky-light gradient-sky-mid accent-warning accent-preview accent-link-bright semantic-error semantic-success #000000 #1a1a1a #0d74ce #476cff #171717 #60646c #171717 #999999 #cccccc #f0f0f3 #f5f5f7 #dcdee0 #ffffff #fafafa #ffffff #f0f0f3 #171717 #1a1a1a #ffffff #ffffff #b0b4ba #cfe7ff #a8c8e8 #ab6400 #8145b5 #47c2ff #eb8e90 #16a34a	display-mega display-xl display-lg display-md display-sm title-md title-sm body-md body-sm caption caption-uppercase code button nav-link fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', -apple-system, system-ui, sans-serif 64px 600 1.05 -1.92px fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 48px 600 1.1 -1.44px fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 36px 600 1.15 -1.08px fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 28px 600 1.2 -0.84px fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 22px 600 1.25 -0.5px fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 18px 600 1.4 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 16px 600 1.4 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 16px 400 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 14px 400 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 13px 400 1.4 0 fontFamily fontSize fontWeight lineHeight letterSpacing textTransform 'Inter', sans-serif 11px 600 1.4 0.88px uppercase fontFamily fontSize fontWeight lineHeight letterSpacing 'JetBrains Mono', 'Fira Code', monospace 13px 400 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 14px 500 1.0 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 14px 500 1.4 0	none xs sm md lg xl xxl pill full 0px 4px 6px 8px 12px 16px 24px 9999px 9999px	xxs xs sm base md lg xl xxl section 4px 8px 12px 16px 20px 24px 32px 48px 96px	top-nav button-primary button-primary-active button-secondary button-tertiary-text hero-band device-mockup-card feature-card feature-card-dark workflow-step-card workflow-step-icon code-block ide-mockup-card pricing-tier-card pricing-tier-featured text-input badge-pill ecosystem-tile cta-band testimonial-card footer-light footer-link backgroundColor textColor typography height {colors.canvas} {colors.ink} {typography.nav-link} 64px backgroundColor textColor typography rounded padding height {colors.primary} {colors.on-primary} {typography.button} {rounded.md} 10px 18px 40px backgroundColor textColor rounded {colors.primary-active} {colors.on-primary} {rounded.md} backgroundColor textColor typography rounded padding height {colors.surface-card} {colors.ink} {typography.button} {rounded.md} 9px 17px 40px backgroundColor textColor typography transparent {colors.text-link} {typography.button} backgroundColor textColor typography padding {colors.canvas} {colors.ink} {typography.display-mega} 96px backgroundColor textColor rounded padding {colors.surface-card} {colors.ink} {rounded.xl} 0 backgroundColor textColor typography rounded padding {colors.surface-card} {colors.ink} {typography.title-md} {rounded.lg} 24px backgroundColor textColor typography rounded padding {colors.surface-dark} {colors.on-dark} {typography.title-md} {rounded.lg} 24px backgroundColor textColor typography rounded padding {colors.surface-card} {colors.body} {typography.body-md} {rounded.lg} 20px backgroundColor rounded size {colors.surface-strong} {rounded.md} 32px backgroundColor textColor typography rounded padding {colors.surface-dark} {colors.on-dark} {typography.code} {rounded.lg} 20px backgroundColor textColor rounded padding {colors.surface-dark} {colors.on-dark} {rounded.lg} 0 backgroundColor textColor typography rounded padding {colors.surface-card} {colors.ink} {typography.body-md} {rounded.lg} 32px backgroundColor textColor typography rounded padding {colors.surface-dark} {colors.on-dark} {typography.body-md} {rounded.lg} 32px backgroundColor textColor typography rounded padding height {colors.surface-card} {colors.ink} {typography.body-md} {rounded.md} 12px 16px 44px backgroundColor textColor typography rounded padding {colors.surface-strong} {colors.ink} {typography.caption-uppercase} {rounded.pill} 4px 10px backgroundColor rounded size {colors.surface-card} {rounded.md} 64px backgroundColor textColor typography padding {colors.canvas} {colors.ink} {typography.display-lg} 96px backgroundColor textColor typography rounded padding {colors.surface-card} {colors.body} {typography.body-md} {rounded.lg} 24px backgroundColor textColor typography padding {colors.canvas} {colors.body} {typography.body-sm} 64px 48px backgroundColor textColor typography transparent {colors.body} {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: 96px.

Grid & Container

• Max content width: ~1200px.
• Editorial body: 12-column grid.
• Feature card grids: 2-up at desktop for hero splits, 3-up for benefit grids.
• Ecosystem tile grid: 8-up at desktop.
• Footer: 5-column at desktop.

Whitespace Philosophy

Generous editorial pacing. The white canvas does not compete with the hero's gradient sky wash; cards inside dense workflow sections sit close (16-24px gap).

Elevation & Depth

Level	Treatment	Use
Flat (canvas)	{colors.canvas} (#ffffff)	Body bands, footer
Card	{colors.surface-card} (#ffffff)	Content cards
Hairline border	1px {colors.hairline}	Card outlines
Soft drop	0 4px 12px rgba(0, 0, 0, 0.04)	Hovered cards (single shadow tier)
Atmospheric gradient	Sky-blue radial wash	Hero backdrop only
Dark inversion	{colors.surface-dark} (#171717)	Dark feature cards, code blocks, featured pricing

Decorative Depth

• Sky-blue gradient backdrop in the hero only — atmospheric depth without claiming to be a brand color.
• Device mockup composite as page chrome — MacBook + iPhone showing real Expo dev surfaces.

Shapes

Border Radius Scale

Token	Value	Use
{rounded.none}	0px	Reserved
{rounded.xs}	4px	Inline tags
{rounded.sm}	6px	Compact rows
{rounded.md}	8px	CTA buttons, form inputs, ecosystem tiles
{rounded.lg}	12px	Feature cards, code blocks, pricing tiers
{rounded.xl}	16px	Device mockup cards
{rounded.xxl}	24px	Larger atmospheric cards (rare)
{rounded.pill}	9999px	Badges only
{rounded.full}	9999px	Avatar plates (rare)

Compact developer-ergonomic radii — 8px CTAs, 12px cards. Pill geometry is reserved for badges, never CTAs.

Components

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.

Forms & Tags

text-input — Background {colors.surface-card}, text {colors.ink}, rounded {rounded.md} (8px), padding 12px × 16px, height 44px, 1px {colors.hairline-strong} border. Focus thickens border to 2px ink.

badge-pill — Small uppercase pill. Background {colors.surface-strong}, text {colors.ink}, type {typography.caption-uppercase}, rounded {rounded.pill}, padding 4px × 10px.

CTA / Footer

cta-band — Pre-footer band. Background {colors.canvas}, centered display headline in {typography.display-lg}, single black pill CTA. 96px padding.

footer-light — Closing white footer. Background {colors.canvas}, text {colors.body}. 5-column link list. 64×48px padding.

footer-link — Background transparent, text {colors.body}, type {typography.body-sm}.

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.

Responsive Behavior

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.

Iteration Guide

1. Focus on a single component at a time.
2. CTAs default to {rounded.md} (8px). Cards use {rounded.lg} (12px).
3. Variants live as separate entries.
4. Use {token.refs} everywhere — never inline hex.
5. Hover state never documented.
6. Inter 600 for display, Inter 400 for body. JetBrains Mono on code.
7. Black stays the only CTA color; text-link blue stays inline-only.

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.