OpenDesign·你的设计资产库

网页参考

Hugoferradas

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

PortfolioCleanTypographyExpressiveCalm

封面待补录,可通过原站查看设计。

01

设计气质 DNA

设计师作品集极简双语排版

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

02

色彩

#FFFFFFInk
#000000BG
rgba(0,0,0,1)Line

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

03

字体

transitional-serif · grotesque-sans

  • display36px · 700

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

04

间距

4px
8px
16px
20px
24px
32px
40px
60px

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

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

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

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

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

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

08

组件

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

09

文案语气与禁用清单

  • 语气 专业、简洁、自信
  • 标题风格 直接且个人化,使用经典衬线字体建立权威感。
  • 按钮文案 内隐式;专业机构以带下划线的文本链接呈现。
  • 不要使用浅色或彩色背景——截图显示为纯黑(#000000)画布。
  • 不要为标题使用无衬线字体——截图显示为过渡型衬线字体(Times New Roman)。
  • 不要使用投影或复杂边框——截图显示为扁平化无边框设计。
  • 不要使用高饱和度的强调色——截图显示为中性单色方案。
  • 不要使用小而密集的文字——截图显示为充足的行高与大字体尺寸以保证可读性。
  • 不要将所有文本居中对齐——截图显示为左对齐的段落与标题。
  • 避免: 避免过于随意的语言
  • 避免: 避免复杂的导航菜单
  • 避免: 避免杂乱的布局
  • 避免: 避免使用多种竞争性强调色
  • 避免: 避免为正文使用装饰性字体

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个为品牌设计师与创意总监打造的精致个人作品集。采用高对比度单色方案,纯黑背景(#000000)搭配纯白文字(#FFFFFF)。排版混合使用过渡型衬线字体(标题)与怪诞无衬线字体(正文),在优雅与现代可读性间取得平衡。布局宽敞且严格左对齐,避免杂乱。关键设计准则:绝不使用浅色背景,主标题必须使用衬线字体,并保持内容块间充足的垂直间距以维持极简美学。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。