Expo

Overview

Expo is a developer-centric platform for building universal native applications across iOS, Android, and web using React and JavaScript. The design system embodies a philosophy of "Technical Minimalism"—a aesthetic that prioritizes clarity, precision, and developer ergonomics through a stark black-and-white foundation punctuated by strategic blue accents (#476cff for interactive elements, #2547d0 for active states). The interface evokes a sense of technical confidence and accessibility: every interaction is predictable, every color choice serves a functional purpose, and visual hierarchy is achieved through weight and contrast rather than decoration. The brand personality is direct, pragmatic, and community-driven—speaking to developers as peers, never condescending. Example sentence in brand voice: "Ship production-ready apps in minutes, not months—Expo handles the infrastructure so you focus on code."

Colors

The color system is rooted in high-contrast accessibility and developer clarity. Primary (#000000) is pure black, used exclusively for CTAs (buttons, links, primary navigation) and critical interactive elements; it commands attention through absolute contrast against the white surface (#ffffff). Secondary (#476cff) is a medium-saturation blue reserved for focus states, hover effects, and secondary CTAs; it provides visual feedback without overwhelming the interface. Tertiary (#2547d0) is a deeper blue for active/pressed states and emphasis. The surface stack uses precise grays: surface-container-lowest (#f7f7f7) for subtle backgrounds, surface-container (#e6e6e6) for mid-tone containers, and outline (#ebebeb) for borders and dividers. On-surface (#171717) is near-black for body text; on-su

Typography

The type system uses Inter exclusively for UI (body, labels, headings) and JetBrains Mono for code snippets and technical content. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with maximum impact; Headline-lg (48px, 600 weight) is reserved for major section titles. Headline-md (32px, 600 weight) breaks up content rhythm, while Title-lg (20px, 600 weight) marks subsections. Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry narrative content with consistent -0.006em tracking for optical tightness. Label-md (14px, 600 weight, 0.01em tracking) is the workhorse for buttons, badges, and UI labels; Label-sm (12px, 500 weight, 0.05em tracking) is used sparingly for captions and metadata. All type sizes use unitless line-height (1.5 for body, 1.25 for labels) to

Layout

The layout system uses a 12-column grid with 24px gutters and a max-width of 1328px, allowing flexible content arrangement from mobile (single column) to desktop (multi-column). Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Container padding uses the gutter token (24px) on all sides, creating consistent breathing room. The page rhythm alternates between full-width hero sections (white background, centered content) and contained card grids (surface-container backgrounds, 24px gap between cards). Vertical rhythm is maintained through consistent use of lg spacing (40px) between major sections, creating a pre

Elevation & Depth

Elevation in this system is achieved through subtle shadows and border treatments rather than layered depth. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Cards/Containers): 1px solid border in outline (#ebebeb) with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a crisp, defined edge. Level 3 (Modals/Overlays): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border, signaling modal prominence. Interactive elements (buttons, inputs) use no shadow in default state; on hover, they transition to a 1px border in outline-variant (#a

Shapes

The shape philosophy is "Functional Geometry"—rounded corners are applied strategically to signal interactivity and reduce visual harshness without sacrificing technical clarity. Buttons use full (9999px) border-radius to create pill-shaped CTAs that are unmistakably clickable; this applies to all button variants (primary, secondary, ghost). Cards and containers use lg (16px) border-radius for a balanced, approachable appearance that softens the grid without becoming organic. Input fields and smaller components use DEFAULT (6px) or md (8px) radius for subtle rounding that maintains precision.

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#000000) background with {colors.on-primary} (#ffffff) text, full (9999px) border-radius, and 12px vertical / 24px horizontal padding for a 40px height. On hover, the background transitions to {colors.primary-container} (#303030) with a 200ms cubic-bezier(0.4, 0, 0.2, 1) ease. On active/pressed, it shifts to {colors.primary-fixed-dim} (#1a1a1a). Button-secondary is transparent with a 1px solid {colors.outline} border, {colors.primary} text, and the same padding/radius; on hover, the background becomes {colors.surface-container-low} (#ebebeb). Button-ghost has no border or background, only text color; on hover, a subtle {colors.surface-dim} (#f7f7f7) background appears. All buttons use {

Do's and Don'ts

**Do**

• Do use {colors.primary} (#000000) exclusively for primary CTAs and critical interactive elements—it creates unmistakable affordance through maximum contrast.
• Do apply {rounded.full} (9999px) to all buttons and badges to create a visual language where users instantly recognize interactive elements.
• Do maintain the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition timing across all state changes (hover, focus, active) for consistent, predictable feedback.
• Do use {colors.secondary} (#476cff) for focus rings and secondary CTAs; reserve {colors.tertiary} (#2547d0) for active/pressed states only.
• Do respect the spacing scale: use {spacing.md} (24px) for section breaks, {spacing.sm} (12px) for component padding, and {spacing.lg} (40px) for major content transitions.
• Do pair Inter (UI) with JetBrains Mono (code) to signal the distinction between narrative and technical content.

**Don't**

• Don't use decorative shadows or gradients—elevation is achieved through borders and subtle shadows only (max 0 4px 12px rgba(0, 0, 0, 0.08)).
• Don't apply rounded corners to data containers or cards; reserve {rounded.lg} (16px) for cards and {rounded.md} (8px) for accordions—full radius is buttons-only.
• Don't mix color roles: {colors.primary} is for CTAs, {colors.secondary} is for focus/secondary actions, {colors.tertiary} is for active states—never swap them.
• Don't use animations longer than 200ms or easing functions other than cubic-bezier(0.4, 0, 0.2, 1)—this preserves the snappy, technical feel.
• Don't exceed the container max-width of 1328px or use gutters smaller than 24px—this maintains the grid integrity and readability.
• Don't apply text-shadow or text-stroke to body text; reserve text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) for Label-sm over busy backgrounds only.