01
设计气质 DNA
实验性粗野主义编辑式个人化叙事性
一个以排版为核心的实验性作品集,如同数字期刊。
02
色彩
#000000Ink#F4F4F4BG#888888Mutedrgba(0,0,0,0.1)Line极简底色,搭配高对比度的黑色墨水色和一种用于次要元素的柔和灰色。
03
字体
- display
64px · 400 - heading
28px · 400 - body
18px · 400
所有主要文本使用过渡型衬线字体。 · 允许文本与图像元素叠加和互动。
04
间距
4px8px16px24px32px48px64px96px宽松且不对称,由元素叠加而非严格网格驱动。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid black
8px 8px 0px rgba(0,0,0,0.8)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个基本无结构的布局,包含大量叠加元素和强烈的字体排印焦点。
07
动效与交互
0msmicro
0mssmall
0msmedium
lineareasing
文本链接上微妙的下划线或颜色变化。 · 标准导航至独立页面。
08
组件
- button 基于文本的链接,带有简单下划线或箭头。
- card 带有粗体文字叠加的大型旋转图片容器。
- hero 一个巨大的字体排印块,叠加在旋转的照片元素之上。
09
文案语气与禁用清单
- 语气 自信、实验性且个人化。
- 标题风格 大号、叠加的衬线字体排印。
- 按钮文案 低调的文字链接,如 'Lire la suite ->'。
- 避免使用明亮的霓虹色——截图显示的是柔和的黑白配色。
- 避免使用无衬线字体——截图中所有文本均使用过渡型衬线字体。
- 避免使用刚性、完美对齐的网格——截图显示旋转、叠加的元素。
- 避免使用带有等内边距的标准卡片布局——截图使用文本与图像叠加。
- 避免使用厚重的投影——截图在主图片上使用了一个单一、硬边投影。
- 避免使用活泼或圆角设计——截图显示尖锐边缘和粗野主义美学。
- 避免: 明亮的霓虹色
- 避免: 无衬线字体
- 避免: 刚性网格布局
11
System Prompt
这是一个为设计师和开发者打造的实验性、粗野主义作品集。它采用黑色 (#000000) 和米白色 (#F4F4F4) 构成鲜明、高对比度的配色方案。排版完全使用过渡型衬线字体,并以大型、叠加的形式展示,与摄影元素互动。关键特点包括带有硬边投影的旋转图片以及跨越元素边界排布的文本。关键禁忌:避免无衬线字体排印,避免刚性网格结构,避免彩色点缀,避免圆角,避免标准卡片布局,避免活泼或异想天开的元素。