# Design System: Expo

Luminous developer platform. Monochromatic cool-white canvas with pill-shaped geometry and gallery-like spacing.

## Chapters

| # | File | Contents |
|---|------|----------|
| 1 | [01-visual-theme.md](01-visual-theme.md) | Visual theme, atmosphere, key characteristics |
| 2 | [02-color-palette.md](02-color-palette.md) | Full color palette, roles, gradient system |
| 3 | [03-typography.md](03-typography.md) | Font families, hierarchy table, principles |
| 4 | [04-components.md](04-components.md) | Buttons, cards, inputs, nav, images, distinctive components |
| 5 | [05-layout.md](05-layout.md) | Spacing system, grid, whitespace, border radius scale |
| 6 | [06-depth-elevation.md](06-depth-elevation.md) | Elevation levels, shadow philosophy |
| 7 | [07-dos-donts.md](07-dos-donts.md) | Do's and Don'ts reference |
| 8 | [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, collapsing strategy |
| 9 | [09-agent-prompts.md](09-agent-prompts.md) | Quick color reference, example prompts, iteration guide |

## Quick Reference

**Palette essentials:**

- Background: `#f0f0f3` (Cloud Gray)
- Headlines / Primary CTA: `#000000` (Expo Black)
- Card Surface: `#ffffff` (Pure White)
- Body Text: `#1c2024` (Near Black)
- Secondary Text: `#60646c` (Slate Gray)
- Borders: `#e0e1e6` (Border Lavender)
- Links: `#0d74ce` (Link Cobalt)

**Typography essentials:**

- Primary: `Inter` — weights 400–900; display at 64px with -1.6px to -3px letter-spacing
- Monospace: `JetBrains Mono` — code blocks and technical labels

**Signature patterns:**

- Pill-shaped geometry (9999px radius) for primary CTAs and tags
- Gradient-free interface — visual richness from product screenshots only
- Depth via background contrast (white on Cloud Gray), not heavy shadows