精选 · 开放 · 免费
Oker
以单色色板、精致字体与大量留白为特征的极简设计工作室作品集。
StudioEditorialPortfolioCleanRefined
01
设计气质 DNA
设计工作室极简创意作品集编辑设计
一座静谧精致的创意作品画廊，聚焦字体编排与大幅影像。
02
色彩
#FFFFFFInk
#A0A0A0Ink soft
#000000BG
#101010BG soft
#F5F5F5BG quiet
#808080Muted
rgba(160, 160, 160, 1.0)Line
基于严格单色体系，搭配黑白高对比模式以强化视觉焦点。
03
字体
transitional-serif
- display
80px · 400 - title
32px · 400 - body
16px · 400 - caption
16px · 300
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
统一采用 8px 与 16px 增量进行内边距与对齐。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用 1px solid rgb(160, 160, 160) 作为细腻的水平分隔线。
06
布局
1280container
12columns
16pxgutter
768 / 1024breakpoints
以大量黑色或白色内边距分隔的全出血大幅影像。
07
动效与交互
200msmicro
300mssmall
600msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing
悬停时平滑淡入与颜色过渡 · 图像展现时使用变换与透明度过渡
文字链接的颜色过渡与细微光标变化。 · 标准指针交互。
08
组件
- button 简洁的文字链接配合颜色过渡，无可见按钮形状。
- card 无传统卡片；内容以大型独立图片结合排版呈现。
- chip 未观察到标签组件。
- input 未观察到表单输入框。
- hero 全视口大幅插图或摄影作品，常采用通栏布局。
09
文案语气与禁用清单
- 语气 极简、专业、静谧。
- 标题风格 大尺寸、细字重的过渡衬线体，常采用居中或左对齐排版。
- 按钮文案 无按钮样式的纯文字链接。
- 避免使用无衬线展示字体——截图显示所有标题均采用过渡衬线体。
- 避免使用圆角按钮——截图显示为无按钮容器的纯文字链接。
- 避免使用彩色点缀色板——截图显示为严格单色基础。
- 避免使用厚重投影——截图显示为完全扁平的图像与字体编排。
- 避免为文字使用复杂多栏网格——截图显示为宽裕的单栏留白。
- 避免使用繁复装饰图案——截图显示为大面积洁净的摄影或插画区域。
- 避免: 高饱和霓虹色
- 避免: 厚重投影
- 避免: 繁复装饰性背景
- 避免: 圆角 UI 元素
- 避免: 无衬线展示字体
- 避免: 复杂渐变
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Studio Oker 是一个极简设计工作室作品集，具有精致的编辑美学。设计基于严格单色体系，主要使用 #000000 与 #FFFFFF，辅以 #A0A0A0 和 #808080 用于次级文字与边框。字体采用过渡衬线体类别，字距紧凑（展示标题为 -1.6px）。布局以大量全出血影像为特征，通过宽裕的黑色或白色内边距分隔。关键约束包括：严格使用单色色彩，避免圆角 UI 元素或厚重阴影，保持大型字体与影像周围的充足留白。交互风格细腻，采用平滑透明度与颜色过渡，配合自定义 cubic-bezier 缓动函数。
en · zh-CN · zh-TW · ja · ko