# Thebeamslondon · Design system migration spec

> Source: https://thebeamslondon.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a masterclass in using typography as a structural and expressive component rather than just a medium for text.

## 1. Identity DNA

The identity functions as a modern gallery program, using typography not merely as text but as the primary architectural material. Its structural logic is that of a cultural exhibition, where bold, experimental form explores the boundaries of visual communication.

**One-liner:** Experimental typography-driven cultural venue identity.
**Keywords:** cultural · bold · experimental · typographic · monochromatic
**Analogy:** A modern gallery program exploring the boundaries of visual communication.

## 2. Color

The palette is a strict monochromatic system, relying on the fundamental contrast between black (#000000) and white (#ffffff). A secondary off-white (#f5f5f5) provides a subtle tonal shift, ensuring all visual impact derives from form and value rather than color.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f5f5f5` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Strict monochromatic palette relying on high-contrast black and white for maximum visual impact.

This limitation is deliberate, forcing the layout and typography to carry the entire expressive weight.

## 3. Typography

The typographic voice is defined by Neue Haas Grotesk, a humanist-sans set at massive scales. Display text uses tight negative tracking to create a dense, structural pattern, while maintaining a uniform weight of 400 for a consistent, confident tone.

- **Display:** neue-haas-grotesk
- **Body:** neue-haas-grotesk

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 160px | 0.85 | 400 | -5px | Hero typography and massive repeated text elements |
| heading | 38px | 1.1 | 400 | -1px | Section headers and subheadings |
| body | 19px | 1.0 | 400 | 0px | Standard paragraph text and UI elements |

**Type rules:**
- Use tight negative tracking for display sizes.
- Maintain a uniform font weight of 400 across all scales.
- Keep line heights compact for display text but generous for readability at smaller sizes.

## 4. Spacing

A structured 4px base grid provides the underlying rhythm, scaling up to support the dominant typographic elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A structured 4px base grid that scales up to accommodate large typographic elements.

## 5. Surfaces

Surfaces are flat and unadorned, with depth conveyed solely through typographic scale and the edge-to-edge grid. Separation is achieved through thin, single-pixel black lines that define sections and input fields with graphic precision.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin, single-pixel black lines used to separate sections and define input fields.

## 6. Layout

The skeleton is a minimal, edge-to-edge grid that prioritizes massive typographic elements over traditional content blocks. This layout allows repeated phrases to become the visual and structural foundation of each section.

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

**Skeleton:** A minimal, edge-to-edge grid that prioritizes massive typographic elements over traditional content blocks.

## 7. Motion & Interaction

Motion is purposeful and minimal, reserved for a continuous horizontal marquee that animates repeated text elements. Interactive transitions are smooth, using cubic-bezier curves for subtle shifts in visibility or opacity.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.42, 0, 0.58, 1)`
- **Patterns:**
  - Continuous horizontal marquee scrolling for repeated text.
  - Subtle visibility transitions on interactive elements.

- **Hover:** Subtle opacity or color shifts.
- **Click:** Direct navigation or form submission.
- **Transition:** Smooth cubic-bezier transitions for transforms and visibility.
- **Keyboard:** Standard tab navigation supported.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and artistic, with headlines crafted as brief, impactful statements. Functional elements like calls to action are understated, existing as simple text links to avoid decorative distraction.

- **Tone:** Direct, confident, and artistic.
- **Headline style:** Brief, impactful statements that allow the typography to do the visual work.
- **CTA style:** Understated and functional, using simple text links.
- **Avoid:** Decorative elements / Colorful gradients / Rounded corners / Heavy shadows / Serif fonts / Emojis or playful icons

### Don'ts
- ❌ Don't use multiple colors — screenshot shows a strict monochromatic palette.
- ❌ Don't add border-radius to elements — screenshot shows sharp, square corners.
- ❌ Don't use serif fonts — screenshot shows a consistent use of Neue Haas Grotesk.
- ❌ Don't use drop shadows or soft depth effects — screenshot relies on flat planes.
- ❌ Don't clutter the layout with small components — screenshot uses large, open spaces.
- ❌ Don't use playful or decorative iconography — screenshot uses only essential symbols like '+' and '>'.

The system deliberately avoids decorative elements, playful iconography, and any form of rounded or soft-edged styling.

## System Prompt (paste into AI tool)

```
This site is an experimental digital presence for a cultural venue, using typography as the primary visual language. Key colors are #ffffff for the background and #000000 for ink, with a secondary #f5f5f5 background. The typography is a humanist-sans category, specifically Neue Haas Grotesk, used at massive scales with tight tracking. Critical don'ts include: do not add border-radius to any elements, do not use more than one font family, and do not introduce colorful accents or gradients.
```