01
设计气质 DNA
超现实大胆趣味实验性编辑式
为一家设计工作室制作的超现实主义杂志跨页。
02
色彩
#8B7D3CAccent#000000Ink#FFFFFFBGrgba(0,0,0,0.2)Line高对比度单色，搭配一个单一的大地色点缀色。
03
字体
- display
300px · 400 - display
36px · 400
在标题与正文字体之间使用极端的尺度对比。 · 主要视觉冲击力依赖于强有力的衬线字体排版。 · 正文左对齐，并在网格中密集排列。
04
间距
4px8px16px24px32px48px64px96px非对称，由内容块而非严格的基线驱动。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用1px实线黑色边框来分隔不同的内容区域。
06
布局
1400container
12columns
24pxgutter
768 / 1024breakpoints
非对称网格，上方是大型、非结构化的主视觉元素，下方是规整的分栏页脚。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
静态图像呈现，带有极少量的隐含动画。 · 无可见的过渡或悬停状态。
无可见状态。 · 遵循标准浏览器默认行为。
08
组件
- button 药丸形的点缀色背景，搭配无衬线字体文字。
- card 由水平分隔线分开的原始网格项目。
- hero 大型衬线字体排版，结合超现实摄影和投影。
09
文案语气与禁用清单
- 语气 直接、前卫，且毫不妥协地大胆。
- 标题风格 巨大、高冲击力的衬线字体排版，主导整个视口。
- 按钮文案 微妙、次要的元素，不与主要视觉叙事竞争。
- 不要在卡片上使用圆角——截图显示的是锐利的0px边框。
- 不要使用彩色渐变作为背景——截图显示的是纯白背景。
- 不要为主视觉标题使用无衬线字体——截图显示的是高对比度的衬线字体。
- 不要在UI元素上使用柔和的投影——截图显示仅在主视觉图形上有锐利、偏移的投影。
- 不要使用多彩、鲜艳的配色方案——截图主要是黑白两色，搭配单一的橄榄绿色点缀。
- 不要将所有内容块居中对齐——截图显示的是严格的左对齐分栏布局。
- 避免: 趣味动画
- 避免: 柔和渐变
- 避免: 圆角
11
System Prompt
这是一个实验性工作室作品集网站，其特点是超现实主义、高冲击力的排版和原始的编辑式布局。设计依赖于高对比度的单色配色方案（#FFFFFF背景，#000000墨色），搭配一个柔和的橄榄绿色点缀（#8B7D3C）和一条1px的黑色水平分隔线。排版以用于主视觉的、字距紧密的巨型迪多衬线展示字体为主，正文则搭配简洁的几何无衬线字体。布局为非对称网格，上方是大型、非结构化的主视觉，下方是密集的三栏信息页脚。关键禁忌：不要在主要容器上使用圆角（截图显示为锐利的0px边框），不要使用柔和的渐变或多彩背景（截图显示为纯白），不要将主要文本块居中对齐（截图显示为严格的左对齐）。