# Balenciaga · Design system migration spec

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

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

## 1. Identity DNA

Balenciaga's digital interface operates as a stark, high-fashion magazine spread brought to life. It is an immersive shopping experience where austere UI acts as a neutral frame, allowing cinematic product photography to command full attention.

**One-liner:** A stark, high-fashion e-commerce platform where cinematic photography and austere UI create a premium, editorial atmosphere.
**Keywords:** high-fashion · minimalist · avant-garde · editorial · luxury
**Analogy:** A stark, high-fashion magazine spread brought to life as an immersive digital shopping experience.

## 2. Color

The system employs a high-contrast monochrome palette that prioritizes imagery and maintains a strict, austere luxury aesthetic. This deliberate color restraint ensures that no UI element competes with the visual narrative of the collection.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#767676` | placeholder |
| `--muted-soft` | `#AAAAAC` | weak hint |
| `--line` | `rgba(0,0,0,1)` | divider |

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

Color is used not for expression, but as a functional tool to define hierarchy and create dramatic visual tension.

## 3. Typography

The typographic voice is defined by a primary grotesque sans-serif category, with uppercase treatment mandated for all navigation and interactive text. A wider letter-spacing on display type adds a sharp, editorial quality to section headers.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 22px | 1.1 | 700 | 0.36px | Modal title 'SELECT YOUR LOCATION' |
| heading | 14px | 1.4 | 400 | 0.12px | Main navigation links and section headings |
| body | 12px | 1.3 | 400 | 0.12px | UI text, search placeholders, and secondary links |

**Type rules:**
- 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.

## 4. Spacing

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

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A strict, uniform 4px base unit governs all spacing, creating a precise and structured layout.

## 5. Surfaces

Depth is communicated through a vocabulary of minimal borders and the complete absence of drop shadows. Surfaces are defined by crisp lines and flat planes, reinforcing the system's geometric austerity.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - rgb(0, 0, 0) 0px 0px 0px 0px
  - rgb(170, 170, 172) 0px 0px 0px 0px
- **Borders:** 1px solid #000000

## 6. Layout

The layout skeleton is a full-width, immersive grid designed to let large-scale photography dominate the viewport. Standard UI elements like navigation and modals are pushed to the periphery, serving as subtle guides rather than central features.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 16px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is minimal and precise, focused on architectural transitions and clear state changes. Modal overlays use a sharp cubic-bezier curve for a deliberate, heavy feel, while interactive feedback is quick and understated.

- **Durations:** micro 150ms · small 250ms · medium 350ms
- **Easing:** `cubic-bezier(0.32, 0, 0.67, 0)`
- **Patterns:**
  - Modal and overlay transitions use a 350ms duration with a sharp cubic-bezier easing curve.
  - Button interactions rely on quick 150ms box-shadow or color transitions for subtle feedback.
  - Page-level state changes are marked by a 0.25s ease-out opacity fade.

- **Hover:** Subtle opacity or box-shadow transitions on interactive elements.
- **Click:** Immediate visual state change on press.
- **Transition:** Smooth transitions for UI states like hover and focus.
- **Keyboard:** Standard interactive elements are focusable and respond to standard keyboard inputs.

## 8. Voice & Don'ts

The editorial voice is authoritative, austere, and minimalist. All headlines are short, declarative, and set in uppercase sans-serif, while calls to action are direct and imperative.

- **Tone:** Authoritative, austere, and minimalist.
- **Headline style:** Short, declarative, and set in uppercase sans-serif.
- **CTA style:** Direct and imperative, using uppercase text.
- **Avoid:** Friendly or casual language / Excessive descriptive text / Rounded or playful visual elements

### Don'ts
- ❌ 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.

The system deliberately avoids rounded corners, playful language, and any visual element that would soften its sharp, avant-garde edge.

## System Prompt (paste into AI tool)

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