精选 · 开放 · 免费
PlanetScale
面向开发者的高性能等宽字体优先数据库基础设施平台。
devtoolsdatabase
01
设计气质 DNA
速度可靠性基础设施性能开发者优先
一款如同可靠命令行数据库工具般的开发者工具。
02
色彩
#F35815Accent
#414141Ink
#FAFAFABG
#737373Muted
rgba(65, 65, 65, 1)Line
高对比度实用调色板，搭配橙色强调色与等宽字体排印。
03
字体
geometric-sans · monospace
所有正文与导航均使用等宽字体。 · 文本内使用加粗字重进行强调。 · 链接采用蓝色。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用 24px 统一间距进行模块化布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
结构化元素与网格使用 1px solid #414141 边框。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
固定宽度容器的单栏内容布局。
07
动效与交互
150msmicro
150mssmall
150msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
标准状态过渡（hover, focus, active）。
交互元素的颜色过渡。 · 标准按钮与链接行为。
08
组件
- button 采用纯色背景的胶囊形按钮。
- card 用于 Logo 展示的网格化卡片。
- chip 无
- input 无
- hero 包含辅助段落与 Logo 网格的醒目标题。
09
文案语气与禁用清单
- 语气 自信、技术性、直接。
- 标题风格 粗体声明式标题。
- 按钮文案 简洁行动导向型（如「联系我们」）。
- 不使用衬线字体——截图显示为等宽与无衬线字体。
- 不使用柔和圆角——截图显示为胶囊按钮与锐利网格线。
- 不使用细微阴影——截图显示为基于边框的平面化表面。
- 不使用低对比度柔和调色板——截图显示为高对比度黑白搭配醒目强调色。
- 不使用手写或装饰性字体——截图显示为严格功能性的字体排印。
- 不使用复杂多色渐变——截图显示为纯色背景。
- 避免: 缺乏语境的冗长术语解释。
- 避免: 过于随意或俏皮的语言。
- 避免: 视觉杂乱或不必要的装饰元素。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是 PlanetScale 的开发者工具 SaaS 网站，其作为数据库基础设施平台，设计以等宽字体（ui-monospace）为主导，呈现技术命令行美学。关键十六进制色值包括：主墨色 #414141、背景色 #FAFAFA、链接色 #0B6EC5、行动号召强调色 #F35815。布局简洁且基于网格，通过字重与字号建立清晰层级。关键禁忌：避免使用衬线字体、避免柔和圆角、避免低对比度调色板。该网站优先考虑技术受众的清晰度与可读性。
en · zh-CN · zh-TW · ja · ko