01
设计气质 DNA
隐私开发者技术清晰克制
一份技术白皮书或工程师笔记。
02
色彩
#c9563dAccent#33302bInk#f5f2ebBG#9a968eMutedrgba(0, 0, 0, 0.1)Line温暖的中性色调，搭配单一赤陶色用于强调。
03
字体
- display
52px · 400 - body
18px · 400
标题使用轻字重的过渡衬线字体。 · 正文设置在高可读性的过渡衬线字体中。 · 行内代码和技术术语使用等宽字体。
04
间距
4px8px16px24px32px48px64px96px宽裕的垂直间距强调可读性与内容层次。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
极少使用细且低对比度的线条进行微妙分隔。
无
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
单栏、居中布局，配有充足留白，是阅读导向编辑设计的典型特征。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素的细微过渡。
链接和交互元素上的细微颜色变化。 · 标准的导航与链接行为。
08
组件
- button 极简，可能基于文本或使用细微边框，无厚重背景。
- card 用于在结构化多栏网格中呈现关键指标，具备清晰的排版层次。
- chip 不适用。
- input 不适用。
- hero 由一个突出的大标题，后接元数据和正文组成。
09
文案语气与禁用清单
- 语气 技术性、权威、直接。
- 标题风格 描述性且基于事实，常包含技术术语或数字。
- 按钮文案 隐性，专注于阅读与理解，而非明确的行动号召。
- 不要使用明亮、饱和的背景——截图显示的是温暖、柔和的米色背景。
- 不要使用厚重的投影或发光效果——截图显示的是无可见阴影的扁平表面。
- 不要使用宽幅多栏布局处理文本——截图显示的是狭窄、居中的阅读栏。
- 不要对正文使用粗壮、厚重的字重——截图使用的是轻到常规字重。
- 不要使用暗色调色板——截图显示的是浅色、类似纸张的背景。
- 不要对主标题使用几何无衬线字体——截图使用的是过渡衬线字体。
- 避免: 营销术语
- 避免: 过度热情
- 避免: 非正式语言
11
System Prompt
定位：面向隐私中心DNS工具的开发者技术博客，强调清晰度、可信度与克制。关键十六进制色：温暖的纸张质感背景(#f5f2eb)、深棕色墨水(#33302b)、赤陶色强调(#c9563d)。字体类别：展示与正文均使用过渡衬线字体，行内技术元素使用等宽字体。设计优先考虑可读性与信任。关键禁忌：不要使用暗色模式或深色背景；不要应用厚重投影或复杂渐变；不要对正文使用宽幅多栏布局；不要依赖粗重字重来提升可读性；不要使用明亮饱和色进行强调；不要对主标题使用几何无衬线字体。