精选 · 开放 · 免费
Nordebrink
一个精致、极简的排版作品集，专注于纯粹的内容和优雅的层级结构。
PortfolioTypographyCleanStudioEditorial
01
设计气质 DNA
克制排版精致专业极简
一本精心编纂的专著或高端设计作品集。
02
色彩
#000000Ink
#FFFFFFBG
#949494Muted
rgba(0,0,0,1)Line
鲜明、高对比度的单色配色方案，完全依赖排版和间距来建立层级。
03
字体
humanist-sans
- body
20px · 400 - small
16px · 400
紧凑的负字距调整，形成精致、紧密的排版质感。 · 次要文本通过微妙的透明度和颜色变化来区分，而非字号变化。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充裕的垂直间距，列表项采用严格的 16px 内边距，栏间水平间距为 30px。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用 1px 实线边框（颜色为 rgb(0,0,0)）进行列表分隔，避免厚重的视觉区块。
06
布局
3columns
30pxgutter
768breakpoints
桌面端采用双栏不对称布局（左侧窄栏用于标签，右侧宽栏用于内容），在移动端折叠为单栏。
07
动效与交互
220msmicro
400mssmall
600msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing
悬停状态下颜色和透明度的平滑过渡。
交互式文本元素的颜色过渡（可能变为柔和灰色）。 · 立即导航。
08
组件
- button 仅文本链接配以箭头指示，依赖悬停状态进行交互。
- card 无；内容以扁平、结构化的排版列表呈现。
- chip 无。
- input 无。
- hero 一个密集的排版介绍区块，配有向下的滚动箭头。
09
文案语气与禁用清单
- 语气 专业、自信且高度克制。
- 标题风格 极简风格，依赖加粗的排版层级而非视觉装饰。
- 按钮文案 微妙的文本提示或简单的箭头。
- 不要使用装饰性图标——截图显示为极简、功能性的箭头
- 不要使用多种字体族——截图显示为单一的 humanist-sans 类别字体
- 不要使用厚重的背景填充或卡片——截图显示为纯白背景配以扁平文本
- 不要使用强调色——截图显示为严格的单色配色方案
- 不要使用宽字间距——截图显示为紧凑的负字距调整
- 不要使用大幅度的字重变化——截图显示为所有文本均使用统一的 400 字重
- 避免: 过度使用加粗字重或全大写进行强调。
- 避免: 装饰性元素、图标或插图。
- 避免: 复杂的多色配色方案或渐变。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为专业设计师打造的精致、极简的设计作品集，完全依赖排版和充足的空白来建立层级。配色方案为严格的单色，采用纯白背景配以深黑色文字 (#000000) 和特定的柔和灰色 (#949494) 作为次要信息色。排版使用单一的 humanist-sans 类别字体，其特点是紧凑的负字距调整 (-0.414px) 和统一的 400 字重，营造出密集而优雅的阅读质感。关键限制包括：避免所有装饰性元素、插图或背景填充；避免多种字体族或字重的大幅变化；避免使用强调主色或复杂的渐变。桌面端布局为不对称网格，在移动端优雅地折叠为单栏，确保呈现干净、编辑的风格。
en · zh-CN · zh-TW · ja · ko