精选 · 开放 · 免费
Opx Studio
一个极简主义的创意机构作品集，具有大胆、黑白分明的排版标识。
StudioAgencyEditorialTypographyClean
01
设计气质 DNA
品牌设计工作室创意机构作品集
一家高端创意机构，通过大胆的排版和极简的呈现方式来展示设计专长。
02
色彩
#ffffffInk
#000000BG
#9b9b9bMuted
rgba(255,255,255,0.1)Line
高对比度、单色调色板，使用纯黑与纯白营造戏剧性视觉冲击，并以中性灰作为微妙的辅助元素。
03
字体
grotesque-sans · humanist-sans · monospace
- display
80px · 400 - heading
36px · 400 - body
18px · 400
展示型排版采用紧凑的字间距和较大的字号以产生视觉冲击力。 · 正文文本保持宽裕的行高以确保可读性。 · 字体粗细统一保持为400，以呈现干净、统一的外观。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
宽裕的留白，配合较大的内边距值（水平50px，垂直99px），在元素周围创造呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
极简的1px白色或深灰色边框，仅少量用于微妙的视觉分隔。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区块，内容居中；过渡到以图像为主的项目网格，并保持宽裕的间距。
07
动效与交互
200msmicro
300mssmall
600msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
使用平滑的透明度与transform过渡来实现元素显现。 · 简单状态变化使用线性过渡。 · 更复杂的入场动画使用cubic-bezier缓动函数。
交互元素上的微妙透明度或颜色过渡。 · 通过状态变化提供即时的视觉反馈。
08
组件
- button 极简的基于文本的按钮，内边距为（7px 30px），可能配有悬停过渡效果。
- card 项目卡片，以大幅图像为特色，边框极简，依靠排版进行标注。
- chip 在提供的截图中未见可见的标签组件。
- input 在提供的截图中未见可见的输入字段。
- hero 大幅、全视口的排版主视觉区域，粗体标题居中于黑色背景上。
09
文案语气与禁用清单
- 语气 自信、专业、直接。
- 标题风格 粗体、陈述性的标题，使用强有力的动词（'发明'、'重振'、'变革'）。
- 按钮文案 极简而含蓄，可能是基于文本的，而非花哨的按钮。
- 不要使用多种强调色——截图显示严格的单色黑白调色板。
- 不要使用衬线字体——截图显示干净的无衬线展示字体和正文字体。
- 不要创建杂乱的布局——截图显示宽裕的留白和极简的元素。
- 不要使用装饰性边框或阴影——截图显示极简、干净的边缘。
- 不要使用小的展示型排版——截图显示巨大、具有冲击力的标题字号（80px）。
- 不要使用不一致的字体粗细——截图显示全文统一使用400粗细。
- 避免: 避免使用过于技术性的术语。
- 避免: 避免使用多个元素相互竞争的杂乱布局。
- 避免: 避免使用明亮、饱和的色彩点缀。
- 避免: 避免使用复杂的装饰元素或图案。
- 避免: 避免使用小而拥挤的排版。
- 避免: 避免使用不一致的间距或对齐方式。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（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）背景搭配白色（#ffffff）文本，并以中性灰（#9b9b9b）作为辅助元素。排版方面，展示型字体使用 grotesque-sans，正文字体使用 humanist-sans，粗细均为400。关键设计原则：保持高对比度、使用宽裕的间距、保持排版干净且具有冲击力。避免使用彩色点缀、杂乱布局、衬线字体、装饰元素、小号排版以及不一致的粗细。该设计依靠排版和摄影的力度，而非复杂的UI模式。
en · zh-CN · zh-TW · ja · ko