OpenDesign·你的设计资产库

网页参考

Transformfestival

一个国际表演艺术节,拥有粗犷的编辑风格字体和电影感摄影。

EditorialBold TypographyPhotographicCurationRestraint
Transformfestival 网站截图

01

设计气质 DNA

演出艺术节艺术国际社群

一幅大胆的戏剧海报与一本简洁的编辑风格杂志的结合。

02

色彩

#FB00C2Accent
#000000Ink
#F4EDE9BG
#767676Muted
rgba(0, 0, 0, 0.1)Line

高对比度:在温暖、微偏灰白的画布上运用深邃的纯黑墨迹,辅以一抹亮丽的电光粉点缀。

03

字体

geometric-sans

  • display80px · 900
  • heading56px · 800
  • subhead24px · 800
  • body18px · 400

使用全大写以实现强烈强调和导航链接。 · 为大尺寸展示文字使用紧缩的字间距,以保持冲击力。 · 保持展示文字与正文之间显著的字重对比。

04

间距

4px
8px
16px
24px
32px
48px
64px
80px
96px

通过一致的 padding 和 gap 倍数建立清晰的垂直韵律。

05

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

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

极少使用边框,主要依靠强烈的字体和图像对比来实现视觉分隔。

0 4px 24px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉后接多列卡片网格,随后是粗犷字体的排版版块。

07

动效与交互

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

交互元素上的平滑色彩过渡。 · 按钮和卡片在悬停时的微妙变换。

按钮和链接上立即产生颜色反转或背景变化。 · 轻微的变换或缩放效果提供触觉反馈。

08

组件

  • button 高对比度的实心矩形,配以全大写文字。
  • card 简洁、无边框的卡片,包含突出的图像、粗体标题,以及一个用于导航的简单箭头图标。
  • chip 用于导航或小标签,通常采用全大写形式。
  • input 边框极简的简洁文本输入框。
  • hero 全出血的电影感照片,叠加了巨大、厚重的字体排版。

09

文案语气与禁用清单

  • 语气 自信、有冲击力、直接。
  • 标题风格 使用巨大、厚重字体设置的简短有力陈述。
  • 按钮文案 清晰、全大写的指令,在背景中格外醒目。
  • 不要在主要 UI 元素上使用圆角——截图显示的是尖锐的矩形形状。
  • 不要使用多种相互竞争的点缀色——截图显示的是以粉色和紫色为主导的清晰层级。
  • 不要在标题中使用纤细、轻盈的字重——截图显示的是清一色的厚重粗体。
  • 不要使用比例宽或不规则的无衬线字体——截图显示的是非常几何化、紧凑的字体。
  • 不要使用复杂、多层的阴影——截图依赖于纯色和锐利的边缘来界定形状。
  • 不要将灰色作为主要背景——截图显示的是温暖的灰白色 (#F4EDE9)。
  • 避免: 模糊的语言
  • 避免: 微妙或装饰性元素
  • 避免: 低对比度的颜色组合

10

包内真实截图

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

11

System Prompt

这是一个为国际表演艺术节设计的大胆编辑风格活动网站。设计由放置在温暖灰白背景 (#F4EDE9) 上的、巨大的黑色 (#000000) 厚重字体主导。鲜艳的电光粉 (#FB00C2) 用作主要行动号召的点缀色,而深紫色 (#340068) 则用于大块背景和次要按钮。字体是一款简洁的几何无衬线字体,同时使用全大写和句首大写形式。布局宽敞,运用全出血的电影感摄影和简洁的四列内容网格。关键约束:避免按钮使用圆角,避免使用多种相互竞争的亮色点缀,避免使用纤细或装饰性的字体字重。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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