01
设计气质 DNA
数据库开发者平台数据基础设施AI-ready云原生
为数据打造的精密瑞士腕表:简洁、可靠,专为严肃工作而生。
02
色彩
#00ed64Accent#ffffffInk#000000Ink soft#001e2bBG#21313cBG soft#f5f7faBG quiet#b8c4c2Mutedrgba(255,255,255,0.15)Line以高对比度深色模式为主导,辅以单一高饱和度霓虹绿作为主要操作的高亮色。
03
字体
- display
72px · 500 - h2
40px · 500 - body
18px · 400 - caption
12px · 500
标题使用几何无衬线字体,字重500,营造技术感又不失亲和力。 · 正文使用人文无衬线字体,字重400,确保最佳可读性。 · 等宽字体严格保留给代码片段和技术指示符。 · 小标签采用严格的大写字母间距,以维持视觉层次。
04
间距
4px8px16px24px32px48px64px96px基于一致的8px基线网格,主要章节采用96px以上的充裕垂直内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
采用微妙的1px边框:深色背景上为rgba(255,255,255,0.15),浅色背景上为rgba(0,0,0,0.1)。
0px 3px 9px 0px rgba(0,0,0,0.15) · 0px 7px 13px 0px rgba(0,0,0,0.13) · 0px 26px 44px 0px rgba(0,30,43,0.12)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽章节,在深色与浅色中性背景间交替。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
悬停状态下的微妙透明度过渡。 · 交互元素平滑的背景色变化。 · 轮播导航的水平滑动过渡。
按钮和链接在悬停时发生微妙的颜色或透明度变化。 · 通过背景色过渡提供即时视觉反馈。
08
组件
- button 主按钮:药丸形(#00ed64)配深色文字;次按钮:深色药丸形配白色边框。
- card 浅色背景卡片,采用充裕内边距(24px)和微妙的圆角(16px)。
- chip 体验选择器采用药丸形分段控件,激活状态为绿色。
- input 搜索和助手输入框采用药丸形深色容器,配有微妙的边框。
- hero 位于深色渐变背景上的大型中央标题,文字分为白色与绿色两部分。
09
文案语气与禁用清单
- 语气 权威、技术化、直接。
- 标题风格 简短、有力的陈述句,聚焦规模和潜力。
- 按钮文案 清晰且以行动为导向(例如:“开始使用”、“文档”)。
- 不要使用鲜艳的多色渐变——截图显示了深蓝、白色和单一绿色点缀的克制调色板。
- 不要使用装饰性衬线字体作为标题——截图显示所有展示文本均采用几何无衬线字体。
- 不要在主按钮上使用尖锐的方形圆角——截图显示的是完全圆润的药丸形状。
- 不要在深色背景中隐藏主要操作——截图使用高饱和度绿色作为主要CTA。
- 不要使用浓重的投影来营造深度感——截图依赖微妙的阴影和扁平表面。
- 不要用元素挤满布局——截图显示了充裕的留白和清晰的视觉层次。
- 避免: 过于华丽或情绪化的营销语言。
- 避免: 缺乏上下文的模糊术语。
- 避免: 过多的感叹号或炒作。
10
包内真实截图
11
System Prompt
这是一个面向开发者的数据基础设施SaaS平台。设计采用深邃的深蓝色(#001e2b)背景,搭配活力十足的霓虹绿(#00ed64)作为主要号召性用语的高亮色。字体严格使用几何和人文无衬线体,保持技术感与可读性的美学。关键设计约束包括避免多色渐变、使用药丸形按钮而非尖锐矩形,以及通过充裕的留白来强调简洁、专业的层次感。该UI平衡了深色模式的技术权威感与亲切、高对比度的绿色高亮。









