# Barbican · Design system migration spec

> Source: https://www.barbican.org.uk  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

This design system is the blueprint for a metropolitan arts centre's digital presence—a structure built to house a diverse programme of music, theatre, and film. Its identity is architectural, using a stark, institutional palette and strong typography to frame immersive imagery rather than compete with it.

**One-liner:** A world-class arts centre website combining bold institutional branding with immersive event imagery.
**Keywords:** arts · culture · venue · performances · curation
**Analogy:** A prestigious metropolitan arts centre presenting a diverse programme of music, theatre, and film.

## 2. Color

The color system is built on high contrast, using a vibrant signature orange to punctuate a field of deep blacks and crisp whites. This stark duality is designed to act as a bold frame for high-impact photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F5F5F5` | quiet area |
| `--ink` | `#1A1A1A` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#595959` | placeholder |
| `--muted-soft` | `#999999` | weak hint |
| `--accent` | `#D14900` | single accent |
| `--line` | `rgba(26, 26, 26, 0.2)` | divider |

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

The principle is restraint and impact: color is used as a strategic accent, not a decorative fill.

## 3. Typography

The typographic voice is set by a strong, clean grotesque sans-serif, Supreme. Headlines command attention with heavy weights and tight tracking, while body text maintains authority with a slightly larger, highly legible base size.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero headlines |
| h2 | 40px | 1.1 | 700 | -0.5px | Section headers |
| body | 19px | 1.4 | 400 | 0 | Body text and descriptions |
| caption | 14px | 1.3 | 700 | 0.5px | Category tags and UI labels |

**Type rules:**
- 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.

## 4. Spacing

Rhythm is established through generous vertical spacing, creating generous breathing room for large-scale imagery and distinct content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Content flows with generous vertical spacing, giving large imagery room to breathe.

## 5. Surfaces

Depth is implied sparingly through minimal borders and subtle, large-area shadows. Surfaces feel solid and defined, relying on the stark palette for separation rather than ornate decoration.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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)

## 6. Layout

The layout is anchored by a strong central column that holds the core narrative content. This structure is deliberately broken by full-bleed imagery, creating dramatic, editorial moments that command the viewport.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as a professional courtesy, with smooth fades and slides for content reveals that maintain poise. Interactivity is confirmed through subtle, immediate feedback on buttons and hover states.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle transitions on interactive elements like buttons and hover states.
  - Smooth fades or slides for content sections as they enter the viewport.

- **Hover:** Subtle changes in opacity or background color for buttons and links.
- **Click:** Immediate visual feedback, often a slight scale reduction or color shift.
- **Transition:** Standardized transitions (e.g., 0.2s ease-in) for background and box-shadow changes.
- **Keyboard:** Focus states are clearly visible, often using a distinct outline or color change to ensure accessibility.

## 8. Voice & Don'ts

The editorial voice is authoritative and welcoming, using direct, descriptive language that respects the prestige of the cultural programme. Clarity is paramount, with messaging that guides rather than shouts.

- **Tone:** Authoritative, welcoming, and culturally rich.
- **Headline style:** Direct, engaging, and often descriptive of the artistic content.
- **CTA style:** Action-oriented and clear, guiding the user towards specific events or information.
- **Avoid:** Avoid overly casual or trendy language that might undermine the venue's prestige. / Avoid cluttered messaging; let the imagery do much of the communicating.

### Don'ts
- ❌ 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.

They deliberately avoid trendy language, decorative typography, and muted palettes that would dilute the institution's bold, clear identity.

## System Prompt (paste into AI tool)

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