精选 · 开放 · 免费
Benlongdendesign
一份精致的、编辑风格的创意总监作品集,在简洁的排版与沉浸式摄影之间取得平衡。
PortfolioEditorialPremiumPhotographicCuration
01
设计气质 DNA
创意总监设计师作品集编辑风格奢华
一个展示高端作品的专属画廊或精心策划的杂志版面
02
色彩
#FFFFFFInk
#000000BG
#A0A0A0Muted
rgba(255, 255, 255, 0.15)Line
采用黑、白、灰的鲜明、高对比度极简主义,让摄影作品脱颖而出。
03
字体
grotesque-sans · monospace
所有UI和正文使用grotesque-sans字体 · 为章节标题应用大写和微小的字间距 · 保持严格的排版层级,避免装饰性元素
04
间距
4px
8px
16px
24px
32px
48px
64px
80px
96px
各部分之间留有充裕的留白,列表项之间保持紧凑的8px间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 0px
lg · 0px
pill · 999px
hover时显示细微的1px边框或背景叠加层
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个全宽、沉浸式的网格布局,其中大幅摄影图像主导视口,并与结构化的多列文本列表形成对比。
07
动效与交互
200msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素在hover时具有微妙的透明度和颜色过渡
细微的文本颜色变化和透明度改变 · 立即导航或状态改变
08
组件
- button 基于文本的链接,带有细微的hover过渡,无填充按钮形状
- card 代表项目的全出血或大幅摄影块
- chip 极简的大写文本类别标签
- input 不适用
- hero 沉浸式摄影背景,叠加项目标题和制作人员信息
09
文案语气与禁用清单
- 语气 专业、内敛且自信
- 标题风格 直接、大写,描述创意角色
- 按钮文案 用于联系和导航的简洁文本链接
- 不要使用装饰性手写字体——截图显示的是干净的grotesque-sans系统字体
- 不要为容器添加投影——截图显示的是平面表面和摄影叠加层
- 不要使用明亮、饱和的强调色——截图完全依赖单色调色板
- 不要用密集的网格使布局拥挤——截图使用了充裕的留白和大幅图像
- 不要为项目预览使用圆角卡片——截图显示的是锐利的、全出血的边缘
- 不要为UI元素使用较大的border-radius——截图仅对图标使用了极小的50%半径
- 避免: 避免使用明亮、饱和的颜色或霓虹色调
- 避免: 避免复杂的动画或分散注意力的动效
- 避免: 避免装饰性排版或手写字体
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一份为创意总监设计的高端、编辑风格的作品集。它使用纯黑(#000000)、白(#FFFFFF)和中灰(#A0A0A0)构成的鲜明、高对比度调色板。排版完全依赖系统grotesque-sans字体,保持简洁专业的美感。布局开阔,常采用带有叠加文本的全出血摄影。关键禁忌:不要使用装饰性或手写字体,避免使用明亮饱和的强调色,切勿用密集网格或不必要的UI元素使布局显得杂乱。焦点应始终放在沉浸式图像和结构化的大写文本标签上。
en · zh-CN · zh-TW · ja · ko