CURATED · OPEN · FREE

Barbican

A world-class arts centre website combining bold institutional branding with immersive event imagery.

01

Identity DNA

A prestigious metropolitan arts centre presenting a diverse programme of music, theatre, and film.

02

Color

A stark, institutional palette anchored by a vibrant signature orange and deep blacks, designed to frame high-impact photography.

03

Typography

grotesque-sans

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

Headlines use heavy weights with tight tracking. · Body text is highly legible at a slightly larger than average base size. · All-caps is used sparingly for structural tags.

04

Spacing

Content flows with generous vertical spacing, giving large imagery room to breathe.

05

Surfaces

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

Layout

A strong central column with full-bleed imagery that breaks the grid for dramatic effect.

07

Motion & Interaction

Subtle transitions on interactive elements like buttons and hover states. · Smooth fades or slides for content sections as they enter the viewport.

Subtle changes in opacity or background color for buttons and links. · Immediate visual feedback, often a slight scale reduction or color shift.

08

Components

• button Filled or outlined with sharp or slightly rounded corners; primary actions use the signature orange.
• card Content-driven cards featuring prominent imagery with minimal borders, relying on visual content for definition.
• chip Solid, uppercase tags indicating categories like 'CINEMA', using high-contrast colors (orange, green).
• input Simple text fields with minimal styling, typically outlined or with a subtle bottom border.
• hero Full-width or nearly full-width immersive imagery with bold, overlaid text and a primary call-to-action.

09

Voice & Don'ts

• Tone Authoritative, welcoming, and culturally rich.
• Headlines Direct, engaging, and often descriptive of the artistic content.
• CTAs Action-oriented and clear, guiding the user towards specific events or information.

• Don't use a muted or pastel palette — the screenshot shows a high-contrast, vibrant orange and black theme.
• Don't apply heavy drop shadows to all elements — the screenshot shows restraint, using subtle shadows only where necessary for depth.
• Don't center-align all text — the screenshot shows a strong preference for left-aligned text blocks.
• Don't use decorative or script fonts — the screenshot shows a strict, clean, institutional sans-serif typography.
• Don't use overly rounded UI elements — the screenshot shows mostly rectangular or slightly rounded components.
• Don't hide navigation behind a complex mega-menu on desktop — the screenshot shows a clear, primary navigation bar with dropdown indicators.
• Avoid: Avoid overly casual or trendy language that might undermine the venue's prestige.
• Avoid: Avoid cluttered messaging; let the imagery do much of the communicating.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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