01
设计气质 DNA
开发者优先现代无头CMSTypeScript
为后端开发打造的高性能跑车
02
色彩
#ffffffInkrgba(255,255,255,0.5)Ink soft#000000BGrgba(255,255,255,0.125)BG soft#808080Muted高对比度单色配色，辅以微妙的纹理叠加
03
字体
- display
56px · 500 - heading
32px · 500 - body
16px · 400 - caption
12px · 500
展示字体使用字间距紧凑的几何无衬线体 · 正文使用同一几何无衬线字体家族的常规字重 · 代码片段使用等宽字体 · 标签和元数据使用大写转换
04
间距
4px8px12px16px20px24px32px40px48px64px96px一致的 4px 网格，配合宽裕的内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 40px
1px solid rgba(255,255,255,0.125)
0 4px 24px rgba(0,0,0,0.5)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽区块，配有宽裕的内边距
07
动效与交互
150msmicro
300mssmall
800msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
交互元素上平滑的 hover 过渡 · 内容区块的交错淡入动画
微妙的透明度和 transform 变化 · 立即响应，提供视觉反馈
08
组件
- button 药丸状主按钮，实色白色背景，黑色文字
- card 简洁卡片，带有微妙边框和背景色调
- chip 小型大写标签，带有字间距
- input 最小化的输入框，带有微妙边框
- hero 全宽主视觉区，采用大号字体和代码片段预览
09
文案语气与禁用清单
- 语气 自信、技术化、面向开发者
- 标题风格 关于功能的粗体、直接陈述
- 按钮文案 清晰的行动导向按钮，带有方向箭头
- 不要使用彩色渐变——截图显示的是单色配色方案
- 不要使用衬线字体——截图显示的是通篇的几何无衬线体
- 不要使用繁杂的背景——截图显示的是简洁的深色表面
- 不要使用过小的触摸目标——截图显示的是宽裕的内边距
- 不要使用装饰性元素——截图显示的是极简、功能性的设计
- 不要使用复杂的动画——截图显示的是微妙、有目的的动效
- 避免: 过于随意的语言
- 避免: 营销术语
- 避免: 过多的标点符号
- 避免: 全大写的正文文本
10
包内真实截图
11
System Prompt
Payload CMS 是一款开发者优先的无头 CMS，定位为 Web 开发的现代后端解决方案。关键视觉元素包括深色主题（#000000 背景）搭配白色（#ffffff）的几何无衬线字体排版。设计强调采用紧凑字间距的大胆、醒目标题，以及极简的装饰元素。关键约束：保持严格的单色配色，不使用彩色强调色；使用一致的几何无衬线字体层次；确保贯穿始终的宽裕间距和内边距。避免使用衬线字体、渐变或过于装饰的元素，以免破坏简洁的技术美感。界面优先考虑开发者体验，提供代码片段、终端风格命令，以及为技术内容设计的清晰视觉层次。