01
设计气质 DNA
速度极简协作编辑器Rust开发者
精密的德系汽车界面与现代极简主义相遇
02
色彩
#1D4ED8Accent#222B35Ink#4E5E63Ink soft#FAFBFCBG#F0F2F4BG soft#E6E9EDBG quiet#A9AFC0Mutedrgba(169,175,188,0.3)Line高对比度的功能性调色板，以单一主导的蓝色用于主要操作，并以冷静的中性灰色作为基底
03
字体
- hero
64px · 700 - h1
48px · 700 - h2
24px · 700 - body
16px · 400 - small
14px · 400 - mono
14px · 400
大尺寸展示文本使用紧凑的字间距 · 正文保持足够的行高以确保可读性 · 代码块和技术内容仅使用等宽字体
04
间距
4px8px12px16px24px32px48px64px96px128px8px 网格系统，辅以充足的空白以提供呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(169,175,188,0.3)
0 1px 3px rgba(0,0,0,0.1) · 0 4px 6px -4px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 1px 3px 0 rgba(230,239,254,1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中单栏布局，带有充足的内边距和清晰的视觉层级
07
动效与交互
100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 时的微小缩放和平移变换 · 交互元素上的平滑颜色过渡 · 内容显示时的柔和淡入
带有阴影增强和轻微色偏的微小浮起效果 · 通过缩放变换提供即时视觉反馈
08
组件
- button 主要：实心蓝色填充配白色文字；次要：带灰色边框和深色文字的描边样式；两者均带有微小的 hover 阴影
- card 浅灰色背景，带有细微边框、清晰的排版和极少的装饰元素
- chip 用于标签和元数据的小型内联元素，浅灰色背景
- input 简洁的带边框输入框，focus 时带有细微阴影
- hero 居中的大标题，配有辅助文本、双行动按钮和柔和的渐变背景
09
文案语气与禁用清单
- 语气 自信、专业且平易近人
- 标题风格 清晰、简洁的陈述，强调性能与开发者体验
- 按钮文案 直接的行动导向语言，带有明确的价值主张
- 避免过度的颜色对比——截图展示了受控的蓝色点缀与中性灰色的搭配
- 避免将深色模式作为主要设计——截图展示了带有微妙纹理的浅色主题
- 避免使用装饰性插图——截图展示了以排版为核心的简洁设计
- 避免添加不必要的边框或分隔线——截图展示了通过空白实现的清晰分隔
- 避免使用复杂的动画——截图展示了极简的动效设计
- 避免界面过于拥挤——截图展示了充足的间距与呼吸空间
- 避免: 过于随意或俏皮的语言
- 避免: 脱离上下文的技术术语
- 避免: 营销噱头或最高级表述
10
包内真实截图
11
System Prompt
这是 Zed 的着陆页，Zed 是一款面向重视速度与极简主义的开发者的高性能代码编辑器。设计采用精致的几何无衬线字体系统，标题使用紧凑的字间距，并留有充足的空白以确保可读性。主要操作使用醒目的蓝色（#1D4ED8）点缀，与冷静的中性灰色（#FAFBFC 背景，#222B35 文本）形成对比。关键设计原则包括：无不分散核心信息注意力的装饰元素，严格遵守基于网格的布局，并始终保持视觉克制。界面强调清晰而非装饰，等宽字体仅用于与代码相关的内容。