精选 · 开放 · 免费
Ingmarcoenen
一个以巨大定制字体和干净极简主义为基石的大胆单色作品集网站。
PortfolioStudioCleanTypographyPhotographic
01
设计气质 DNA
大胆极简实验性创意数字
采用极端排版比例的高对比度编辑式作品集
02
色彩
#000000Ink
#3a4042Ink soft
#ffffffBG
#f2f2f2BG soft
#919191Muted
rgba(0,0,0,1.0)Line
高对比度单色，辅以偶尔的摄影图像
03
字体
display-sans · neo-grotesque-sans · serif
- display
295px · 400 - body
13px · 400 - heading
36px · 400
04
间距
4px
8px
12px
16px
20px
24px
32px
48px
80px
120px
非对称，留白充足
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 12px
lg · 12px
pill · 100px
活动状态使用 1px solid black，否则无边框
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
非对称网格，顶部巨大的首屏区域与偏移的内容块
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
淡入淡出过渡
按钮和链接的背景色变化 · 微妙的缩放或颜色变化
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
这是一个为数字设计总监打造的高对比度单色作品集网站。其设计基因由使用定制展示字体和新怪诞无衬线界面元素的极端排版比例所定义。主要颜色为纯黑（#000000）搭配白色（#ffffff）或浅灰（#f2f2f2）背景。布局非对称且留白充足，UI 组件使用 12px 和 4px 的圆角。关键禁忌包括：不要使用多色色板、不要使用小号展示字体、不要使用厚重投影。语调专业、直接且个性化，专注于作品本身而非炫目的视觉效果。
en · zh-CN · zh-TW · ja · ko