01
设计气质 DNA
独立开发者动效交互作品集
黑暗画廊中的一段电影胶片，展示着视觉工艺。
02
色彩
#bacbc2Ink#1e1e1eBG#1a1a1aBG soft#000000BG quiet#cc9933Mutedrgba(186, 196, 184, 0.2)Line深色单色模式，以浅鼠尾草色墨水为主色调，偶尔点缀金色。
03
字体
- display
337px · 400 - h1
257px · 400 - body
16px · 400 - caption
10px · 400
04
间距
4px8px12px16px20px24px30px48px64px96px清晰的4px增量节奏，导航和联系区域留有充足内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
全局采用硬边框和直角，'ABOUT'链接底部有醒目的1px边框。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全屏深色画布，居中放置由垂直图片构成的水平轮播，以及固定的导航元素。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
交互元素上的平滑颜色和背景过渡
0.5秒cubic-bezier过渡，伴随微妙的颜色变化。 · 即时导航，无可见的激活状态。
08
组件
- button 文本链接，采用大写字母、尖锐造型，可带箭头指示器。
- card 垂直照片卡片，排列在水平滚动容器中。
- hero 一个沉浸式全屏深色区域，展示黑白照片的水平滚动网格。
09
文案语气与禁用清单
- 语气 极简、精致、专业。
- 标题风格 大写字母、巨大尺寸、高冲击力的展示排版，采用紧凑的负字距调整。
- 按钮文案 低调的大写文本链接，通常带有简单下划线或箭头。
- 不要使用柔和的投影——截图显示为完全扁平、硬边设计。
- 不要使用圆角——截图显示所有元素均为0px的尖锐直角。
- 不要使用多种颜色——截图显示受限的调色板，仅有深色背景和鼠尾草色墨水。
- 不要使用小而保守的展示文字——截图显示巨大的排版主导视口。
- 不要使用繁杂的背景图案——截图显示纯色深色填充和照片内容。
- 不要使用过于复杂的导航——截图显示一个简单的'ABOUT'链接，仅带简单下划线。
- 避免: 避免装饰性图标
- 避免: 避免不必要的边框
- 避免: 避免多种背景颜色
10
包内真实截图
11
System Prompt
这是一个为Aristide Benoist打造的、以动效为核心的深色开发者作品集。设计DNA基于深色单色背景（#1e1e1e），搭配浅鼠尾草色墨水（#bacbc2）和偶尔的金色点缀（#cc9933）。它采用极致的排版尺度，使用粗衬线字体进行展示，使用怪诞无衬线字体用于正文，并在巨大标题上使用紧凑的负字距调整。布局简约且具有电影感，常将垂直黑白照片构成的水平轮播居中。关键设计约束：避免使用任何圆角，不添加装饰性投影或复杂图案，并且绝不使用超过两种主墨色。过渡效果应平滑，使用0.5秒的cubic-bezier缓动函数。