---
name: Thebeamslondon
description: "This site is worth including as a masterclass in using typography as a structural and expressive component rather than just a medium for text."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  neutral: "#000000"
  bg-soft: "#f5f5f5"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: neue-haas-grotesk
    fontSize: 160px
    lineHeight: 0.85
    fontWeight: 400
    letterSpacing: "-5px"
  heading:
    fontFamily: neue-haas-grotesk
    fontSize: 38px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: neue-haas-grotesk
    fontSize: 19px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

Experimental typography-driven cultural venue identity.

*A modern gallery program exploring the boundaries of visual communication.*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#000000`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* A structured 4px base grid that scales up to accommodate large typographic elements.

## Elevation & Depth

- Borders: Thin, single-pixel black lines used to separate sections and define input fields.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimal text-based links with a '>' suffix.
- **card:** Not present, layout uses full-width sections.
- **chip:** Not present.
- **input:** Single-line text input with a bottom border only.
- **hero:** A massive typographic treatment where a phrase is repeated vertically to create a structural pattern.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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