Antique Gold
#cfa53bAccent stroke and border for promotional or limited-availability badges. Reads as aged brass — never neon
Assembly Coffee London
assemblycoffee.co.ukWebsite preview
The design language
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.
Color palette
accent
neutral
Obsidian
#0e1311Primary canvas — page backgrounds, hero sections, card surfaces. The near-black with a faint green undertone makes white type glow without feeling sterile
Pure Black
#000000Deepest surface, borders, and type. Used for maximum-contrast outlines, product box photography backgrounds, and the darkest UI strokes
Ash Charcoal
#1a1a1aSecondary surface and border tone — slightly lifted from black for subtle layering on nav, dividers, and outlined button edges
Graphite
#333333Mid-neutral for secondary text, input borders, and card outlines where pure black is too heavy
Stone Gray
#808080Image placeholder and muted background tone — holds space where product photography is loading or absent
Silver
#b3b3b3De-emphasized borders and helper text on light surfaces
Bone
#ffffffPrimary text on dark canvases, price-chip fills, inverted button surfaces. The brightest accent in an otherwise low-key palette
Linen
#f6f7f2Warm off-white surface for inverted sections, price pill backgrounds, and soft button fills. Sits between bone and the khaki family
Sand Khaki
#dfdbcaHairline borders, dividers, input outlines, and card edges on light surfaces.
Olive Bark
#4d4a31Dark olive link/announcement background — the deep green-brown of the top bar, grounded and earthy
semantic
Lichen Green
#cadcacGreen state accent for badges, validation surfaces, and short status labels.
Citron
#faf080Yellow state accent for badges, validation surfaces, and short status labels.
Typography
Type scale
Major Second (1.125) · 16px basedisplay
42px · 300 · 1.2The quick brown fox jumps
heading-lg
36px · 300 · 1.2The quick brown fox jumps
heading
30px · 300 · 1.25The quick brown fox jumps
text-24
24px · 400 · 2The quick brown fox jumps
text-22
22px · 400 · 1The quick brown fox jumps
heading-sm
21px · 400 · 1.25The quick brown fox jumps
text-20
20px · 400 · 0.75The quick brown fox jumps
subheading
18px · 300 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
GT America Standard
- Weights
- 300, 400, 500, 600
- Sizes
- 11, 12, 13, 14, 16, 18, 20, 21, 24, 42px
- Line height
- 1.20, 1.25, 1.40, 1.50, 2.00
- Fallback
- Inter, Söhne, or Neue Haas Grotesk
The UI workhorse: navigation labels, body copy, button text, metadata, footer text, cart count, form fields. Weight 400 for body, 500 for nav items, 600 sparingly for tiny uppercase labels like 'FEATURED'. At 11–14px it carries the entire structural layer.
Additional typeface
ID00 Serif
- Weights
- 300, 400
- Sizes
- 16, 18, 30, 36, 42px
- Line height
- 1.00, 1.20, 1.25, 1.50
- Fallback
- GT Sectra, Cormorant Garamond Italic, or Playfair Display Italic
The editorial voice: product names, section headings, the 'Shop Now' and 'Limited Time Offer' labels in the hero, the 'Independent specialty coffee roaster…' manifesto copy. Almost always set in italic — this is the signature move. The italic serif against a black canvas is what makes the site read as a curated coffee journal rather than a store.
Additional typeface
Helvetica
- Weights
- 400, 500
- Sizes
- 11, 14px
- Line height
- 1.50
- Fallback
- system-ui, -apple-system, Arial
Fallback / system substitute for small tertiary text and icons where GT America is not loaded.
Additional typeface
reviewsio-font
- Weights
- 400
- Sizes
- 15px, 16px, 22px, 24px
- Line height
- 1
reviewsio-font — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1400px
- Section gap
- 80px
- Card padding
- 20px
- Element gap
- 16px
Border radius
nav
4pxcards
4pxbadges
4pxinputs
4pxbuttons
4pxpricePills
60pxSpacing scale
2px3px4px5px8px9px10px11px12px14px16px18px20px24px25px30px32px40px48px64px80px96px119px160pxGuidelines
Do
- Set headlines and product names in ID00 Serif italic — the italic serif is the brand's voice. Setting them in roman or in the sans destroys the editorial feel.
- Keep the canvas near-black (#0e1311 or #000000) and let bone (#ffffff) type carry the hierarchy. Reach for colored surfaces only for inverted sections or badge fills.
- Use 4px radii on cards, buttons, inputs, and badges. The 60px radius is reserved exclusively for the cream price pill — do not apply it to other components.
- Place product photography on warm, low-lit studio backdrops (ember red, dark amber, charcoal). Avoid white or bright backgrounds — they break the dark-gallery mood.
- Use badge colors (citron #faf080, lichen #cadcac, antique gold #cfa53b) sparingly and only for editorial tags, not for actions or alerts.
- Make CTAs typographic links in ID00 Serif italic, not filled buttons. A 4px-radius ghost button is acceptable only for secondary utility actions like the cart selector.
- Separate layers with 1px hairlines in #1a1a1a or #dfdbca, not with shadows. The system runs on border contrast, not elevation.
Don’t
- Do not introduce a filled chromatic CTA button. The system is intentionally CTA-less at the primary level — actions are italic serif links.
- Do not set body copy or navigation in the serif. GT America is for UI; ID00 Serif is for editorial and product naming. Mixing the two roles dilutes both.
- Do not use bright white (#ffffff) as a page background. The system is dark-first; invert only for price chips, modal overlays, and the rare light section.
- Do not apply saturated brand colors to backgrounds, cards, or text. The chromatic palette exists only as small badge fills and hairlines.
- Do not use large drop shadows. The 10px blur at 5% opacity is the ceiling — anything heavier reads as Material/iOS, not editorial gallery.
- Do not set headlines in weight 600 or 700. The serif runs 300–400 italic and the sans runs 400–500. Anything bolder breaks the whisper-quiet tone.
- Do not place product photography on a white or light-gray background. Always shoot against a warm, dark studio tone to maintain the ember-roastery atmosphere.
Components
Announcement Bar
Top-of-page utility stripFull-bleed bar at the very top, olive-bark background (#4d4a31) with cream text. GT America 11–13px, centered, single line. Used for shipping thresholds and time-sensitive messaging.
Primary Header / Nav
Site-wide navigationSticky dark header on #0e1311. Left: monogram + '10' (10th anniversary mark) in bone serif. Center: nav items in GT America 14px weight 500 (Coffee, Equipment, Accessories, Learning) with dropdown indicators, separated by a vertical hairline. Right: search icon, 'Log In' text link, cart count in parentheses, currency selector. Border-bottom 1px in #1a1a1a.
Editorial Hero — Featured Column
Left-side hero indexOn dark gradient background (black → ember red), a vertical stack of four editorial entries. Each entry: product name in ID00 Serif italic 18–21px, bone (#ffffff); call-to-action subtext in GT America 13–14px weight 400, slightly dimmed. 'FEATURED' label in GT America 11px uppercase letter-spaced at the top. Entries are typographic links, not cards — generous vertical spacing (40–56px between entries) turns the index into a table of contents.
Product Hero — Studio Photograph
Right-side hero visualLarge product photograph (a black coffee box, 60% of viewport height) on a warm ember-red studio backdrop with soft floor shadow. No text overlay. The object is the hero; the UI defers to it.
Editorial Manifesto Block
Brand statement sectionFull-width black (#0e1311) section. Centered or left-aligned ID00 Serif italic 30–36px, bone color, weight 300–400. Generous line-height (1.2). No buttons, no links — the prose IS the content.
Product Card (Dark)
Catalog product tileBlack or near-black background. Product photograph fills the upper 60–70% of the card on a warm-tinted studio backdrop. Product name in ID00 Serif italic 21–24px bone. Tasting notes in GT America 13–14px #b3b3b3. Price pill anchored bottom-left. Hairline border 1px in #1a1a1a, radius 4px.
Price Pill
Inline price chipLinseed off-white (#f6f7f2) pill, border-radius 60px (near-full). Text 'From — €XX.XX' in GT America 13px weight 500, #0e1311. Horizontal padding 12–16px, vertical 6–8px. Sits inline with product name or floats bottom-left of a card.
Editorial Tag Badge
Category / status labelSmall pill, radius 4px, padding 4px 8px. Text GT America 11px weight 500 uppercase, #0e1311. Background fills: #faf080 for 'New Release', #cadcac for 'Elevated Brewing' / editorial categories, #cfa53b stroke for limited-edition or special-release items. Always bone or #0e1311 text — never chromatic text on chromatic background.
Outlined Text Button
Primary navigation actionNo filled CTA. 'Shop Now' and similar actions are ID00 Serif italic 16–18px bone, no border, no background — pure typographic links. Underline appears on hover.
Search Icon Button
Header utility24px line icon, bone stroke, no background, 8px hit area padding. In the right-side header cluster.
Cart Indicator
Header utilityText-only 'Cart (0)' in GT America 14px weight 500 bone, parentheses around the count, no badge or pill — restraint over notification badges.
Pairing Banner (Red Box)
Co-branded event blockLarge deep-red (#7a1212 approx) framed block containing partner logos at top, event title in GT America uppercase, product name in ID00 Serif 30px, event date at bottom. 4px hairline border, radius 4px. Used for SHED/OTHER wine-pairing events.
Surfaces & elevation
Level 0
Obsidian Canvas
#0e1311Page and section background — the default dark surface
Level 1
Lifted Black
#1a1a1aSubtle elevation on nav, outlined controls, and card borders
Level 2
Warm Card
#dfdbcaProduct card border and hairline dividers — the khaki undertone that warms the dark UI
Level 3
Linen Invert
#f6f7f2Inverted light surface for price chips, soft button fills, and occasional light-on-light sections
Level 4
Bone Overlay
#ffffffHighest-elevation surface — full-invert buttons, modal backgrounds, and badge fills
Elevation is whisper-quiet — a barely-there 10px blur at 5% black. The design relies on the contrast between near-black canvases and warm cream borders (#dfdbca) to separate layers, not shadow. Anything more visible would break the gallery-print feel.
Product card
rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px
Lifted card
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px
Layout & imagery
Layout
Full-width dark sections stack vertically with generous vertical breathing room (80px+ between sections). No centered max-width container; content stretches edge-to-edge and uses generous left/right gutters. The hero is a two-column split: a left 'index' column (about 30% width) of typographic editorial entries, and a right 'photograph' column (about 55% width) holding a single product image, with empty black space at the far right acting as breathing room. Below the hero, sections alternate between centered prose (the manifesto block), two-column product+text splits, and wide product card grids. The product grid is 3 columns on desktop, 2 on tablet, with cards that are roughly square and tightly packed. Navigation is a centered horizontal bar in the header. The overall rhythm: quiet black, loud photograph, quiet black, quiet copy, loud photograph — a gallery cadence, not a SaaS cadence.
Imagery
Photography is the dominant visual medium, and it is shot like editorial still-life: products on warm studio backdrops (deep ember-red, dark amber, charcoal) with soft directional lighting and a single visible floor shadow. No lifestyle imagery, no hands, no people, no café interiors — the object (a coffee bag, a V60 dripper on a timber block, a black roastery box) is always the hero, shot at close-to-product scale. Treated backgrounds are slightly desaturated, low-key, and warm — the product is in color, the world around it is in shadow. Iconography is minimal: a single chat-bubble glyph in a bone circle bottom-right, and thin line icons in the header. No illustration, no abstract graphics, no gradients applied to UI — gradients appear only in the hero backdrop as a soft ember wash behind the photograph.
Design notes
Agent Guide
**Quick Color Reference** - text (on dark): #ffffff - text (secondary/muted): #b3b3b3 - Create a Primary Action Button: #000000 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. - surface (warm border / hairline): #dfdbca - accent (editorial badge — new release): #faf080 - primary action: #000000 (filled action) **3–5 Example Component Prompts** 1. *Editorial Hero Index Entry*: A vertical stack entry on #0e1311 canvas. Product name in ID00 Serif italic 21px, #ffffff. Sublabel 'Shop Now' or 'Limited Time Offer' in ID00 Serif italic 16px, #b3b3b3. Vertical spacing 48px between entries. No border, no background, no button — pure typographic link. 2. *Product Card (Dark)*: Square card on #0e1311 background, 4px radius, 1px border in #1a1a1a. Upper 65%: product photograph on a warm ember-red studio backdrop with soft shadow. Lower 35%: product name in ID00 Serif italic 24px #ffffff, tasting notes in GT America 14px #b3b3b3, price pill at bottom-left. 3. *Price Pill*: Inline pill, 60px radius, #f6f7f2 background, padding 6px 16px. Text 'From — €29.95' in GT America 13px weight 500, #0e1311. No border, no shadow. 4. *Editorial Tag Badge*: Small pill, 4px radius, #faf080 background, padding 4px 8px. Text 'New Release' in GT America 11px weight 500 uppercase, #0e1311. No border. 5. *Manifesto Block*: Full-width #0e1311 section, 80px vertical padding above and below. Centered or left-aligned text in ID00 Serif italic 36px, #ffffff, line-height 1.2, weight 300. No buttons, no links, no images — the prose is the section.
Similar brands
Square Mile Coffee Roasters
Same dark editorial aesthetic with warm studio product photography and serif-driven product names over near-black canvases.
Onyx Coffee Lab
Specialty coffee brand using a near-black canvas with hairline borders and minimal CTAs, letting photography carry the visual weight.
Manhattan Special Roasting Co.
Dark-mode product-first ecommerce with italic serif product naming and warm-toned product photography on moody backdrops.
Workshop Coffee
UK specialty roaster with a similarly restrained palette, serif italic editorial labels, and product-photography-led hero sections.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
