精选 · 开放 · 免费
Dougalves Work
为视觉设计师打造的高对比度、字体驱动的作品集网站。
PortfolioEditorialTypographyCleanStudio
01
设计气质 DNA
极简编辑感字体主导专业单色系
一本策展画廊专著，搭配超大展示字体。
02
色彩
#FFFBF9Ink
#FFFBF9A6Ink soft
#1D1610BG
rgba(40,40,40,0.1)Line
遵循高对比度单色系原则，带有暖色基调。
03
字体
geometric-sans · neo-grotesque-sans
- display
197px · 400 - heading
16px · 400 - body
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
紧凑的垂直节奏与充裕的水平间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
无可见边框。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
桌面端采用严谨四栏网格，移动端折叠为双栏。
07
动效与交互
200msmicro
400mssmall
500msmedium
cubic-bezier(0.4, 0.24, 0.4, 1)easing
滚动时平滑揭示。 · 变形属性采用cubic-bezier过渡。
微妙的透明度或变形变化。 · 即时状态切换。
08
组件
- button 纯文本链接，无视觉容器。
- card 无可见卡片组件。
- chip 无可见标签组件。
- input 无可见输入组件。
- hero 全视口字体宣言，搭配大型几何文字。
09
文案语气与禁用清单
- 语气 直接、专业且极简。
- 标题风格 超大字号、窄字距、全大写几何无衬线体。
- 按钮文案 纯文本，无视觉强调。
- 不使用投影效果——截图显示无深度提示的扁平表面
- 不使用圆角按钮——截图显示无边框或圆角的纯文本链接
- 不使用多种字体家族——截图显示严格的双字体系统（几何展示字体与新怪诞体正文字体）
- 不使用明亮的强调色——截图显示深棕与米白的严格单色系配色
- 不使用过大的行高——截图显示紧凑的行距
- 不使用装饰性边框——截图显示仅用于严格分隔的简约水平线
- 避免: 装饰性元素
- 避免: 过度内边距
- 避免: 明亮的强调色
- 避免: 投影效果
- 避免: 复杂网格
- 避免: 斜体文本
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个视觉设计师的极简作品集网站，采用深暖棕色背景（#1D1610）与米白色（#FFFBF9）文字。字体系统以主视觉区域的超大几何无衬线展示字体为核心，搭配清爽的新怪诞体作为正文字体。布局采用严谨的网格结构，水平间距充裕，垂直节奏紧凑。关键禁忌：避免使用任何明亮的强调色或投影效果，设计完全依赖高对比度单色系与扁平表面。不使用圆角按钮或装饰性边框；交互通过纯文本链接与微妙的透明度变化实现。最后，避免过度内边距或分散字体焦点的复杂视觉元素。
en · zh-CN · zh-TW · ja · ko