---
name: Redbrick Coffee
description: "This site is an excellent example of how to blend traditional typography with modern web design to create a sophisticated e-commerce experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#212529"
  tertiary: "#E82C2A"
  neutral: "#6C757D"
  bg-soft: "#F2F2F2"
  line: "rgba(232,44,42,0.5)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 105px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  heading:
    fontFamily: geometric-sans
    fontSize: 30px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.6px"
  body:
    fontFamily: geometric-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.6px"

rounded:
  sm: 4px
  md: 12px
  lg: 25px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 30px

---

## Overview

A sophisticated coffee brand combining elegant serif typography with bold red branding on a clean white canvas.

*A premium coffee roaster with a refined editorial aesthetic.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#212529`)** — uses `ink` token
- **Accent (`#E82C2A`)** — uses `accent` token
- **Muted (`#6C757D`)** — uses `muted` token
- **Borders (`rgba(232,44,42,0.5)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Based on a 4px grid with generous padding for an airy, premium feel.

## Elevation & Depth

- Borders: Thin 1px borders in brand red or light grey to define sections.

## Shapes

- `sm`: 4px
- `md`: 12px
- `lg`: 25px
- `pill`: 999px

## Components

- **button:** Text-based navigation links in red; minimal or no solid button styles visible.
- **card:** Product cards with soft grey backgrounds and prominent rounded corners for images.
- **hero:** A bold split-screen hero with massive serif typography on one side and a rounded image on the other.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```