精选 · 开放 · 免费

Transformfestival

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

01

设计气质 DNA

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

02

色彩

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

03

字体

geometric-sans

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

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

04

间距

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

05

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

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 自信、有冲击力、直接。
• 标题风格 使用巨大、厚重字体设置的简短有力陈述。
• 按钮文案 清晰、全大写的指令，在背景中格外醒目。

• 不要在主要 UI 元素上使用圆角——截图显示的是尖锐的矩形形状。
• 不要使用多种相互竞争的点缀色——截图显示的是以粉色和紫色为主导的清晰层级。
• 不要在标题中使用纤细、轻盈的字重——截图显示的是清一色的厚重粗体。
• 不要使用比例宽或不规则的无衬线字体——截图显示的是非常几何化、紧凑的字体。
• 不要使用复杂、多层的阴影——截图依赖于纯色和锐利的边缘来界定形状。
• 不要将灰色作为主要背景——截图显示的是温暖的灰白色 (#F4EDE9)。
• 避免: 模糊的语言
• 避免: 微妙或装饰性元素
• 避免: 低对比度的颜色组合

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko