精选 · 开放 · 免费
Vercel
一个高性能的开发者平台，拥有鲜明的单色美学，并点缀着充满活力的渐变效果。
Developer ToolsGeometricMonochromeBold
01
设计气质 DNA
开发者云性能基础设施AI
为现代网络基础设施打造的精密仪器
02
色彩
#171717Ink
#4d4d4dInk soft
#ffffffBG
#fafafaBG soft
#666666Muted
rgba(235,235,235,1)Line
一个鲜明的单色基础，其中排版和高对比度的UI元素承担了视觉重量。
03
字体
geometric-sans · humanist-sans · monospace
- display
48px · 500 - headline
32px · 500 - body
16px · 400 - caption
14px · 400 - mono
14px · 400
展示尺寸使用紧凑的负字距调整 · 正文保持充裕的垂直节奏 · 所有代码表现形式使用等宽字体
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
以4px为基础网格，间距和尺寸使用一致的倍数
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 6px
lg · 12px
pill · 9999px
1px solid #ebebeb
rgba(0,0,0,0.08) 0px 0px 0px 1px · rgba(0,0,0,0.04) 0px 2px 2px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的单栏布局，带有宽边距，在首屏区域使用可见的12列网格
07
动效与交互
100msmicro
150mssmall
400msmedium
cubic-bezier(0.33, 0.12, 0.15, 1)easing
微妙的透明度过渡 · 悬停时的颜色变化 · 点击时的变换
微妙的颜色变化或边框过渡 · 提供即时视觉反馈，伴有轻微的变换或透明度变化
08
组件
- button 高对比度的胶囊形按钮；主按钮为纯黑色配白色文字，次按钮为黑色文字描边样式
- card 带轻微阴影和充裕内边距的细微边框卡片
- chip 带有最小内边距和细边框的小型圆角标签
- input 边框细微、内边距清晰的文本输入框
- hero 醒目的中央大标题，配有突出的背景图形、清晰的行动号召和辅助说明文字
09
文案语气与禁用清单
- 语气 专业、直接且技术精确
- 标题风格 粗体、简洁、面向行动的陈述
- 按钮文案 清晰的祈使句动词，例如“开始部署”和“获取演示”
- 不要使用鲜艳或霓虹色作为主要UI元素——截图显示的是严格的单色界面
- 不要在所有元素上使用圆角——截图显示的是像logo和卡片那样锐利的几何形状
- 不要使用宽大的装饰性字体——截图显示所有标题都使用了干净、功能性的无衬线字体
- 不要创建包含多列的过于复杂的布局——截图显示的是宽敞的单栏流程
- 不要使用投影来营造层次感——截图依靠细边框和高对比度来区分区域
- 不要在正文文本中使用全大写——截图将大写仅用于小标签或标签
- 避免: 过于活泼的语言
- 避免: 模糊的术语
- 避免: 过多的感叹号
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个高性能开发者平台的设计系统。使用以黑色（#171717）和白色（#ffffff）为核心的功能性灰色调单色方案。展示标题使用干净的几何无衬线字体，正文使用人文主义无衬线字体。布局宽敞居中，使用可见网格。组件采用高对比度设计，常为胶囊形，带有细微边框。关键约束：保持严格的单色基础，避免柔和或圆润的美学，确保排版精确且易读。确保所有交互元素提供清晰、快速的反馈。
en · zh-CN · zh-TW · ja · ko