---
name: Balenciaga
description: "This site is a perfect example of how strict UI restraint and a monochromatic palette can amplify the impact of photographic content in a luxury context."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#767676"
  muted-soft: "#AAAAAC"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: sans-serif
    fontSize: 22px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "0.36px"
  heading:
    fontFamily: sans-serif
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.12px"
  body:
    fontFamily: sans-serif
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.12px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A stark, high-fashion e-commerce platform where cinematic photography and austere UI create a premium, editorial atmosphere.

*A stark, high-fashion magazine spread brought to life as an immersive digital shopping experience.*

## Colors

A high-contrast monochrome palette that prioritizes imagery and maintains a strict, austere luxury aesthetic.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#767676`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** sans-serif
- **Body:** sans-serif

- All primary navigation and interactive text must be set in uppercase.
- Primary UI typography must be set in a grotesque sans-serif category.
- Use a wider letter-spacing (around 0.36px) for high-impact display text like section headers.

## Layout

A full-width, immersive grid that lets large-scale photography dominate the viewport, pushing standard UI elements to the periphery.

*Rhythm:* A strict, uniform 4px base unit governs all spacing, creating a precise and structured layout.

## Elevation & Depth

- rgb(0, 0, 0) 0px 0px 0px 0px
- rgb(170, 170, 172) 0px 0px 0px 0px
- Borders: 1px solid #000000

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Strictly rectangular with sharp corners, available as high-contrast filled (black) or outlined (white with black border) variants.
- **card:** A clean, borderless container for product images, typically featuring a plain white background.
- **input:** A minimalist text input with no visible border, defined only by placeholder text and a subtle underline.
- **hero:** A full-bleed, cinematic image or video hero that spans the entire viewport width, overlaid with minimal, centered UI.

## Do's and Don'ts

**Don't:**
- Don't use border-radius on UI elements — screenshot shows strictly rectangular buttons and cards.
- Don't add drop shadows to cards or panels — screenshot shows flat surfaces with sharp borders.
- Don't use serif fonts for UI text — screenshot shows a consistent use of sans-serif typography.
- Don't use uppercase text for body copy — screenshot shows uppercase is strictly for navigation and headers.
- Don't use multiple colors in the UI — screenshot shows a strict black, white, and gray palette.
- Don't add rounded corners to buttons — screenshot shows sharp, 0px radius buttons.

---

## System Prompt (paste into AI agent)

```
Balenciaga is a high-fashion e-commerce platform that uses a stark, monochromatic UI to let full-bleed cinematic photography dominate the user experience. The design relies on a strict black, white, and gray color palette (ink #000000, bg #FFFFFF, muted #767676) and a clean sans-serif typography system. UI elements are austere, featuring sharp rectangular buttons and minimal borders. Critical rules: 1) Maintain a strictly rectangular UI with zero border-radius. 2) Keep all primary navigation and headers in uppercase. 3) Never use drop shadows on cards or panels, relying instead on clean borders. 4) Use a sharp, cubic-bezier(0.32, 0, 0.67, 0) easing curve for modal transitions.
```