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

# Redbrick Coffee · Design System

> Bold red, quiet space, seriously special coffee.

**Theme:** light · **Industry:** food-beverage · **Source:** https://redbrick.coffee/ · **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._

Redbrick Coffee pairs vivid red typography and rules with a calm white canvas and oversized editorial serif headlines. Product and café photography gives the spacious, low-chrome storefront its warmth and commercial focus.

## North star

Let the exact brand red, editorial serif headlines, fine rules and generous white space define the page; keep photography vivid but UI chrome quiet.

## Overview

The page builds its identity around exact brand red #e82c2a against white, with a light gray canvas #f2f2f2 appearing as a restrained supporting neutral. Red carries the navigation, headings, links, section dividers and announcement bar; keep it consistent rather than adding new interface colours. Editorial Old, a light serif, supplies the oversized hero and feature headlines, while Surt handles navigation, product labels and supporting copy with generous letter spacing. The layout is a long, open storefront: thin red rules separate sections, compact section labels sit opposite shop links, and split feature blocks alternate imagery and copy. Product tiles repeat in horizontal rows, with rounded pale image backgrounds and little visible card chrome. Photography is central: coffee bags and lifestyle scenes bring in saturated reds and varied packaging colours, but those image colours should not be mistaken for interface palette tokens. The result feels distinctive through typography, repetition and restraint rather than shadows or decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Brick Signal | `#e82c2a` | `--color-brick-signal` | brand | Brand text and links, headings, navigation, announcement band, and thin section dividers. |
| Roaster White | `#ffffff` | `--color-roaster-white` | surface | Primary page surface behind the hero, product rows, feature sections, newsletter, and footer. |
| Pale Ash | `#f2f2f2` | `--color-pale-ash` | neutral | Measured light canvas neutral; use sparingly for quiet contrast, not as a replacement for the white page surface. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Pale Ash) · `--color-surface` → `#ffffff` (Roaster White) · `--color-text` → `#e82c2a` (Brick Signal) · `--color-text-muted` → `#ffffff` (Roaster White) · `--color-border` → `#e82c2a` (Brick Signal) · `--color-accent` → `#e82c2a` (Brick Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e82c2a` | `#f2f2f2` | 3.89:1 | AA-large |
| `#e82c2a` | `#ffffff` | 4.35:1 | AA-large |
| `#ffffff` | `#f2f2f2` | 1.12:1 | fail |
| `#e82c2a` | `#f2f2f2` | 3.89:1 | AA-large |
| `#e82c2a` | `#ffffff` | 4.35:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Surt | `--font-body` | webfont | 400 | Navigation, body copy, product names, links, captions, and compact section labels. | Manrope |
| Editorial Old | `--font-display` | webfont | 300 | Oversized hero and editorial feature headlines. | Bodoni Moda |

- **Surt:** Regular weight; open sans-serif forms with visibly generous tracking, especially in body and navigation.
- **Editorial Old:** Light serif weight; use large, closely set display lines with a refined, high-contrast editorial character.

### Type scale — Perfect Fifth (ratio ≈ 1.496, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 150px | 300 | 1.1 | 0.004em | — | Editorial Old | Large editorial campaign or feature statements. |
| h1 | 105px | 300 | 0.99 | -0.005em | — | Editorial Old | Primary oversized hero headline, split across short lines. |
| h2 | 100px | 300 | 1.2 | 0.006em | — | Editorial Old | Large feature titles such as coffee subscriptions. |
| h3 | 35px | 400 | 1.5 | 0.017em | — | Surt | Section-level headings and prominent supporting titles. |
| h4 | 30px | 400 | 1.5 | 0 | — | Surt | Smaller subsection headings and editorial labels. |
| body | 20px | 400 | 1.5 | 0.03em | — | Surt | Product and service descriptions with airy leading. |
| caption | 15px | 400 | 1.5 | 0.04em | — | Surt | Product names, image labels, and compact supporting details. |
| button | 0px | 400 | normal | 0 | — | Surt | Interactive controls, rendered in the Surt sans-serif style. |
| nav | 20px | 400 | 1.3 | 0.03em | — | Surt | Primary and utility navigation links. |
| link | 20px | 400 | 1.2 | 0.03em | — | Surt | Shop actions and inline calls to explore. |

OpenType features in use: `"clig", "liga"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 10, 12, 15, 20, 30, 50 px.
- Section rhythm 45px · element gap — · card padding — · max content width 1420px.

Use a single wide storefront column, measured to a 1420px maximum page width, with slim outer gutters and a comfortable density. The header stacks a rounded red announcement band above a separate navigation row, then a fine rule. Alternate full-width product rails with two-column editorial features; align section labels and shop links along shared horizontal rules. Preserve generous section breathing room and strong left/right image-copy contrasts instead of enclosing content in dense cards.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `25px` · link `4px` · xs `4px` · sm `25px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The interface is predominantly flat, with no measured shadows or gradients. Separate content using fine red hairlines and whitespace rather than raised cards. Product images sit in softly rounded pale frames, while larger editorial photographs have rounded corners. Avoid layered panels; the announcement bar is the notable pill-shaped element.

## Imagery

Use real coffee, packaging, café, and product photography rather than illustration-led compositions. The hero pairs a large serif message with a rounded, saturated product scene; later split features alternate lifestyle imagery and copy. Product rails show isolated items on soft pale backgrounds. Keep photographs crisp and naturally varied; vivid red or package colours belong to image content, not additional UI tokens.

## Components

### Announcement bar

A slim, rounded Brick Signal band with compact white shipping and audience messages distributed across the row.

### Primary navigation

A white row with the red wordmark at left, widely spaced shop destinations, utility links, and a fine red baseline.

### Editorial hero

Pair a large light serif headline on the left with a wide, rounded product photograph on the right.

### Section heading rail

Place a compact red section label at one edge and a shop or learn link with directional arrow at the other, divided by a fine red rule.

### Product rail

Repeat evenly sized product images in a horizontal row; use pale rounded image fields and red names beneath.

### Split feature

Alternate rounded lifestyle photography and editorial copy across two columns, with concise red links or descriptions.

### Newsletter form

Set a large serif offer headline above a long pill-shaped red-outline email field and a separate outlined reveal-code control.

### Multi-column footer

Organize location, social, enquiry, and information links into compact columns, then close with fine red rules and a rounded red acknowledgement band.

### Measured component styles

- **Primary button** (“Skip to content”): background #121212 · text #e82c2a · radius 0px · padding 0px · 400 20px Surt
- **Secondary button** (“Reveal Code”): transparent background · text #e82c2a · border 1px solid #e82c2a · radius 50px · padding 5px 30px · 400 30px Surt
- **Link** (“REDBRICK”): transparent background · text #e82c2a · radius 0px · padding 0px · 400 20px Surt
- **Input**: transparent background · text #e82c2a · border 1px solid #e82c2a · radius 50px · padding 5px 30px · 400 30px Surt
- **Navigation item** (“Shop Subscriptions Stores Equipment”): transparent background · text #e82c2a · radius 0px · padding 0px · 400 20px Surt

## Do

- Use #e82c2a for interface text, links, headings, and rules.
- Keep the main surface white and reserve #f2f2f2 for subtle neutral contrast.
- Set campaign headlines in a light, high-contrast editorial serif.
- Use the sans-serif for navigation, descriptions, product names, and utility links.
- Separate storefront sections with fine red rules and generous whitespace.
- Show products in repeatable image-led horizontal rails.
- Round photographic media while keeping surrounding UI largely flat.

## Don't

- Do not introduce extra interface accent colours from product packaging.
- Do not add drop shadows, gradients, or raised card stacks.
- Do not use heavy bold display typography in place of the light serif.
- Do not pack the page into a dense dashboard or rigid boxed grid.
- Do not turn every link into a filled button.
- Do not mistake photographic red backgrounds for a new page-wide section colour.

## Agent prompt

Build a new Redbrick Coffee page as a spacious, image-led storefront. Use Brick Signal (#e82c2a) for navigation, headings, links, announcement details, and fine section rules; keep Roaster White (#ffffff) as the principal surface and use Pale Ash (#f2f2f2) only for quiet neutral contrast. Set oversized editorial headlines in a light high-contrast serif similar to Editorial Old, with a clean, generously tracked sans-serif like Surt for navigation, body copy, labels, and product names. Organize content as open horizontal sections: label-and-link rails, repeated product rows, and alternating two-column photo-and-copy features. Use rounded image frames, real coffee photography, and ample whitespace. Keep the interface flat, avoid shadows and gradients, and do not promote incidental package colours into UI accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split editorial hero: large left-aligned headline beside a rounded product photograph. | brand introduction, visual product storytelling | oversized serif headline, rounded photo, red section rule |
| 2 | category-nav | Section label and shop link above a horizontal row of five blend products. | browse blend range, direct shop link | thin divider, product thumbnails, red item names |
| 3 | feature-split | Rounded lifestyle image on one side; editorial heading and short copy on the other. | introduce product range, stock-up link | split columns, light serif heading, red rule |
| 4 | product-grid | Centered section label above a five-item horizontal product rail. | browse individual coffees, previous and next controls | product image tiles, caption labels, shop link |
| 5 | feature-split | Editorial text and subscription link opposite a large rounded coffee photograph. | explain subscription, browse all subscriptions | large serif title, photo split, section divider |
| 6 | product-grid | Centered section title and a horizontal row of five merchandise items. | browse seasonal merchandise, previous and next controls | product thumbnails, small red captions, shop link |
| 7 | feature-split | Rounded espresso-making image beside a large editorial training headline and description. | promote home espresso training, learn more | photo and copy columns, serif headline, red link |
| 8 | feature-split | Tall headline and copy opposite a rounded café-service photograph. | address café buyers, enquiry link | asymmetric split, serif headline, section rule |
| 9 | newsletter | Wide offer headline above a pill-shaped email field and outlined reveal-code control. | enter email, reveal offer code | large serif title, red-outline input, rounded control |
| 10 | footer | Four compact information columns followed by copyright, acknowledgement, and payment marks. | find location, follow social channels, contact and browse policies | multi-column links, fine red rules, rounded red acknowledgement band |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--gradient-background: #ffffff;
--color-foreground: 18,18,18;
--color-background-contrast: 191,191,191;
--color-shadow: 18,18,18;
--color-button: 18,18,18;
--color-button-text: 255,255,255;
--color-secondary-button: 255,255,255;
--color-secondary-button-text: 18,18,18;
--color-link: 18,18,18;
--color-badge-foreground: 18,18,18;
--color-badge-background: 255,255,255;
--color-badge-border: 18,18,18;
--payment-terms-background-color: rgb(255 255 255);
--font-body-family: Assistant, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-family: Assistant, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--media-border-opacity: 0.05;
--media-border-width: 1px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: left;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
```

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