# Expo — Design System
> Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
- **Canonical:** https://uiuxskills.com/library/expo
- **Source:** https://expo.dev
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:24.587Z

---

---
version: alpha
name: Expo
description: >-
  A full-stack React Native framework with cloud services for building and deploying universal
  native apps.
tone: Professional, authoritative, developer-focused, and highly efficient.
color-scheme: light
colors:
  primary: "#000000"
  secondary: "#666666"
  surface: "#FFFFFF"
  surface-container: "#F9F9F9"
  on-surface: "#111111"
  outline: "#E5E5E5"
  error: "#DC2626"
  success: "#16A34A"
  focus-ring: "#000000"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Expo provides a robust, developer-centric ecosystem for React Native, emphasizing speed and ease of use across the entire app lifecycle. The brand aesthetic is clean, modern, and highly technical, focusing on developer productivity and enterprise-grade reliability.

## Colors

The color palette is strictly monochromatic and functional, designed to minimize distraction and prioritize content clarity.

*   Primary (#000000): The core brand color used for text, primary actions, and key UI elements.
*   Secondary (#666666): Used for secondary text, borders, and supporting UI elements.
*   Surface (inferred) (#FFFFFF): The primary background color for the application.
*   Surface-container (inferred) (#F9F9F9): A subtle background shade used for sectioning and cards.
*   On-surface (inferred) (#111111): High-contrast text color for optimal readability.
*   Outline (#E5E5E5): The standard border color for structural dividers and input fields.
*   Error (inferred) (#DC2626): Semantic color reserved for critical error states.
*   Success (inferred) (#16A34A): Semantic color for positive feedback and success states.
*   Focus-ring (inferred) (#000000): High-visibility ring for accessible interactive states.
*   On-primary (inferred) (#FFFFFF): Text color used on primary-colored backgrounds.

## Typography

The typography system uses the Inter typeface to maintain a clean, readable, and professional interface across all screen sizes.

*   Display-lg (inferred): Used for hero headlines.
*   Headline-md (inferred): The standard size for section headers.
*   Body-md (inferred): The primary font size for standard paragraph text.
*   Label-md (inferred): Used for button labels and interactive UI controls.
*   Label-sm (inferred): Used for small UI labels and secondary metadata.

## Layout

The layout follows a centered container strategy with generous vertical spacing, utilizing a 4px base unit to ensure consistent rhythm. The page structure follows a logical flow: nav, hero, features, social-proof, pricing, and footer. Heroes are composed of a centered headline, subhead, and dual-action buttons, while feature sections rely on a grid-like structure. The design is mobile-first, with navigation collapsing into a menu drawer on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to differentiate content from the background, relying on subtle shadows to create depth without visual clutter.

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard card lift for feature cards.
*   elevation.lg: Used for modal or drawer overlays to establish a high-level focus.

## Shapes

The design system employs a rounded corner strategy to balance technical precision with a friendly, modern aesthetic. Larger containers utilize a 24px radius, while standard UI components such as inputs and cards use an 8px or 12px radius to maintain a professional, cohesive look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses a `{colors.primary}` background with `{typography.label-md}` text, providing a clear call to action. Secondary buttons use a transparent background with a `{colors.outline}` border, suitable for lower-priority actions.

### Card
Cards utilize `{colors.surface}` with a `{rounded.lg}` radius and `{colors.outline}` borders to define content areas. Elevated cards use the same base structure but incorporate `{elevation.md}` to separate them from the background.

### Input Field
Input fields feature a `{colors.surface}` background and `{rounded.md}` corners. They include a `{colors.outline}` border by default, which transitions to a `{colors.focus-ring}` color when the user interacts with the element.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Use `{colors.error}` for non-destructive actions. |
| Apply `{rounded.lg}` to all feature cards for consistency. | Use `{rounded.full}` on rectangular content containers. |
| Use `{spacing.md}` for internal padding within cards. | Use `{typography.body-sm}` for primary navigation labels. |
| Maintain `{typography.headline-md}` for all section headers. | Use more than two font weights on a single page. |
| Use `{colors.outline}` for all structural dividers. | Use low-contrast text on `{colors.surface-container}`. |
| Ensure all interactive elements have a clear `{colors.focus-ring}` state. | Use excessive shadows; stick to `{elevation.md}` for cards. |
| Use `{colors.success}` for positive feedback badges. | Use `{colors.primary}` for secondary or tertiary buttons. |
| Use `{typography.label-md}` for button text. | Use inconsistent spacing between section blocks. |

## Content Style

CTA labels are imperative and action-oriented, using verbs like "Get started" or "Talk to our team" to drive user behavior.

Headings are direct and benefit-driven, designed to highlight developer productivity and the value of the platform immediately.

Copy density is concise and scannable, favoring short paragraphs and frequent use of bullet points to break down complex feature lists for the reader.

## Imagery & Icons

The visual style is mixed, combining high-fidelity product screenshots with minimalist vector icons and brand-specific illustrations. Icons should maintain a clean, geometric shape language, while illustrations should be used to simplify technical concepts. All imagery must align with the professional, enterprise-grade tone of the platform.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Expo, a minimal enterprise developer platform. Match its professional, authoritative, and efficiency-focused tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.headline-md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or raw font stacks.
2. Use only the component variants defined under `components:`. Do not invent new button styles, badge variants, or card types the spec does not list.
3. Follow the Layout section for page structure (nav → hero → features → social-proof → pricing → footer), centered container strategy, and the 4px base spacing rhythm using `{spacing.xs}` through `{spacing.2xl}`.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{rounded.full}` on a content card), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values take precedence over the inferred ones in this spec.

## Output contract

**Must:**
- Use token names for every color, type style, radius, spacing, and shadow value.
- Implement hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`, `swatch-focus-ring`).
- Apply `{rounded.lg}` to all cards, `{rounded.md}` to inputs, and `{rounded.sm}` to badges.
- Use `{typography.label-md}` for button labels and `{typography.headline-md}` for section headers.
- Write CTAs as imperative verbs consistent with the Content Style section (e.g., "Get started", "Talk to our team").

**Must NOT:**
- Introduce colors, font sizes, or radii not present in the spec.
- Substitute generic utility defaults when a named token exists.
- Apply `{elevation.lg}` to cards; reserve it for modals and drawers.
- Add emoji, filler text, or marketing copy.
- Rewrite, replace, or invent headings, navigation labels, routes, or page-level copy.
- Alter the defined page structure or information architecture as a side effect of applying tokens.

## When in doubt
- If a required value is not in the spec, ask the product team before inventing a token.
- Prefer composing existing components over introducing new visual patterns.
- For ambiguous background roles, default to `{colors.surface}` for primary areas and `{colors.surface-container}` for sectioned or nested content.
- For unspecified breakpoints, follow the mobile-first guidance in Layout with a single breakpoint at 768px.
- When torn between two shadow levels, choose the lesser elevation; this brand uses depth sparingly.