精选 · 开放 · 免费
Taiki Murayama
一个大胆的编辑式设计作品集，通过巨型字体、高对比度图像与极简界面元素来展示作品。
PortfolioStudioCleanTypographyEditorial
01
设计气质 DNA
设计作品集极简编辑风格高端
如同一个精心策划的设计师作品廊，以大胆的字体排印与克制的优雅呈现。
02
色彩
#42ff00Accent
#0b0b0fInk
#bbbbbbInk soft
#f7f7f7BG
rgba(11,11,15,1)Line
高对比度单色配色，搭配单一鲜艳强调色。采用浅色中性背景，以突出作品图像。
03
字体
geometric-sans · humanist-sans · monospace
- display
110px · 400 - heading
54px · 400 - subhead
34px · 400 - body
28px · 400 - caption
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
宽松的编辑式节奏，通过充足的padding与间距营造开阔、透气的版式。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 15px
lg · 300px
pill · 999px
内容板块之间使用近黑色的细实线作为主要分隔线。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
非对称编辑式网格，通过叠加图像与大段文字打破传统栏式结构。
07
动效与交互
140msmicro
200mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的平滑缩放与透明度过渡 · 图像集群的类parallax移动效果
元素在hover时轻微放大。 · 所有交互元素使用标准指针光标。
08
组件
- button 极简的文本导航，当前项通过鲜艳的绿色背景块进行高亮。
- card 图像以松散、叠加的集群方式呈现，无严格容器，漂浮于背景之上。
- chip 不适用。
- input 不适用。
- hero 动态拼贴式构图，包含大面积叠加摄影与醒目、超大号的字体排印。
09
文案语气与禁用清单
- 语气 自信、专业且具有艺术上的大胆气魄。
- 标题风格 超大号、字距紧凑的几何无衬线体名称与标题。
- 按钮文案 极简，依赖文本与单一星号图标，而非传统按钮形状。
- 不使用投影——截图显示的是边缘清晰的平面图像。
- 不使用卡片容器装载图像——截图显示图像自由漂浮并叠加。
- 不使用多种字重进行强调——截图显示几乎只使用400字重，依赖字号建立层级。
- 不将标题居中对齐——截图显示左对齐或非对称放置的文本。
- 不使用多种强调色——截图仅显示一种鲜艳的绿色高亮。
- 不使用密集的段落文本——截图显示简短、有力的陈述与列表。
- 避免: 避免装饰性花饰或手写字体
- 避免: 避免使用多种强调色
- 避免: 避免密集的文本块或杂乱的布局
- 避免: 避免使用卡片或模态框等标准UI组件模式
- 避免: 避免繁复的背景或渐变
- 避免: 避免使用投影来营造深度感
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一位创意总监的高端设计作品集，定位大胆且具有编辑风格的自信。其设计DNA基于严格的高对比度单色方案：极浅灰色背景（#f7f7f7）、近黑色墨迹（#0b0b0f），以及单一、克制使用的鲜艳绿色强调色（#42ff00）用于激活状态。字体排印以几何无衬线展示字体（Helvetica Neue）为主，使用巨大尺度（最大110px）与紧凑字距，搭配人文主义无衬线字体用于正文。版式为非对称、打破网格的构图，留白充足。关键禁忌：永远不使用投影，永远不将图像置于卡片容器中，永远不使用多种强调色。该网站采用宽松的编辑式节奏，并在交互中使用平滑过渡（cubic-bezier(0.4, 0, 0.2, 1)）。
en · zh-CN · zh-TW · ja · ko