--- version: alpha name: "Saint Laurent" description: "A Parisian rock-chic luxury system built on absolute black and white, a dual-typeface hierarchy pairing a grotesque sans with a high-contrast serif display, and the kind of nocturnal severity that treats negative space as the primary luxury signal." colors: # Surface / canvas background: "#000000" # primary canvas — nocturnal black across all editorial contexts /* estimated */ surface: "#111111" # subtle elevated surface, secondary section fills /* estimated */ surface-light: "#ffffff" # alternate light canvas for e-commerce product sections /* estimated */ # Ink / text ink: "#ffffff" # primary text on dark canvas — pure white /* estimated */ ink-secondary: "#999999" # secondary labels, nav meta, captions on dark surface /* estimated */ ink-ghost: "#555555" # disabled states, placeholder, legal fine print /* estimated */ ink-dark: "#000000" # primary text on light surface (product pages) /* estimated */ ink-dark-secondary: "#666666" # secondary text on light surface /* estimated */ # Brand accent — Saint Laurent has no chromatic accent; black and white carry all authority primary: "#000000" # CTA fill on light surfaces — absolute black /* estimated */ on-primary: "#ffffff" # text on black CTA surface /* estimated */ primary-light: "#ffffff" # CTA fill on dark surfaces — white reverse /* estimated */ on-primary-light: "#000000" # text on white CTA surface /* estimated */ # Interactive states (rgba flattened to opaque hex) primary-hover: "#1a1a1a" # button hover on dark backgrounds — barely perceptible lift /* estimated */ text-hover: "#cccccc" # was rgba(255,255,255,0.7) — link hover on dark canvas; Google format requires hex /* estimated */ # Semantic error: "#cc0000" # form validation error — dark red, not chromatic /* estimated */ # Borders border: "#ffffff" # hairline rules on dark canvas — button outlines, dividers /* estimated */ border-dark: "#000000" # hairline rules on light canvas /* estimated */ border-subtle: "#333333" # faint separator on dark surface; barely visible /* estimated */ border-light-subtle: "#e0e0e0" # faint separator on light surface /* estimated */ # Shadow tints shadow-soft: "#000000" # was rgba(0,0,0,0.5) — overlays, modals; Google format requires hex /* estimated */ typography: display-hero: fontFamily: "Times New Roman, Times, Georgia, serif" fontSize: 72px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.06em display: fontFamily: "Times New Roman, Times, Georgia, serif" fontSize: 48px fontWeight: 400 lineHeight: 1.05 letterSpacing: 0.05em heading-section: fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.15em heading-sub: fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.12em body-large: fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em body: fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.65 letterSpacing: 0.02em nav-link: fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.1em button-ui: fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.15em caption: fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.08em price: fontFamily: "Times New Roman, Times, Georgia, serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em spacing: xs: 8px sm: 16px md: 24px lg: 40px xl: 64px 2xl: 96px 3xl: 128px rounded: none: 0px pill: 9999px # newsletter / cookie-consent inputs only /* estimated */ components: button-primary: backgroundColor: "{colors.primary-light}" textColor: "{colors.on-primary-light}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 32px textTransform: uppercase letterSpacing: 0.15em button-primary-hover: backgroundColor: "{colors.ink-dark-secondary}" textColor: "{colors.on-primary-light}" button-primary-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 32px textTransform: uppercase letterSpacing: 0.15em button-primary-dark-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 13px 31px border: "1px solid {colors.border}" textTransform: uppercase button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 0px textTransform: uppercase letterSpacing: 0.15em button-ghost-hover: textColor: "{colors.text-hover}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0px card-light: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink-dark}" rounded: "{rounded.none}" padding: 0px input: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 0px borderBottom: "1px solid {colors.border}" input-focus: borderBottom: "1px solid {colors.ink}" outline: "none" input-light: backgroundColor: "transparent" textColor: "{colors.ink-dark}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 0px borderBottom: "1px solid {colors.border-dark}" input-light-focus: borderBottom: "1px solid {colors.ink-dark}" outline: "none" badge: backgroundColor: "transparent" textColor: "{colors.ink-secondary}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 0px textTransform: uppercase letterSpacing: 0.12em nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 20px 32px --- # Saint Laurent Design System ## Overview Saint Laurent's digital presence is a controlled act of severity. The canvas is absolute black (`{colors.background}`), not as a fashion-dark affectation but as a deliberate erasure of warmth, invitation, and anything that might soften the edge. Against this void, campaign imagery arrives with the force of confrontation: models photographed in shallow depth-of-field, high contrast, against urban and nocturnal backdrops. Typography prints itself in `{colors.ink}` white with the restraint of a broadsheet correction notice. Nothing decorates. Nothing softens. The interface communicates that Saint Laurent is not trying to please you — it is daring you to keep looking. The typographic architecture is a study in controlled contradiction. Headlines and price display use `{typography.display-hero}` and `{typography.display}` — Times New Roman, or a very close serif variant, rendered at large scales with `0.05–0.06em` tracking that opens the classical letterforms into something cold and modern. Everything functional — navigation, button labels, product metadata, captions — shifts to a Helvetica Neue-class grotesque (`{typography.nav-link}`, `{typography.button-ui}`) rendered at 10–13px with generous tracking between 0.10em and 0.15em. This bifurcation is intentional: the serif carries the house's Parisian classical heritage; the grotesque enforces Hedi Slimane's obsession with subcultural precision. Together they produce a tension that reads as both historic and menacing. Color is a non-subject. The complete chromatic range spans `{colors.background}` (black), `{colors.ink}` (white), `{colors.ink-secondary}` (a midgray), and a dark red (`{colors.error}`) reserved for validation states. Product pages swap to a light-canvas mode where `{colors.surface-light}` white replaces the editorial black — a deliberate context switch that signals "this is where commerce happens." The brand accent is whichever is not the canvas: white CTAs on black backgrounds, black CTAs on white. No hue ever appears. Even photography is often desaturated or shot in controlled high-contrast color that reads as near-monochrome. **Key Characteristics:** - Absolute black canvas (`{colors.background}`) for all editorial and campaign surfaces — no tints, no gradients, no dark-gray softening - Dual-typeface system: Times New Roman-class serif (`{typography.display-hero}`) for display hierarchy; Helvetica Neue-class grotesque (`{typography.nav-link}`) for all functional type - No chromatic accent — `{colors.primary}` black and `{colors.primary-light}` white carry every CTA role, switching with the canvas mode - Hard square geometry: `{rounded.none}` on all UI elements; buttons, inputs, and cards are uncompromisingly sharp-cornered - Generous uppercase tracking on all functional type — `0.10–0.15em` on nav links and button labels creates a deliberately slow, formal cadence - Bottom-border-only inputs: a `1px solid` underline with no box, no fill, no visual softening - Photography as the only chromatic event — high-contrast editorial imagery carries all emotional range; the UI never competes - Dual-canvas mode: black for editorial/campaign, white for product/e-commerce — a hard switch, not a gradient - Scale contrast between display (72px serif, `{typography.display-hero}`) and functional type (11px grotesque, `{typography.button-ui}`) is extreme and deliberate - Zero decorative chrome: no card shadows on product tiles, no ornamental dividers, no icon color, no gradient on any UI element - Vertical spacing is generous — `{spacing.3xl}` 128px gaps between editorial sections communicate that nothing is in a hurry ## Colors ### Surface & Canvas - **Absolute Black** (`{colors.background}`): The entire editorial canvas — campaign pages, homepage, collection pages. Not a dark gray, not a warm black — pure `#000000`. The contrast with photography is total. /* estimated */ - **Elevated Surface** (`{colors.surface}`): A near-invisible step above the main canvas; used for secondary content fills, drawer backgrounds, and hover states on ghost elements. /* estimated */ - **White Canvas** (`{colors.surface-light}`): The e-commerce surface — product listing pages, PDP backgrounds. A hard context switch from the editorial black. /* estimated */ ### Ink / Text - **White Ink** (`{colors.ink}`): All primary text on dark surfaces — headlines, product names, navigation, body copy. /* estimated */ - **Midgray Secondary** (`{colors.ink-secondary}`): Secondary labels, metadata, price modifiers, caption text on dark canvas. /* estimated */ - **Ghost Ink** (`{colors.ink-ghost}`): Placeholder text, disabled states, fine legal print on dark surfaces. /* estimated */ - **Dark Ink** (`{colors.ink-dark}`): Primary text on light product surfaces — the commerce canvas equivalent of `{colors.ink}`. /* estimated */ - **Dark Secondary** (`{colors.ink-dark-secondary}`): Supporting text on light surfaces — descriptions, filter labels, product metadata. /* estimated */ ### Brand Accent - **White CTA** (`{colors.primary-light}`): Primary button fill on dark (editorial) surfaces. Context-inverts to black on white. /* estimated */ - **Black CTA** (`{colors.primary}`): Primary button fill on light (commerce) surfaces. /* estimated */ ### Text States - **Link Hover on Dark** (`{colors.text-hover}`): Navigation and body links on dark canvas drop from white to a midgray on hover — a softening, not a color introduction. /* estimated */ - **Button Hover** (`{colors.primary-hover}`): The black CTA on light surfaces darkens imperceptibly to `#1a1a1a` on hover. /* estimated */ ### Semantic - **Validation Red** (`{colors.error}`): Form error states — a restrained dark red that stays close to the achromatic palette. /* estimated */ ### Borders - **White Hairline** (`{colors.border}`): 1px outlines on dark canvas — secondary button outlines, section dividers. /* estimated */ - **Black Hairline** (`{colors.border-dark}`): 1px outlines on white canvas — input underlines, product page dividers. /* estimated */ - **Subtle Dark** (`{colors.border-subtle}`): Faint separator on dark surfaces; barely registers against `{colors.background}`. /* estimated */ - **Subtle Light** (`{colors.border-light-subtle}`): Faint separator on light product surfaces. /* estimated */ ## Typography ### Font Family - **Display / Price**: `Times New Roman`, with fallbacks: `Times, Georgia, serif`. Dembrandt detected "Times" at 32px (heading-1) and 16px (body context) — confirming the serif as an active stack. Self-hosted as a webfont variant or system-native; Saint Laurent's display serif echoes the visual language of their logotype's neoclassical letterforms. - **Functional / UI**: `Helvetica Neue`, with fallbacks: `Helvetica, Arial, sans-serif`. All navigation, button labels, metadata, and caption text. Under Hedi Slimane's creative direction (resumed 2018), Helvetica Neue became the system's workhorse — clean, cold, and deliberately institutional. - **OpenType Features**: Default settings across both families. Letter-spacing is applied via CSS `letter-spacing` rather than OpenType kerning — the tracked-open spacing is the system's primary typographic gesture. ### Hierarchy | Token | Use | |---|---| | `display-hero` | 72px serif — campaign editorial headlines, seasonal collection openers, magazine-style hero statements | | `display` | 48px serif — secondary editorial moments, collection chapter headings, feature callouts | | `heading-section` | 13px grotesque, 0.15em tracking — section labels, category headings, editorial subheadings | | `heading-sub` | 11px grotesque, 0.12em tracking — product card names, list group headers, navigation subcategories | | `body-large` | 14px grotesque — brand narratives, campaign descriptions, expanded editorial paragraphs | | `body` | 12px grotesque — product descriptions, form labels, running copy | | `nav-link` | 12px grotesque, 0.1em tracking — desktop primary navigation, footer link lists | | `button-ui` | 11px grotesque, 0.15em tracking, uppercase — all CTA and action labels | | `caption` | 10px grotesque — size selectors, color swatch labels, legal fine print | | `price` | 16px serif — product pricing, an intentional serif intrusion into the grotesque commerce layer | ### Principles - **Hard bifurcation**: serif for display authority, grotesque for functional precision — never mix roles within a single component - **Scale extremes**: 72px display against 11px button labels is an extreme ratio, used with intent — it enforces reading hierarchy without decorative support - **Tracking as formality**: `0.10–0.15em` on all functional type enforces a slow, deliberate reading pace that reads as Parisian, not anxious - **Size restraint in the UI layer**: 11px buttons, 12px navigation, 10px captions — the functional type is almost deliberately undersized; the photography and serif display carry visual weight instead - **Uppercase on all UI**: navigation, buttons, badges, and section headings all uppercase; editorial serif and product descriptions sentence case ## Layout ### Spacing System The complete scale is in the `spacing:` token block. Base unit: 8px. Saint Laurent's spacing is editorial rather than utilitarian — the scale jumps from `{spacing.md}` (24px) to `{spacing.lg}` (40px) to large gaps (`{spacing.3xl}` 128px) without intermediate stops. There is no medium density. Campaign pages operate at the high end of the scale: sections separated by 96–128px (`{spacing.2xl}`, `{spacing.3xl}`). Product listing pages compress toward `{spacing.md}` in the grid but retain generous vertical section gaps. The effect on campaign pages is cinematic: each section arrives with its own breathing room, like a cut between scenes. ### Grid & Container - Max content width: approximately 1440–1600px on large displays, with wide side margins that create a centered editorial column - Desktop product grid: typically 2–3 columns on listing pages, tightly spaced with `{spacing.sm}` gutters, no card chrome - Hero sections: full-bleed photography filling the full viewport; the YSL logotype or wordmark appears in white at top-center or top-left, small - Navigation: black-surface top bar; YSL wordmark or full SAINT LAURENT logotype left; category links center or right; utilities (search, account, bag) extreme right ### Whitespace Philosophy - Negative space is not neutral — every black void is a deliberate assertion that the brand does not fill gaps - Photography-driven composition: images occupy 60–100% of above-the-fold space; type and UI orbit at the periphery - Grid discipline is strict on product pages; campaign pages break the grid deliberately, with oversized photography overflowing container edges ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Every page surface — the entire site is categorically flat | | Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Resting inputs, section dividers on dark canvas | | Hairline Light (Level 1) | `border-bottom: 1px solid {colors.border-dark}` | Resting inputs on light canvas | | Button Outline (Level 1) | `1px solid {colors.border}` | Secondary button border on dark canvas | | Modal / Drawer (Level 4) | `box-shadow: 0 0 60px {colors.shadow-soft}` | Cart drawer, overlay panels | **Shadow Philosophy**: Saint Laurent uses no layering metaphors in its UI. The site is flat in every sense — product cards carry no shadow, no lift, no chrome. The brand's noir aesthetic does not need depth metaphors; contrast and scale do that work. Shadow appears only when a floating layer (cart, modal) must physically separate from the page, and even then it is a black shadow on a black canvas — barely perceptible, mostly functional. ## Shapes The complete radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Buttons, product cards, inputs, image frames, panels — all primary UI | | `pill` | 9999px | Newsletter subscription inputs, cookie-consent toggles only | The system is architecturally square. Saint Laurent's geometry communicates the same thing as its palette: no softening, no accommodation. The rectangular CTA button on a black canvas — white text, hard corners — is as close to a rock poster as luxury fashion UI gets. The `{rounded.pill}` exception on newsletter inputs is a purely functional affordance, invisible to the brand's overall impression. ## Components The complete component spec lives in the `components:` token block. ### Button variants - **`button-primary`** — White (`{colors.primary-light}`) fill on dark canvas, `{colors.on-primary-light}` black text, `{rounded.none}`, 11px Helvetica Neue uppercase at `0.15em` tracking, `padding: 14px 32px`. Hover shifts fill slightly. Used on editorial surfaces: "Shop Now", "Discover Collection". - **`button-primary-dark`** — Black (`{colors.primary}`) fill on light canvas, white text, same geometry. Used on product pages: "Add to Cart", "Add to Wishlist". - **`button-secondary`** — Transparent fill, `{colors.ink}` white text, `1px solid {colors.border}` outline, `{rounded.none}`. Hover fills `{colors.surface}`. For secondary actions on dark canvas. - **`button-ghost`** — Transparent, `{colors.ink}` white text, no border, no fill. Link-style CTA with uppercase tracking. Hover transitions text to `{colors.text-hover}`. Used for navigation-adjacent actions. ### Cards - **`card`** — Absolute black surface, `{rounded.none}`, zero padding, no border, no shadow. Product photography sits edge-to-edge; `{typography.heading-sub}` product name in `{colors.ink}` and `{typography.price}` price appear below with minimal margin. Cards are frames, not containers. - **`card-light`** — White surface equivalent for product listing pages in light mode. Same geometry. ### Inputs - **`input`** — Transparent fill on dark canvas, `border-bottom: 1px solid {colors.border}` only, `{rounded.none}`, 12px Helvetica Neue, `{colors.ink}` text. Focus updates underline to `1px solid {colors.ink}` and removes default outline — no glow, no background change. - **`input-light`** — Same geometry on light canvas using `{colors.border-dark}` and `{colors.ink-dark}`. ### Badges / Tags - **`badge`** — No fill, 10px uppercase Helvetica Neue in `{colors.ink-secondary}` with `0.12em` tracking. Absolute-positioned on product tiles for "NEW ARRIVAL" or season labels — typographic-only, no chip background, no border. ### Navigation - **`nav-bar`** — Black background, `{colors.ink}` white text, `{typography.nav-link}` (12px, `0.1em` tracking, uppercase). YSL wordmark or SAINT LAURENT logotype in white at left or center. All navigation links uppercase at generous tracking. Link hover transitions `color` to `{colors.text-hover}` in a short ease. No underline, no background highlight on hover. ## Do's and Don'ts ### Do - Use `{colors.background}` absolute black as the primary editorial canvas — never introduce gray softening, tinted sections, or dark-mode-style charcoal - Apply `{rounded.none}` to every UI element — buttons, cards, inputs, modals, image frames are all hard-cornered - Use the serif (`{typography.display-hero}`, `{typography.display}`) exclusively for display hierarchy and pricing — never for navigation, buttons, or functional labels - Apply uppercase tracking (`0.10–0.15em`) to all functional grotesque type — this is the system's primary rhythm signal - Let photography occupy full-bleed proportions — the image should feel like it has escaped the container, not been placed inside one - Switch to `{colors.surface-light}` / `{colors.ink-dark}` on product pages — the dual-canvas mode is intentional, not inconsistent - Use `{typography.price}` serif for all price display — the serif intrusion into the commerce layer is a deliberate brand gesture - Animate via color and opacity transitions only — no transforms, scale effects, or vertical movement ### Don't - Don't introduce a chromatic accent — no blue, no gold, no red except `{colors.error}` on validation - Don't round corners on any designed element — `{rounded.none}` is absolute; even the hint of a softened corner conflicts with the brand's architectural identity - Don't add card shadows, hover lifts, or elevation chrome to product tiles — every surface is categorically flat until it is a floating layer - Don't use the grotesque (`{typography.nav-link}`, `{typography.button-ui}`) for display text — mixing it into editorial roles breaks the serif/grotesque bifurcation - Don't lowercase button labels or navigation links — the uppercase is part of the brand's formal cadence, not an accessibility preference - Don't tighten `letter-spacing` on functional type below `0.08em` — tracking is a role signal; collapsing it loses the system's deliberate pacing - Don't soften photography with overlays, tints, or rounded clipping — editorial imagery must land at full force against the black canvas - Don't introduce a medium-density spacing step between `{spacing.md}` and `{spacing.xl}` — the jump in scale between section gaps is intentional --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | < 375px | Single-column; hamburger nav; display-hero scales to ~36px; full-bleed imagery; bottom utility bar | | Mobile | 375–767px | Single-column product grid; collapsed navigation drawer; typography scale compressed ~60% | | Tablet | 768–1023px | Two-column product grid; navigation still collapsed; hero at 50–60px; wider margins | | Desktop | 1024–1439px | Full horizontal navigation visible; 3-column product grid; full editorial spacing scale | | Large Desktop | ≥ 1440px | 2–3 column product grid with wider gutters; max container ~1600px; 128px section gaps | ### Touch Targets - Primary buttons use 14px vertical padding — effective touch height approximately 44px - Navigation links on mobile render inside a full-screen drawer with generous vertical padding per item - Product tiles are fully tappable regions, not just the title text - Input fields expand to full-width on mobile with minimum 48px effective height ### Collapsing Strategy - **Navigation**: full horizontal black bar → hamburger icon on mobile; full-screen slide-in drawer with white links on black, all uppercase, generous vertical spacing - **Type scale**: display-hero compresses from 72px toward 36–40px on mobile; grotesque functional sizes hold (11–13px); relative compression is extreme but maintains hierarchy - **Product grids**: 3-column desktop → 2-column tablet → 1-column (or slim 2-column) mobile; `{spacing.xs}` gutters maintained - **Spacing**: 128px editorial gaps compress to 64px on tablet, 40px on mobile — proportionally maintained, character preserved ### Image Behavior - Campaign photography is always full-bleed — the image has no horizontal constraint and often extends to the viewport edge - Portrait product images maintain consistent aspect ratio across breakpoints - Image frames are `{rounded.none}` universally — Saint Laurent never clips photography to a rounded container - High-contrast photography absorbs into the black canvas at the edges — no visible border between image and page on dark sections --- ## Agent Prompt Guide ### Quick Color Reference - Background (editorial): Absolute Black (`{colors.background}`) - Background (commerce): White (`{colors.surface-light}`) - Primary text (dark canvas): White (`{colors.ink}`) - Primary text (light canvas): Near-Black (`{colors.ink-dark}`) - CTA on dark: White button, black text (`{colors.primary-light}` / `{colors.on-primary-light}`) - CTA on light: Black button, white text (`{colors.primary}` / `{colors.on-primary}`) - Secondary text: Midgray (`{colors.ink-secondary}`) - Border (dark canvas): White hairline (`{colors.border}`) - Border (light canvas): Black hairline (`{colors.border-dark}`) ### Example Component Prompts - "Build a full-bleed campaign hero on `{colors.background}` absolute black. A high-contrast model photograph occupies the full viewport — no overlay, no tint. At top-left in white: SAINT LAURENT in `{typography.nav-link}` uppercase (12px Helvetica Neue, `letter-spacing: 0.1em`). Below the fold, overlay `{typography.display-hero}` (72px Times New Roman, `letter-spacing: 0.06em`) as the campaign headline in `{colors.ink}` white, sentence case. Below that, a `{components.button-primary}` white CTA: 11px uppercase Helvetica Neue, `padding: 14px 32px`, `border-radius: 0`, no shadow." - "Create a primary CTA button for dark canvas: `{colors.primary-light}` white fill, `{colors.on-primary-light}` black text, `{typography.button-ui}` (11px Helvetica Neue, `text-transform: uppercase`, `letter-spacing: 0.15em`), `border-radius: 0`, `padding: 14px 32px`. Hover: `background-color` transitions to a very light gray via `0.2s ease-in-out`. No shadow, no scale, no border." - "Design a product card for dark canvas: `{colors.background}` black surface, `border-radius: 0`, no shadow, no border. Full-width portrait product image edge-to-edge at top. Below: `{typography.heading-sub}` (11px Helvetica Neue, uppercase, `letter-spacing: 0.12em`) product name in `{colors.ink}` white, then `{typography.price}` (16px Times New Roman) price in `{colors.ink}`. Category badge in `{typography.caption}` uppercase at `{colors.ink-secondary}`. No card chrome — the image IS the product." - "Build a desktop navigation bar: `{colors.background}` black background. Left: SAINT LAURENT in `{typography.nav-link}` uppercase (12px Helvetica Neue, `0.1em` tracking), white. Center: category links (Women, Men, Accessories, Beauty, Sale) in `{typography.nav-link}` uppercase. Right: utilities (Search, Account, Bag) same style. All `{colors.ink}` white. Hover transitions text to `{colors.text-hover}` in `0.15s ease-in-out`. No underline, no hover background." - "Create an email subscription input on dark canvas: transparent fill, no border except `border-bottom: 1px solid {colors.border}`, `border-radius: 0`, `{typography.body}` 12px Helvetica Neue, `{colors.ink}` white text, `{colors.ink-ghost}` placeholder. Focus: bottom border upgrades to `1px solid {colors.ink}`. Inline: a `{components.button-ghost}` in uppercase Helvetica Neue to the right — no fill, no border, `{colors.ink}` white text. The pair should read as a single editorial field." - "Render a product listing grid on `{colors.surface-light}` white canvas: 3-column layout, `{spacing.xs}` gutters, white surface throughout. Each tile is a `{components.card-light}` — zero chrome, portrait product image top, `{typography.heading-sub}` name in `{colors.ink-dark}` below in uppercase, `{typography.price}` (serif) price below that. Season badge in `{typography.caption}` uppercase at `{colors.ink-dark-secondary}`. Hover: image fades to 0.85 opacity via `0.2s ease-in-out` — no card elevation, no border reveal." ### Iteration Guide 1. Set the canvas. Editorial context: `{colors.background}` absolute black throughout — no softening. Commerce context: switch to `{colors.surface-light}` white. The two modes never blend; a page is one or the other. 2. Assign typefaces by role. If text is display or price: Times New Roman. If text is navigation, button, label, or caption: Helvetica Neue. Any mixing of these roles violates the system. 3. Apply uppercase to all grotesque text. Navigation links, button labels, section headings, badges — all uppercase. Serif display and editorial body paragraphs stay sentence case. 4. Set tracking: `0.10–0.15em` on all grotesque functional type. `0.05–0.06em` on serif display. No tracking below `0.02em` on any visible label. 5. Hard-corner all geometry. `border-radius: 0` on every element. If anything has a radius, it will look wrong. 6. Limit the color palette to `{colors.background}`, `{colors.ink}`, `{colors.ink-secondary}`, and their light-canvas inverses. If a color appears that is not in this set, remove it. 7. Validate shadow usage: product cards and editorial surfaces should have no shadow. Only floating layers (cart, modal) may use `{colors.shadow-soft}` shadow. 8. Check vertical rhythm. Editorial section gaps should approach `{spacing.3xl}` (128px) on desktop. If content feels cramped, add air — the brand's restraint is visible in what it refuses to fill. --- ## 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 Saint Laurent. Brand names and trademarks belong to their respective owners.