精选 · 开放 · 免费
Render
直观的云基础设施,用于部署和扩展应用程序。
devtoolsinfra
01
设计气质 DNA
基础设施云平台部署开发者生产环境
一个干净、专业的工作空间,用于管理复杂基础设施
02
色彩
#8A05FFAccent
#0D0D0DInk
#4D4D4DInk soft
#FFFFFFBG
#6B6B6BMuted
rgba(227,227,227,1)Line
高对比度的黑白基础,搭配鲜艳的紫色强调色用于交互元素和品牌标识。
03
字体
geometric-sans · humanist-sans · monospace
- display
80px · 400 - h2
40px · 400 - body-lg
20px · 400 - body
16px · 400 - caption
12px · 400
展示字体使用紧凑的字间距和行高以增强冲击力 · 正文文本通过充足的行高保持舒适的阅读体验 · 等宽字体用于代码片段和终端命令 · 有限的字体粗细变化保持设计的整洁和可读性
04
间距
4px
8px
16px
24px
32px
40px
48px
64px
96px
基于4px的统一网格,配以充足的留白以提供呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
卡片和容器使用1px solid #E3E3E3,主要操作按钮使用1px solid #0D0D0D
0px 0px 0px 1px rgba(227,227,227,1) · 0px 0px 0px 1px rgba(13,13,13,1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
不对称双栏首屏,左侧文字,右侧插图。内容分区使用标准的12列网格。
07
动效与交互
150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
颜色和背景变化的平滑过渡 · 交互元素的变换动画 · 内容显现的透明度渐变
颜色过渡使用0.3s缓动,交互元素上的背景色有细微变化 · 通过变换和颜色变化提供即时视觉反馈
08
组件
- button 高对比度的黑白配色,尖锐边角(2px圆角)。主要操作为黑色填充,次要操作为描边。
- card 干净的白色卡片,带有细微的1px边框且无阴影,通常包含UI模型或数据可视化。
- chip 在提供的截图中未突出展示。
- input 干净的搜索输入框,带有细微边框和等宽字体,适用于技术场景。
- hero 分栏布局,左侧为粗体标题,右侧为交互式仪表盘插图,并有清晰的行动号召按钮。
09
文案语气与禁用清单
- 语气 专业、自信、技术精准
- 标题风格 粗体、简洁的陈述,强调速度和生产就绪性
- 按钮文案 直接且以行动为导向,具有明确的价值主张
- 不要在主按钮上使用圆角——截图显示为尖锐的2px圆角
- 不要给卡片添加投影——截图显示为带有细微边框的扁平卡片
- 不要使用多种强调色——截图显示紫色作为唯一的强调色
- 不要为标题使用装饰性字体——截图显示为干净的几何无衬线字体
- 不要使用低对比度文本——截图保持了文字与背景之间的高对比度
- 不要使用杂乱的背景——截图显示为干净的白色背景,装饰极少
- 避免: 过于随意的语言
- 避免: 未经解释的行话
- 避免: 缺乏证据的夸张宣称
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个专业的开发者工具SaaS平台,具有干净、高对比度的黑白基础。设计使用2px圆角、几何无衬线标题字体(PPNeueMontreal)和人文主义无衬线正文字体。关键十六进制颜色包括:墨黑色#0D0D0D、背景白色#FFFFFF、紫色强调色#8A05FF和边框灰色#E3E3E3。关键禁忌:不要在主按钮上使用圆角,不要给卡片添加投影,不要使用多种强调色,不要使用装饰性字体,不要使用低对比度文本,不要使用杂乱背景。布局特点是不对称双栏首屏,配有技术仪表盘插图,强调生产就绪的基础设施。
en · zh-CN · zh-TW · ja · ko