精选 · 开放 · 免费
Def Studio
一个设计工作室作品集，以大型排版叠加于深邃、氛围感强的产品摄影之上。
StudioPortfolioDark ModeBold TypographyClean
01
设计气质 DNA
设计工作室作品集视觉识别网络开发
一个极简的数字作品集，通过大胆的排版与高对比度的视觉呈现来展示创意作品。
02
色彩
#EFEFEFInk
#000000BG
#747474Muted
rgba(239,239,239,0.1)Line
严格的高对比度单色方案，依赖纯黑背景与白/浅灰色文本，以实现最佳可读性。
03
字体
humanist-sans
- display
96px · 300 - heading
25px · 300 - body
16px · 400
采用细体（300）用于展示和导航文本，以保持优雅感。 · 文本层级主要通过极大的尺寸差异而非字重变化来建立。 · 导航项使用与章节标题相同的字体，但尺寸更小。
04
间距
4px
8px
10px
16px
20px
24px
30px
48px
60px
100px
宽松、非对称的间距，由具体的内边距值（如 100px 30px 60px 30px）驱动。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
最少使用边框，主要为导航元素的文本边框。
06
布局
1400container
12columns
30pxgutter
768 / 1024breakpoints
全宽深色背景，叠加大型、左对齐的排版。
07
动效与交互
220msmicro
300mssmall
500msmedium
600mslarge
cubic-bezier(1, 0.5, 0.8, 1)easing
0.5秒过渡广泛应用于顶部位置与透明度属性。 · 透明度渐变用于元素可见性变化。
指针光标指示交互元素，可能伴随细微的透明度或颜色变化。 · 直接导航至作品集章节或外部链接。
08
组件
- button 纯文本按钮，指针光标，无背景填充。
- card 基于图片的作品集卡片，下方带有文本标签，无边框或背景容器。
- hero 全屏深色氛围感图片，搭配大型左对齐的文本导航。
09
文案语气与禁用清单
- 语气 自信、极简、专业。
- 标题风格 小写、大尺寸、细体、无衬线字体。
- 按钮文案 简洁的文本链接，融入导航或行内文本中。
- 不要使用圆角——截图显示所有卡片和元素均为锐利边缘
- 不要添加投影——截图显示完全扁平、无边框的表面
- 不要使用多列文本布局——截图显示左对齐的宽幅排版
- 不要使用过重的字重——截图显示主要使用细体（300）和常规（400）字重
- 不要使用装饰性图案——截图显示使用纯色与摄影背景
- 不要使用居中对齐文本——截图显示导航和标题均采用强烈的左对齐
- 避免: 过多的装饰元素
- 避免: 高饱和度的强调色
- 避免: 密集的文本块
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Def.studio 是一个设计工作室作品集，其特点是极端的排版比例和严格的单色方案。视觉识别依赖于大尺寸（96px）的细体无衬线字体，在纯黑背景（#000000）上营造出大胆、极简的美学。关键色彩包括纯黑背景和用于主要文本的浅灰色（#EFEFEF），以及用于次要元素的柔和灰色（#747474）。布局为非对称且全出血式，将摄影作为背景纹理而非框式呈现。关键约束包括避免圆角或投影，保持严格的左对齐文本，绝不使用高饱和度的强调色，确保焦点完全集中于作品与排版。
en · zh-CN · zh-TW · ja · ko