OpenDesign·你的设计资产库

网页参考

Diogoakio Com Br

一位独立设计师与艺术指导的精致作品集网站,聚焦于大胆排版与沉浸式深色画廊体验。

PortfolioStudioEditorialCleanTypography
Diogoakio Com Br 网站截图

01

设计气质 DNA

设计艺术指导数字体验独立作品集

一个策划了高对比度展览的数字画廊。

02

色彩

#FFFFFFInk
#151515BG
#1C2763BG soft
#999999Muted
rgba(255, 255, 255, 0.15)Line

高对比度与克制,使用深色背景让摄影与排版成为焦点。

03

字体

humanist-sans

  • display34px · 400
  • body16px · 400

所有文字使用400字重。 · 标题使用负字距,正文使用正字距。 · 排版是核心的结构元素。

04

间距

4px
8px
16px
20px
24px
30px
48px

统一的30px间距定义了主要的板块分隔。

05

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

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

极少或不存在;分隔通过间距与背景对比实现。

06

布局

1920container
12columns
30pxgutter
768 / 1024breakpoints

全幅深色画布,包含顶部对齐的醒目排版主视觉与基于网格的作品集画廊。

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

所有元素均应用标准的'all'过渡,以实现平滑的状态变化。

视觉反馈可能涉及交互元素上微妙的色彩变化或显现。 · 过渡以显示更多内容,例如项目覆盖层。

08

组件

  • button 在深色背景上具有高对比度的极简文字链接或按钮。
  • card 以大幅摄影卡片或简洁文字块形式呈现于网格中的内容。
  • chip 简洁、无装饰的文字元素。
  • input 在提供的截图中不可见。
  • hero 一个巨大、全宽的排版声明,锚定整个页面。

09

文案语气与禁用清单

  • 语气 自信、直接且专业。
  • 标题风格 陈述性且直截了当,使用设计师姓名作为主要吸引点。
  • 按钮文案 低调且实用,例如“Ver matéria”。
  • 不要使用白色背景——截图显示的是主导性的深色主题。
  • 不要使用粗体字重——截图显示的是统一的400字重。
  • 不要添加投影——截图显示的是平面、表面层次感。
  • 不要使用多种颜色——截图显示的是严格的单色配色。
  • 不要对元素使用圆角——截图显示的是锐利的直角边缘。
  • 不要使用复杂的装饰性边框——截图依赖间距进行分隔。
  • 避免: 过度装饰
  • 避免: 刺眼色彩
  • 避免: 复杂术语

10

包内真实截图

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

11

System Prompt

Diogo Akio作品集网站的设计基因。这是一个为独立设计师与艺术指导打造的精致、高对比度作品集。设计锚定于深色主题(背景 #151515)与白色排版(墨色 #FFFFFF),搭配一个柔和的点缀色(#1C2763)和灰色文字(#999999)。字体为人文无衬线体(HelveticaNeueLTPro-Roman),使用400字重。布局为全幅深色画布,包含醒目的排版主视觉与基于网格的画廊。关键禁忌:永远不要使用白色背景,永远不要使用粗体字重,永远不要使用圆角或投影。该网站优先考虑编辑清晰度与电影般的画廊质感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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