---
title: "Assembly Coffee design system"
variant: extended
source: https://assemblycoffee.co.uk/
captured_at: 2026-10-12
theme: light
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/assemblycoffee-co-uk)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Assembly Coffee · Design System

> A dark editorial stage for distinctive coffee

**Theme:** light · **Industry:** food-beverage · **Source:** https://assemblycoffee.co.uk/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Assembly Coffee pairs a near-black coffee storefront with an editorial serif voice and generous white interludes. Product imagery, café features, reviews and stories make the homepage feel like a roaster’s journal as well as a shop.

## North star

Use a near-black editorial canvas for coffee and brand stories, then let restrained serif typography and large, carefully framed photography carry the page.

## Overview

The page alternates between stark black product and brand-story areas and broad white or warm off-white editorial sections. Black supplies the defining storefront canvas; white type and product imagery sit clearly against it, while olive-toned panels and small pale badges provide restrained supporting colour. A light, fine serif carries headlines, tasting notes and descriptive copy, contrasted with compact GT America sans-serif for navigation, labels and controls. The composition is deliberately uneven: product tiles have ample breathing room, the hero places a vertical list beside oversized campaign imagery, and later sections switch to side-by-side features, review cards, café photography and a compact story feed. Images do most of the expressive work, from coffee packaging and fruit-led campaign art to atmospheric interiors. Spacing stays generous between major stories, while cards and controls remain visually simple, with subtle borders or shadows rather than heavy decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Roaster White | `#ffffff` | `--color-roaster-white` | surface | Main light canvas, card backgrounds and reversed text in the dark campaign and product areas. |
| Roast Black | `#000000` | `--color-roast-black` | brand | Defining product and footer canvas, primary text, and dark navigation surface. |
| Charcoal Rule | `#333333` | `--color-charcoal-rule` | neutral | Subtle card and footer boundaries; also appears as a dark product-card surface. |
| Roasted Ink | `#0e1311` | `--color-roasted-ink` | neutral | Muted dark copy within text-led areas, used as a near-black supporting text colour. |
| Sage Badge | `#cadcac` | `--color-sage-badge` | semantic | Pale green product badge for the Elevated Brewing label, not a primary page surface. |
| Media Grey | `#808080` | `--color-media-grey` | neutral | Measured inverse media surface; treat as media-related rather than a defining brand colour. |
| Parchment Mist | `#f5f6f1` | `--color-parchment-mist` | surface | Soft warm section and control background, notably supporting light editorial and review areas. |
| Card Grey | `#e6e6e6` | `--color-card-grey` | surface | Light card surface used in measured component data, secondary to white and warm off-white. |
| Olive Brew | `#4d4a31` | `--color-olive-brew` | brand | Olive-toned feature background and link colour, visible in the cold-brew campaign panel. |
| Release Lemon | `#faf080` | `--color-release-lemon` | semantic | Bright yellow New Release badge on product imagery; limited to small labels. |
| Graphite Copy | `#4d4d4d` | `--color-graphite-copy` | neutral | Secondary text tone recorded in measured data; use sparingly for subdued copy. |
| Roast Umber | `#78392b` | `--color-roast-umber` | accent | Measured accent associated with a product card; not a dominant page-wide colour. |
| Moss Shadow | `#686653` | `--color-moss-shadow` | accent | Muted olive-grey seen in a card and gradient measurement; supporting rather than core. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Roaster White) · `--color-surface` → `#000000` (Roast Black) · `--color-surface-2` → `#808080` (Media Grey) · `--color-surface-3` → `#f5f6f1` (Parchment Mist) · `--color-surface-4` → `#e6e6e6` (Card Grey) · `--color-text` → `#000000` (Roast Black) · `--color-text-muted` → `#0e1311` (Roasted Ink) · `--color-text-subtle` → `#ffffff` (Roaster White) · `--color-border` → `#333333` (Charcoal Rule) · `--color-accent` → `#78392b` (Roast Umber)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#808080` | 5.32:1 | AA |
| `#000000` | `#f5f6f1` | 19.33:1 | AAA |
| `#0e1311` | `#ffffff` | 18.75:1 | AAA |
| `#0e1311` | `#000000` | 1.12:1 | fail |
| `#0e1311` | `#808080` | 4.75:1 | AA |
| `#0e1311` | `#f5f6f1` | 17.26:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#808080` | 3.95:1 | AA-large |
| `#ffffff` | `#f5f6f1` | 1.09:1 | fail |

### Gradients

- `linear-gradient(135deg, rgb(255, 255, 255), rgb(255, 255, 255))`
- `linear-gradient(135deg, rgb(104, 102, 83), rgb(104, 102, 83))`
- `linear-gradient(to right, rgb(207, 165, 59) 0%, rgba(0, 0, 0, 0.25) 0.1%)`
- `linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 50.1%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT America Standard | `--font-gt-america-standard` | webfont | 400, 500, 300, 600 | Navigation, compact labels, badges, buttons, captions and supporting sans-serif text. | Inter |
| ID00 Serif | `--font-body` | webfont | 300 | Editorial headlines, product names, tasting notes and descriptive copy. | Cormorant Garamond |

- **GT America Standard:** Use restrained, light-to-medium weights; compact interface text stays sentence case, without conspicuous tracking.
- **ID00 Serif:** Light serif weight creates an elegant, literary contrast; headlines and product copy use natural casing.

### Type scale — Perfect Fourth (ratio ≈ 1.326, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 300 | 1.25 | 0 | — | ID00 Serif | Serif display heading for the principal campaign or brand statement. |
| h2 | 36px | 300 | 1.2 | 0 | — | ID00 Serif | Serif section titles, including reviews and editorial features. |
| h3 | 30px | 300 | 1.2 | 0 | — | ID00 Serif | Serif subheads and product or story titles. |
| body | 18px | 300 | 1 | 0 | — | ID00 Serif | Light serif descriptions and narrative product copy. |
| caption | 14px | 400 | 1.4 | 0 | — | GT America Standard | Sans-serif dates, small labels and supporting metadata. |
| button | 14px | 500 | 1.25 | 0 | — | GT America Standard | Compact medium-weight sans-serif control labels. |
| nav | 14px | 500 | 1.25 | 0 | — | GT America Standard | Small sans-serif primary and utility navigation. |
| link | 16px | 300 | 1.5 | 0 | — | ID00 Serif | Light serif links for product and editorial titles. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 9, 10, 12, 16, 20, 24, 32, 48, 80 px.
- Section rhythm 80px · element gap 8px · card padding 24px · max content width 1400px.

The measured page max width is 1400px, with full-bleed campaign media and several wide section bands. The top navigation is layered over or adjacent to a large dark hero; the product showcase continues as an open, asymmetric grid rather than a dense catalogue. Later sections switch between two-column image features, centered reviews, a horizontal café carousel, and a multi-card story feed. Major sections use a measured 80px rhythm, with comfortable element spacing and 24px card padding. Alignment varies intentionally between centered section headings and left-aligned editorial content.

## Shape & elevation

- Radius: button `4px` · input `2px` · card `4px` · media `4px` · badge `4px` · nav `4px` · link `4px` · xs `4px` · sm `6px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.1) 0px 0px 0px 0px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0.12) 0px 0px 20px 0px`
- Shadow `md-3` (card): `rgba(0, 0, 0, 0.05) 0px 5px 10px -4px`
- Motion: standard transition `0.15s cubic-bezier(0.59, 0, 0.68, 0.69)` on interactive elements.

Most sections rely on flat colour fields and image contrast, not stacked interface chrome. Cards are generally white or dark, with measured subtle shadows on review cards and restrained hairline treatment on controls. Borders are dark grey where present, corners remain gently rounded, and product imagery should feel integrated into the canvas rather than floating in heavy boxes.

## Imagery

Large, atmospheric imagery is central: campaign fruit, coffee packaging and brewing equipment are shown against dark or warm studio backdrops. Lifestyle and hospitality sections use photographic interiors, people and café storefronts, often placed edge-to-edge or in generous split panels. The homepage also includes video in the opening campaign. Keep image treatments natural and cinematic; measured green and yellow badges belong to product-image labels, not the overall photography palette.

## Components

### Utility and primary navigation

Stack a pale utility strip above a black main navigation bar, with compact GT America links, brand mark and thin divider.

### Campaign hero

Full-bleed dark media stage with a small vertical campaign menu and oversized serif campaign title.

### Coffee product showcase

Open product grid on black, mixing packaging imagery, serif names, brief tasting notes, compact price buttons and small release badges.

### Split editorial feature

Two image-led panels place photography beside or behind serif copy and a small light CTA.

### Review carousel

Warm off-white section with centered serif title, concise customer cards and visible carousel controls.

### Cafe and story carousels

Horizontal image cards pair café or editorial photography with small serif titles and compact supporting metadata.

### Dark footer

Black footer combines a social image strip, grouped link columns, newsletter form and oversized Assembly anniversary wordmark.

### Measured component styles

- **Primary button** (“From — $34.00”): background #ffffff · text #000000 · radius 4px · padding 8px 12px · 300 16px GT America Standard
- **Secondary button** (“Shop now”): background #d1d1d1 · text #1a1a1a · radius 4px · padding 10px 8px · 500 12px GT America Standard
- **Link** (“New Release Elevated Brewing”): transparent background · text #000000 · radius 0px · padding 0px · 300 16px ID00 Serif
- **Input** (“AED AFN ALL AMD ANG AUD AWG AZN BAM BBD ”): transparent background · text #ffffff · radius 0px · padding 10px 20px 10px 8px · 500 14px GT America Standard
- **Card** (“Anonymous Verified Customer Top coffee b”): background #ffffff · text #000000 · radius 0px · padding 24px · 300 16px GT America Standard · shadow rgba(0, 0, 0, 0.05) 0px 2.5px 10px -4px
- **Badge** (“Elevated Brewing”): background #cadcac · text #000000 · radius 4px · padding 8px · 500 12px GT America Standard
- **Navigation item** (“Coffee All Coffee All Coffee Coffee Caps”): transparent background · text #ffffff · radius 0px · padding 0px · 300 16px GT America Standard

## Do

- Lead with a near-black campaign or product canvas.
- Use light serif typography for editorial titles and coffee descriptions.
- Contrast dark stretches with clean white or warm off-white sections.
- Give campaign and hospitality photography room to breathe.
- Keep product badges small and tied to their measured label colours.
- Use compact sans-serif navigation and control text.

## Don't

- Do not make the entire page a uniform dark block.
- Do not turn olive, yellow or sage into large brand surfaces.
- Avoid dense, tightly packed product-card layouts.
- Do not replace the serif editorial voice with heavy bold sans-serif headings.
- Avoid loud gradients, decorative shadows or thick card borders.
- Do not treat colours captured inside product images as page-wide tokens.

## Agent prompt

Build a new Assembly Coffee page as an editorial coffee storefront. Use Roast Black (#000000) for the main campaign, product and footer canvases, balanced by Roaster White (#ffffff) and Parchment Mist (#f5f6f1) section breaks. Set campaign titles, product names and tasting notes in a light editorial serif; use a restrained sans-serif for navigation, labels and buttons. Keep the layout spacious and intentionally asymmetric, mixing full-bleed campaign photography, open product tiles, split image-and-copy features, and horizontal café or story cards. Use Olive Brew (#4d4a31) only for a restrained feature panel, and Sage Badge (#cadcac) or Release Lemon (#faf080) only for small product labels. Keep elevation subtle, with fine boundaries and minimal shadows; let coffee photography provide colour and texture.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Announcement and utility rows above a dark primary navigation bar. | shipping announcement, utility links, category navigation, account and cart access | light announcement strip, black navigation, compact sans-serif links, thin divider |
| 2 | hero | Full-bleed dark campaign with a vertical feature menu and large image-led title. | featured campaign navigation, shop entry | near-black canvas, serif campaign headline, dark video or imagery |
| 3 | product-grid | Open, asymmetric product presentation on a black background. | product discovery, price selection, shop all link | product imagery, serif names, tasting notes, small release badges |
| 4 | feature-split | Two broad image-led panels placed side by side. | course booking, membership benefits | full-panel photography, serif overlay copy, small light CTAs |
| 5 | testimonials | Centered title above a horizontal row of review cards. | review carousel, rating summary | warm light background, compact white cards, carousel arrows |
| 6 | feature-split | Wide split feature with copy and product photograph. | product introduction, shop CTA | olive panel, light serif copy, brewing image |
| 7 | gallery | Centered heading and action above a horizontal café image carousel. | browse café locations, carousel navigation | bright background, storefront photographs, small captions |
| 8 | content-feed | Centered editorial introduction above a horizontal multi-card story feed. | read articles, browse latest stories | soft light section, image cards, serif story titles, date captions |
| 9 | footer | Social image strip above grouped footer columns and an oversized wordmark. | newsletter signup, social links, policy and company navigation | black canvas, small white text, email field, large anniversary wordmark |

## Source CSS custom properties (selected)

```css
--atlas-background-main: #FFFFFF;
--atlas-background-content: #FFFFFF;
--atlas-background-success: #518b22;
--atlas-background-error: #be2119;
--atlas-text-primary: #000000;
--atlas-text-secondary: #00000080;
--atlas-text-negative: #be2119;
--atlas-text-positive: #366d12;
--atlas-text-placeholder: #747576;
--atlas-text-primary-inverse: #FFFFFF;
--atlas-primary-color: #000000;
--atlas-button-primary: #000000;
--atlas-button-disabled-color: grey;
--atlas-button-text-disabled-color: lightgrey;
--atlas-border-light: rgba(0, 0, 0, 0.05);
--atlas-border-focus: #41a1e6;
--atlas-border-dark: rgba(0, 0, 0, 0.5);
--atlas-focus-outline-color: rgba(65, 161, 230, 0.2);
--atlas-text-selection: rgba(150, 180, 255, 0.5);
--atlas-font-family: "GT America Standard", Helvetica, Arial, sans-serif;
--atlas-font-size-tiny: 12px;
--atlas-font-size-small: 14px;
--atlas-font-size-normal: 16px;
--atlas-font-size-large: 18px;
--atlas-font-weight-normal: 300;
--atlas-font-weight-bold: bolder;
--atlas-heading-font-family: "GT America Standard", Helvetica, Arial, sans-serif;
--atlas-heading-text-primary: #000000;
--atlas-heading-text-secondary: #00000080;
--atlas-heading-text-negative: #be2119;
--atlas-font-size-display: 40px;
--atlas-font-size-h1: 40px;
--atlas-font-size-h2: 32px;
--atlas-font-size-h3: 24px;
--atlas-font-size-h4: 18px;
--atlas-font-size-h5: 16px;
--atlas-font-weight-heading: 300;
--atlas-font-weight-heading-bold: bolder;
--atlas-shadow-medium: 0px 8px 16px 0px rgba(55, 63, 71, 0.2);
--atlas-window-shadow: 2px 4px 5px 0 rgba(0, 0, 0, 0.03), 8px 16px 9px 0 rgba(0, 0, 0, 0.03), 18px 36px 12px 0 rgba(0, 0, 0, 0.02);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/assemblycoffee-co-uk