精选 · 开放 · 免费

Aristide Benoist

一个以动效为核心的深色开发者作品集，拥有极致的排版尺度和照片网格。

01

设计气质 DNA

黑暗画廊中的一段电影胶片，展示着视觉工艺。

02

色彩

深色单色模式，以浅鼠尾草色墨水为主色调，偶尔点缀金色。

03

字体

slab-serif · grotesque-sans · monospaced

• display337px · 400
• h1257px · 400
• body16px · 400
• caption10px · 400

04

间距

清晰的4px增量节奏，导航和联系区域留有充足内边距。

05

表面 (圆角 / 阴影 / 边线)

全局采用硬边框和直角，'ABOUT'链接底部有醒目的1px边框。

06

布局

全屏深色画布，居中放置由垂直图片构成的水平轮播，以及固定的导航元素。

07

动效与交互

交互元素上的平滑颜色和背景过渡

0.5秒cubic-bezier过渡，伴随微妙的颜色变化。 · 即时导航，无可见的激活状态。

08

组件

• button 文本链接，采用大写字母、尖锐造型，可带箭头指示器。
• card 垂直照片卡片，排列在水平滚动容器中。
• hero 一个沉浸式全屏深色区域，展示黑白照片的水平滚动网格。

09

文案语气与禁用清单

• 语气 极简、精致、专业。
• 标题风格 大写字母、巨大尺寸、高冲击力的展示排版，采用紧凑的负字距调整。
• 按钮文案 低调的大写文本链接，通常带有简单下划线或箭头。

• 不要使用柔和的投影——截图显示为完全扁平、硬边设计。
• 不要使用圆角——截图显示所有元素均为0px的尖锐直角。
• 不要使用多种颜色——截图显示受限的调色板，仅有深色背景和鼠尾草色墨水。
• 不要使用小而保守的展示文字——截图显示巨大的排版主导视口。
• 不要使用繁杂的背景图案——截图显示纯色深色填充和照片内容。
• 不要使用过于复杂的导航——截图显示一个简单的'ABOUT'链接，仅带简单下划线。
• 避免: 避免装饰性图标
• 避免: 避免不必要的边框
• 避免: 避免多种背景颜色

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko