---
version: alpha
name: Ysl
description: "full-bleed cinema under one centred wordmark — the only chrome is black-and-white text"
colors:
  on-surface: "#000000"
  surface: "#ffffff"
  primary: "#000000"
typography:
  caption:
    fontFamily: "Helvetica Neue / Arial / system sans"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 1.6px
  nav:
    fontFamily: "Helvetica Neue / Arial / system sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.2px
  body:
    fontFamily: "Helvetica Neue / Arial / system sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  heading:
    fontFamily: "Helvetica Neue / Arial / system sans"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
rounded:
  all: 0px
spacing:
  "4": 4px
  "12": 12px
  "16": 16px
  "20": 20px
  "32": 32px
  "68": 68px
---
# Ysl — Style Reference
> full-bleed cinema under one centred wordmark — the only chrome is black-and-white text

**Theme:** dark

Saint Laurent is a luxury fashion editorial stage where the interface dissolves into full-bleed motion and the only visible chrome is a single line of text navigation. The system is pure binary: obsidian black and pure white, with zero intermediate tones, zero shadows, zero borders, and zero decoration. Every element earns its place by carrying the brand wordmark or a functional link — there is no card, no badge, no gradient, no rounded surface. The hero is an autoplaying campaign film that fills the entire viewport; the SAINT LAURENT logotype anchors the top center in a fine Didone serif, and a tiny uppercase two-line caption floats near the bottom edge as the only call to action. Whitespace, wide letter-spacing, and the serif/sans tension do the heavy lifting that color and shadow do on conventional sites.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Obsidian | `#000000` | `--color-obsidian` | Primary text, nav labels over light imagery, footer and legal copy, card inversions, and full-bleed section dividers — the absolute dark that frames everything (the only color the multi-page scan painted) |
| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, and inverse nav labels/wordmark over dark or busy footage — the negative space that lets imagery breathe *(grafted from curated; the wordmark and nav render white over the hero film)* |

## Tokens — Typography

### Saint Laurent Wordmark — Didone serif (custom) — The SAINT LAURENT logotype is a proprietary Didone-derived mark — elongated wedges, hairline-to-thick contrast, condensed proportions, and a vertical stress that no system font replicates. The live site falls back to `Times` when the custom face is unavailable, confirming the serif register. Used only as the centered site identifier in the header. This mark IS the brand. · `--font-saint-laurent-wordmark`
- **Substitute:** Times / Times New Roman (the site's own fallback), Bodoni 175 condensed, or any thin Didone (Didot) tracked tightly
- **Weights:** 400, 700
- **Sizes:** ~24–32px in the header lockup
- **Line height:** 1.0
- **Letter spacing:** tight, near 0 — the wordmark's own kerning carries it
- **Role:** The SAINT LAURENT logotype is a proprietary Didone-derived custom mark. Used only as the centered site identifier in the header; the YSL Cassandre monogram is reserved for product hardware, never UI chrome.

### Helvetica Neue / Arial / system sans — Navigation labels, footer links, and small functional UI (login, stores, search, bag). Always uppercase, always tracked wide. The whisper-weight restraint is intentional: the serif wordmark does the visual work, the sans nav merely signals location. · `--font-sans`
- **Substitute:** Helvetica Neue, Arial, Inter, or any neutral neo-grotesque
- **Weights:** 400
- **Sizes:** 11–12px (nav, footer)
- **Line height:** 1.4
- **Letter spacing:** 1.0–1.6px, uppercase
- **Role:** Navigation labels, footer links, and small functional UI. Always uppercase, always tracked wide — the sans is the quiet counterpoint to the serif wordmark.

### Helvetica Neue / Arial / system sans — Editorial captions and collection labels floating near image edges (e.g. 'RESPIRO / DISCOVER'). Centered, uppercase, wide letter-spacing — a film-credit feel rather than a product label. · `--font-sans`
- **Substitute:** Helvetica Neue, Arial, Inter, or any neutral neo-grotesque
- **Weights:** 400, 700
- **Sizes:** 10–12px
- **Line height:** 1.5
- **Letter spacing:** 1.5–2.0px, uppercase
- **Role:** Editorial captions and collection labels floating near the bottom edge of the hero film. Centered, uppercase, wide letter-spacing — the caption is the call to action, often paired with a thin down-chevron cueing scroll.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 10px | 1.5 | 1.6px | `--text-caption` |
| nav | 12px | 1.4 | 1.2px | `--text-nav` |
| body | 16px | 1.5 | 0 | `--text-body` |
| heading | 32px | 1.1 | 0 | `--text-heading` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 32 | 32px | `--spacing-32` |
| 68 | 68px | `--spacing-68` |

### Border Radius

| Element | Value |
|---------|-------|
| all | 0px |

### Layout

- **Section gap:** 68px
- **Card padding:** 0px
- **Element gap:** 20px

## Components

### Top Navigation Bar
**Role:** Primary site navigation

Transparent bar overlaid on the hero film. Height auto, no background fill, no border. Left-aligned cluster of uppercase text links (HIGHLIGHTS, WOMEN, MEN, SL PRODUCTIONS, ◼ RIVE DROITE), centered SAINT LAURENT wordmark, right-aligned cluster of text links (LA MAISON, STORES, SERVICES, LOGIN) + search icon + bag icon. Text in #ffffff at 11–12px, letter-spacing ~1.2px, uppercase. Links are plain text — no underline, no color change on hover, no pill. Padding: 20px horizontal, minimal vertical. RIVE DROITE carries a tiny solid square glyph as its only mark.

### Saint Laurent Wordmark Lockup
**Role:** Brand identifier in header

Custom SAINT LAURENT Didone logotype centered in the nav bar. White (#ffffff) over dark or busy footage, black (#000000) over light sections. No surrounding box, no link styling — the wordmark sits naked in the negative space. Rendered at ~24–32px, exact ratio controlled by the brand asset. The YSL Cassandre monogram is never used here — it lives on product hardware only.

### Icon Button (Search / Bag)
**Role:** Utility actions in nav

Text-less stroke icon at 16–18px in #ffffff or #000000 depending on surface. No border, no background, no hover state beyond opacity or color flip. Square hit area padded to ~12px. The bag icon may carry a numeric count in 10px text adjacent.

### Full-Bleed Hero Film
**Role:** Hero and primary content

Autoplaying, muted, looping campaign video (or a single photograph) fills 100vw × ~100vh. No border-radius, no border, no overlay tint. The footage is the component. A small pause/play control sits at the bottom-right corner; a two-line caption overlays bottom-center. Imagery ranges from sun-drenched daylight to low-key noir — the constant is cinematic full-bleed motion, not a fixed lighting key.

### Editorial Caption
**Role:** Image label and collection reference

Two-line block centered near the bottom of the hero. Line 1 in ~12px uppercase, weight 700 (collection or campaign name, e.g. 'RESPIRO'). Line 2 in ~10–11px uppercase (call to discover, e.g. 'DISCOVER'), often followed by a thin down-chevron. White (#ffffff) over footage, letter-spacing 1.5–2px. No background, no button chrome — the caption is the call to action.

### Media Control
**Role:** Play/pause affordance for the hero film

Minimal outline icon (pause bars / play triangle) at ~14–16px in #ffffff, pinned to the bottom-right of the viewport. No background, no border, no label. The only interactive chrome the film exposes.

### Footer
**Role:** Legal, regional, and secondary links

Solid #000000 background block. Multiple columns of 11px uppercase white text with generous vertical rhythm (20–32px row gap). No icons, no logos except a small SAINT LAURENT mark. Link color #ffffff, no underline, no hover color change — opacity reduction is the only affordance.

### Inverted Section Block
**Role:** Dark band breaking the white canvas

Full-width #000000 rectangle used for editorial interludes (campaign intros, collection announcements). White text only. No radius, no border, no shadow. Sits directly adjacent to the white canvas — the seam itself is the design.

### Region / Country Selector
**Role:** Locale confirmation gate

Full-bleed modal on a white field with two stacked square buttons: a primary #000000 fill with #ffffff text ('GO TO United States') and a secondary #ffffff/near-white fill with #000000 text ('CONTINUE TO …'). Both border-radius 0px, no shadow — the value flip alone distinguishes primary from secondary.

## Do's and Don'ts

### Do
- Use only #000000 and #ffffff for every UI element — no grays, no tints, no opacity-based neutrals except at 100% or 0% on imagery
- Set all text in uppercase with letter-spacing between 1.0px and 2.0px — tracking carries the luxury register
- Let the hero film bleed full-bleed (100vw) with no border-radius, no border, no overlay gradient
- Keep the wordmark centered, naked, and unboxed — never wrap it in a pill, circle, or bordered container
- Pair the serif Didone wordmark against uppercase neo-grotesque nav — the serif/sans tension is the only typographic contrast the system allows
- Express all interactive feedback as a color flip (white↔black) or opacity reduction, never as a shadow, border highlight, or fill change
- Hold card and section padding to 0px; the footage IS the surface, not a container for one

### Don't
- Never introduce a chromatic accent, brand color, or status hue — there is no green for success, no red for error, no blue for link
- Never add a box-shadow, drop shadow, inner shadow, or glow to any element — the system is shadowless by design
- Never apply border-radius to any UI element — all corners are square, the system reads as cut paper
- Never use mixed-case or sentence-case in nav, captions, or footer — everything is uppercase
- Never place the wordmark on a colored or photographic panel with a backing shape — it floats on negative space or directly on the footage
- Never render the header identifier as the YSL monogram — the spelled SAINT LAURENT logotype is the site mark; the monogram is product-only
- Never add icons, badges, tags, or decorative elements to editorial surfaces — the image carries all meaning

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Page background, the field imagery floats on or replaces |
| 1 | Inversion | `#000000` | Full-bleed dark sections and card surfaces that invert the canvas — no shadow needed, the value flip is the elevation |

## Elevation

No shadows exist in this system. Elevation is expressed exclusively by value inversion (white-to-black) and by full-bleed cinematic bleed. Adding any box-shadow would break the editorial flatness and the film-still feel of the brand.

## Imagery

Full-bleed editorial fashion film and photography is the entire visual system. The live hero autoplays campaign footage — here a sun-lit outdoor scene, a model striding through green hillside with a woven YSL tote — proving the system is not locked to noir; it spans bright daylight to low-key night. What is constant: cinematic full-bleed motion, tight-to-medium framing, and near-monochrome grading where color is muted toward black, charcoal, oxblood, and ivory rather than pushed to saturated primaries. No product cutouts on white, no lifestyle stock warmth, no graphic illustration. Icons are stroke-only line icons at ~1.5px weight in the nav. No decorative graphics anywhere; the system is footage + wordmark + text, nothing more.

## Layout

Full-bleed single-column layout. The hero occupies the entire viewport (100vw × ~100vh) with a single autoplaying film and no inner padding. Navigation overlays the top of the hero as a transparent bar. Section rhythm is defined by alternating full-bleed frames and thin horizontal bands of solid white or black, separated by 68px vertical gaps. The grid is invisible: content is either centered (wordmark, captions, media control) or left/right clustered (nav links), never gridded into columns of cards. Content density is deliberately sparse — one film, one wordmark, one line of caption per screen.

## Typography Signature

The system runs on a single, deliberate contrast: a fine Didone serif for the one word that matters (SAINT LAURENT, centered, hairline-to-thick, line-height 1.0) against uppercase neo-grotesque sans for everything functional (nav, captions, footer, tracked 1.0–2.0px). There are no intermediate weights, no italics, no third family. The serif whispers heritage; the sans whispers location. Because the palette is pure binary and shadowless, this serif/sans tension — plus letter-spacing — is the *only* hierarchy device the system has, which is why the tracking is so exacting and the wordmark is never allowed a backing shape.

## Agent Prompt Guide

## Quick Color Reference
- background: #ffffff (canvas) or #000000 (inverted blocks)
- text: #000000 (on white surfaces) or #ffffff (over footage / dark blocks)
- surface: #ffffff / #000000 — value flip only
- border: none — the system is borderless
- accent: none — no accent color exists
- primary action: no distinct CTA color; a #000000-fill / #ffffff-text square is as loud as it gets

## Example Component Prompts

1. **Full-bleed hero film**: autoplaying muted looping video (or photograph) covering 100vw × 100vh, no border-radius, no overlay. Top nav overlaid transparently — left cluster of 5 uppercase links (HIGHLIGHTS, WOMEN, MEN, SL PRODUCTIONS, RIVE DROITE) in #ffffff, 12px, letter-spacing 1.2px. Centered SAINT LAURENT wordmark in #ffffff (Didone serif; Times as fallback), ~28px. Right cluster of 4 uppercase links (LA MAISON, STORES, SERVICES, LOGIN) + 16px search icon + 16px bag icon, all #ffffff. Small pause control pinned bottom-right. No nav background.

2. **Editorial caption block**: anchored bottom-center of the hero, two lines of centered #ffffff text. Line 1: ~12px uppercase weight 700, letter-spacing 1.6px, e.g. 'RESPIRO'. Line 2: ~10px uppercase, letter-spacing 1.5px, e.g. 'DISCOVER', followed by a thin 1.5px down-chevron. No background, no border, no padding wrapper — the text floats on the footage with ~40px margin from the bottom edge.

3. **Footer block**: solid #000000 background, full-width, 68px top padding. Three to four columns of links, each in #ffffff, 11px, uppercase, letter-spacing 1.2px, 20px row gap. No icons, no social glyphs, no newsletter input — just text links. Small SAINT LAURENT wordmark in #ffffff, 20px above the legal line.

4. **Region selector modal**: full-bleed white field, centered stack. Primary button #000000 fill, #ffffff text, 0px radius, no shadow, uppercase 12px ('GO TO United States'). Secondary button #ffffff fill, #000000 text, 0px radius, no shadow, directly beneath. The value flip alone signals hierarchy.

## Similar Brands

- **Celine (celine.com)** — Same shadowless monochrome system, same uppercase-tracked nav, same full-bleed editorial media replacing all UI chrome
- **Bottega Veneta (bottegaveneta.com)** — Same single-wordmark-centered header and media-dominant page model with zero decorative UI elements
- **The Row (therow.com)** — Same restraint to pure black/white and uppercase small-caps nav — the interface is nearly invisible, the imagery is the brand
- **Helmut Lang (helmutlang.com)** — Same anti-decorative editorial grid, binary palette, and uppercase tracked typography as the sole UI vocabulary
- **Balenciaga (balenciaga.com)** — Same brutal binary chrome and full-bleed campaign film, restraint pushed to an editorial extreme

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-obsidian: #000000;
  --color-pure-white: #ffffff;

  /* Typography — Font Families */
  --font-saint-laurent-wordmark: 'Saint Laurent', Times, 'Times New Roman', 'Bodoni 175', Didot, serif;
  --font-sans: 'Helvetica Neue', Arial, ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 1.6px;
  --text-nav: 12px;
  --leading-nav: 1.4;
  --tracking-nav: 1.2px;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-heading: 32px;
  --leading-heading: 1.1;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-32: 32px;
  --spacing-68: 68px;

  /* Layout */
  --section-gap: 68px;
  --card-padding: 0px;
  --element-gap: 20px;

  /* Named Radii */
  --radius-all: 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-inversion: #000000;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-obsidian: #000000;
  --color-pure-white: #ffffff;

  /* Typography */
  --font-saint-laurent-wordmark: 'Saint Laurent', Times, 'Times New Roman', 'Bodoni 175', Didot, serif;
  --font-sans: 'Helvetica Neue', Arial, ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.5;
  --tracking-caption: 1.6px;
  --text-nav: 12px;
  --text-body: 16px;
  --text-heading: 32px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-32: 32px;
  --spacing-68: 68px;
}
```