精选 · 开放 · 免费

Hugoferradas

为品牌设计师与创意总监打造的精致个人作品集，采用双语布局，搭配醒目排版与克制的色彩方案。

01

设计气质 DNA

为创意总监打造的宁静排版画廊

02

色彩

采用纯黑背景上的鲜明白色文字形成高对比度单色系，偶尔使用淡黄色标识等微妙点缀。

03

字体

transitional-serif · grotesque-sans

• display36px · 700

标题使用经典衬线字体（回退至Times New Roman）以体现优雅与权威感。 · 正文使用简洁的无衬线字体（Roboto）确保在深色背景上的最佳可读性。 · 文本采用左对齐，配合充足行高保持清爽透气的版面。

04

间距

通过主要区域的充裕上下内边距与文本块间的一致间距建立垂直韵律。

05

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

不使用可见边框；深度感完全通过排版与色彩对比实现。

06

布局

全宽黑色画布搭配居中的左对齐内容块，避免边缘对齐的文本。

07

动效与交互

所有元素均应用transition属性，实现在hover或交互时的平滑状态变化。

通过全局transition属性暗示细微的光标交互效果。 · 专业机构链接（R/GA, Stink Studios）采用标准链接行为。

08

组件

• button 无传统按钮；导航通过文本链接与极简切换图标实现。
• card “ST·S·2·OS”元素作为图形卡片，带有微妙的背景色变化与大尺寸定制排版。
• hero 极简的文本型首屏区域，包含醒目的衬线标题与简洁的专业概述。

09

文案语气与禁用清单

• 语气 专业、简洁、自信
• 标题风格 直接且个人化，使用经典衬线字体建立权威感。
• 按钮文案 内隐式；专业机构以带下划线的文本链接呈现。

• 不要使用浅色或彩色背景——截图显示为纯黑（#000000）画布。
• 不要为标题使用无衬线字体——截图显示为过渡型衬线字体（Times New Roman）。
• 不要使用投影或复杂边框——截图显示为扁平化无边框设计。
• 不要使用高饱和度的强调色——截图显示为中性单色方案。
• 不要使用小而密集的文字——截图显示为充足的行高与大字体尺寸以保证可读性。
• 不要将所有文本居中对齐——截图显示为左对齐的段落与标题。
• 避免: 避免过于随意的语言
• 避免: 避免复杂的导航菜单
• 避免: 避免杂乱的布局
• 避免: 避免使用多种竞争性强调色
• 避免: 避免为正文使用装饰性字体

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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