# Design System
Inspired by Expo

Auto-generated design token catalog from DESIGN.md

01 / Color Palette

## Color Palette & Roles

### Primary

Expo Black
#000000
Primary headlines, CTA buttons, brand anchor
Near Black
#1c2024
Body text, softer than pure black for reading

### Secondary & Accent

Link Cobalt
#0d74ce
Standard links, interactive signals
Legal Blue
#476cff
Footer/legal links, brighter accent
Widget Sky
#47c2ff
Widget branding, lightest accent
Preview Purple
#8145b5
Beta/preview feature indicators

### Surface & Background

Cloud Gray
#f0f0f3
Primary page background
Pure White
#ffffff
Card surfaces, elevated containers
Widget Dark
#1a1a1a
Dark theme widgets, overlays
Banner Dark
#171717
Promo banners, high-contrast surfaces

### Neutrals & Text

Slate Gray
#60646c
Secondary text (305 instances)
Mid Slate
#555860
Emphasized secondary text
Silver
#b0b4ba
Tertiary text, placeholders, metadata
Dark Slate
#363a3f
Borders on dark surfaces, switch tracks

### Semantic

Warning Amber
#ab6400
Warning states, deep amber for seriousness
Destructive Rose
#eb8e90
Disabled destructive actions, gentle alarm
Border Lavender
#e0e1e6
Standard card/container borders
Input Border
#d9d9e0
Buttons, form elements, interactive borders

02 / Typography Scale

## Typography Rules

Display Hero
Display / Hero — 64px / 700–900 / 1.10 / -3px — Inter
Section Heading
Section Heading — 48px / 600 / 1.10 / -2px — Inter
Sub-heading
Sub-heading — 20px / 600 / 1.20 / -0.25px — Inter
Body large text for intro paragraphs and section descriptions with comfortable reading rhythm.
Body Large — 18px / 400–500 / 1.40 / normal — Inter
Standard body text for paragraphs, navigation links, and button labels. Inter provides geometric precision at every weight.
Body / Button — 16px / 400–700 / 1.25–1.40 / normal — Inter
Caption text for descriptions and metadata labels
Caption / Label — 14px / 400–600 / 1.00–1.40 / normal — Inter
Tag / Small Badge
Tag / Small — 12px / 500 / 1.00–1.60 / normal — Inter
npx create-expo-app@latest my-app
Code Body — 16px / 400–600 / 1.40 / normal — JetBrains Mono
import { Camera } from "expo-camera";
Code Caption — 14px / 400–600 / 1.40 / normal — JetBrains Mono
REACT NATIVE
Code Small / Tag — 12px / 400 / 1.60 / uppercase — JetBrains Mono

03 / Button Variants

## Buttons

Primary Pill (Dark)
Standard (White)
Dark Rounded (32px)
// Get started with Expo
$ npx create-expo-app@latest my-app

04 / Card Examples

## Cards & Containers

Standard Card

### Border Lavender Container

Standard content card with 1px Border Lavender border and 8px radius. White surface clearly lifted from Cloud Gray page background.

Elevated (Whisper)

### Whisper Shadow Lift

Subtle card elevation with whisper-soft shadow. Barely perceptible lift for hover states and highlighted content.

Featured (Glow)

### Standard Elevation

Clear floating elevation with generous 16px radius. For feature showcases, product screenshots, and hero content containers.

05 / Spacing Scale

## Spacing System

Base unit: 8px. Scale builds from 1px to 144px.

1px
2px
4px
8px
12px
16px
24px
32px
40px
48px
64px

06 / Border Radius Scale

## Border Radius

4px
Nearly squared
6px
Buttons, inputs
8px
Standard cards
16px
Feature panels
24px
Images, videos
32px
Hero CTAs
9999px
Pill-shaped

07 / Elevation & Depth

## Depth & Elevation

Flat
No shadow. Cloud Gray page background, inline text.
Level 0
Surface
White bg, no shadow. Standard white cards on Cloud Gray.
Level 1
Whisper
Whisper-soft shadow. Subtle card lift, hover states.
Level 2
Elevated
Standard floating shadow. Feature showcases, screenshots.
Level 3
Modal
Heavy shadow with dark overlay. Dialogs, overlays.
Level 4