---
name: Touchycoffee
description: "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."
version: alpha

colors:
  background: "#9f4920"
  primary: "#000000"
  neutral: "#788c8c"
  bg-soft: "#fce3e3"
  bg-quiet: "#d0eaf4"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: display-script
    fontSize: 120px
    lineHeight: 0.85
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: monospaced
    fontSize: 50px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: monospaced
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 20px
  lg: 100px
  pill: 100px

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

---

## Overview

An energetic, expressive D2C coffee brand with bold typography, vibrant colors, and a quirky, irreverent personality.

*A loud, hand-painted sign on a local, slightly eccentric neighborhood cafe.*

## Colors

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

- **Background (`#9f4920`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#788c8c`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Loose and erratic, relying on large distinct gaps and padding rather than strict mathematical rhythm.

## Elevation & Depth

- 3px 3px 0px 0px rgba(0,0,0,1.0)
- Borders: Thick black strokes (2-3px) or none, emphasizing a raw, cut-out aesthetic.

## Shapes

- `sm`: 4px
- `md`: 20px
- `lg`: 100px
- `pill`: 100px

## Components

- **button:** Pill-shaped with a solid black background and white uppercase monospaced text, often with thick borders.
- **card:** Solid color blocks with rounded corners and thick black borders, functioning as independent visual islands.
- **chip:** Used for star ratings, rendered as solid, chunky stars within colored blocks.
- **input:** Simple bordered fields or inline text inputs, maintaining the monospaced font.
- **hero:** Massive, screen-filling display script text dominating the viewport.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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