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

# Touchy Coffee · Design System

> Sensory coffee, served with playful precision.

**Theme:** dark · **Industry:** food-beverage · **Source:** https://touchycoffee.com/ · **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._

Touchy Coffee pairs a warm terracotta canvas and expressive wordmark with crisp, all-caps monospace typography. Color-blocked shop, story, review, and contact sections make the homepage feel tactile, independent, and product-led.

## North star

Let bold, flat color fields and disciplined monospace typography frame tactile coffee imagery without adding visual clutter.

## Overview

The page opens on an uninterrupted terracotta canvas (#9f4920), letting an oversized, hand-drawn black wordmark carry the hero while small pill-shaped navigation controls stay near the top corners. Apercu Mono supplies the contrasting system: uppercase, widely spaced labels and compact product information that feel precise without competing with the logo. Below, large flat-color bands define the shopping, brand-story, review, and footer zones: muted sage (#788c8c), lavender (#a697c6), pale blue (#d0eaf4), and vivid green (#5b9133). Product bags and candid coffee-making imagery add texture and real-world context; colorful review cards are accents within the imagery, not the core palette. Layouts shift from a compact multi-item shop grid to a broad text-led story and image-led testimonials. Generous section breaks, restrained black controls, thin outlines, and rounded capsules preserve a playful, tactile rhythm without relying on shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Roast Ink | `#000000` | `--color-roast-ink` | neutral | Primary text, oversized logo artwork, and the black pill-shaped navigation and wholesale controls. |
| Roasted Terracotta | `#9f4920` | `--color-roasted-terracotta` | brand | Opening hero canvas and central brand color; anchors the first impression. |
| Soft Lavender | `#a697c6` | `--color-soft-lavender` | surface | Full-width brand-story section background and a visible slider track surface. |
| Quiet Sage | `#788c8c` | `--color-quiet-sage` | surface | Full-width shop background behind coffee product cards and purchase controls. |
| Powder Blue | `#d0eaf4` | `--color-powder-blue` | surface | Full-width reviews section background, keeping testimonials visually distinct from the story. |
| Coffee Leaf | `#5b9133` | `--color-coffee-leaf` | accent | Footer background and wholesale button text; also appears as a review-card accent. |
| Cream White | `#ffffff` | `--color-cream-white` | neutral | Small navigation and button text accents against black controls. |

### Semantic aliases

`--color-canvas` → `#9f4920` (Roasted Terracotta) · `--color-surface` → `#a697c6` (Soft Lavender) · `--color-surface-2` → `#d0eaf4` (Powder Blue) · `--color-surface-3` → `#788c8c` (Quiet Sage) · `--color-text` → `#000000` (Roast Ink) · `--color-border` → `#a697c6` (Soft Lavender) · `--color-accent` → `#9f4920` (Roasted Terracotta) · `--color-accent-2` → `#a697c6` (Soft Lavender) · `--color-accent-3` → `#5b9133` (Coffee Leaf)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#9f4920` | 3.45:1 | AA-large |
| `#000000` | `#a697c6` | 7.86:1 | AAA |
| `#000000` | `#d0eaf4` | 16.76:1 | AAA |
| `#000000` | `#788c8c` | 5.93:1 | AA |
| `#9f4920` | `#a697c6` | 2.28:1 | fail |
| `#9f4920` | `#d0eaf4` | 4.86:1 | AA |
| `#9f4920` | `#788c8c` | 1.72:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Apercu Mono | `--font-mono` | webfont | 400 | Primary interface and content type: navigation, hero supporting line, labels, product details, and story copy. | Space Mono |
| Apercu Mono Bold | `--font-apercu-mono-bold` | webfont | 700 | Emphasized product actions and quantity controls. | Space Mono |

- **Apercu Mono:** Regular weight; uppercase is common for labels and body copy, with deliberate letter spacing in navigation.
- **Apercu Mono Bold:** Bold weight for short uppercase actions such as ADD; keep the surrounding interface regular and restrained.

### Type scale — Golden Ratio (ratio ≈ 1.581, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 50px | 400 | 1.5 | 0 | uppercase | Apercu Mono | Hero brand statement; the visible mark is hand-drawn artwork, not ordinary text. |
| h2 | 24px | 400 | normal | 0 | — | Apercu Mono | Section and supporting headings, including small tracked section labels. |
| body | 20px | 400 | 1.2 | 0 | uppercase | Apercu Mono | Uppercase story copy and descriptive supporting text. |
| nav | 24px | 400 | normal | 0 | — | Apercu Mono | Short top-level navigation links, often spaced out. |
| code | 20px | 400 | 1.2 | 0 | uppercase | Apercu Mono | Compact uppercase product and interface details; not code content. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 7, 10, 15, 20, 25, 30, 40, 60, 80, 100 px.
- Section rhythm 60px · element gap 20px · card padding — · max content width 1280px.

A wide, centered page uses a measured 1280px maximum content width, with color bands spanning the viewport. The hero is a spacious single-column composition; the shop becomes a seven-column measured grid with product cards, while the story returns to a single text-led column. The reviews section uses an eleven-column measured layout for cards and imagery. Section breaks are generous, with a measured 60px section gap and comfortable rather than dense content spacing. Footer information is arranged in three columns.

## Shape & elevation

- Radius: button `9999px` · media `20px` · xs `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-out` on interactive elements.

The interface reads as flat and color-blocked, with no measured shadows. Black pill controls provide contrast through solid fills, while the story and footer imagery uses fine outlined shapes. Preserve clear section boundaries using the full-width background bands; avoid adding layered card shadows or unnecessary borders.

## Imagery

The hero is led by a large, black hand-drawn brand wordmark on a plain terracotta field. The shop features photographed coffee bags, with packaging labels and small promotional badges providing varied color. Later, candid equipment and people imagery sits alongside vivid testimonial cards. Keep photography rectangular or gently rounded, with the measured 20px media radius; do not mistake illustration or packaging colors for the page’s underlying brand palette.

## Components

### Corner navigation pills

Small black capsules sit at opposite top corners of the terracotta hero, with white monospace labels and generous letter spacing.

### Hero wordmark

Large hand-drawn black Touchy Coffee lettering dominates the open hero; a compact uppercase roast-location line sits below.

### Product cards

Coffee bag photography sits on the sage shop band, followed by uppercase product names, capsule price controls, and simple quantity/add actions.

### Purchase controls

Black rounded capsules group quantity and add actions; measured ADD labels use bold 20px Apercu Mono Bold in sage.

### Brand story block

A broad lavender field carries large uppercase monospace prose with selected words underlined for emphasis.

### Review carousel

The pale-blue band combines review cards and coffee-work imagery, with a simple rounded slider indicator beneath.

### Information footer

A green footer arranges location, social, and contact details in three columns, with restrained outlined oval treatments.

### Measured component styles

- **Primary button** (“H O M E”): background #000000 · text #ffffff · radius 100px · padding 10px 20px · 400 24px Apercu Mono
- **Link** (“N E W !”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px Apercu Mono
- **Input** (“1”): transparent background · text #788c8c · radius 0px · padding 0px · 700 20px Apercu Mono Bold · uppercase
- **Navigation item** (“H O M E S H O P”): transparent background · text #000000 · radius 0px · padding 20px · 400 20px Apercu Mono

## Do

- Use the measured palette hex values exactly.
- Let terracotta dominate the opening hero.
- Keep interface copy monospace and mostly uppercase.
- Use solid, full-width color bands to distinguish content sections.
- Show coffee packaging and real coffee-making imagery.
- Keep buttons simple, black, and capsule-shaped.

## Don't

- Do not replace the hand-drawn hero mark with generic display type.
- Do not add gradients or drop shadows.
- Do not use extra palette colors for page backgrounds.
- Do not flatten every section into one continuous background.
- Do not make product actions visually ornate.
- Do not treat colors inside packaging or review cards as core brand colors.

## Agent prompt

Build a new Touchy Coffee page with the same tactile, playful, editorial character. Use Roasted Terracotta (#9f4920) as the hero canvas, Roast Ink (#000000) for the wordmark and controls, and Apercu Mono or a close Space Mono substitute for uppercase interface copy. Create clear full-width bands in Quiet Sage (#788c8c), Soft Lavender (#a697c6), Powder Blue (#d0eaf4), and Coffee Leaf (#5b9133), assigning each to a distinct content block. Keep navigation and purchase actions compact, high-contrast, and capsule-shaped. Favor product photography, honest coffee-making imagery, generous open space, and flat surfaces over decorative effects. Keep typography precise and labels legible, using occasional letter spacing and restrained underlines. Do not introduce gradients, shadows, or unmeasured colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Open, single-column terracotta canvas with corner navigation and a centered oversized wordmark. | corner navigation, brand-led entry | flat terracotta field, black capsule controls, hand-drawn wordmark |
| 2 | product-grid | Product cards arranged across a sage full-width band, with photos and compact purchase details. | product browsing, quantity selection, add to cart | coffee bag photography, black pill actions, upper-case labels |
| 3 | feature-split | Single broad text-led column on a lavender background. | brand storytelling, emphasized key phrases | large uppercase monospace, selective underlines, flat lavender band |
| 4 | testimonials | Review cards and coffee-work imagery share a pale-blue, multi-column section. | testimonial browsing, carousel navigation | colored review cards, rounded media, slider indicator |
| 5 | footer | Three-column information layout on a full-width green field. | location lookup, social links, contact links | uppercase monospace labels, outlined oval details, green background |

## Source CSS custom properties (selected)

```css
--color-green: #5B9133;
```

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