01
设计气质 DNA
艺术画廊街区指南文化
一份精选的街区艺术指南。
02
色彩
#000000Ink#B0E0E9BG#FFFFFFBG soft#226D7AMutedrgba(0, 0, 0, 1)Line高对比度编辑配色,采用柔和的粉彩背景和醒目的黑色字体。
03
字体
- display
80px · 700 - heading
36px · 700 - body
16px · 400
使用几何无衬线字体作为粗体展示标题,字间距紧凑。 · 使用过渡衬线字体作为正文,以保持可读性和经典的编辑感。 · 正文字高保持宽松(1.5+)。
04
间距
4px8px16px20px24px32px40px48px60px采用宽松的垂直间距(40px-60px)来分隔不同的内容块。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用2px实线黑色(#000000)边框来定义区块和强调。
0px 4px 12px rgba(0,0,0,0.1)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
内容居中,包含大型全宽摄影区域和堆叠式文字块。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
页面加载时的淡入过渡
交互元素上的细微缩放或透明度变化。 · 立即响应,视觉反馈最小。
08
组件
- button 圆润的胶囊形状,白色背景,黑色文字,并带有一个彩色状态点。
- card 全出血摄影卡片,无可见边框。
- hero 大型全视口摄影,叠加厚重、带框的文字排版。
09
文案语气与禁用清单
- 语气 直接、信息丰富且极简。
- 标题风格 粗体、带框、全大写,以达到最大冲击力。
- 按钮文案 友好且清晰,通常带有次级视觉指示器,如一个点。
- 不要使用纤细或轻薄的字体——截图显示的是厚重、粗体的无衬线标题。
- 不要使用复杂的圆角——截图显示的是严格矩形的设计语言,边缘锐利。
- 不要使用微妙的背景色调——截图显示的是强烈、清晰的粉彩蓝背景。
- 不要使用多彩、多色的按钮——截图显示的是干净的白色胶囊按钮,带有一个单色点。
- 不要仅依靠文字进行强调——截图使用粗黑边框来框住关键词。
- 不要使用深色模式美学——截图显示的是明亮、高调、浅色主题的界面。
- 避免: 华丽或修饰性的语言
- 避免: 复杂的多层导航
- 避免: 杂乱的布局
- 避免: 过度使用渐变或阴影
- 避免: 鲜艳或霓虹色的强调色
- 避免: 没有呼吸空间的密集文字块
10
包内真实截图
11
System Prompt
这份设计DNA代表一个名为Art in Dumbo的编辑网站。其美学由明亮的粉彩蓝(#B0E0E9)背景与醒目的黑色(#000000)字体对比定义。字体方面,展示标题使用粗体几何无衬线字体,正文使用过渡衬线字体,比例尺最高可达80px。关键组件包括全出血摄影、白色背景的胶囊按钮和粗黑色边框的文字框。关键约束:切勿使用纤细或轻薄的字体;保持高对比度的粉彩黑配色;避免使用复杂的圆角或阴影;并保持布局宽敞,具有宽松的垂直节奏。请运用这份DNA来创建清晰、有冲击力的编辑布局,使其感觉经过精心策划且现代。



