01
设计气质 DNA
实时基础设施协作多人在线开发者
实时协作功能的 Vercel
02
色彩
#FFFFFFInk#918D8DInk soft#000000BG#111111BG soft#171616BG quiet#A3A3A3Mutedrgba(255,255,255,0.1)Line高对比度单色暗色模式，极致克制。
03
字体
- display
68px · 500 - h1
52px · 500 - body
16px · 400 - small
14px · 400
标题使用几何/人文无衬线字体，字距紧凑，字重较高。 · 正文保持1.5倍行高，确保可读性。 · 等宽字体严格用于代码块与技术标签。
04
间距
4px8px16px24px32px48px64px96px统一4像素网格，留白充足以保证呼吸感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255,255,255,0.1)
0 0 0 1px rgba(255,255,255,0.1) · 0 2.767px 2.214px 0px rgba(0,0,0,0.05) · 0 100px 80px 0px rgba(0,0,0,0.17)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中栏式布局，最大宽度容器搭配全宽背景区块。
07
动效与交互
100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素采用平滑的不透明度与颜色过渡。 · 悬停时呈现细微变换与缩放效果。
细微颜色或背景变化，时长0.1至0.3秒。 · 即时响应，视觉反馈最小化。
08
组件
- button 药丸形或圆角矩形按钮，高对比度（白底黑字或黑底白字）。
- card 深色卡片，带细微1像素边框，无背景色区分。
- chip 小型圆角标签，采用细微背景或边框处理。
- input 深色背景，1像素边框，圆角处理。
- hero 大号居中字体，配大幅产品截图与双行动号召按钮。
09
文案语气与禁用清单
- 语气 技术化、直接、权威。
- 标题风格 加粗、简洁、价值导向。
- 按钮文案 行动导向且清晰，常强调“免费”或“开始”。
- 不要使用彩色渐变作为主背景——截图显示为纯黑与深灰色。
- 不要使用衬线字体作为标题——截图显示为简洁的几何人文无衬线字体。
- 不要使用柔和、圆润的粉彩色——截图显示为高对比度单色板。
- 不要用不必要的边框或阴影使界面杂乱——截图显示为极简的表面处理。
- 不要使用两端对齐文本——截图显示为居中与左对齐布局。
- 不要使用俏皮或过度装饰的图标——截图显示为简洁的线条图标。
- 避免: 避免过于随意或俚语化的语言。
- 避免: 避免UI文案中冗长绕弯的句子。
- 避免: 避免分散技术价值焦点的装饰性元素。
10
包内真实截图
11
System Prompt
Liveblocks 是面向开发者的 SaaS 实时基础设施。设计特征为鲜明的暗色高对比模式，使用纯黑（#000000）背景与白色（#FFFFFF）或浅灰（#918D8D）文本。字体采用简洁的人文无衬线（Suisse Int'l），大标题字距紧凑，辅以等宽字体。关键约束：禁用衬线字体，避免彩色或渐变背景，坚持单色表面处理，布局保持极致克制，留白充裕，边框最小化。不使用会削弱专业技术感的装饰元素。