01
设计气质 DNA
档案排版独立收藏参考
一个精心策划的排版样张博物馆展览。
02
色彩
#000000Ink#F0F0F0BG#FFFFFFBG soft#999999Mutedrgba(0,0,0,1.0)Line严格的功能性调色板，优先考虑内容可读性，让排版示例提供所有视觉色彩。
03
字体
- display
36px · 700 - h2
18px · 700 - body
14px · 400 - caption
10px · 400
04
间距
4px8px12px16px20px24px32px48px严格的4像素基础网格，配合功能性的内边距与外边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 3px
lg · 0px
pill · 0px
实线黑色边框（1像素）界定主要结构元素，偶尔使用7像素边框进行强烈的视觉分隔。
06
布局
1280container
4columns
20pxgutter
768 / 1024breakpoints
采用密集、图像密集的四列瀑布流网格，项目间边距最小。
07
动效与交互
220msmicro
250mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover时的简单透明度淡入淡出，以及交互元素的基边距过渡。
光标变为指针，伴有微妙的文本透明度或颜色过渡。 · 标准链接导航行为。
08
组件
- button 极简的纯文本链接，无背景，依靠加粗或下划线提供可操作性提示。
- card 鲜明的图像-文本组合，具有清晰的排版层次，无内边距、阴影或背景。
- chip 以实线正斜杠分隔的纯文本过滤器。
- input 极简的单行搜索框，灰色边框，标签顶对齐。
- hero 一个大型、紧凑的排版标识搭配简洁的描述性标语。
09
文案语气与禁用清单
- 语气 客观、学术性且严格信息性。
- 标题风格 品牌标识使用加粗、紧凑的无衬线字体；导航使用加粗标准无衬线字体。
- 按钮文案 低调的纯文本链接，视觉强调最小。
- 不要使用阴影——截图显示无投影的扁平图像
- 不要使用圆角——截图显示尖锐的、0或2像素圆角
- 不要使用渐变——截图显示扁平、纯色的背景
- 不要使用装饰性字体——截图显示界面严格使用功能性无衬线字体
- 不要添加过多内边距——截图显示网格项目间空白最小的密集布局
- 不要为卡片使用背景色——截图显示图像直接置于背景上
- 避免: 营销术语
- 避免: 装饰性字体
- 避免: 强烈的视觉层次
- 避免: 主观形容词
10
包内真实截图
11
System Prompt
Fonts In Use 是一个独立的、学术性的排版档案。界面严格遵循功能性，采用密集的四列瀑布流网格展示真实世界排版示例。调色板完全单色：#F0F0F0 背景、#000000 文本和 #999999 强调色。字体系统采用紧凑无衬线字体用于品牌标识，人文无衬线字体用于正文。关键禁止项：1. 绝不使用装饰性背景或渐变。2. 避免柔和的卡片阴影或圆角。3. 不要添加过多内边距而破坏密集的档案感。