---
name: Mucho
description: "A perfect example of how typography-driven design can create a powerful brand presence with minimal UI components."
version: alpha

colors:
  background: "#FBFBFB"
  primary: "#000000"
  secondary: "#212121"
  tertiary: "#DB4A41"
  neutral: "#A6A6A6"
  bg-soft: "#FFFFFF"
  bg-quiet: "#F4F4F4"
  muted-soft: "#C7C7C7"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.2px"
  display-sm:
    fontFamily: geometric-sans
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.4px"
  body-sm:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.4px"

rounded:
  sm: 4px
  md: 5px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 30px
  2xl: 35px
  3xl: 64px

---

## Overview

Designing meaning, value, and future for brands.

*A confident, high-end design studio.*

## Colors

Minimalist canvas with bold, expressive accents.

- **Background (`#FBFBFB`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#212121`)** — uses `ink-soft` token
- **Accent (`#DB4A41`)** — uses `accent` token
- **Muted (`#A6A6A6`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** grotesque-sans

## Layout

Wide open spaces with bold typography centered or left-aligned.

*Rhythm:* Generous whitespace to let typography breathe.

## Elevation & Depth

- 0px 25px 50px -12px rgba(0,0,0,0.25)
- Borders: 1px solid black

## Shapes

- `sm`: 4px
- `md`: 5px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Rounded pill outline with black border and uppercase text.
- **card:** Solid colored blocks (red) with bold text and icons.
- **hero:** Massive centered typography with playful graphic elements.

## Do's and Don'ts

**Don't:**
- Don't use multiple font families — the site relies heavily on a single grotesque typeface family.
- Don't use complex gradients — the palette is strictly flat black, white, and a single red accent.
- Don't center-align all body copy — text is primarily left-aligned with specific centering for display.
- Don't use standard square cards — elements are presented as flat, bold color blocks.
- Don't use drop shadows everywhere — they are reserved for specific floating elements like the cookie banner.
- Don't use a dark mode — the site is strictly light-themed with a bright white background.

---

## System Prompt (paste into AI agent)

```
Mucho is a design agency website characterized by extreme minimalism and bold, expressive typography. The layout is dominated by massive geometric/grotesque display text set against a stark white canvas. A bright red accent is used sparingly for high-contrast content blocks. The system uses a restricted palette of black, white, and a single high-chroma red, with very tight letter-spacing on headlines. Navigation is minimal and uppercase. Critical don'ts: avoid multiple font families, complex gradients, centered body copy, and overly rounded UI elements. The focus is on the raw power of typography and clear, direct communication.
```