# 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.
React Native跨平台开发工具。深色主题,紧凑字距,代码优先设计。
Expo uses #4630EB as primary color, #0B0B0F for background, and #FFFFFF for text.
Heading font: Inter, system-ui, sans-serif. Body font: Inter, system-ui, sans-serif. Base size: 15px.
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.
Discover 50+ curated design systems for your AI Coding projects.
View All Design Systems