返回设计库
E

Expo

Expo

访问网站

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

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

配色方案

primary
background
surface
text
muted
border

字体规范

标题字体Inter, system-ui, sans-serif
正文字体Inter, system-ui, sans-serif
基础字号15px
行高1.5
字重400, 500, 600

标题层级

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.

常见问题

Expo 的设计风格是什么?

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

Expo 使用什么主色调?

Expo 的主色调是 #4630EB,背景色为 #0B0B0F,文本色为 #FFFFFF。

Expo 使用什么字体?

标题字体: Inter, system-ui, sans-serif。正文字体: Inter, system-ui, sans-serif。基础字号: 15px。

如何在项目中使用 Expo 设计系统?

点击上方 DESIGN.md 代码块中的复制按钮,将完整设计规范复制到你的项目中。AI Coding 工具(如 Cursor)可以直接读取 DESIGN.md 来生成符合 Expo 风格的代码。

探索更多设计系统

发现 50+ 精选设计系统,为你的 AI Coding 项目提供设计灵感。

查看全部设计系统