精选 · 开放 · 免费
Cockroach Labs
一个云无关、兼容PostgreSQL的数据库平台，适用于现代关键任务应用。
devdb
01
设计气质 DNA
数据库云原生分布式企业级可靠性
一家现代化的基础设施公司，将其数据库定位为关键业务应用的基础记录系统。
02
色彩
#6933FFAccent
#000000Ink
#333333Ink soft
#FFFFFFBG
#FCFCFDBG soft
rgba(234, 236, 240, 1)Line
采用高对比度、洁净的界面，以活力紫色为点睛之色，在单色基底上突出主要操作。
03
字体
humanist-sans
- display
56px · 600 - heading
40px · 500 - body
18px · 400
使用人文无衬线字体（Poppins/Open Sans），营造友好而专业的技术感。 · 对大号展示文字保持紧凑的字距，以形成连贯的视觉区块。 · 确保正文具有充足的行高（1.5-1.7），以保证技术内容的可读性。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于标准的4px网格间距，统一使用24px的栏间距以实现布局对齐。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid #EAECF0
0px 2px 4px 0px rgba(0, 0, 0, 0.075) · 0px 0px 5px 0px rgb(128, 128, 128)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
通栏的主视觉区块与居中的内容容器交替出现。
07
动效与交互
200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时平滑的颜色和背景过渡（0.2秒）。 · 交互元素或箭头向右移动。
链接和按钮采用微妙的颜色偏移或背景填充效果。 · 即时响应，使用标准的指针光标。
08
组件
- button 主要操作采用高对比度的纯紫色（#6933FF），药丸形状配以白色文字。次要按钮采用紫色边框描边，配以深色文字。
- card 简洁、极简的卡片，带有细微边框和轻微阴影以营造层次感。
- input 标准表单输入框，浅灰色边框，8px圆角。
- hero 大号、左对齐的文字，置于几何感、浅蓝/青色渐变背景之上。
09
文案语气与禁用清单
- 语气 专业、自信且权威，聚焦于可靠性和规模。
- 标题风格 大胆、陈述性的标题，将产品定位为关键基础设施的选择。
- 按钮文案 以行动为导向，直接明了，强调免费入门点或团队咨询。
- 不要使用宽大、装饰性的衬线字体——截图显示的是简洁、现代的人文无衬线方法。
- 不要使用柔和、低饱和度的调色盘——截图采用的是充满活力、高纯度的紫色点睛色。
- 不要使用复杂、厚重的投影阴影——截图使用非常细微、柔和的阴影来营造层次。
- 不要将所有主视觉文字居中对齐——截图显示主要标题和辅助文案均为左对齐。
- 不要使用装饰性或手写字体风格——截图保持严格的专业、洁净美学。
- 不要为首要号召性操作使用深色背景——截图的'开始免费'按钮使用亮紫色纯色填充。
- 避免: 过于俏皮的语言
- 避免: 缺乏技术支撑的模糊营销热词
- 避免: 在主视觉区域使用密集、未格式化的技术术语
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（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
Cockroach Labs 是一个面向开发者的SaaS平台，专注于云原生数据库。其设计简洁而权威，采用人文无衬线字体系统（Poppins/Open Sans）和单色调色盘（黑/白/灰），并以充满活力的紫色（#6933FF）作为点睛之色。布局围绕大号粗体字和充裕的留白构建，以传达可靠性和规模感。关键设计准则：避免装饰性衬线，避免低饱和度调色盘，避免复杂厚重的阴影，并在所有主要用户操作中保持独特的紫色点睛色。它以高端、可信的感觉吸引技术决策者。
en · zh-CN · zh-TW · ja · ko