OpenDesign·你的设计资产库

网页参考

Barbican

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

CultureArt
Barbican 网站截图

01

设计气质 DNA

艺术文化场馆演出策展

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

02

色彩

#D14900Accent
#1A1A1AInk
#333333Ink soft
#FFFFFFBG
#F5F5F5BG quiet
#595959Muted
rgba(26, 26, 26, 0.2)Line

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

03

字体

grotesque-sans

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

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

04

间距

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

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

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

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

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

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

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

08

组件

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

09

文案语气与禁用清单

  • 语气 权威、友好且富有文化底蕴。
  • 标题风格 直接、引人入胜,常描述艺术内容本身。
  • 按钮文案 行动导向、清晰明确,引导用户前往特定活动或信息页面。
  • 不要使用柔和或粉彩色系——截图显示的是高对比度、充满活力的橙黑主题。
  • 不要为所有元素添加厚重的投影——截图显示了克制的使用方式,仅在需要营造景深时使用微妙阴影。
  • 不要将所有文本居中对齐——截图显示了强烈偏向左对齐文本块的趋势。
  • 不要使用装饰性或手写字体——截图展示了严格、整洁的机构无衬线字体体系。
  • 不要使用过度圆角的UI元素——截图显示了多为矩形或微圆角的组件。
  • 不要在桌面端将导航隐藏于复杂的巨型菜单之后——截图显示了清晰的主导航栏及下拉指示器。
  • 避免: 避免使用过于随意或时髦的语言,以免削弱场馆的声望。
  • 避免: 避免信息堆砌;让图像承担主要的传达作用。

10

包内真实截图

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

11

System Prompt

这是一个大胆、机构化的文化艺术中心网站。它将自己定位为音乐、戏剧和电影的首屈一指的目的地,采用充满活力的标志性橙色(#D14900)搭配深黑色(#1A1A1A)和纯白色(#FFFFFF)。字体为强有力、整洁的怪诞无衬线体(Supreme),标题采用粗重字重以增强冲击力。关键特征包括全出血摄影主视觉区域、全大写类别标签(芯片)以及清晰、可访问的导航结构。必须避免:避免柔和色系、避免过度使用投影、避免居中文本块、避免装饰性字体、避免过度圆角的UI角以及避免隐藏主导航。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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