精选 · 开放 · 免费

Barbican

一个世界级艺术中心网站，融合了大胆的机构品牌形象与沉浸式的活动影像。

01

设计气质 DNA

一座享誉都会的艺术中心，呈现涵盖音乐、戏剧与电影的多元节目。

02

色彩

一套鲜明、对比强烈的机构配色方案，以标志性的活力橙色和深黑色为主调，旨在为高冲击力摄影提供视觉框架。

03

字体

grotesque-sans

• display56px · 700
• h240px · 700
• body19px · 400
• caption14px · 700

标题使用粗重字重搭配紧密字间距。 · 正文采用略大于常规的基础字号，确保极高的可读性。 · 全大写仅用于结构标签，且需谨慎使用。

04

间距

内容以充足的垂直间距进行编排，为大幅图像留出呼吸空间。

05

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

1px solid rgba(26, 26, 26, 0.2)

rgba(0, 0, 0, 0.1) 0px 0px 10px 0px · rgba(0, 0, 0, 0.05) 0px 0px 20px 0px inset

06

布局

以强劲的中央栏式结构为核心，全出血图像突破网格以营造戏剧性效果。

07

动效与交互

为按钮、hover状态等交互元素提供细微过渡效果。 · 内容版块进入视口时，采用平滑的淡入或滑入效果。

按钮和链接采用细微的不透明度或背景颜色变化。 · 提供即时视觉反馈，通常为轻微的缩放或颜色偏移。

08

组件

• button 填充或描边样式，边角可为直角或微圆；主要操作按钮使用标志性橙色。
• card 以内容驱动的卡片，突出展示图像，边框极简，依靠视觉内容本身进行界定。
• chip 实心、全大写的标签，用于指示诸如“影院”之类的类别，使用高对比度颜色（橙色、绿色）。
• input 简洁的文本字段，样式极简，通常采用描边或微妙的底部边框。
• hero 全宽或近乎全宽的沉浸式影像区域，叠加醒目的文字和主要行动号召按钮。

09

文案语气与禁用清单

• 语气 权威、友好且富有文化底蕴。
• 标题风格 直接、引人入胜，常描述艺术内容本身。
• 按钮文案 行动导向、清晰明确，引导用户前往特定活动或信息页面。

• 不要使用柔和或粉彩色系——截图显示的是高对比度、充满活力的橙黑主题。
• 不要为所有元素添加厚重的投影——截图显示了克制的使用方式，仅在需要营造景深时使用微妙阴影。
• 不要将所有文本居中对齐——截图显示了强烈偏向左对齐文本块的趋势。
• 不要使用装饰性或手写字体——截图展示了严格、整洁的机构无衬线字体体系。
• 不要使用过度圆角的UI元素——截图显示了多为矩形或微圆角的组件。
• 不要在桌面端将导航隐藏于复杂的巨型菜单之后——截图显示了清晰的主导航栏及下拉指示器。
• 避免: 避免使用过于随意或时髦的语言，以免削弱场馆的声望。
• 避免: 避免信息堆砌；让图像承担主要的传达作用。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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