---
name: Barbican
description: "The site is a prime example of high-end institutional design that successfully balances a strong brand identity with a content-rich, user-friendly experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1A1A1A"
  secondary: "#333333"
  tertiary: "#D14900"
  neutral: "#595959"
  bg-quiet: "#F5F5F5"
  muted-soft: "#999999"
  line: "rgba(26, 26, 26, 0.2)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 19px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.3
    fontWeight: 700
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#D14900`)** — uses `accent` token
- **Muted (`#595959`)** — uses `muted` token
- **Borders (`rgba(26, 26, 26, 0.2)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- 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.

## Layout

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

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

## Elevation & Depth

- rgba(0, 0, 0, 0.1) 0px 0px 10px 0px
- rgba(0, 0, 0, 0.05) 0px 0px 20px 0px inset
- Borders: 1px solid rgba(26, 26, 26, 0.2)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
This is a bold, institutional cultural arts centre website. It positions itself as a premier destination for music, theatre, and film, using a vibrant signature orange (#D14900) against deep blacks (#1A1A1A) and crisp whites (#FFFFFF). The typography is a strong, clean grotesque sans-serif (Supreme), with heavy weights for impactful headlines. Key features include full-bleed photographic hero sections, uppercase category tags (chips), and a clear, accessible navigation structure. Critical don'ts: avoid pastel colors, avoid overuse of drop shadows, avoid center-aligned text blocks, avoid decorative fonts, avoid overly rounded UI corners, and avoid hiding primary navigation.
```