精选 · 开放 · 免费
Diogoakio Com Br
一位独立设计师与艺术指导的精致作品集网站,聚焦于大胆排版与沉浸式深色画廊体验。
PortfolioStudioEditorialCleanTypography
01
设计气质 DNA
设计艺术指导数字体验独立作品集
一个策划了高对比度展览的数字画廊。
02
色彩
#FFFFFFInk
#151515BG
#1C2763BG soft
#999999Muted
rgba(255, 255, 255, 0.15)Line
高对比度与克制,使用深色背景让摄影与排版成为焦点。
03
字体
humanist-sans
- display
34px · 400 - body
16px · 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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Diogo Akio作品集网站的设计基因。这是一个为独立设计师与艺术指导打造的精致、高对比度作品集。设计锚定于深色主题(背景 #151515)与白色排版(墨色 #FFFFFF),搭配一个柔和的点缀色(#1C2763)和灰色文字(#999999)。字体为人文无衬线体(HelveticaNeueLTPro-Roman),使用400字重。布局为全幅深色画布,包含醒目的排版主视觉与基于网格的画廊。关键禁忌:永远不要使用白色背景,永远不要使用粗体字重,永远不要使用圆角或投影。该网站优先考虑编辑清晰度与电影般的画廊质感。
en · zh-CN · zh-TW · ja · ko