Ink
#000000Primary text, all borders, structural rules, button text and outlines — the only chromatic signal in the system
The Beams
thebeamslondon.com
Website preview
The design language
The Beams is an editorial monolith: pure black ink on pure white paper, where typography does all the heavy lifting. A single weight 400 sans-serif scales from 19px body copy to 160px display, with line-heights that compress dramatically at large sizes (0.90 at display) to let letterforms overlap and collide — the signature visual. No shadows, no rounded corners, no gradients, no accent color: the design system strips UI to ink, paper, and an occasional full-bleed photograph. Density is generous and unhurried, sections separated by vast whitespace rather than dividers. The only interaction is text on text, cursor on canvas — a cultural venue that presents itself as a magazine spread rather than a website.
Color palette
neutral
Paper
#ffffffPage canvas, surface backgrounds, button interiors, inverse text on dark photography
Typography
Type scale
Major Third (1.25) · 16px basedisplay
160px · 400 · 0.9 · -4.8px trackingThe quick brown fox jumps
text-95
95px · 400 · 0.9The quick brown fox jumps
heading-sm
38px · 400 · 1.1 · -1.14px trackingThe quick brown fox jumps
subheading
29px · 400 · 1.95 · -0.87px trackingThe quick brown fox jumps
body
19px · 400 · 2.9 · -0.57px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
NeueHaas-web
- Weights
- 400
- Sizes
- 19px, 29px, 38px, 95px, 160px
- Line height
- 0.90, 1.00, 1.10, 1.95, 2.90
- Letter spacing
- -0.03em at all sizes
- Fallback
- Neue Haas Grotesk Display Pro, Inter (weight 400), Helvetica Neue
Sole typeface across every role: 19px body, 29px subheading, 38px secondary heading, 95px hero display, 160px editorial display. Weight stays at 400 (regular) even at maximum scale — the system derives hierarchy from size and line-height compression, never from boldness. Tracking tightens to -0.03em universally. At display scale (160px), line-height drops to 0.90 so lines physically overlap, creating layered typographic compositions rather than stacked headlines.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 6px
- Section gap
- 120px
- Card padding
- 19px
- Element gap
- 19px
Border radius
tags
0pxcards
0pximages
0pxinputs
0pxbuttons
0pxSpacing scale
6px11px19px46px257pxGuidelines
Do
- Use only #000000 and #ffffff — no gray, no accent, no tint. Every element must commit to full black or full white.
- Set every text element to weight 400; derive hierarchy from size and line-height compression, never from boldness.
- Set letter-spacing to -0.03em on all text regardless of size.
- Compress line-height at display sizes (0.90–1.00 at 95px and above) to let lines overlap and form typographic compositions.
- Use 1px solid #000000 borders for all structural elements — dividers, button outlines, input underlines, list separators.
- Set border-radius to 0 on every component — buttons, inputs, images, cards. Sharp corners only.
- Bleed photographs and display text edge-to-edge. Never frame an image with a border, shadow, or margin.
Don’t
- Never introduce a chromatic color, gradient, or shadow — the system is strictly binary.
- Never use font-weight above 400; no bold, no medium, no semibold variants.
- Never round corners on any element — buttons, cards, inputs, and images stay perfectly square.
- Never use a color or background highlight to indicate hover or active states — change nothing, or thicken the existing border.
- Never stack display headlines with generous line-height; the overlap at 0.90 is the signature, not a bug.
- Never add padding or margin to display text; let the 160px type bleed to its container edges.
- Never add decorative elements — no icons beyond single glyphs, no illustrations, no patterns, no dividers beyond 1px rules.
Components
Editorial Display Headline
Hero typographic statement160px NeueHaas-web weight 400, line-height 0.90, letter-spacing -0.03em, color #000000 on #ffffff. Lines overlap intentionally — multiple phrases layered at the same position create a typographic texture rather than a stacked headline. No margin or padding around the composition; it bleeds to container edges.
Outlined Action Button
Primary call-to-action (e.g. SIGN UP)1px solid #000000 border, transparent background, #000000 text. Padding 11px top/bottom, 19px left/right (matches base unit). Typography: 19px NeueHaas-web weight 400. No radius. No fill state changes. A trailing arrow glyph (↗) sits inside the button as part of the text label.
Minimal Top Navigation
Site headerWhite background, no border, no background fill. Brand mark "BEAMS" in 19px weight 400 left-aligned. Center title in same weight, sentence-case. Right-side single-character icon ("+") as the only interactive element. No sticky behavior implied; sits at the very top of the page.
Two-Column Body Block
Narrative text pairTwo equal columns separated by whitespace (no divider, no gutter rule). Each column: 29px NeueHaas-web weight 400, line-height 1.95, #000000, -0.03em tracking. Left column carries the lead statement in shorter form; right column expands with supporting prose. Generous vertical breathing room (120px+) above and below.
Full-Bleed Photographic Section
Atmospheric content momentEdge-to-edge image (no border-radius, no margin, no frame). Overlays sit as text directly on the photograph. The button variant anchored to the top-right corner uses the Outlined Action Button style but in white outline + white text against the dark photographic area. A "Sound on/off" toggle in the bottom-left uses 19px body type, no background, no border — just text.
Body Paragraph
Standard running text19px NeueHaas-web weight 400, line-height 2.90 (extremely generous), color #000000, letter-spacing -0.03em. No first-line indent, no paragraph spacing beyond line-height. The 2.9 ratio on 19px produces ~55px line height — an editorial luxury-magazine measure.
Inline Link
Navigable textInherits body typography. No underline by default, no color change — the only signal is the 1px bottom border in #000000 applied directly to the text. Border sits tight to the baseline rather than the descender.
List Item
Navigation or content list19px body type, 1px solid #000000 bottom border per item. Vertical padding 11px. No bullets, no markers — the border itself provides structure. Stacked items read as a typographic index.
Form Input
Text entry fieldTransparent or #ffffff background, 1px solid #000000 bottom border only (no full border box), 19px body type, no placeholder color treatment beyond a lighter opacity. Padding 6px vertical. No focus ring, no box-shadow on focus — the existing border thickens or color inverts.
Footer Block
Closing content areaWhite background, no border. Body text and list items in 19px weight 400. 46px top margin separates footer from preceding content. 19px column gap between footer items. Structure: text columns rather than a framed panel.
Surfaces & elevation
Level 1
Paper
#ffffffPage canvas, the only surface in the system
The system uses zero elevation. No shadows, no glows, no z-axis depth. Dimensionality comes entirely from typographic overlap at display scale and from full-bleed photography replacing flat surface. Every element sits flush on the paper.
Layout & imagery
Layout
Full-bleed, edge-to-edge composition with no max-width container. The hero is a centered overlapping typographic block with no supporting visual; subsequent sections alternate between full-bleed photography and white-text-only blocks. Content below photography uses a two-column layout (split roughly 1:1) with no gutter rule — separation is whitespace alone. Navigation is a single thin top bar with three text elements left/center/right. No sidebar, no grid of cards, no pricing table. The page reads as a vertical sequence of full-width sections separated by 100–120px of white space. No sticky elements, no floating UI.
Imagery
Photography is the sole non-typographic visual element. Treatment is full-bleed, edge-to-edge, uncropped, no border-radius. Imagery carries dramatic, atmospheric content — long-exposure light trails, warm amber beams cutting through dark interiors — and acts as emotional punctuation between white typographic sections. No icons, no illustrations, no decorative graphics. Image-to-text ratio is low: one or two photographs per page, each large enough to dominate its section.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - border: #000000 - primary action: no distinct CTA color **Example Component Prompts** 1. *Editorial hero headline:* Render "Centre For New Culture" at 160px NeueHaas-web weight 400, color #000000, line-height 0.90, letter-spacing -0.03em on a #ffffff background. Layer two additional instances of the same phrase at the same size and position with slight vertical offset to create an overlapping typographic composition. No padding, no margin — bleed to container edges. 2. *Outlined action button:* Build a button with transparent background, 1px solid #000000 border, #000000 text reading "SIGN UP ↗" in 19px NeueHaas-web weight 400, letter-spacing -0.03em. Padding 11px vertical, 19px horizontal. Border-radius 0. Position top-right of a full-bleed dark photographic section; invert the border and text to #ffffff against the dark image. 3. *Two-column narrative block:* Two equal-width columns of 29px NeueHaas-web weight 400 body text, line-height 1.95, color #000000, letter-spacing -0.03em on #ffffff. No visible divider between columns — 60–80px of whitespace separates them. Left column: 6–8 word lead statement. Right column: 2–3 sentences of supporting prose. 120px white space above and below the block. 4. *Full-bleed atmospheric photograph:* Edge-to-edge image filling the full viewport width, no border, no border-radius, no margin. A short text overlay in 19px weight 400 sits in the bottom-left ("Sound on/off"); an outlined action button sits in the top-right. The photograph should carry dramatic directional light (beams, rays, shafts) in warm amber/orange tones against a dark interior. 5. *Minimal top navigation:* A single horizontal bar, 19px NeueHaas-web weight 400, #000000 on #ffffff, no border, no background fill. Left: "BEAMS". Center: page title in sentence case. Right: a single "+" glyph. No hover states, no dropdowns, no sticky behavior.
Typographic Composition Rules
The system produces visual interest through three typographic moves that should be used deliberately: 1. **Overlap at display scale** — when text exceeds 95px, the 0.90–1.00 line-height causes lines to physically touch and overlap. Use this for hero and section-opening headlines, never for body or subheading. 2. **Layered repetition** — a phrase repeated at the same position with slight offset creates texture and emphasis without adding a second visual element. This is the system's only form of typographic emphasis. 3. **Uniform tracking** — -0.03em applies at all sizes. The visual tightness is consistent from 19px body to 160px display, which is what makes the system feel cohesive despite the extreme size range.
Similar brands
Vitra
Same editorial minimalism — near-zero UI chrome, photography as atmosphere, and typography-as-hero at extreme display scale.
Apple iPhone Pro (product page)
Full-bleed dark photography punctuated by stark white type, no borders or shadows, single-weight display type.
Magazine Antidote (creative agency)
Overlapping display headlines on white, binary black/white palette, and a magazine-spread approach to web layout.
Galerie Kreo
Cultural/gallery presentation with zero decorative UI, weight 400 display type at enormous scale, and full-bleed imagery.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
