精选 · 开放 · 免费
Consumedinkey
一个音乐合作项目的极简、氛围感网站，运用鲜明对比与摄影元素。
EditorialPhotographicMonochromeRestraintCalm
01
设计气质 DNA
极简主义前卫音乐抽象沉浸式
一个音乐项目的、氛围感十足的极简画廊展览。
02
色彩
#ffffffInk
#000000BG
rgba(0,0,0,1.0)Line
高对比度的单色调色板，使用纯黑与纯白营造鲜明、专注的氛围。
03
字体
humanist-sans
- display
64px · 400 - body
16px · 400
使用 HelveticaLT 或类似的无衬线字体。 · 字体粗细始终保持 400。 · 为所有文字应用细微、正值的字间距。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的内边距与一致的间距，打造出开放、透气的布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
锋利、硬朗的边缘。无圆角。内容悬浮于空间之中。
06
布局
1920container
16pxgutter
768breakpoints
一个全出血的主视觉区域，随后是一个深色内容区，包含中心视觉元素与两侧文本列。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
所有元素均具有全局过渡属性，暗示交互时平滑的状态变化。
具有指针光标的元素状态会改变，可能通过颜色或透明度变化实现。 · 标准的指针点击行为。
08
组件
- button 基于文本的操作，使用简单的分隔符（例如 '聆听 | 购买'）。
- card 不使用。视觉呈现为沉浸式、边缘到边缘的图像。
- chip 不使用。
- input 不使用。
- hero 全屏、氛围感的黑白摄影主视觉，叠加文本。
09
文案语气与禁用清单
- 语气 平静、克制且神秘。
- 标题风格 简洁、陈述式，使用专辑标题与艺术家名称。
- 按钮文案 极简且直接，使用竖线分隔操作。
- 不要为任何元素添加圆角——截图显示所有角落均为完美的直角。
- 不要引入鲜艳的强调色——截图为严格的黑白单色。
- 不要使用装饰性或衬线字体——截图使用简洁、几何感的无衬线字体 (HelveticaLT)。
- 不要添加投影或盒阴影——元素看起来与背景齐平。
- 不要使用复杂的背景图案或渐变——背景为纯色或全出血图像。
- 不要使用多种字体粗细——截图显示整体粗细一致、统一 (400)。
- 避免: 避免感叹号或过于热情的措辞。
- 避免: 避免复杂句子或段落。
- 避免: 避免明亮、饱和的色彩。
- 避免: 避免装饰性字体或过多的字体粗细变化。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为音乐合作项目 'Consumed In Key' 设计的极简、氛围感网站。它使用纯黑 (#000000) 与纯白 (#ffffff) 构成的鲜明、高对比度单色调色板，并包含一个氛围感的黑白摄影元素。字体采用简洁、几何感的无衬线字体 (HelveticaLT)，粗细统一为 400，并带有细微的字间距。布局沉浸而开放，使用充足的内边距和全出血图像。关键设计约束：1) 保持绝对的色彩克制，不使用强调色。2) 所有元素使用锋利、硬朗的边缘，圆角为零。3) 保持字体极简、粗细统一且间距微妙。避免任何装饰性元素、复杂组件或高能量交互。目标是创造一种平静、专注且神秘的视觉体验，以衬托音乐内容。
en · zh-CN · zh-TW · ja · ko