精选 · 开放 · 免费
Georgehatton
一位创意总监的高度克制、以排版为核心的作品集。
PortfolioStudioRestraintTypographyClean
01
设计气质 DNA
极简编辑式高端瑞士风格建筑感
一面纯净的粗野主义画廊墙面,配有细致的黑色字体。
02
色彩
#000000Ink
#ffffffBG
rgba(0, 0, 0, 1.0)Line
严格、高对比度的单色方案。
03
字体
grotesque-sans
- display
16px · 700 - body
12px · 700 - small
10px · 700
排版完全采用等宽字体或紧密字距,主要使用粗体(700)。 · 行高与较小的字号严格成比例(1.2)。
04
间距
4px
8px
10px
16px
24px
32px
48px
64px
严格、最小的填充与紧密的栏间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px solid rgb(0, 0, 0)
06
布局
1920container
4columns
24pxgutter
768 / 1024breakpoints
多栏文本网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
对所有元素应用全局过渡效果。
光标在交互式文本链接上变为指针。 · 文本链接即时响应。
08
组件
- button 带有向上斜箭头的文本链接。
- card 纯文本布局,无可见卡片或容器。
- hero 左对齐的、密集的加粗介绍性文本块。
09
文案语气与禁用清单
- 语气 专业、直接且客观。
- 标题风格 第三人称传记式介绍。
- 按钮文案 用于联系的低调文本链接。
- 不要使用多种字体族——截图显示仅使用单一的 grotesque-sans 字体族。
- 不要使用不同字重进行强调——截图显示统一使用粗体(700)。
- 不要使用彩色强调或高亮——截图显示严格的白底黑字。
- 不要使用圆角或卡片容器——截图显示原始的、无边框的文本布局。
- 不要使用投影或深度效果——截图显示完全扁平的排版。
- 不要使用装饰性图标——截图仅使用一个箭头字符作为链接。
- 避免: 营销术语
- 避免: 无内容的过度留白
- 避免: 装饰性元素
- 避免: 多种字体族
- 避免: 主观形容词
- 避免: 彩色强调
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为创意总监设计的、高度克制的粗野主义作品集网站。设计完全依赖于严格的单色方案(纯黑 #000000 墨迹与纯白 #ffffff 背景),无任何强调色。排版是主要的结构元素,采用单一的 grotesque-sans 字体族(Suisse Intl),几乎完全使用粗体字重(700),字号从 10px、12px 到 16px 不等。布局是密集的、多栏的文本网格,填充最小。关键的禁忌包括:永远不要使用超过一种字重,永远不要引入色彩或装饰性图形,永远不要使用圆角或阴影。整体美学具有建筑感和纯粹的信息性,聚焦于绝对的可读性与结构上的克制。
en · zh-CN · zh-TW · ja · ko