# Redbrick Coffee · Design system migration spec

> Source: https://redbrick.coffee  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of how to blend traditional typography with modern web design to create a sophisticated e-commerce experience.

## 1. Identity DNA

The design system for Redbrick Coffee is built on the foundation of a premium coffee roaster with a refined editorial aesthetic. It establishes a sophisticated visual language that combines elegant serif typography with bold red branding on a clean white canvas.

**One-liner:** A sophisticated coffee brand combining elegant serif typography with bold red branding on a clean white canvas.
**Keywords:** Premium Coffee · Direct Trade · Roaster · Artisanal
**Analogy:** A premium coffee roaster with a refined editorial aesthetic.

## 2. Color

The palette is a study in high-contrast clarity, built from a dominant brand red against a clean foundation of white and light grey. This restraint allows the primary accent to command attention without visual competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#212529` | body text |
| `--muted` | `#6C757D` | placeholder |
| `--accent` | `#E82C2A` | single accent |
| `--line` | `rgba(232,44,42,0.5)` | divider |

**Color principle:** High-contrast pairing of a dominant brand red against a clean white and light grey foundation.

The system's color principle is one of disciplined contrast, where every hue serves a defined functional or brand role.

## 3. Typography

Typography is split between two distinct voices: a high-contrast Didone serif for elegant, traditional impact in display settings, and a clean geometric sans-serif for modern readability in body copy. This duality creates a clear hierarchy, pairing classic gravitas with contemporary clarity.

- **Display:** didone-serif
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 105px | 1.0 | 400 | -0.5px | Hero headlines and major section titles. |
| heading | 30px | 1.3 | 400 | 0.6px | Section labels and smaller headings. |
| body | 20px | 1.5 | 400 | 0.6px | Primary body text and navigation links. |

**Type rules:**
- Display typography uses a high-contrast Didone serif for elegant, traditional impact.
- Body typography uses a clean geometric sans-serif for modern readability.
- Navigation links and body text are set with standard weight for a refined feel.

## 4. Spacing

Spacing is governed by a strict 4px grid, engineered to produce generous padding and an airy, premium rhythm throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 30 / 48 / 64 / 96 px
- **Rhythm:** Based on a 4px grid with generous padding for an airy, premium feel.

## 5. Surfaces

Surfaces are defined not by depth through shadow, but by clarity through thin, precise borders and solid background tones. This approach maintains a flat, editorial aesthetic where content is organized by subtle, consistent delineation.

- **Radius:** sm 4px · md 12px · lg 25px · pill 999px
- **Borders:** Thin 1px borders in brand red or light grey to define sections.

## 6. Layout

The layout skeleton is a clean, grid-based structure that prioritizes generous white space. It alternates between full-width sections to create a spacious, editorial flow that guides the eye without crowding.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean, grid-based layout with generous white space and alternating full-width sections.

## 7. Motion & Interaction

Motion in this system is light and functional, focused on smooth, quick transitions that maintain a refined user experience. It employs subtle color shifts and gradual fade-ins to confirm interaction without dominating the interface.

- **Durations:** micro 150ms · small 150ms · medium 500ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth color and background transitions on interactive elements.
  - Gradual fade-in for dynamic content.

- **Hover:** Subtle color or text-decoration changes on links.
- **Click:** Standard link navigation and product selection.
- **Transition:** Smooth 0.15s ease-in-out transitions for color and background changes.
- **Keyboard:** Standard tab navigation for accessible menu interaction.

## 8. Voice & Don'ts

The editorial voice is confident and approachable, with a slightly artisanal tone. It uses large, elegant serif statements for headlines and simple, direct text links for calls to action, avoiding visual noise.

- **Tone:** Confident, approachable, and slightly artisanal.
- **Headline style:** Large, elegant serif statements that define the brand's premium positioning.
- **CTA style:** Simple, direct text links that guide the user without overwhelming the design.
- **Avoid:** Heavy drop shadows / Bright, clashing neon colors / Overcrowded layouts / Aggressive uppercase text

### Don'ts
- ❌ Don't use lowercase brand names — screenshot shows 'REDBRICK' in all caps.
- ❌ Don't use neon or highly saturated accent colors — screenshot shows a controlled, traditional red.
- ❌ Don't use overly complex geometric patterns — screenshot shows clean white space and simple solid backgrounds.
- ❌ Don't use heavy box shadows on elements — screenshot shows flat, border-defined or background-defined surfaces.
- ❌ Don't use casual, rounded sans-serif display fonts — screenshot shows an elegant Didone serif for headlines.
- ❌ Don't clutter the interface with many small icons — screenshot shows a minimal, text-focused navigation.

The system deliberately avoids heavy shadows, neon colors, cluttered layouts, and aggressive uppercase text to preserve its clean, premium, and editorial character.

## System Prompt (paste into AI tool)

```
This design is for a premium, artisanal coffee brand. It uses a striking combination of a classic Didone serif for display text and a clean geometric sans-serif for body copy. The primary accent color is a bold, traditional red (#E82C2A) set against a clean white background (#FFFFFF) and soft light grey sections (#F2F2F2). The layout is generous with white space, featuring large typography and high-quality product imagery with soft rounded corners. Critical constraints: never use neon or highly saturated accent colors; always use all-caps for the main brand name; avoid heavy drop shadows to maintain the flat, editorial aesthetic. The overall feel should be refined, premium, and approachable.
```