01
设计气质 DNA
研究安全公共利益前沿公司
现代学术机构与清洁科技公司的融合
02
色彩
#141413Ink#FAF9F5BG#F0EEE6BG soft#E3DAC8BG quiet#B0AEA5Mutedrgba(20, 20, 19, 0.1)Line温暖的低对比度中性色，打造平静、易读的画布，兼具人性化与精致感。
03
字体
- display
61px · 700 - heading
24px · 600 - body
20px · 400 - label
12px · 400
展示和UI元素使用无衬线字体。 · 长篇正文使用过渡衬线字体。 · 标题应紧凑且加粗。 · 元数据标签使用大写字母。
04
间距
4px8px12px16px22px31px46px64px章节间保持充裕的垂直间距，标题行距紧凑。
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 16px
lg · 24px
pill · 999px
1px solid rgba(20, 20, 19, 0.1)
rgba(0, 0, 0, 0.01) 0px 2px 2px 0px · rgba(0, 0, 0, 0.02) 0px 4px 4px 0px · rgba(0, 0, 0, 0.04) 0px 16px 24px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
不对称双栏主视觉，后接卡片网格与列表式内容区。
07
动效与交互
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停时颜色过渡 · 交互状态时透明度变化
链接和按钮的微妙颜色过渡 · 即时反馈
08
组件
- button 深色实心按钮配白色文字与箭头图标，或深色文字描边按钮。
- card 暖米色背景卡片，内部分隔线纤细，操作按钮底部对齐。
- chip N/A
- input N/A
- hero 大型加粗无衬线标题搭配衬线正文，置于右侧。
09
文案语气与禁用清单
- 语气 权威且易懂，聚焦安全与人类福祉。
- 标题风格 加粗、清晰，略带学术感。
- 按钮文案 直接且以行动为导向，常配有箭头。
- 避免使用高饱和度强调色——截图显示为中性、暖色调调色板。
- 避免使用俏皮或圆润的字体——截图显示为锐利的无衬线和过渡衬线字体。
- 避免使用厚重的投影——截图显示为非常细微、低透明度的阴影。
- 避免使用密集、拥挤的布局——截图显示有充裕的垂直和水平间距。
- 避免正文使用全大写——截图显示全大写仅用于小型元数据标签。
- 避免使用亮白色背景——截图显示为温暖的米白色背景。
- 避免: 充斥术语或过于技术化的语言。
- 避免: 激进或夸大其词的营销文案。
- 避免: 缺乏安全焦点的模糊承诺。
10
包内真实截图
11
System Prompt
这是Anthropic（一家AI安全研究实验室）的网站。其设计DNA以平静、学术且高度精致的美学为特征。主背景为温暖的米白色（#FAF9F5），文字为深炭灰色（#141413），点缀以柔和的灰色（#B0AEA5）。字体搭配上，标题使用加粗的无衬线字体，正文使用易读的过渡衬线字体，营造出学术而现代的感觉。布局干净宽敞，利用多栏网格和主视觉区的不对称布局。关键禁忌：不要使用高色度或霓虹强调色，因为调色板严格限定为中性暖色；不要使用圆润或俏皮的字体，因为设计依赖于锐利、专业的字体类别；不要在布局中堆砌密集内容，因为网站优先考虑充裕的留白和平静的阅读体验。