01
设计气质 DNA
生成式程序化实验性音乐性抽象
一份数字乐谱,其中字体排印与音乐符号融合成动态的、抽象的视觉乐谱。
02
色彩
#000000Ink#f5f5f5BGrgba(0,0,0,0.1)Line基于浅色中性底色的严格单色,强调形式与构图,而非色彩。
03
字体
- display
56px · 400 - display-italic
48px · 400 - body
16px · 400
功能性元素使用无衬线字体 · 装饰性、表现性目的可使用手写体/斜体字体 · 在单个构图中组合不同的字体风格
04
间距
4px8px16px24px32px48px64px96px不对称且由构图驱动,主要视觉元素不遵循严格的网格。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
无可见边框;通过构图和线条来实现区隔。
06
布局
1920container
12columns
24pxgutter
768 / 1024breakpoints
全屏、构图主导的版式,抽象元素框定着一个巨大的中央负空间。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
由 'Play' 提示暗示,预示着生成式或动画音乐符号的可能性。
静态图像中未知,但文本链接上可能有微妙效果。 · 未知,但 'Play' 暗示启动生成过程的主要操作。
08
组件
- button 页脚处的极简文本链接(例如 'Play'、'Information')。
- card 无可见组件。
- chip 无可见组件。
- input 无可见组件。
- hero 一个巨大的、抽象的生成式音乐符号,构成主要的视觉内容。
09
文案语气与禁用清单
- 语气 实验性、艺术性且形式精准。
- 标题风格 解构且富有表现力,混合字体风格并与抽象形式融合。
- 按钮文案 极简且功能化,使用纯文本。
- 不要使用多色色板——截图显示的是严格的黑底白(off-white)方案。
- 不要依赖标准、基于网格的布局——截图显示的是高度表现力、由构图驱动的排列。
- 不要使用单一、一致的字体——截图混合了无衬线体、手写体,可能还有其他风格。
- 不要添加投影或复杂的表面效果——截图显示的是完全扁平、基于线条的美学。
- 不要使用传统的 UI 元素,如卡片或圆角按钮——截图使用的是极简文本链接。
- 不要用内容填满整个视口——截图将大量负空间作为核心构图元素使用。
- 避免: 使用明亮或饱和的色彩
- 避免: 套用标准 UI 组件模式
- 避免: 使用与核心概念无关的装饰性插图
11
System Prompt
这是 Ezekiel Aquino 的网站,一个'程序化设计工作室'。设计极具实验性和艺术性,展示了一个名为 'Undulations Op.1 No.1' 的'即兴生成'作品。核心视觉是一个由扭曲的音乐符号构成的抽象框架式结构。色板严格单色:纯黑 (#000000) 元素置于浅色中性背景 (#f5f5f5) 上。字体混合使用,功能性文本采用简洁的无衬线体,表现性元素采用装饰性手写体/斜体风格。版式为全屏且由构图驱动,带有大面积的中央留白。关键禁忌:不要引入任何颜色;避免标准网格布局或基于组件的 UI;不要使用单一、统一的字体;避免使用传统卡片、投影或圆角;不要用内容填满所有可用空间。整体基调是实验性的、精准的,聚焦于代码、字体排印与抽象形式的交汇点。