01
设计气质 DNA
开发者后端基础设施typescript实时
现代Web应用的工业级引擎模块
02
色彩
#141414Ink#FFFFFFInk soft#F6F0E1BG#292929BG soft#A9A9ACMutedrgba(20, 20, 20, 1)Line温暖奶油色编辑区域与深色专注开发环境之间的高对比分割。
03
字体
- display
40px · 700 - body
16px · 400
标题采用紧凑字距与粗体 · 正文保持高可读性与充足行高 · 等宽字体专用于代码片段与终端命令
04
间距
4px8px16px24px32px48px64px96px基于4px网格，段落间隔采用充足内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #141414
0px -16px 72px -8px rgba(0, 0, 0, 0.25) · 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
分屏英雄区：左侧文本区与右侧交互式代码编辑器
07
动效与交互
150msmicro
250mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时实现150ms平滑颜色与变换过渡 · 微妙的背景渐变动画
背景与文字颜色的微妙变化，平滑缓动 · 即时响应并附带轻微缩放反馈
08
组件
- button 深色填充按钮，采用胶囊形圆角与白色文字
- card 深色主题卡片，12px圆角与微妙阴影
- chip 彩色圆角标签，用于'工作'或'其他'等分类
- input 深色终端风格输入框，使用等宽字体
- hero 非对称分屏布局，一侧大字体标题与另一侧实时演示
09
文案语气与禁用清单
- 语气 专业、自信、开发者导向
- 标题风格 大号粗体紧凑字距几何无衬线字体
- 按钮文案 直接行动导向的胶囊形按钮
- 主按钮不要使用标准圆角——截图显示为胶囊形(999px)边框
- 不要使用亮蓝色或绿色强调色——截图显示为严格单色调色板，仅代码语法处有彩色点缀
- 标题不要使用衬线字体——截图显示为粗体紧凑字距几何无衬线字体
- 不要使用纤细浅色边框——截图显示为浅色背景上的1px深色实线边框
- 整个页面不要使用纯深色背景——截图显示为浅奶油色主内容区与深色组件区域的分割
- 不要使用Helvetica等标准无衬线字体——截图显示为独特的、稍宽的几何无衬线字体类别
- 避免: 轻浮或过度 playful 的语言
- 避免: 杂乱的布局
- 避免: 明亮霓虹色为主的配色方案
10
包内真实截图
11
System Prompt
Convex是一款面向开发者的后端即服务工具，采用精致的分割布局设计。主背景为温暖奶油色(#F6F0E1)，与代码编辑器和界面组件的深色(#292929)表面形成对比。字体方面，展示标题使用粗体几何无衬线字体，正文使用简洁无衬线字体，等宽字体严格保留用于代码。关键设计规则包括：避免使用标准圆角（按钮采用胶囊形圆角），避免使用明亮霓虹强调色而采用克制的单色调色板，并确保所有交互元素都有150ms平滑过渡。布局强调高对比度编辑区与深色专注工具界面的并置。