What is Balenciaga's primary brand color?

Balenciaga has no brand accent color. The extraction scanned 1984 elements and found exactly three tones in use: pure black (#000000) with 1082 total occurrences across text, background, border, and shadow uses; pure white (#ffffff, with #f6f5f3 merged) with 33 occurrences; and a mid-grey (#aaaaac) used exclusively as a shadow tone with 106 of its 107 occurrences appearing as shadows. The system achieves brand distinction entirely through typographic identity — BB-Regular and BB-CondBold — rather than through chromatic voltage. Attempting to add a color accent would directly contradict the brand's monochromatic philosophy.

What typefaces does Balenciaga use, and what should I substitute?

Balenciaga runs two proprietary house typefaces: BB-Regular (a geometric sans at regular weight) for interface chrome, body text, and navigation at 12–14px; and BB-CondBold (a condensed bold variant) for product names, category headings, and campaign labels at 12–22px. Both fallback to Helvetica Neue, Helvetica, Arial, sans-serif. For open-source substitutes: Barlow Condensed Bold approximates BB-CondBold's compressed proportions and uppercase character; for BB-Regular, Helvetica Neue at the same weights is the intended fallback. Avoid Inter and Geist — their optical looseness reads against the compression that defines the brand.

Why does Balenciaga use a black canvas when most luxury brands use white?

Balenciaga's black canvas inverts the luxury e-commerce convention that runs from Chanel's white to Dior's white to Hermès' cream. The inversion is a direct expression of the Demna era's attitude — the brand treats commercial convention as material for critique rather than convention to inherit. Digitally, the black canvas means product photography is the only bright surface above the fold; the UI chrome recedes, and the garments and accessories read as objects in a dark studio rather than products on a shelf. Chanel and Dior present; Balenciaga stages.

What easing curves does Balenciaga use?

The extraction captured five CSS custom properties for animation: --ease (cubic-bezier(.4,0,.2,1) — standard Material ease), --ease-out-quint (cubic-bezier(.22,1,.36,1) — fast exit, soft land), --ease-fade (cubic-bezier(.19,1,.22,1) — very fast exit, extremely soft landing for opacity), --ease-transform (cubic-bezier(.22,1,.36,1) — same as ease-out-quint, dedicated to transforms), and --ease-bounce (cubic-bezier(.65,-.55,.25,1.5) — slight overshoot with snap-back). The bounce curve is the distinctive signal: it gives UI interactions like drawer opens, menu expansions, and hover states a physical snap quality that reads different from the smooth deceleration most luxury sites use.

Can I use this DESIGN.md to build a luxury fashion React storefront?

Yes — feed this file to Claude, Cursor, or any AI tool that reads structured design tokens and it will reproduce Balenciaga's moves: black canvas, BB-CondBold compressed uppercase labels at 22px for product headings, 4px radius on interactive elements, shadow-based elevation rather than tonal surface lift, and the bounce easing curve for UI interactions. The key constraint: the monochrome system only works if the commitment is total. Adding a brand accent (a red sale tag, a golden membership badge) immediately breaks the discipline. For a white-canvas luxury storefront with more chromatic flexibility, look to Chanel's approach instead.

Balenciaga Design System

Balenciaga's design system as a DESIGN.md file.

About Balenciaga DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source balenciaga.com

E-commerce & Retail

Balenciaga's digital system is the one luxury fashion site that looks like it was designed to discomfort before it was designed to sell. The navigation bar runs "FALL 26" in 12px tracked uppercase with zero visual hierarchy between product categories and seasonal identifiers — everything sits at the same compressed weight and size. The product grid densifies to the edge of the viewport. The canvas is pure black. There is no warm ivory, no gentle blush, no brand gold: the system runs three tones (black, white, and a mid-grey shadow) and trusts the house typefaces — BB-Regular and BB-CondBold, both named after Cristóbal Balenciaga — to carry the full identity load.

The DESIGN.md file captures 12 color tokens from the extraction's three-tone palette, 11 typography tokens spanning BB-Regular at 12–14px for UI chrome and BB-CondBold at 12–22px for product headings and category labels, 4 radius tokens (the system's dominant radius is 4px), 8 spacing tokens anchored to a 12px base, and 17 component definitions covering the primary button, the tracked-uppercase nav link, the product card, the shadow-elevated modal surface, and the cookie-consent banner. The extraction also captured five CSS easing custom properties — including the distinctive --ease-bounce (cubic-bezier .65,-.55,.25,1.5) — confirming that motion is a considered part of the system.

Feed this file to Claude or Cursor and it will reproduce Balenciaga's specific moves: black canvas instead of white, BB-CondBold at 22px tracked uppercase for every product label, 4px radius on interactive surfaces, and shadow-based rather than tonal elevation. The one move worth borrowing carefully: the compressed uppercase treatment works because it applies to everything — if you use it selectively on some labels but not others, the system reads as a pastiche rather than a commitment.

What makes it distinct

House typefaces as brand identityBB-Regular and BB-CondBold are proprietary fonts named after the house, carrying the visual authority that other brands assign to a brand accent color
Compression as aestheticBB-CondBold at 22px with 1.1px tracking and uppercase transforms every product name into a structural typographic block
Three-color systempure black, pure white, and a single mid-grey shadow form the entire visual vocabulary; the system achieves distinction without any chromatic element
Shadow as the only elevationgrey shadow tones (not raised surfaces) create the depth hierarchy across 1082 total color occurrences for black alone
Bounce easing as signature motionthe CSS custom property --ease-bounce: cubic-bezier(.65,-.55,.25,1.5) appears alongside standard easing curves, signaling that Balenciaga's UI has a deliberate snap-back character

Live at balenciaga.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

balenciaga.com

Explore Balenciaga

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Balenciaga design system FAQ

Common questions about Balenciaga's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Balenciaga — official site

Balenciaga's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.