# Touchycoffee · Design system migration spec

> Source: https://touchycoffee.com  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of an expressive, anti-corporate design language that uses bold typography and color to create a strong, memorable brand identity.

## 1. Identity DNA

The Touchycoffee design system is built as a loud, hand-painted sign for a slightly eccentric neighborhood cafe—every element announces itself with unapologetic energy. Its identity DNA merges the sensational and the artisanal, fusing bold typographic statements with a playful, direct visual language that rejects corporate polish.

**One-liner:** An energetic, expressive D2C coffee brand with bold typography, vibrant colors, and a quirky, irreverent personality.
**Keywords:** sensational · bold · artisanal · playful · direct
**Analogy:** A loud, hand-painted sign on a local, slightly eccentric neighborhood cafe.

## 2. Color

Color operates as solid, architectural blocks—burnt orange, soft pink, and light blue—laid down with the confidence of broad brushstrokes against stark black typography. The principle is high-contrast and vibrant, relying on bold background fields rather than subtle transitions to create visual impact.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#9f4920` | main background |
| `--bg-soft` | `#fce3e3` | card background |
| `--bg-quiet` | `#d0eaf4` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#788c8c` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast, vibrant, and slightly chaotic palette relying on bold background blocks and stark black text.

Every hue exists to anchor bold type and thick borders, never to whisper.

## 3. Typography

Typography is the system’s protagonist, pairing massive, expressive display scripts with rigid, uppercase monospaced fonts for all functional text. The voice is loud and direct, with tight line heights for headlines that create dense, impactful blocks, and strict uppercase transforms that lend every label the urgency of a command.

- **Display:** display-script
- **Body:** monospaced
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.85 | 400 | -1px | Hero logotype and massive display headlines |
| heading | 50px | 1.1 | 400 | -0.5px | Section headlines and pull quotes |
| body | 20px | 1.2 | 400 | 0 | Base text, UI elements, and popups |

**Type rules:**
- Apply text-transform: uppercase consistently for interactive elements and section labels.
- Maintain tight, rigid letter-spacing for monospaced text, allowing the character grid to show.
- Embrace tight line heights for display typography to create dense, impactful blocks of text.

## 4. Spacing

Spacing follows a loose, erratic rhythm, favoring large distinct gaps and generous padding over strict mathematical progression.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 30 / 40 / 60 / 80 px
- **Rhythm:** Loose and erratic, relying on large distinct gaps and padding rather than strict mathematical rhythm.

## 5. Surfaces

Surfaces are defined by raw, cut-out edges—thick 2-3px black strokes or no borders at all—and a single, hard-edged shadow offset that suggests physical layering. Depth is achieved not through soft blur but through stark, graphic separation of color blocks.

- **Radius:** sm 4px · md 20px · lg 100px · pill 100px
- **Shadows:**
  - 3px 3px 0px 0px rgba(0,0,0,1.0)
- **Borders:** Thick black strokes (2-3px) or none, emphasizing a raw, cut-out aesthetic.

## 6. Layout

The layout skeleton is built from bold, asymmetrical blocks of solid color layered over each other, deliberately ignoring strict grid constraints. It is a composition of overlapping islands where color and type collide, creating a chaotic but intentional visual hierarchy.

- **Container max:** 1200px
- **Paragraph max:** 700px
- **Grid:** 12 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Bold, asymmetrical blocks of solid color layered over each other, ignoring strict grid constraints.

## 7. Motion & Interaction

Motion is minimal and purely functional, reserved for subtle hover scales and standard DOM transitions that never distract from the graphic intensity. The philosophy is that animation serves interface clarity, not decorative flourish.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `ease-out`
- **Patterns:**
  - Subtle hover scales or filters on interactive elements.
  - Standard DOM element transitions for appearing/disappearing modals.

- **Hover:** Standard pointer cursor with potential subtle brightness or scale shifts.
- **Click:** Immediate visual feedback, often via CSS transitions.
- **Transition:** All properties with a standard 0.3s ease-out transition.
- **Keyboard:** Standard focusable elements with default browser outlines or minimal custom styling.

## 8. Voice & Don'ts

The editorial voice is quirky, confident, and loud, using short, punchy headlines often displayed as massive script and direct, uppercase CTA commands.

- **Tone:** Quirky, confident, loud, and humorous.
- **Headline style:** Short, punchy, and often displayed as massive, screen-filling script text.
- **CTA style:** Direct, uppercase commands like 'SEND' or 'CLOSE' set in bold monospaced fonts.
- **Avoid:** Avoid subtle gradients or muted, sophisticated color palettes. / Avoid elegant, delicate serif fonts or refined typography. / Avoid empty white space without bold color context. / Avoid standard, boring grid alignments without playful overlapping. / Avoid subtle, thin borders or faint drop shadows. / Avoid serious, corporate, or overly formal tone of voice.

### Don'ts
- ❌ Don't use thin, elegant typography — the screenshot shows thick, bold, monospaced fonts and heavy display scripts.
- ❌ Don't rely on a white background — the screenshot shows bold, solid blocks of color like brown, pink, and blue.
- ❌ Don't use subtle gradients — the screenshot shows flat, solid color fills for all backgrounds.
- ❌ Don't use thin, 1px borders — the screenshot shows thick, 2-3px black borders on all elements.
- ❌ Don't use small, delicate icons — the screenshot shows chunky, solid, hand-drawn or oversized star shapes.
- ❌ Don't use a clean, empty grid — the screenshot shows chaotic, overlapping text and colorful blocks.
- ❌ Don't use standard sentence case — the screenshot shows aggressive, widespread use of uppercase text-transform.

The system deliberately avoids subtle gradients, muted palettes, elegant serifs, and empty white space without bold color context.

## System Prompt (paste into AI tool)

```
Design an expressive, playful D2C e-commerce interface for a coffee brand. Use a bold, slightly chaotic aesthetic characterized by vibrant, solid background colors (like burnt orange, soft pink, and light blue) paired with stark black text and borders. Typography is the star: pair massive, expressive display scripts with rigid, uppercase monospaced fonts for all UI elements and body text. The layout relies on bold, overlapping color blocks with thick black strokes rather than clean, empty grids. Components like buttons and cards should feel hand-cut and chunky, often using pill shapes or heavy rounded corners. Avoid sophistication, subtle gradients, or delicate typography; the tone is loud, quirky, and irreverent. Critical constraints: strictly use monospaced fonts for text, maintain uppercase text-transform across the UI, and rely on solid color blocks instead of images for backgrounds.
```