Back to Library

React Native跨平台开发工具。深色主题,紧凑字距,代码优先设计。

紫色强调深色主题代码优先紧凑排版开发者工具

Color Palette

primary
background
surface
text
muted
border

Typography

Heading FontInter, system-ui, sans-serif
Body FontInter, system-ui, sans-serif
Base Size15px
Line Height1.5
Weights400, 500, 600

Heading Scale

h1Expo Heading
h2Expo Heading
h3Expo Heading
h4Expo Heading

DESIGN.md

# Expo Design System

## Visual Theme & Atmosphere
Developer-focused precision. Dark IDE-like interface (#0B0B0F) reduces eye strain during long coding sessions. Purple accents (#4630EB) signify cross-platform power. The design mirrors VS Code—familiar, efficient, code-centric.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #4630EB | Brand purple, CTAs |
| Background | #0B0B0F | Deep dark canvas |
| Surface | #151519 | Panels, cards |
| Text | #FFFFFF | White text |
| Muted | #8F8F8F | Secondary text |
| Border | #2A2A2E | Dark borders |

## Typography Rules
- **Heading Font**: Inter, system-ui, sans-serif
- **Body Font**: Inter, system-ui, sans-serif
- **Base Size**: 15px
- **Line Height**: 1.5

## Component Stylings
- **Buttons**: Purple bg, sharp corners
- **Code Blocks**: Dark surface, syntax highlighting
- **Terminal UI**: Command-line style interactions

## Agent Prompt Guide
Use dark IDE-like theme, purple accents, code-first layouts, tight letter-spacing for compact UI.

Frequently Asked Questions

What is Expo's design style?

React Native跨平台开发工具。深色主题,紧凑字距,代码优先设计。

What is Expo's primary color?

Expo uses #4630EB as primary color, #0B0B0F for background, and #FFFFFF for text.

What fonts does Expo use?

Heading font: Inter, system-ui, sans-serif. Body font: Inter, system-ui, sans-serif. Base size: 15px.

How to use Expo design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Expo's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems