---
title: "The Beams design system"
variant: extended
source: https://thebeamslondon.com/
captured_at: 2026-10-12
theme: light
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/thebeamslondon-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# The Beams · Design System

> Monochrome type meets raw industrial atmosphere

**Theme:** light · **Industry:** entertainment · **Source:** https://thebeamslondon.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

The Beams homepage pairs an almost entirely black-and-white interface with oversized, overlapping typography and cinematic industrial footage. A compact navigation and sparse newsletter area frame the immersive hero without competing with it.

## North star

Keep the interface rigorously black and white, and let oversized typography and industrial footage provide all the drama.

## Overview

The interface is built on a strict two-colour foundation: White Canvas (#ffffff) fills the page, while Black Ink (#000000) carries nearly all text, navigation, and fine rules. The screenshot’s greys and dark tones belong primarily to the industrial video, rather than an expanded UI palette. Neue Haas-style sans serif typography is used at regular weight throughout; the hero enlarges and repeatedly overlays its message to create a dense, kinetic typographic image. In contrast, navigation, body copy, and newsletter details remain small and restrained. The layout begins with a slim, ruled header, then gives the hero generous white space before a full-width video. Supporting copy sits in a simple two-column row, followed by a newsletter block with a large left-aligned heading and compact form details. Sections feel flat and unadorned: hairlines define boundaries, while imagery supplies depth and atmosphere.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| White Canvas | `#ffffff` | `--color-white-canvas` | surface | Page canvas and open hero field; also appears in the outlined signup control and as text over dark footage. |
| Black Ink | `#000000` | `--color-black-ink` | brand | Primary typography, navigation, links, and the thin rules separating the header and newsletter area. |

### Semantic aliases

`--color-canvas` → `#ffffff` (White Canvas) · `--color-text` → `#000000` (Black Ink) · `--color-border` → `#000000` (Black Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NeueHaas-web | `--font-body` | webfont | 400 | Display, headings, navigation, body copy, buttons, and links | Inter |

- **NeueHaas-web:** Regular weight throughout; display text is tightly tracked and dramatically oversized, while navigation is mixed case and signup text is uppercase.

### Type scale — Custom (ratio ≈ 1.703, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 400 | 0.9 | -0.03em | — | NeueHaas-web | Oversized repeated hero statement |
| h1 | 95px | 400 | 0.9 | -0.03em | — | NeueHaas-web | Primary hero heading |
| h2 | 38px | 400 | 1 | 0 | — | NeueHaas-web | Newsletter heading and major section titles |
| h3 | 28.5px | 400 | 1 | 0 | — | NeueHaas-web | Supporting section headings |
| body | 19px | 400 | 1 | 0 | — | NeueHaas-web | Introductory and newsletter copy |
| button | 28.5px | 400 | 1 | 0 | — | NeueHaas-web | Prominent signup and sound controls |
| nav | 19px | 400 | 1.95 | 0 | — | NeueHaas-web | Header navigation and brand labels |
| link | 19px | 400 | 1 | 0 | — | NeueHaas-web | Inline policy and footer links |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 6, 10, 11, 13, 15, 19, 40, 46, 48, 57, 135, 190 px.
- Section rhythm 48px · element gap 19px · card padding — · max content width 1402px.

A centered, narrow header row spans the viewport, with the BEAMS label at left, venue descriptor centered, and a plus control at right. The measured page maximum width is 1402px. The hero is a large white typographic field above a full-bleed video; beneath it, introductory copy aligns into two columns. A generous section break leads to a single-column newsletter area. The overall density is comfortable, with strong contrast between expansive media and compact utility content.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-out` on interactive elements.

The page is flat, with no measured shadows, gradients, or rounded component corners. Thin black hairlines separate the header and newsletter/footer content. Use alignment, white space, full-width media, and stark tonal contrast to establish layers rather than cards or raised surfaces.

## Imagery

A full-bleed video presents a dim, raw industrial interior. Its near-black setting and subdued details contrast with the bright typographic field above. Small sound controls sit over the footage, with a signup link positioned toward the right. Treat this footage as atmospheric venue imagery; the measured grey and charcoal tones are not additional interface palette colours.

## Components

### Slim header navigation

A white, full-width header with a fine black bottom rule, brand label at left, centered venue descriptor, and plus control at right.

### Typographic hero

A spacious white hero field with a large, tightly tracked statement repeated in overlapping lines as the dominant visual.

### Industrial video

Full-width, dark venue footage with compact sound controls at lower left and an outlined uppercase SIGN UP control toward the right.

### Introductory copy

Two short statements arranged as a simple two-column row directly after the video.

### Newsletter form

A large left-aligned Subscribe heading paired with compact explanatory copy, an email input, and a sign-up link.

### Footer details

Small social, contact, legal, and brand details organized in a compact row beneath a fine divider.

### Measured component styles

- **Primary button** (“SIGN UP”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 0px 40px 0px 15.2px · 400 19.0476px NeueHaas-web · uppercase
- **Link** (“Privacy & Cookies Policy”): transparent background · text #000000 · radius 0px · padding 0px · 400 19.0476px NeueHaas-web
- **Input**: transparent background · text #000000 · radius 0px · padding 0px 0px 5.7px 0px · 400 19.0476px NeueHaas-web
- **Navigation item** (“BEAMS”): transparent background · text #000000 · radius 0px · padding 0px · 400 19.0476px NeueHaas-web

## Do

- Use White Canvas (#ffffff) as the dominant page surface.
- Set core text and rules in Black Ink (#000000).
- Make the hero statement unusually large and visually layered.
- Use full-bleed industrial footage as the main atmospheric image.
- Keep navigation and newsletter details compact and quiet.
- Separate major areas with fine rules and generous open space.

## Don't

- Do not introduce unmeasured accent colours into the interface.
- Do not add gradients, shadows, or rounded card styling.
- Do not place the hero inside a boxed or elevated card.
- Do not let supporting copy compete with the hero typography.
- Do not treat video colours as the brand palette.
- Do not overcrowd the header or newsletter form.

## Agent prompt

Build a new page in The Beams visual style using White Canvas (#ffffff) for the dominant surface and Black Ink (#000000) for typography, links, navigation, and hairline rules. Use a clean regular-weight sans serif close to Neue Haas Grotesk, with restrained tracking for utility text and tightly tracked, oversized display type for the primary statement. Create a slim, ruled header, an expansive white hero, and a full-bleed industrial venue video or image. Keep supporting copy in simple aligned columns and make forms compact and unboxed. Use generous open space, flat surfaces, and crisp alignment; avoid decorative colour, gradients, shadows, and rounded cards. Let the contrast between blank white space, dense black typography, and dark venue imagery carry the identity.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Oversized centered typography on white, followed by full-bleed video and a two-column copy row. | sound on/off control, signup link | overlapping display text, full-width dark video, white text over footage |
| 2 | newsletter | Single-column white section with a large heading and compact form details. | email address input, sign-up link, privacy information | fine top rule, large left-aligned heading, minimal unboxed form |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/thebeamslondon-com