The Web Design of Assembly Coffee London

Assembly Coffee London pairs high-contrast ID00 Serif type and dark-mode e-commerce layouts in a sharp web design for the Brixton roaster.

Most specialty coffee stores online lean on the same tired playbook of beige craft-paper backgrounds and generic Shopify templates. Assembly Coffee goes the opposite direction. Based in Brixton and marking ten years of roasting with its Assembly | 10 monogram, the London team treats its digital storefront like an art-directed print journal. Right at the top of the viewport, a slim cream utility strip logs a live production metric: Coffees Released Since Launch: 353. Below that, a pitch-black header anchors pill-shaped navigation triggers for Coffee, Equipment, Accessories, and Learning. It is a rare example of e-commerce web design where every utility detail feels considered.

Editorial Typography and Web Design

The type pairing does the heavy lifting here. High-contrast display headers and italic lot titles are set in ID00 Serif, while neo-grotesque metadata, pricing pills, and tasting notes run in GT America Standard. Look closely at the custom wordmark and the anniversary numeral in the footer: horizontal stencil cuts slice cleanly across the crossbar of the capital A and the middle of the 10. In the hero viewport, an interactive vertical index on the left lets visitors toggle between the Colombia CGLE Honey Geisha, the House Selection, and the Panama and Guatemala blend without leaving the frame. This restrained web design keeps the focus squarely on roast provenance and flavor notes.

Scrolling down into the two-column product grid, the dark-mode canvas makes the physical packaging pop. Matte black coffee boxes sit on warm terracotta studio surfaces, accented by fluorescent pink and yellow tasting labels that read Raspberry + Jasmine + Tea-like. Nothing in the grid feels crowded. Lower sections shift smoothly from dark catalog cards to warm olive and off-white editorial spreads covering SCA sensory training at the Brixton HQ, Mió Brazilian Cold Brew Concentrate, and partner cafes like Omotesando Koffee and Miel. Even the footer turns into a graphic poster, stretching the stencil-cut wordmark edge to edge across the black screen.

Explore the full feature on Assembly Coffee.