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

# Escape Coffee Company · Design System

> Go against the grain, one cup at a time

**Theme:** light · **Industry:** food-beverage · **Source:** https://escape.cafe/en-us · **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._

Escape Coffee Company pairs specialty coffee merchandising with a bold, editorial story about going against the grain. A warm off-white canvas and oversized condensed headlines frame immersive photography, compact product details, and direct shopping links.

## North star

Let oversized, condensed typography and cinematic photography carry the story, while keeping commerce controls small, clear, and high contrast.

## Overview

The page is built around a warm paper-like canvas (#f5f4f2), with near-black typography and crisp white surfaces used for contrast rather than decoration. The opening hero is dominated by full-bleed ocean footage or photography, overlaid with enormous uppercase condensed lettering and a small, sharply legible shopping control. Below it, quieter collection sections return to the pale canvas, using photographic cards and restrained text to create contrast with the cinematic opening. Typography does much of the branding: Molitor supplies compressed, assertive uppercase display and CTA lettering, while TWK Lausanne handles lighter navigation and explanatory copy. Garaje adds a supporting typographic voice. Layout alternates dense media-led panels with open, spacious bands; alignment is intentionally asymmetric, with large headline forms offset against compact copy and product data. Thin outlines and small-radius controls define interactive edges without adding heavy shadows. The dark footer reverses the page’s light palette and gathers navigation, email signup, address, and social links.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#f5f4f2` | `--color-warm-paper` | brand | Main canvas across the hero, collection, and subscription sections; also appears as light text over dark imagery. |
| Roast Ink | `#151515` | `--color-roast-ink` | neutral | Primary text and navigation on light surfaces, especially collection details and the subscription section. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Crisp surface contrast, most visibly in the footer area and light interface elements. |
| Deep Char | `#000000` | `--color-deep-char` | neutral | High-contrast SHOP buttons, outlined LEARN MORE links, and hairline borders. |
| Stone Tint | `#ebe9e6` | `--color-stone-tint` | semantic | Minor card and button-area neutral; a subtle supporting shade, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#f5f4f2` (Warm Paper) · `--color-surface` → `#ffffff` (Clean White) · `--color-text` → `#151515` (Roast Ink) · `--color-text-muted` → `#f5f4f2` (Warm Paper) · `--color-border` → `#000000` (Deep Char)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151515` | `#f5f4f2` | 16.61:1 | AAA |
| `#151515` | `#ffffff` | 18.26:1 | AAA |
| `#f5f4f2` | `#ffffff` | 1.1:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TWK Lausanne | `--font-body` | webfont | 300, 200 | Body copy, navigation, captions, links, and lighter section headings. | Inter |
| Molitor | `--font-display` | webfont | 700, 300 | Display headlines, uppercase section headings, eyebrows, and shopping buttons. | Oswald |
| Garaje | `--font-garaje` | webfont | 300, 700 | Supporting display or accent lettering within the page’s typographic mix. | Barlow Condensed |

- **TWK Lausanne:** Light weights dominate; body and navigation use visibly open tracking with natural casing.
- **Molitor:** Condensed, forceful uppercase forms; display lettering is oversized with tight line height.
- **Garaje:** Used sparingly beside the dominant Lausanne and Molitor voices; measured in light and bold weights.

### Type scale — Custom (ratio ≈ 1.693, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 250px | 700 | 0.85 | -0.02em | uppercase | Molitor | Oversized uppercase hero slogan lettering. |
| h1 | 75px | 300 | 1 | 0.013em | uppercase | Molitor | Large uppercase page and major section headlines. |
| h2 | 50px | 200 | 1.06 | -0.01em | — | TWK Lausanne | Secondary section titles and prominent editorial statements. |
| h3 | 45px | 300 | 0.85 | 0.021em | uppercase | Molitor | Uppercase collection and feature headings. |
| h4 | 28px | 300 | 1.05 | 0.034em | — | TWK Lausanne | Smaller supporting headings and card titles. |
| body | 18px | 300 | 1.35 | 0.053em | — | TWK Lausanne | Collection descriptions, subscription copy, and editorial text. |
| caption | 16px | 300 | 1 | 0.06em | — | TWK Lausanne | Compact product metadata and image-side notes. |
| button | 26px | 700 | 1 | 0.037em | uppercase | Molitor | Uppercase SHOP and other prominent action labels. |
| nav | 16px | 300 | 1.05 | 0.06em | — | TWK Lausanne | Header, announcement rail, and footer navigation. |
| link | 16px | 300 | 1.35 | 0.06em | — | TWK Lausanne | Inline editorial and collection links. |
| eyebrow | 26px | 700 | 1 | 0.037em | uppercase | Molitor | Short uppercase labels introducing content sections. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 5, 14, 15, 18, 20, 25, 40, 50, 52 px.
- Section rhythm 50px · element gap 20px · card padding — · max content width —.

The page uses a comfortable, editorial rhythm rather than a uniform card grid. The hero stretches edge to edge and places oversized type to the left, with a compact shopping action and a narrow vertical announcement rail at the right. Collections combine a large image panel with a smaller product-and-copy column. Later sections alternate image-led storytelling with expansive headline-led space. Content aligns to the page edges with generous breathing room; no measured maximum content width is available. A full-width dark footer closes the page.

## Shape & elevation

- Radius: button `3px` · card `10px` · link `3px` · xs `3px` · sm `4px` · md `10px`
- Shadow `hairline` (card, other): `rgb(245, 244, 242) 0px 0px 0px 1.5px`
- Motion: standard transition `0.6s cubic-bezier(0.37, 0.31, 0, 1)` on interactive elements.

The interface is mostly flat, with no prominent drop shadows. Product and editorial cards use fine outlines or a subtle measured canvas-colored hairline treatment rather than raised surfaces. Small-radius controls and compact outlined links keep interactive elements defined; contrast, imagery, and typography provide most of the layering.

## Imagery

Photography is central: ocean surf fills the hero, rocky landscapes introduce a collection, and architectural and lifestyle images carry the editorial story. Product packaging and brewing imagery appear as smaller supporting visuals. Images are generally rectangular and large, with minimal framing; the hero’s white type overlays moving or atmospheric imagery. The measured screenshot colors within photographs are image content, not additional brand palette colors.

## Components

### Hero shopping action

A compact, high-contrast SHOP NOW control sits over the full-bleed hero; measured SHOP buttons use black, warm-paper lettering, uppercase Molitor, and a small radius.

### Vertical announcement rail

A narrow white strip at the right edge holds a menu icon, vertically oriented shipping and order information, and small account and bag controls.

### Collection feature card

A large photographic card pairs with a smaller product image and copy block, followed by compact SHOP and outlined LEARN MORE links.

### Product information strip

Product names, prices, blend or origin details, and process notes appear in a compact outlined overlay across the hero imagery.

### Subscription story

Oversized broken-line headline lettering frames concise subscription steps, supporting photography, and a direct subscribe action.

### Dark footer

A dark closing panel organizes navigation, product categories, email signup, brand address, social links, and a slim bottom information bar.

### Measured component styles

- **Primary button** (“SHOP”): background #000000 · text #f5f4f2 · radius 3px · padding 5px · 700 26px Molitor · uppercase
- **Secondary button** (“Facebook”): background #f5f4f2 · text #151515 · border 1px solid · radius 50% · padding 0px · 300 16px TWK Lausanne
- **Link** (“Shop”): transparent background · text #f5f4f2 · radius 0px · padding 0px · 300 16px TWK Lausanne
- **Input**: transparent background · text #f5f4f2 · radius 0px · padding 12px 0px 14px 0px · 400 16px Arial
- **Card** (“DÉCADENCE $23.00 TYPE: BLEND ORIGIN: BRA”): transparent background · text #f5f4f2 · radius 10px · padding 0px · 300 16px TWK Lausanne · shadow rgb(245, 244, 242) 0px 0px 0px 1.5px
- **Navigation item** (“Free Shipping Quebec & Montreal orders 3”): transparent background · text #151515 · radius 0px · padding 0px · 300 16px TWK Lausanne

## Do

- Use #f5f4f2 as the main editorial canvas.
- Reserve #151515 and #000000 for strong readable contrast.
- Let one oversized condensed headline dominate the hero.
- Use photography as a full-bleed storytelling surface.
- Keep product details compact and easy to scan.
- Use thin outlines and restrained corner rounding for controls.

## Don't

- Do not add unmeasured brand colors to the core palette.
- Do not make every section a uniform card grid.
- Do not compete with the hero using multiple oversized focal elements.
- Do not rely on heavy shadows or elevated card styling.
- Do not crowd editorial copy with unnecessary interface chrome.
- Do not treat colors sampled from photographs as brand colors.

## Agent prompt

Build a new coffee-commerce page in Escape Coffee Company’s editorial visual language. Use Warm Paper (#f5f4f2) for the main canvas, Roast Ink (#151515) for everyday text, Clean White (#ffffff) for crisp light surfaces, Deep Char (#000000) for strong actions and outlines, and Stone Tint (#ebe9e6) only as a quiet secondary neutral. Lead with immersive, edge-to-edge photography and one dominant uppercase, condensed Molitor-style headline. Use a lighter Lausanne-like sans for navigation, captions, and explanatory copy, with open tracking and generous line spacing. Alternate full-width image storytelling with spacious, asymmetric product and editorial layouts. Keep shopping links compact and obvious; use thin borders, small-radius controls, and almost no shadow. Finish with a dark, information-rich footer. Preserve the contrast between cinematic imagery and calm, readable commerce details.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed ocean imagery with oversized left-aligned headline and a slim vertical announcement rail. | hero shopping link, vertical shipping notice, compact product information | oversized uppercase type, white-on-image text, edge-to-edge media, outlined overlay |
| 2 | product-grid | Collection heading above a split feature: large image beside product photography and descriptive copy. | view all link, collection browsing, shop and learn more actions | large photographic card, small product image, compact text column, thin card outline |
| 3 | feature-split | Large photographic editorial panel with text across the upper area and a centered lifestyle image. | read brand story, editorial image exploration | architectural photography, overlaid light copy, centered image inset |
| 4 | how-it-works | Open canvas with widely spaced headline fragments, short numbered steps, image, and supporting copy. | three-step explanation, subscribe action | oversized black typography, compact process list, small supporting photo |
| 5 | footer | Dark full-width footer with grouped links, signup and address areas, social content, and a slim bottom bar. | email signup, footer navigation, social links | dark background, small light text, grouped link lists, outlined bottom strip |

## Source CSS custom properties (selected)

```css
--font-body-family: "TWK Lausanne", sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-heading-family: Assistant, sans-serif;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--color-base-text: 21, 21, 21;
--color-shadow: 245, 244, 242;
--color-base-background-1: 255, 255, 255;
--color-base-background-2: 243, 243, 243;
--color-base-solid-button-labels: 255, 255, 255;
--color-base-outline-button-labels: 18, 18, 18;
--color-base-accent-1: 18, 18, 18;
--color-base-accent-2: 51, 79, 180;
--payment-terms-background-color: #ffffff;
--gradient-base-background-1: #ffffff;
--gradient-base-background-2: #f3f3f3;
--gradient-base-accent-1: #121212;
--gradient-base-accent-2: #334fb4;
--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;
--card-corner-radius: 0.0rem;
--card-text-alignment: left;
--card-border-width: 0.0rem;
--card-border-opacity: 0.1;
--card-shadow-opacity: 0.0;
--card-shadow-horizontal-offset: 0.0rem;
--card-shadow-vertical-offset: 0.4rem;
--card-shadow-blur-radius: 0.5rem;
--badge-corner-radius: 4.0rem;
--popup-border-width: 1px;
--popup-border-opacity: 0.1;
```

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