01
设计气质 DNA
开发者框架移动端云端基础设施
构建现代移动应用时，开发团队所信赖的工具集。
02
色彩
#0090FFAccent#1C2024Ink#60646CInk soft#FFFFFFBG#F9F9FBBG soft#80838DMutedrgba(28,32,36,0.1)Line高对比度的黑白配色，并辅以细微的蓝色作为激活状态的点缀。
03
字体
- display
64px · 900 - heading
16px · 600 - body
16px · 400
所有标题和正文均使用 Inter 字体。 · 代码片段和技术标签使用 JetBrains Mono 字体。 · 保持紧凑的行高（1.0-1.4），营造密集、现代的视觉感受。
04
间距
4px8px12px16px24px32px40px48px64px96px144px以 4px 为基础单位保持一致的节奏，主视觉区域则采用宽松的留白。
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 8px
lg · 32px
pill · 9999px
1px solid #E0E1E6
0px 5px 10px 0px rgba(0, 0, 0, 0.05) · 0px 15px 25px 0px rgba(0, 0, 0, 0.12)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
主视觉区域采用单列居中布局，功能区则过渡到多列网格。
07
动效与交互
150msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
颜色和背景变化采用平滑过渡。 · 在 hover 状态下，进行细微的透明度和变换动画。
细微的背景色或文字颜色变化。 · 缩放或透明度反馈。
08
组件
- button 主要按钮为黑色填充的胶囊形，次要按钮为轮廓式胶囊形。
- card 白色背景，带有细微的边框和柔和的圆角。
- chip 带有细微填充背景和细边框。
- input 带有清晰聚焦状态的圆角矩形。
- hero 大段居中文字，辅以渐变或细微的背景图案。
09
文案语气与禁用清单
- 语气 专业、清晰，且面向开发者。
- 标题风格 大号、加粗、具有宣言性。
- 按钮文案 直接且以行动为导向。
- 不要为布局主体使用深色背景——截图显示的是干净的白色主题。
- 不要为标题使用装饰性衬线体——截图显示的是简洁的人文主义无衬线体。
- 不要使用种类繁多的亮色——截图仅依赖黑白及单一的蓝色点缀。
- 不要为按钮使用尖锐的方形角——截图显示的是圆角或胶囊形按钮。
- 不要让主视觉区域过于拥挤——截图保留了显著的垂直留白。
- 不要使用复杂或杂乱的背景图案——截图使用的是非常细微的点阵网格或浅色渐变。
- 避免: 术语
- 避免: 夸大
- 避免: 冗余
10
包内真实截图
11
System Prompt
Expo 是一个面向移动开发者的全栈 React Native 框架，拥有简洁、专业的界面。其设计以高对比度的黑白调色板（#FFFFFF 上的 #1C2024）为基底，并辅以细微的蓝色点缀（#0090FF）。它使用 Inter 作为正文和标题字体，并使用等宽字体显示代码。关键的设计规则：保持宽松的留白，使用胶囊形按钮，并避免复杂的装饰元素。其语调直接且面向开发者，拥有清晰、加粗的标题。这种设计DNA代表了注重工具性、高端的 SaaS 审美。