Tickets
Book MORE tickets

Design system

More is more (with rules)

How the Loud House website lets designers break the rules safely: a loud frame of colour, pattern and collage around quiet, consistent facts.

Book tickets

Visit Loud House

Open today

Free entry to the gallery. MORE is ticketed.

Opening hours

Every day
10:00 – 18:00
Fridays
10:00 – 21:00
Quiet hours
Tue & Sun, 10:00 – 11:00

MORE tickets

Adult
£18
Concessions
£9Students, 65+, jobseekers, disabled visitors
Under-12s
Free
Members
Free
Book tickets

Plan your visit

Access

Getting here

3 Dye Works Yard, London E9 5LH
Hackney Wick Overground, 4 min walk

Rules for breaking rules

  1. Text only ever sits on a solid tone block, never directly on a pattern, collage or artwork.
  2. At most three patterns and one collage cluster in any viewport (two clusters on wide screens).
  3. Essential information lives in the information panel: same content model, same place, every page.
  4. Editors choose section presets, not colours. Every preset is contrast-checked at build time.
  5. Up to four typefaces, each with one job. Body text and the information panel are always Inter.
  6. Clashes are deliberate: repeat a few motifs (checks, stickers, hard shadows) so the noise reads as one voice.
  7. Everything decorative is marked data-decor and disappears in calm mode.

Colour

  • --hot-pink#FF3EA5Primary exhibition colour
  • --electric-orange#FF6A13Clash accent
  • --cobalt#1F3FFFClash accent, links on light panels, calm-mode accent
  • --acid-yellow#F4FF3EHighlight blocks, stickers, the Tickets button
  • --leaf#00A86BPattern fills only
  • --black#111111Text and outlines
  • --cream#FFF6E6Information panel and calm mode background

Approved tones

Every block of text sits on one of these six tones. Ratios are calculated from the tokens on every build; anything under 4.5:1 fails the build.

  • pink

    Aa

    Text
    5.8:1
    Links
    5.8:1
    Accent
    5.8:1

  • orange

    Aa

    Text
    6.6:1
    Links
    6.6:1
    Accent
    6.6:1

  • yellow

    Aa

    Text
    17.3:1
    Links
    6.0:1
    Accent
    6.0:1

  • cobalt

    Aa

    Text
    6.1:1
    Links
    6.1:1
    Accent
    6.0:1

  • cream

    Aa

    Text
    17.6:1
    Links
    6.1:1
    Accent
    6.1:1

  • black

    Aa

    Text
    17.6:1
    Links
    17.3:1
    Accent
    5.8:1

Four faces, four jobs

Exhibition title · Rubik Mono One · 64 → 220px
More
Section headlines · Playfair Display Italic 900 · 32 → 96px
Too much colour
Labels and stickers · Space Mono · 13 → 16px
Room 04 · Late · 14 weeks only
Body and information panel · Inter · 16 → 18px
Arrive any time in your 30-minute slot, then stay as long as you like.

Eight patterns

Seamless SVG tiles drawn on a 100-unit grid, coloured from the palette, and served as data URIs of a few hundred bytes each.

  • checks
  • squiggles
  • dots
  • stripes
  • leopard
  • confetti
  • grid
  • zigzag

Section presets

What editors choose from in the CMS: a pattern, the tone that carries text over it, and an optional collage cluster.

  • Sample text 17.3:1Hero: pink × orange checkshero-clash · collage: hero
  • Sample text 17.3:1Home hero: cobalt × pink stripeshome-clash · collage: home
  • Sample text 5.8:1Room: squiggles on yellowroom-squiggle
  • Sample text 17.6:1Room: pink dots on cobaltroom-dots
  • Sample text 17.3:1Room: electric leopardroom-leopard
  • Sample text 5.8:1Room: green grid at nightroom-grid
  • Sample text 17.6:1Room: pink × orange stripesroom-stripes
  • Sample text 6.1:1Room: zigzag finaleroom-zigzag
  • Sample text 17.6:1Events: confetti on creamevents-confetti
  • Sample text 17.6:1Shop: yellow dots on orangeshop-dots · collage: shop
  • Sample text 17.6:1Membership: cobalt zigzag on yellowmember-zigzag
  • Sample text 17.6:1Footer: confetti on blackfooter-confetti
  • Sample text 6.1:1Quiet: fine grid on creamquiet-grid
  • Sample text 17.6:1Leopard on pinkleopard-pink
  • Sample text 17.3:1Cobalt × cream checkschecks-cobalt
  • Sample text 17.6:1Squiggles on greensquiggle-leaf

Collage & calm

Cluster: hero · 4 / 6 / 8 pieces by screen size

Calm mode

One switch removes every pattern, collage piece, sticker and animation, and redraws every tone as black on cream with cobalt as the single accent. It turns on automatically for visitors who ask their device for more contrast, is remembered for the session, and can be linked to directly with ?calm=1.