01
设计气质 DNA
开发者数据库postgres分支工具
用于数据库工作流的精密仪器
02
色彩
#FFFFFFInk#0D0D0DBG#888888Mutedrgba(255, 255, 255, 0.07)Line高对比度的暗黑模式，采用单色精确性和最小化的点缀色
03
字体
- display
48px · 500
标题使用几何无衬线字体，字间距紧凑 · 正文和界面文本使用等宽字体以确保技术精确性 · 次要信息使用柔和色调的文本
04
间距
4px8px16px24px32px48px64px96px基于 8px 的基准网格，留有充足的空白以保持清晰度
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255, 255, 255, 0.07)
0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset · 0px 4px 6px -1px rgba(0, 0, 0, 0.2) · 0px 2px 4px -2px rgba(0, 0, 0, 0.2) · 0px 0px 2.56702px 0px rgba(52, 211, 153, 0.192)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
固定宽度的居中布局，网格清晰
07
动效与交互
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
平滑的透明度过渡 · 悬停时的变换效果 · 背景滤镜过渡
微妙的亮度变化和框线阴影 · 略微缩小
08
组件
- button 紫色背景搭配白色文本，带有轻微圆角
- card 深色微妙背景，配有细边框和柔和阴影
- chip 采用轮廓样式，搭配柔和文本用于状态指示
- input 深色背景，配有微妙边框
- hero 大型等宽字体标题，深色背景，点缀有分散的界面元素
09
文案语气与禁用清单
- 语气 技术性且精确，专业
- 标题风格 直接、大胆地陈述其能力
- 按钮文案 清晰的动作动词，搭配等宽字体
- 不要使用衬线字体——截图显示使用等宽字体和几何无衬线字体
- 不要使用明亮的主色调——截图显示仅在按钮上使用柔和的紫色点缀
- 不要使用圆角卡片——截图显示使用带有小圆角的矩形卡片
- 不要使用繁杂的背景——截图显示使用深色纯色背景和微妙图案
- 不要使用大间距——截图显示使用紧凑的间距以保持密度
- 不要使用斜体文本——截图显示全部使用直立的排版
- 避免: 营销流行词
- 避免: 过多的感叹号
- 避免: 过于随意的语言
10
包内真实截图
11
System Prompt
这是一个用于数据库管理的开发者工具 SaaS 网站，采用暗黑模式设计。整个网站使用等宽字体排版以确保技术精确性，标题则使用几何无衬线字体。关键颜色包括背景色 #0D0D0D、文本色 #FFFFFF，以及用于主要按钮的柔和紫色。布局清晰居中，留有充足的空白。关键禁忌：避免使用衬线字体，不要使用明亮的主色调，避免使用圆角卡片。该设计优先考虑清晰度和技术准确性，最大程度减少视觉干扰。