---
version: alpha
name: "Sézane"
description: "Parisian romantic womenswear where a warm parchment canvas, transitional serif headings, and dusty rose accents create an intimate editorial mood — handwritten in spirit, precise in execution."

colors:
  # Surface / canvas
  background: "#faf8f5"           # /* estimated */ warm parchment — Sézane's signature cream field
  surface: "#f2ede7"              # /* estimated */ slightly deeper linen tint for section bands
  surface-elevated: "#ffffff"     # pure white for card interiors and overlays

  # Ink / text
  ink: "#1c1814"                  # /* estimated */ warm near-black — richer than #000, reads like aged ink on cream
  ink-muted: "#6b6259"            # /* estimated */ muted warm brown for secondary text, captions
  ink-ghost: "#b0a89e"            # /* estimated */ lightest tier — placeholders, disabled states, fine print

  # Brand accent — dusty rose / blush
  primary: "#c5877a"              # /* estimated */ Sézane's signature dusty rose / terracotta blush CTA
  on-primary: "#ffffff"           # white text on blush button
  primary-hover: "#b0776a"        # /* estimated */ deepened blush on hover
  primary-container: "#f7ede9"    # /* estimated */ pale blush container / badge background

  # Interactive states
  text-hover: "#1c1814"           # ink lifts to full saturation on link hover
  focus-ring: "#c5877a"           # primary blush as focus indicator

  # Semantic
  error: "#c0392b"                # standard warm red for form validation

  # Borders
  border: "#ddd6ce"               # /* estimated */ warm greige hairline — dividers, input outlines
  border-input: "#b0a89e"         # /* estimated */ slightly darker for input underline rule

  # Shadow tints
  shadow-soft: "#c8bfb5"          # /* estimated */ was rgba(0,0,0,0.08) warm — Google format requires hex

typography:
  display-hero:
    fontFamily: "Sezane Serif, Times New Roman, Georgia, serif"  # /* estimated */ custom transitional serif
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Sezane Serif, Times New Roman, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Sezane Serif, Times New Roman, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Sezane Serif, Times New Roman, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Helvetica Neue, Arial, sans-serif"  # /* estimated */ clean sans for editorial body
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.01em
  body:
    fontFamily: "Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.01em
  nav-link:
    fontFamily: "Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.06em
  button-ui:
    fontFamily: "Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.12em
  product-title:
    fontFamily: "Sezane Serif, Times New Roman, Georgia, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.05em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  sm: 2px         # /* estimated */ hairline rounding on form elements only
  md: 4px         # /* estimated */ subtle card rounding
  pill: 9999px    # newsletter tag chips and circular icon buttons

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
    textTransform: uppercase
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 14px 32px

  button-secondary:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 0px
    borderBottom: "1px solid {colors.ink}"
    textTransform: uppercase
  button-ghost-hover:
    borderBottom: "1px solid {colors.primary}"
    textColor: "{colors.primary}"

  card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  card-product:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border-input}"
    outline: "2px solid {colors.focus-ring}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 3px 8px
    textTransform: uppercase

  nav-bar:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 40px
---

# Sézane Design System

## Overview

Sézane does not design a website — it curates an atelier. The canvas opens with a warm parchment field (`{colors.background}`) that reads more like aged Arches paper than a browser default white, immediately signaling that what follows is considered, unhurried, and handmade in spirit. Against this cream ground, all typography and chrome settle with a softness that feels Parisian by temperature rather than cliché: an `{colors.ink}` that carries the warmth of a dark espresso rather than the flatness of pure black, and a signature blush accent (`{colors.primary}`) rooted in the terracotta-rose of southern French pottery. Nothing is aggressive. Everything invites lingering.

The typographic strategy pairs a transitional serif — used for all display and product-naming moments — with a clean neutral sans that handles navigation, buttons, and body copy at reading scale. This split mirrors the brand's own tension: crafted romanticism at the story level, pragmatic Parisian clarity at the task level. Product names appear in the serif, dressed like titles of short novels; checkout and nav labels switch to the sans at a light tracking, clipped and efficient. The combination avoids both the coldness of a pure-sans system and the costume-drama weight of all-serif luxury.

The signature spatial gesture is generosity. Sézane pages breathe at an editorial pace, separating categories with wide empty bands of `{colors.background}` where another brand would insert a promotional banner. Product imagery is given full-bleed room — the grid does not compress the garment. Photography is the primary brand carrier; the design system's job is to recede gracefully and let a linen blazer or embroidered blouse close the conversation.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) — never pure white, never cool grey; the cream ground is a design decision, not a default
- Dusty rose / blush primary (`{colors.primary}`) appears only on CTAs and selected interactive states — a gentle chromatic punctuation in an otherwise neutral system
- Transitional serif (`{typography.display-hero}`, `{typography.product-title}`) for all narrative and product-naming moments; sans-serif (`{typography.nav-link}`, `{typography.button-ui}`) for all functional UI
- Zero border-radius (`{rounded.none}`) on all primary UI — buttons, cards, image frames are architecturally square; the softness comes from palette, not geometry
- Typography at display scale (72px, 48px) set in weight 400 only — no bold, no heavy; refinement lives in the letterform, not stroke width
- Uppercase letter-spaced button labels (`{typography.button-ui}`, `0.12em`) signal action without shouting
- Product grid prefers two or three columns with generous gutters over dense four-column layouts; whitespace is a product attribute
- Subtle elevation through shadow-soft only — no dramatic drop shadows; depth is created by layering warm neutrals
- Blush focus ring (`{colors.focus-ring}`) maintains brand coherence in keyboard navigation without introducing a harsh blue
- Handwritten or script elements (promotional banners, seasonal campaigns) appear as raster or SVG type art, never as a typeface token in the system

## Colors

### Surface & Canvas
- **Parchment** (`{colors.background}`): The defining canvas. Every page rests on this warm off-white — it communicates aged linen, handwritten notes, and the softness of natural materials. Never substitute a pure white or cool grey.
- **Linen Surface** (`{colors.surface}`): A half-step darker than the canvas, used for section banding, filter panels, and sidebar backgrounds. Distinguishes content zones without hard lines.
- **Pure White** (`{colors.surface-elevated}`): Applied only to elevated surfaces — product cards, modal interiors, input fields — where crisp contrast against the canvas draws the eye.

### Ink / Text
- **Warm Near-Black** (`{colors.ink}`): The primary text color across all roles. Carries a subtle warmth that prevents the system from reading clinical against the cream canvas.
- **Muted Warm Brown** (`{colors.ink-muted}`): Secondary text — captions, product sub-details, navigation sub-labels. A step toward the canvas color without losing legibility.
- **Ghost Tan** (`{colors.ink-ghost}`): The quietest text tier — placeholders, disabled labels, fine print in the footer. Reads as part of the background's warmth rather than as text.

### Brand Accent
- **Dusty Rose** (`{colors.primary}`): The brand's one chromatic statement. Applied to primary CTAs ("Add to basket", "Shop the look"), focus rings, and active filter tags. Sits in the terracotta-blush register — warm enough to feel Mediterranean, muted enough to feel Parisian.
- **White on Blush** (`{colors.on-primary}`): Button label color on the dusty rose fill. High contrast maintained by the depth of the primary.
- **Deepened Blush** (`{colors.primary-hover}`): The pressed / hovered CTA state — the same rose family, shifted one tone darker.
- **Pale Blush Container** (`{colors.primary-container}`): Badge and tag backgrounds. A whisper of the primary color that tints without saturating.

### Structural
- **Warm Greige Border** (`{colors.border}`): Hairline dividers between nav items, product grid cells, and form field outlines. Warm-toned so it integrates with the canvas rather than cutting it.
- **Input Rule** (`{colors.border-input}`): Slightly deeper for input borders on focus — signals state change without a color non sequitur.

## Typography

### Font Family
- **Primary Display / Product**: Custom `Sezane Serif` (self-hosted), a transitional roman with moderate x-height and slightly bracketed serifs — evocative of French editorial typography from the 1970s. Fallbacks: `Times New Roman, Georgia, serif`.
- **Functional Sans**: `Helvetica Neue` for all navigation, body copy, button labels, and captions. Fallbacks: `Arial, sans-serif`.
- **OpenType Features**: Lining figures on prices; the display serif likely enables stylistic alternates for the brand logotype wordmark. No discretionary ligatures in body copy.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px — seasonal campaign openers, hero editorial titles |
| `display` | 48px — category headers, lookbook section titles |
| `heading-section` | 32px — editorial feature headers, story module headings |
| `heading-sub` | 22px — collection sub-headings, editorial standfirsts |
| `body-large` | 16px — editorial body copy, about-page paragraphs |
| `body` | 14px — product descriptions, accordion text, footer links |
| `nav-link` | 13px — top navigation links, utility bar labels |
| `button-ui` | 12px / weight 500 / uppercase / 0.12em — all CTA and button labels |
| `product-title` | 15px serif — product card name in serif for romantic lift |
| `caption` | 11px sans — color swatch labels, size indicators, legal fine print |

### Principles
- **Serif at the emotional level, sans at the functional level**: the two-family split is not decorative — it maps exactly to where the brand speaks (stories, names, campaigns) and where the interface speaks (tasks, navigation, actions).
- **Weight 400 for display**: the serif runs in regular weight at all display sizes. No bold headings. Refinement is in the cut of the letterform, not the stroke.
- **Modest positive tracking on UI text**: `0.12em` on buttons and `0.06em` on nav links gives sans labels the open-air quality associated with French fashion print.
- **Size restraint at body scale**: 14px body and 11px captions signal editorial confidence — Sézane trusts the reader to lean in rather than inflating text to hold attention.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 8px, with 4px as the fine-detail step.

Sézane layouts are built on breathing room as a brand value. Between campaign sections and content blocks, vertical gaps run to 64px–96px. The page is never hurried. This pace distinguishes the browsing experience from a typical e-commerce grid and reinforces the atelier feeling.

### Grid & Container
- Max content width: approximately 1440px; standard content container around 1200–1280px
- Desktop product grid: two or three columns with generous equal gutters (typically 24–32px)
- Hero sections: full-bleed photography with typographic overlay — the crop is the design
- Navigation: horizontal top bar with centered wordmark; utility icons (wishlist, search, cart) flanking right

### Whitespace Philosophy
- **Cream space is brand space**: unoccupied sections of `{colors.background}` are not gaps to fill with promotions — they are the visual pause between the brand's ideas
- **Two-column grid over four**: density communicates discount retail; Sézane's grid always favors fewer larger images over more smaller ones
- **No decoration between sections**: no divider rules, no color-band alternation; the vertical spacing alone separates zones

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, section backgrounds |
| Hairline (Level 1) | `1px solid {colors.border}` | Input outlines, nav bottom-rule, product grid cell borders |
| Card (Level 2) | `box-shadow: 0 2px 12px {colors.shadow-soft}` | Product card hover lift, modal backdrop |
| Overlay (Level 3) | `box-shadow: 0 8px 32px {colors.shadow-soft}` | Mega-nav flyouts, cart drawer |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus on inputs and interactive elements |

**Shadow Philosophy**: Sézane's depth language is warm and understated. Shadows reference `{colors.shadow-soft}` — a warm greige, not a cold black — so elevation reads as a gentle lift off the parchment rather than a harsh drop into depth. Cards do not shadow at rest; the lift appears only on hover, rewarding attention without announcing it. The system has no dramatic layered shadows.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All primary UI elements — buttons, product cards, image frames, panels |
| `sm` | 2px | Form inputs and selects only — a near-imperceptible softening |
| `md` | 4px | Tooltip containers; not used on product-facing components |
| `pill` | 9999px | Newsletter subscription tag chips, circular icon-only buttons |

The system is architecturally square. Sézane's softness comes entirely from its color palette and photography — not from rounded corners. The sharp geometry of a black button rectangle against the cream canvas creates the same tension as clean tailoring on a relaxed body: structure within softness.

## Components

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

### Button Variants
- **`button-primary`** — Dusty rose fill (`{colors.primary}`), white text (`{colors.on-primary}`), uppercase sans at `0.12em` tracking, `{rounded.none}`. The system's one chromatic statement. Used for "Add to basket", "Shop the collection". Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, `{colors.ink}` text, `1px solid {colors.border}` outline, same geometry. Used for secondary actions — "Save to wishlist", "Back to results".
- **`button-ghost`** — Transparent fill, `{colors.ink}` text, bottom-border rule only. Hover shifts border and text to `{colors.primary}`. Used for in-context links that function as actions — "View more", "See all".

### Cards
- **`card`** / **`card-product`** — Flat white surfaces (`{colors.surface-elevated}`), no border, `{rounded.none}`. Product photography fills edge-to-edge; the product title renders in the serif (`{typography.product-title}`) below the image. Cards are display frames, never chrome containers.

### Inputs
- **`input`** — White fill with a `1px solid {colors.border}` full-perimeter outline and `{rounded.sm}` (2px). Focus state adds a `2px solid {colors.focus-ring}` blush outline. Labels appear above, not inside, the input field.

### Badges
- **`badge`** — Pale blush container (`{colors.primary-container}`), rose text (`{colors.primary}`), uppercase `{typography.caption}`, `{rounded.none}`. Applied to product flags: "Nouvelle collection", "Dernières pièces".

### Navigation
- **`nav-bar`** — White background (`{colors.surface-elevated}`), `{colors.ink}` text, `{typography.nav-link}` (13px sans, `0.06em` tracking). Sézane wordmark centered; utility icons right-aligned. Hover state: warm `{colors.ink}` underline or link color lift.

## Do's and Don'ts

### Do
- Use `{colors.background}` parchment as the page canvas — never swap it for pure white or a cool neutral
- Reserve `{colors.primary}` dusty rose exclusively for primary CTAs and focus rings — its rarity is its power
- Set all display headlines in the transitional serif at weight 400 — no bold, no heavy, no condensed
- Keep product cards at `{rounded.none}` — squareness is structural to the brand's tailored identity
- Apply generous vertical spacing between content sections (minimum 64px); the breathing room is the brand
- Use `{typography.product-title}` serif for product card names — the editorial serif lifts a blouse name from a data label to a title
- Derive warm shadow tints from `{colors.shadow-soft}` — never cold black box-shadows against the cream canvas
- Maintain the two-family split: serif for brand voice, sans for interface voice — never mix them at the same typographic moment

### Don't
- Don't introduce mid-range border-radius (6–16px) — the system has only near-zero (`{rounded.sm}`) and pill (`{rounded.pill}`); rounding reads as a different brand entirely
- Don't use `{colors.primary}` on decorative elements, illustrations, or content — it is a CTA color, not a brand print
- Don't use bold or heavy weights on the display serif — refinement is in the cut, not the stroke; bold serif reads costume
- Don't reduce the product grid below two columns at desktop — density signals discount, not atelier
- Don't introduce a cool white (`#ffffff`) as a page background — the cream canvas (`{colors.background}`) is non-negotiable
- Don't use tracking narrower than `0em` on any text — the system has no negative-tracking compression; that register belongs to a different brand language
- Don't stack two differently-tinted surface colors adjacent without separating them with whitespace — the warm palette distinctions are subtle and can read muddy if collided

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column product grid; hero typography scales to 36px |
| Mobile | 375–767px | Single-column grid; hamburger nav; serif display at 40–48px |
| Tablet | 768–1023px | Two-column product grid; nav collapses to icon bar |
| Desktop | 1024–1439px | Two or three-column grid; full horizontal nav bar |
| Large Desktop | ≥1440px | Three-column product grid; max content width capped at 1280px |

### Touch Targets
- All interactive elements (buttons, nav links, swatches) maintain a minimum 44px touch target on mobile
- Swatch selectors use a 40px hit area with visual dot of 24px inside
- Cart and wishlist icons in the mobile utility bar are minimum 44×44px

### Collapsing Strategy
- Navigation collapses from horizontal top bar to hamburger-triggered side drawer
- The category mega-nav becomes a stacked accordion panel in the drawer
- Hero sections shift from full-bleed landscape to portrait-cropped imagery on mobile
- The two or three-column grid becomes a single column below 768px; no half-card thumbnail grids
- Spacing tokens step down one tier on mobile (`{spacing.3xl}` → `{spacing.2xl}` between sections)

### Image Behavior
- Product images use `object-fit: cover` with a fixed 4:5 or 3:4 aspect ratio across all breakpoints
- Campaign hero images are art-directed crops — separate mobile and desktop assets rather than CSS crops
- Lazy loading on all below-fold product images; above-fold hero images are eagerly loaded

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — warm parchment
- Primary text: `{colors.ink}` — warm near-black
- Secondary text: `{colors.ink-muted}` — muted warm brown
- Brand accent / CTA: `{colors.primary}` — dusty rose
- Surface elevated (cards, inputs): `{colors.surface-elevated}` — pure white
- Border: `{colors.border}` — warm greige hairline
- Focus ring: `{colors.focus-ring}` — blush

### Example Component Prompts

- "Build a hero section with a full-bleed 16:9 image. Overlay the headline in `{typography.display-hero}` (72px, weight 400, serif) in `{colors.surface-elevated}` centered bottom-left. Below the image on the `{colors.background}` canvas, add a 40px vertical gap then a centered `{typography.heading-sub}` sub-headline in `{colors.ink}`, followed by a `{components.button-primary}` CTA 24px below."

- "Create a product card: `{components.card-product}`, no border, no shadow, `{rounded.none}`. Full-bleed product photo at 3:4 ratio. Below: product name in `{typography.product-title}` (serif, 15px, `{colors.ink}`), price in `{typography.body}` (`{colors.ink-muted}`), and a `{components.badge}` 'Nouvelle collection' absolutely positioned top-left at 12px inset."

- "Design a primary CTA button using `{components.button-primary}`: `{colors.primary}` background, `{colors.on-primary}` text, uppercase `{typography.button-ui}` at `0.12em` tracking, `{rounded.none}`, 14px 32px padding. On hover transition background to `{colors.primary-hover}` over 200ms ease."

- "Build a top navigation bar using `{components.nav-bar}`: `{colors.surface-elevated}` background, brand wordmark centered, utility icons right-aligned. Navigation links in `{typography.nav-link}` (13px, `0.06em` tracking). Add a 1px `{colors.border}` bottom rule. On link hover, animate a `1px solid {colors.ink}` underline from width 0 to 100% over 250ms ease."

- "Create a newsletter input row: a full-width `{components.input}` with placeholder 'Votre adresse email' in `{colors.ink-ghost}`, followed by a `{components.button-primary}` 'S'inscrire' inline to its right. Set the row background to `{colors.surface}` (linen tint), padding `{spacing.xl}` on all sides."

- "Render a product filter sidebar on `{colors.surface}` linen background. Filter category labels in `{typography.nav-link}` uppercase. Active filter as `{components.badge}` (pale blush fill `{colors.primary-container}`, rose text `{colors.primary}`). Inactive options in `{colors.ink-muted}`. `1px solid {colors.border}` hairline between filter groups."

### Iteration Guide

1. **Start with the canvas** — set `background-color: {colors.background}` (parchment) on the root. Every other decision descends from this warm ground.
2. **Serif for brand, sans for function** — before writing any text element, decide: is this the brand speaking (story, product name, campaign)? → serif. Is this the interface speaking (button, nav, caption)? → sans. Never mix.
3. **Reserve the rose** — `{colors.primary}` appears on one element per primary action. Don't scatter it across decorative elements.
4. **Square everything** — `border-radius: {rounded.none}` on all product-facing surfaces. Softness comes from color, not shape.
5. **Add air before adding content** — target at least `{spacing.2xl}` (64px) between major section blocks; `{spacing.3xl}` (96px) for hero-to-content transitions.
6. **Shadow with warmth** — if depth is needed, `box-shadow` with `{colors.shadow-soft}` only. No `rgba(0,0,0,...)` cold black shadows.
7. **Test at two columns** — the product grid should be comfortable at two columns before extending to three. Never four on the main catalog view.

---

## 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 Sézane. Brand names and trademarks belong to their respective owners.