---
version: alpha
name: "Celine"
description: "An austere Parisian luxury system where pure black and white carry the full identity — stark grotesque uppercase, near-zero radius, and a typographic discipline so severe it treats letter-spacing as the only ornament."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f8f8f8"             # faint cool off-white for secondary panels /* estimated */

  # Ink / text
  ink: "#000000"                 # primary text, logotype, all structural elements — pure black
  ink-secondary: "#5a5a5a"       # captions, sub-labels, muted navigation states /* estimated */
  ink-ghost: "#999999"           # placeholder text, disabled states, fine print /* estimated */

  # Brand accent — Celine has no chromatic accent; pure black IS the identity
  primary: "#000000"             # CTA fill, button fill — absolute black
  on-primary: "#ffffff"          # text on black CTA surface

  # Interactive states (all rgba flattened to opaque hex)
  primary-hover: "#1a1a1a"       # button hover softens fractionally from pure black /* estimated */
  text-hover: "#000000"          # link hover — already at absolute black, no shift /* estimated */

  # Semantic
  error: "#cc0000"               # form validation error states /* estimated */

  # Borders
  border: "#000000"              # 1px structural rules, button outlines, dividers
  border-subtle: "#e0e0e0"       # light hairline rules between sections /* estimated */

  # Shadow tints
  shadow-soft: "#000000"         # was rgba(0,0,0,0.15) — modal/drawer overlays — Google format requires hex /* estimated */

typography:
  display-hero:
    fontFamily: "Times New Roman, Times, serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.08em
  display:
    fontFamily: "Times New Roman, Times, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0.06em
  heading-section:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.25em
  heading-sub:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.2em
  body-large:
    fontFamily: "Times New Roman, Times, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1em
  nav-link:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.3em
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.3em
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.15em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 80px
  3xl: 120px

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 0.3em
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary-hover}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 0.3em
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderBottom: "1px solid {colors.border-subtle}"
  input-focus:
    borderBottom: "1px solid {colors.border}"
    outline: "none"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 40px
    borderBottom: "1px solid {colors.border}"

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 6px
    border: "1px solid {colors.border}"
    textTransform: uppercase
---

# Celine Design System

## Overview

Celine's digital identity is an act of radical reduction. Under Hedi Slimane's creative direction from 2018, the house stripped the accent from its own name — "Céline" became "CELINE" — and the design language followed suit. The canvas is absolute white (`{colors.background}`), unbroken and uninterrupted. No tinted sections. No decorative gradients. No brand hue. Just the stark geometry of pure black on white, a chromatic vocabulary so compressed that the system's entire expressive range is encoded in letter-spacing and the choice between a grotesque and a serif.

The typographic system is a deliberate duality. Headlines and editorial moments reach for Times New Roman — a serif selection that reads not as traditional but as Slimane's recurrent citation of the French press, the rock-music poster, the literary paperback. Navigation, captions, and interface labels fall to a narrow grotesque (Helvetica Neue or equivalent), set in all-capitals with extreme tracking. At 0.3em, navigation links spread across their allotted space like text in a luxury print advertisement — measured, spaced, never hurried. This is typography as pace-setting: every character demands that the reader pause, arrive, attend. The `{typography.nav-link}` at 10px with 0.3em tracking is perhaps the quietest and most authoritative navigation on the web.

Color is the dimension that Celine simply refuses to use. `{colors.ink}` is pure black (`#000000`) — not a warm near-black, not a cool charcoal, but the absolute. There is no brand accent, no seasonal color, no hover color that introduces new chroma. Buttons are black. Borders are black. The wordmark is black. Interaction is communicated by opacity and the most subtle tonal shift. The system's restraint here is so complete that it functions as a statement: Celine does not need color. It has form.

**Key Characteristics:**
- Absolute white canvas (`{colors.background}`) — zero tinted sections, zero dark-mode presence, zero chromatic relief
- Dual-typeface discipline: Times New Roman (`{typography.display-hero}`) for editorial, Helvetica Neue (`{typography.nav-link}`) for all interface roles
- Pure black (`{colors.ink}`) as the sole brand expression — no accent hue whatsoever
- Near-zero border-radius: `{rounded.none}` on every UI element — buttons, cards, inputs, panels are all perfect rectangles
- Extreme letter-spacing on all interface labels (`{typography.nav-link}` at 0.3em) — the visual signature of the Slimane era
- Uppercase everywhere in the interface — not title case, not sentence case, always full uppercase
- Full-bleed photography that bleeds into the white canvas; fashion as the content, not the frame
- Underline-only inputs: `borderBottom` alone, no container, no rounded corners, no background
- Hairline `{colors.border}` at 1px — the nav is separated from content by a single precise rule
- Shadow-free — the site is categorically flat; elevation is communicated by layering and opacity only
- Motion as absence: transitions on opacity or color only, no transforms, no parallax
- Section rhythm governed by extreme vertical generosity — `{spacing.3xl}` (120px) between major sections on desktop

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The only page background. Absolute, unmodified, invariable across every context and breakpoint.
- **Off-White Surface** (`{colors.surface}`): A near-imperceptible step used in secondary panel fills and ghost button hover states.

### Ink / Text
- **Celine Black** (`{colors.ink}`): Pure black — all primary text, the logotype, structural rules, and every CTA fill. No warm deviation, no softening. This is the house's chromatic statement.
- **Secondary Ink** (`{colors.ink-secondary}`): A mid-gray for supporting metadata, secondary captions, and muted navigation sub-states.
- **Ghost Ink** (`{colors.ink-ghost}`): Lowest tier — placeholder text in inputs, disabled states, legal fine print.

### Brand Accent
- **Pure Black CTA** (`{colors.primary}`): The system has no chromatic accent. `{colors.ink}` does every accent job — CTAs, active states, focus rings, borders.
- **White on Black** (`{colors.on-primary}`): Button label text on the pure-black CTA fill.

### Text States
- **Button Hover** (`{colors.primary-hover}`): A fractional softening of pure black on hover — the system's quietest possible motion.
- **Link Hover** (`{colors.text-hover}`): Navigation links already read as pure black; hover maintains that absolute rather than introducing change.

### Semantic
- **Error Red** (`{colors.error}`): Form validation only. The system's single departure from achromatic discipline — even here, tightly contained.

### Borders
- **Structural Black** (`{colors.border}`): 1px rules on navigation, button outlines, and structural dividers — always pure black.
- **Subtle Divider** (`{colors.border-subtle}`): Light hairline used on input resting states and secondary content partitions.

## Typography

### Font Family
- **Serif (editorial)**: `Times New Roman`, with fallbacks: `Times, serif`. Used for display headlines, campaign copy, and editorial paragraphs — the house's literary citation.
- **Grotesque (interface)**: `Helvetica Neue`, with fallbacks: `Helvetica, Arial, sans-serif`. All navigation, button labels, captions, body UI text — always uppercase, always tracked.
- **OpenType Features**: Default in both faces. Expressiveness comes from weight, tracking, and the tonal contrast between serif and grotesque — not feature-set manipulation.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 80px serif — campaign headline, seasonal opener, editorial statement |
| `display` | 48px serif — secondary editorial moments, category page titles |
| `heading-section` | 11px grotesque uppercase 0.25em — section labels, interface headings |
| `heading-sub` | 10px grotesque uppercase 0.2em — product category sub-labels, filter headings |
| `body-large` | 18px serif — editorial paragraphs, campaign descriptions, extended brand copy |
| `body` | 11px grotesque 0.1em — product descriptions, form labels, utility copy |
| `nav-link` | 10px grotesque uppercase 0.3em — primary navigation, footer links |
| `button-ui` | 10px grotesque uppercase 0.3em — all CTA labels, action text |
| `caption` | 9px grotesque uppercase 0.15em — size labels, color swatches, legal text |

### Principles
- **Dual-face discipline**: serif for content that must breathe and be read; grotesque for interface elements that must be scanned and acted upon. No blurring of roles.
- **Uppercase everywhere in the interface**: `{typography.nav-link}`, `{typography.button-ui}`, `{typography.caption}` are always uppercase — not a style option, an invariable rule.
- **Tracking as luxury signal**: 0.3em on navigation and CTAs, 0.25em on section headings, 0.15em on captions. The more important the label, the more it breathes. Size is withheld; space is granted instead.
- **Serif as editorial mode**: Times New Roman at `{typography.display-hero}` (80px) is not a classical choice — it is a reference to print culture, the Parisian press, the rock-music broadsheet. It reads as knowing, not conservative.
- **Weight restraint**: both faces run at weight 400 throughout. Bold is used nowhere in the interface. Authority comes from letterform quality and space, not emphasis.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 8px.

Celine's pages are editorial in their pace. Campaign sections breathe at 120px (`{spacing.3xl}`) on desktop — a gap wide enough to signal that content is arriving, not stacking. The product grid maintains measured gutters. Nothing is crowded. The spacing system communicates the same thing the tracking communicates: luxury moves slowly.

### Grid & Container
- Max content width: approximately 1440px, with interior gutters around 40px
- Desktop product grid: typically 3–4 columns, no card chrome, no hover lifts
- Hero sections: full-bleed fashion photography, often portrait orientation at full viewport height
- Navigation: black border-bottom rule separates a slim nav bar from page content; "CELINE" logotype left-aligned or centered; right-side utilities (Search, Account, Bag) in `{typography.nav-link}` spacing

### Whitespace Philosophy
- White space is the primary luxury signal — sections do not stack, they arrive
- Photography-first: the fashion image fills the viewport; UI exists only at the periphery
- No decorative fills between sections — a single `{colors.border-subtle}` hairline or pure air

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All page surfaces — categorically flat throughout |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Nav bar rule, section separators |
| Input Resting (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Resting input underline |
| Input Focus (Level 1) | `border-bottom: 1px solid {colors.border}` | Input focus — underline darkens, no glow |
| Modal / Overlay (Level 3) | `opacity` backdrop, no box-shadow | Cart drawer, overlays use opacity only |

**Shadow Philosophy**: Celine uses no box-shadows. The site is categorically and philosophically flat. The fashion image commands three-dimensional presence; the interface must not compete with it. Depth is communicated by opacity and z-index alone — never by shadow, never by lift on hover. The absence of shadow is not a technical limitation; it is a design position.

## Shapes

The complete radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every UI element — buttons, cards, inputs, modals, image frames, panels |

The system is architecturally square. There is no `sm`, no `pill`, no transition radius. Every corner in the Celine interface is a perfect right angle. The typography is extreme; the geometry matches it. Where some luxury brands allow a 2px softening on functional controls, Celine does not concede even this. The radical squareness is a continuation of the Slimane aesthetic: precision, austerity, the refusal of warmth as a concession.

## Components

The complete component spec lives in the `components:` token block.

### Button variants
- **`button-primary`** — `{colors.primary}` fill (pure black), `{colors.on-primary}` white text, `{rounded.none}`, 10px Helvetica Neue uppercase at 0.3em tracking, `{spacing.md}` vertical padding. Hover softens to `{colors.primary-hover}` via `0.2s ease` on background-color. No lift, no shadow. Used for "Add to Bag", "Proceed to Checkout".
- **`button-secondary`** — White (`{colors.background}`) fill, `{colors.ink}` text, same geometry, same 1px border. Hover introduces `{colors.surface}` fill. Used for secondary actions — "Save to Wishlist", "Continue Shopping".

### Cards
- **`card`** — Absolute white, `{rounded.none}`, no shadow, no border. Product photography is edge-to-edge; `{typography.heading-sub}` name and `{typography.body}` price appear below with minimal margin. The card is a presentational frame — no chrome.

### Inputs
- **`input`** — White fill, `border-bottom: 1px solid {colors.border-subtle}` only, `{rounded.none}`. 11px Helvetica Neue. Focus: underline intensifies to `{colors.border}`. No outline ring, no background change, no glow.

### Badges / Tags
- **`badge`** — 1px solid `{colors.border}`, white fill, 9px uppercase grotesque. Used for "NEW", "LIMITED" product flags — typographic, minimal, no background color.

### Navigation
- **`nav-bar`** — White background, `{colors.ink}` text, `{typography.nav-link}` (10px uppercase 0.3em tracking). "CELINE" wordmark in logotype treatment. Border-bottom `{colors.border}` 1px separates the nav plane from content. Link hover: color deepens or opacity shifts — no underline animation, no background highlight.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the only canvas — never introduce tinted sections, dark-mode variants, or colored washes
- Keep all UI elements at `{rounded.none}` — every corner is a right angle, without exception
- Apply `{typography.nav-link}` (10px grotesque, uppercase, 0.3em tracking) to all interface labels — nav, buttons, captions
- Use serif (`{typography.display-hero}`, `{typography.body-large}`) only for editorial and campaign content; grotesque handles all interactive roles
- Maintain extreme tracking (0.25–0.3em) on all uppercase interface labels — this is the house's typographic fingerprint
- Let photography fill the viewport — position UI at the edges; the image is the content
- Use `{colors.error}` exclusively for form validation — never as a general accent or highlight
- Animate only via `opacity` and `color` transitions at `0.2s ease` — no transforms, no scale, no parallax

### Don't
- Don't introduce a chromatic brand accent — `{colors.ink}` pure black carries every CTA, border, and structural role
- Don't round any corner — not 2px, not 4px. The system uses exactly `{rounded.none}` everywhere
- Don't use title case or sentence case for interface labels — uppercase is invariable in the grotesque roles
- Don't add box-shadows, hover lifts, or card depth — the interface is flat by design position, not by default
- Don't use bold weight (700+) for emphasis in the interface — authority comes from spacing and form, not weight
- Don't reduce letter-spacing below 0.15em for any uppercase interface element — cramped tracking contradicts the system's defining gesture
- Don't introduce a second serif — Times New Roman is the editorial voice; no display alternative belongs here
- Don't use `{colors.ink-ghost}` for any interactive or navigational element — it is strictly for placeholders and disabled states

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | < 375px | Single-column; hamburger drawer nav; hero type scales to ~36px; bottom-bar utilities |
| Mobile | 375–767px | Single-column product grid; nav collapsed; spacing compressed ~40% |
| Tablet | 768–1023px | Two-column grid; nav still hamburger; wider side margins; hero ~60px |
| Desktop | 1024–1439px | Full horizontal nav; 3-column product grid; full section rhythm |
| Large Desktop | ≥ 1440px | 4-column grid; max container ~1440px; full 120px vertical section gaps |

### Touch Targets
- Primary buttons use 16px vertical padding — effective tap height approximately 48px
- Navigation links on mobile render inside a full-screen drawer with generous line-height
- Product tiles are fully tappable as complete card regions
- Input fields expand full-width on mobile with a minimum 44px effective height

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger drawer on mobile; full-screen overlay with flat uppercase links
- **Type scale**: `{typography.display-hero}` (80px) scales toward 36–40px on mobile; grotesque interface labels hold at their small sizes
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; equal gutters maintained
- **Spacing**: 120px vertical section gaps compress to 60px on mobile while preserving the editorial rhythm

### Image Behavior
- Campaign photography is always full-bleed — no max-width cap on hero images
- Portrait product images maintain consistent aspect ratio across breakpoints
- Image frames are always `{rounded.none}` — no image clips to a rounded container
- The white canvas of the page and the frequent studio-white or near-white backdrop of fashion photography merge invisibly — no frame between image and page

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — pure white
- Primary text: `{colors.ink}` — pure black
- CTA fill: `{colors.primary}` — pure black
- CTA text: `{colors.on-primary}` — white
- Secondary text: `{colors.ink-secondary}`
- Section divider: `{colors.border-subtle}`
- Input border resting: `{colors.border-subtle}`
- Input border focus: `{colors.border}`

### Example Component Prompts

- "Build a full-bleed campaign hero for Celine on `{colors.background}` white. Fill the viewport with fashion photography. Overlay `{typography.display-hero}` (80px Times New Roman, weight 400, `letter-spacing: 0.08em`) campaign headline in `{colors.ink}`. No image tint, no scrim, no decoration. Navigation at top: 'CELINE' logotype left-aligned in `{typography.nav-link}` (10px Helvetica Neue, uppercase, `letter-spacing: 0.3em`), utility links right. `border-bottom: 1px solid {colors.border}` separates the nav plane from content."

- "Create a primary CTA button: `{colors.primary}` fill (pure black `#000000`), `{colors.on-primary}` white text, `{typography.button-ui}` (10px Helvetica Neue, `text-transform: uppercase`, `letter-spacing: 0.3em`), `border-radius: 0`, `padding: 16px 32px`. Hover transitions fill to `{colors.primary-hover}` via `0.2s ease` on background-color. No border radius, no shadow, no scale lift."

- "Design a product card: `{colors.background}` white surface, `border-radius: 0`, no shadow, no border. Full-width portrait product image edge-to-edge. Below: `{typography.heading-sub}` (10px Helvetica Neue uppercase 0.2em) product name in `{colors.ink}`, then `{typography.body}` price. No chrome — the card is a presentational frame."

- "Build a desktop navigation bar: `{colors.background}` white, `border-bottom: 1px solid {colors.border}`. 'CELINE' in logotype treatment centered or left-aligned. All nav links in `{typography.nav-link}` (10px Helvetica Neue, uppercase, `letter-spacing: 0.3em`, `{colors.ink}`). Search, Account, Bag as right utilities. No background change on hover — color or opacity shift only, `0.2s ease`."

- "Create a newsletter input: `{colors.background}` white fill, `border-bottom: 1px solid {colors.border-subtle}` only, `border-radius: 0`, `{typography.body}` 11px Helvetica Neue, `{colors.ink}` text, `{colors.ink-ghost}` placeholder in uppercase. Focus: underline deepens to `{colors.border}`. No outline ring, no background shift, no glow. Pair with `{components.button-primary}` 'SUBSCRIBE' CTA."

- "Render a Celine product grid: 4-column desktop layout, `{spacing.md}` gutters, `{colors.background}` white throughout. Each tile is a `{components.card}` — zero chrome, portrait image top, `{typography.heading-sub}` product name and `{typography.body}` price below. No hover elevation — product image may shift to 0.9 opacity via `0.2s ease` as the only hover signal."

### Iteration Guide

1. Start on absolute white (`{colors.background}`) — if any element carries a non-white background, remove it.
2. Set all interface labels in Helvetica Neue (`{typography.nav-link}`), uppercase, at minimum 0.15em tracking. If any label is title case or sentence case in the interface, convert it. If any tracking is below 0.15em, expand it.
3. Apply `border-radius: 0` to every element. If any corner is visibly rounded — even fractionally — flatten it.
4. Confirm no chromatic accent exists anywhere. If any color other than black, white, or a gray derivative appears in structural or interactive roles, remove it.
5. Set display headlines in Times New Roman (`{typography.display-hero}`). If a sans-serif appears in a headline role, replace it.
6. Check that no box-shadow appears on any product card, button, or panel. If present, remove. Overlays use opacity only.
7. Limit motion to `transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease`. Remove all transforms, scale, translate.
8. Verify section rhythm: major desktop vertical gaps should approach `{spacing.3xl}` (120px). If sections feel stacked, add air — the slowness is the luxury.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Celine. Brand names and trademarks belong to their respective owners.