精选 · 开放 · 免费

Xn Smon Vpa

一个极简的工作室作品集，通过粗体排版与柔和色彩点缀来呈现计算设计。

01

设计气质 DNA

如同在纯净白墙上策展的数字作品陈列。

02

色彩

高对比度的黑底白字，辅以柔和的马卡龙色与低饱和度的暖色点缀。

03

字体

humanist-sans

• display172px · 400
• heading66px · 400
• body31px · 400

所有主要标题与正文均使用 Tex Gyre Heros 字体。 · 衬线字体仅保留用于品牌标识。 · 大字号显示时采用紧凑的负字距。

04

间距

以 4px 为基础单位保持一致节奏，各区块间留有充裕的空白。

05

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

最小化边框，仅在列表项顶部使用 2px 分割线。

06

布局

全宽区块，通过明显的顶部分割线来区隔作品集列表中的行。

07

动效与交互

交互元素上平滑的 0.2s 颜色过渡 · 点击时细微的 0.1s 形变位移 · 内容展开时 0.5s 的高度动画

文本元素上 0.2s 的颜色过渡。 · 细微的 0.1s 形变缩放效果。

08

组件

• button 大型胶囊状交互区域，采用全圆角（999px 半径），作为主要分类切换器。
• card 简洁的顶边列表项，包含序号、标题和年份栏。
• hero 一个巨大的排版式首屏区域，采用堆叠的胶囊状元素承载超大号文本。

09

文案语气与禁用清单

• 语气 精致、极简且专业。
• 标题风格 粗体，紧凑字距，小写或首字母大写，极大尺度。
• 按钮文案 极简文本，依靠大面积交互区域而非传统按钮样式。

• 避免使用生硬边框——截图显示仅使用最小的 2px 顶部分割线。
• 避免使用投影阴影——截图显示完全扁平的表面。
• 避免使用小尺寸按钮——截图显示全宽的大型胶囊形状。
• 避免使用居中导航——截图显示左对齐的站点名称与右对齐的链接。
• 避免使用复杂网格——截图显示严格的单栏线性列表。
• 避免使用粗体字重——截图显示统一的 400 字重排版。
• 避免: 杂乱的布局
• 避免: 厚重的阴影
• 避免: 鲜艳的霓虹色
• 避免: 装饰性图标

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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