Skip to content
Library

Assembly Coffee London. Embers in a dark roastery.

  • Commerce
  • Dark theme
  • 13 colors
  • 4 typefaces

Assembly Coffee's visual system reads like an editorial magazine printed on black paper. The interface is overwhelmingly dark — near-black canvases carry everything — interrupted only by product photography lit against warm studio backdrops (ember-red, deep amber) and hairline typography in white. Two type families do all the work: a geometric sans (GT America) for UI scaffolding, navigation, and metadata, and a refined serif (ID00 Serif) for product names, section labels, and editorial copy, almost always in italic, which turns a functional nav list into a curated index. The palette is almost monochromatic: the chromatic vocabulary is rationed to badge fills (pale yellow, sage green, antique gold) and the occasional warm-tinted cream surface. Buttons are not loud — price chips and 'Shop Now' links live as small text or pill-shaped cream labels. Components are thin, sharp-cornered, and rely on borders and weight contrast rather than shadows or fills for separation.

Screenshot of Assembly Coffee London
Captured from assemblycoffee.co.uk on October 11, 2026

Assembly Coffee London design system

Assembly Coffee London

Accent1

  • Accent stroke and border for promotional or limited-availability badges. Reads as aged brass — never neon

Neutrals10

  • Deepest surface, borders, and type. Used for maximum-contrast outlines, product box photography backgrounds, and the darkest UI strokes

  • Primary canvas — page backgrounds, hero sections, card surfaces. The near-black with a faint green undertone makes white type glow without feeling sterile

  • Secondary surface and border tone — slightly lifted from black for subtle layering on nav, dividers, and outlined button edges

  • Mid-neutral for secondary text, input borders, and card outlines where pure black is too heavy

  • Dark olive link/announcement background — the deep green-brown of the top bar, grounded and earthy

  • Image placeholder and muted background tone — holds space where product photography is loading or absent

  • De-emphasized borders and helper text on light surfaces

  • Hairline borders, dividers, input outlines, and card edges on light surfaces.

  • Warm off-white surface for inverted sections, price pill backgrounds, and soft button fills. Sits between bone and the khaki family

  • Primary text on dark canvases, price-chip fills, inverted button surfaces. The brightest accent in an otherwise low-key palette

semantic2

  • Green state accent for badges, validation surfaces, and short status labels.

  • Yellow state accent for badges, validation surfaces, and short status labels.

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pure Black on Antique Gold

9.10 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.