精选 · 开放 · 免费
Transformfestival
一个国际表演艺术节,拥有粗犷的编辑风格字体和电影感摄影。
EditorialBold TypographyPhotographicCurationRestraint
01
设计气质 DNA
演出艺术节艺术国际社群
一幅大胆的戏剧海报与一本简洁的编辑风格杂志的结合。
02
色彩
#FB00C2Accent
#000000Ink
#F4EDE9BG
#767676Muted
rgba(0, 0, 0, 0.1)Line
高对比度:在温暖、微偏灰白的画布上运用深邃的纯黑墨迹,辅以一抹亮丽的电光粉点缀。
03
字体
geometric-sans
- display
80px · 900 - heading
56px · 800 - subhead
24px · 800 - body
18px · 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
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为国际表演艺术节设计的大胆编辑风格活动网站。设计由放置在温暖灰白背景 (#F4EDE9) 上的、巨大的黑色 (#000000) 厚重字体主导。鲜艳的电光粉 (#FB00C2) 用作主要行动号召的点缀色,而深紫色 (#340068) 则用于大块背景和次要按钮。字体是一款简洁的几何无衬线字体,同时使用全大写和句首大写形式。布局宽敞,运用全出血的电影感摄影和简洁的四列内容网格。关键约束:避免按钮使用圆角,避免使用多种相互竞争的亮色点缀,避免使用纤细或装饰性的字体字重。
en · zh-CN · zh-TW · ja · ko