Design System

Build what
matters,
faster.

A clean, bright developer documentation system. Deep navy text, vibrant purple accents, and generous whitespace for focused technical content.

16 color tokens 9 type steps 4px grid 4 surface levels

Download Spec theme.css tokens.json variables.css

Foundation

Color Tokens

Light neutrals with deep navy text and vibrant Expo Purple accent. 16 tokens across base surfaces, text hierarchy, interaction, and status colors.

Canvas White

#fafafa

Primary page background

Pure White

#ffffff

Cards, code blocks, inputs

Paper Gray

#f5f5f5

Secondary sections

Border Light

#e6e6e6

Borders, dividers

Border Medium

#d4d4d4

Stronger borders, active

Deep Navy

#000023

Primary text, headings

Dark Ink

#1a1a2e

Secondary text, body copy

Slate Gray

#5a5a7a

Tertiary text, captions

Muted Gray

#8c8c9e

Placeholders, disabled

Expo Purple

#4630EB

Primary accent, links, CTAs

Purple Light

#7b68ee

Hover states, secondary

Purple Glow

#e8e0ff

Selection, subtle fills

Success Green

#00823

Success states

Warning Amber

#e8a317

Warning states

Error Red

#dc3545

Error, destructive

Code Surface

#f8f7ff

Code block background

Typography

Type Scale

Inter as primary typeface with precise weight and size hierarchy. 9 scale steps from caption to display-lg for clear documentation structure.

Display-lg Build faster 48px / 1.0 / −0.04em

Display Ship with Expo 40px / 1.1 / −0.04em

Heading-lg Getting Started 32px / 1.2 / −0.025px

Heading Section heading 24px / 1.3 / −0.02px

Subheading Subsection title 18px / 1.5 / 0

Body Default body text for readable documentation 16px / 1.6 / 0

Body-sm Dense content, table cells, compact lists 13px / 1.6 / 0.01px

Caption Meta info · Footnotes · Labels 12px / 1.5 / 0.02px

Fonts

Primary Inter 400–700 · 12–48px

Mono Inter Mono 400–500 · 12–16px · Code only

Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous breathing room. 14-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

44px

88px

1212px

1616px

2424px

3232px

4848px

9696px

Border Radius

sm 4px

md 6px

lg 8px

xl / cards 12px

pill 9999px

Elevation

Surfaces

Clean, layered surfaces from canvas to code. Borders define elevation more than shadows. 4 distinct surface levels.

Surface System

Canvas White #fafafa

Paper Gray #f5f5f5

Pure White #ffffff

Code Surface #f8f7ff

Components

UI Elements

Button variants, documentation cards, code blocks, sidebar navigation, tags, and search inputs for developer documentation.

Primary Action Button

Main call to action — highest visual weight

.btn-primary

Expo Purple (#4630EB) background, white text, 6px radius. Use exclusively for the single most important action.

Secondary Button

Secondary actions, navigation

.btn-secondary

Expo Purple text, Expo Purple border. For actions that need visibility without competing with primary CTA.

Ghost Button

Tertiary actions, less prominent

.btn-ghost

Deep Navy text, Border Light border. For subtle actions that shouldn't distract from content.

Tags & Badges

Version indicators, status labels

.tag

v3.2.0 Stable Beta Deprecated

Pill shape with Purple Glow background. Variant colors for success, warning, and error states.

Code Block

Code snippets and terminal output

.code-block

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Code Surface (#f8f7ff) background, 12px radius, 20px padding. Inter Mono for all code content.

Sidebar Navigation

Documentation navigation

.sidebar-item

Active state: Expo Purple text, Purple Glow background, 2px left border in Expo Purple.

Search Input

Documentation search

.search-input

Pure White background, 8px radius, Border Light outline. Focus state uses Expo Purple border with subtle purple glow shadow.

Documentation Card

Content sections, feature blocks

.doc-card

File-based Routing

Create pages by adding files to the app/ directory. Routes are automatically generated from the file system.

Pure White background, 12px radius, 24px padding, 1px Border Light border. Clean container for documentation content.

Guidelines

Do's & Don'ts

Do — Embrace

Canvas White (#fafafa) as primary page background
Deep Navy (#000023) for headings and primary text
Expo Purple (#4630EB) for links, active states, and CTAs
12px border radius for cards consistently
4px-based spacing with generous whitespace
Inter Mono for all code content
Purple Glow (#e8e0ff) for selected states
Code Surface (#f8f7ff) for code blocks

Don't — Avoid

Dark backgrounds for main content areas
Expo Purple for large background fills
Body text fonts inside code blocks
Inconsistent border radii below 4px
Heavy drop shadows over borders
Colors outside the defined palette
Dense packing without whitespace
Decorative or script fonts

Build whatmatters,faster.