# Le Creuset — Marketing Site Design Spec

> Source: lecreuset.com.au/en_AU (live DOM, computed styles), 2026-07-27 (desktop 1512px). Salesforce Commerce Cloud. `lecreuset.com` geo-redirects to the regional store.
> Coverage: homepage. OneTrust consent chrome (`#onetrust-*`, `cookieBannerSlideIn`) excluded as third-party — note its buttons do inherit the real `.btn` recipe, which is why the 8px/48px/+2px values are trustworthy. No brand `:root` colour tokens (Commerce Cloud) — palette read from the colour census. Bootstrap defaults (`progress-bar-stripes`) and Font Awesome (`fa-spin`) excluded.
> Reality check: hint ("heritage colour-led, warm product photography") is accurate, and the "colour-led" resolves into a specific, unusual device — **every enamel colourway is rendered as a two-stop vertical GRADIENT rather than a flat swatch**, simulating the depth of a glazed surface. Two things it misses: the canvas is a genuinely WARM paper `#f4f2ef` (nothing on the page is pure white as a ground), and the display face is the **Lyon SERIF at weight 400 with tracking left NORMAL even at 48px** — restraint by weight, not by tracking.

## 1. Visual Theme & Atmosphere

A heritage kitchen catalogue that reads like a well-set cookbook: warm paper ground, a literary serif for every headline, and colour delivered almost entirely through the product itself. The chrome is quiet — black ink on `#f4f2ef`, an alpha-black hairline doing nearly all the structural work — while the enamel colourways supply the brand's signature saturation, each drawn as a vertical gradient from a lighter rim to a deeper base so the swatch reads as glaze rather than as a flat colour chip. Controls are soft-cornered (8px) and set in a small uppercase Swiss sans at a wide +2px track, which is the one modern note against the serif. Feels: warm, heritage, appetising, quietly premium.

## 2. Color Palette & Roles

### Text & ink
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#000000` | Primary text + headings (3064×) |
| ink-soft | `#0f0f0f` | Body / UI text (1569×) |
| ink-slate | `#212529` | Bootstrap-inherited body text |
| ink-warm | `#4c4c4e` | Secondary text, overlay fills |
| muted | `#808080` | Tertiary text |
| ink-50 | `rgba(0,0,0,.5)` | Muted overlay text (177×) |
| white | `#ffffff` | Text on dark bands / imagery |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#f4f2ef` | **Warm paper page ground** (64×) |
| card | `#ffffff` | Cards and panels (180×) |
| surface | `#f9f9f9` | Inset panel tint |
| surface-2 | `#f4f4f4` | Alt tint / carousel fade |
| ink-fill | `#000000` | Primary button + dark bands (36×) |
| border | `rgba(0,0,0,.25)` | **Dominant hairline — alpha, not a hex (1086×)** |
| border-soft | `rgba(0,0,0,.15)` | Secondary hairline (123×) |
| border-hair | `0.5px rgba(0,0,0,.25)` | Sub-pixel divider (16×) |
| scrim | `rgba(0,0,0,.8)` | Image scrim |
| grey | `#dddddd` | Disabled fill |

### Accent & product colour
| Token | Hex | Role / usage |
|---|---|---|
| flame-red | `#d63e31` | Signature accent — sale flags, badges (24×) |
| flame-orange | `#ed6e00` | Secondary brand orange, links (23×) |
| pale-blue | `#cddcf2` | Informational band |

**Enamel colourway gradients** (the signature device — each swatch is a 2-stop vertical gradient, not a flat fill):

| Colourway | Gradient |
|---|---|
| Flame | `linear-gradient(#ea4436 0%, #70151b 100%)` |
| Meringue | `linear-gradient(#eae8e4 0%, #d8d0c2 100%)` |
| Marseille | `linear-gradient(#1172ba 0%, #053d68 100%)` |
| Licorice | `linear-gradient(#3a3a3d 0%, #22222b 100%)` |
| Nectar | `linear-gradient(#f97c00 0%, #d43414 100%)` |
| Shell Pink | `linear-gradient(#ebe4e3 0%, #d2bdbd 100%)` |
| White | `linear-gradient(#ffffff 0%, #ffffff 100%)` |

Rule: chrome stays black on warm paper; `#d63e31`/`#ed6e00` are the only chromatic UI values. Colourway gradients belong to product swatches and never become surfaces.

## 3. Typography Rules

- Display / headings: `lyon` (Lyon, a Commercial Type old-style serif), 1183 uses, weight 400. Specimen uses **Newsreader** (open serif stand-in); the site ships Lyon.
- UI / body / buttons: `swiss` (Suisse Int'l), the most-used family at 3983×, with a `swiss-medium` half-step.
- `lecreuset` (274×) is the custom icon font, not a text face.
- Body: 16px; small UI text 13px.

| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Section (h2) | lyon | 48 / 56 | 400 | **normal** | none |
| Sub (h3) | lyon | 32 / 40 | 400 | normal | none |
| Display (h1) | lyon | 30 / 30 | 400 | normal | none |
| Product link | lyon | 16 | 400 | +0.5px | none |
| Body / nav | swiss | 16 / 24 | 400 | normal | none |
| Small body | swiss | 13 / 19.5 | 700 | normal | none |
| Button / eyebrow | swiss | 12 | 400 | **+2px** | UPPERCASE |

Two patterns: the serif runs at a single weight 400 with **normal tracking even at 48px** (restraint by weight, not tracking), and the sans inverts that at small sizes — 12px UPPERCASE opened to **+2px**. Note the `<h1>` is smaller (30px) than the `<h2>` (48px): the h1 is a strapline, the h2 carries the visual display role.

## 4. Component Stylings

### Buttons
- **Primary (`.btn.btn-black`)**: bg `#000000`, text `#ffffff`, radius **`8px`**, h `48px`, swiss 12px UPPERCASE **+2px**, padding `0 16px`, 1px transparent border.
- **Outline**: transparent, text `#0f0f0f`, 1px `#0f0f0f`, 8px, 48px, same type recipe.
- **Text link (product)**: lyon 16px +0.5px, no underline.
- **Nav/eyebrow link**: transparent, white, swiss 12px UPPERCASE +2px, bottom border-image rule.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| `.btn` | black fill / 8px / 48px | `color:#000000; text-decoration:none` + `color,background-color,border-color,box-shadow 0.3s` cross-fade | `box-shadow: rgba(0,0,0,.25) 0 0 0 0.2rem; outline:0` (Bootstrap ring, later overridden to `none`) | — | `opacity: 0.65` |
| `a` | `#000000`, no underline | `#000000`, no underline (colour 0.3s ease-in-out) | `outline: none` | — | — |
| Search input | alpha hairline | — | `.search-bar input:focus-visible { border-style: none }` | — | — |

Focus is an anti-pattern: `a:focus{outline:none}`, the search field strips its border on `:focus-visible`, and the Bootstrap `.btn:focus` ring is overridden to `box-shadow:none`. Recommended replacement: `0 0 0 3px rgba(214,62,49,.4)` (Flame red, on-brand).

### Inputs
- Alpha hairline `1px rgba(0,0,0,.25)`; the search bar removes its border entirely on focus.

### Cards / product tiles
- White `#ffffff` on the warm `#f4f2ef` ground, 16px radius (96×) on media, alpha hairline; shadows are soft and rare — `rgba(0,0,0,.1) 0 2px 4px`, `rgba(0,0,0,.05) 0 4px 4px`, `rgba(0,0,0,.2) 0 0 8px`.
- Colourway swatches: `50%` circles (188×) filled with the enamel gradients above.

## 5. Layout Principles

- Warm-paper ground with white cards floating on it — the inverse of the usual white-page/grey-card arrangement.
- Full-bleed product photography with an uppercase eyebrow link and a serif headline.
- Carousels faded at both edges with a `#f4f4f4` mask gradient.
- Product grids in white tiles: image, serif title, price, then a row of circular gradient colourway swatches.
- Nav: uppercase swiss 12px +2px utility row over the main serif-adjacent navigation.

## 6. Depth & Elevation

- Radius scale: `50%` (188×, colourway swatches — the most-used), `16px` (96×, media/cards), `2px` (64×), `8px` (51×, buttons), `4px` (37×), `12px` (18×), `100%` (21×), plus a single-side `0px 2px 2px 0px` (21×).
- **Borders are alpha, not hex** — `1px rgba(0,0,0,.25)` at 1086 uses is by far the dominant structural element, with `rgba(0,0,0,.15)` beneath it and a sub-pixel `0.5px` tier.
- Shadows are soft, low-alpha and rare: `rgba(0,0,0,.1) 0 2px 4px`, `rgba(0,0,0,.05) 0 4px 4px`, `rgba(0,0,0,.2) 0 0 8px`; 12 are transparent placeholders.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.3s | ease-in-out | links (dominant, 323×) |
| opacity | 0.3s | linear | fades (121×) |
| border | 0.3s | ease-in-out | cards, inputs (68×) |
| color, background-color, border-color, box-shadow | 0.3s | ease-in-out | button cross-fade (31×) |
| background-color | 0.2s | ease-out | small controls |
| transform | 0.1s | linear | swatch/image micro-moves |

House pair is **0.3s ease-in-out**. Authored keyframes are a directional entrance kit — `slideInDown`, `slideInUp`, `slideInLeft`, `slideInArrowLeft`, `growDown`, `fadeIn`, `fadeOut`, `fade`, `fade-in`. No JS motion library detected. **Ships 18 `prefers-reduced-motion` blocks — among the most thorough in the library.**

## 8. Backgrounds, Effects & WebGL

No atmospheric effects at all: **zero CSS raster background layers, zero canvas/WebGL, zero video, zero backdrop-filter, zero grain**. Every gradient on the page is doing a job — seven are the enamel colourway swatches (§2) and one is the two-sided carousel edge mask `linear-gradient(to right, #f4f4f4 30%, transparent), linear-gradient(to right, transparent, #f4f4f4 70%)`. Photography is placed as `<img>` content.

## 9. Do's and Don'ts

### Do
- Ground the page in warm paper `#f4f2ef` and float white cards on it.
- Set headlines in an old-style serif at weight 400 with **normal** tracking, even at 48px.
- Set every button and eyebrow in 12px UPPERCASE sans at **+2px**.
- Render colourway swatches as **two-stop vertical gradients** (light rim → deep base) on 50% circles, so they read as glaze.
- Use an alpha hairline `rgba(0,0,0,.25)` as the primary structural line.
- Keep buttons 48px at 8px radius; primary is black, outline is 1px `#0f0f0f`.
- Ship reduced-motion coverage; keep transitions at 0.3s ease-in-out.

### Don't
- Don't use a pure-white page ground — the canvas is warm.
- Don't add weight or negative tracking to the serif; it is 400 at normal tracking.
- Don't flatten the enamel swatches to solid hexes; the gradient is the brand.
- Don't promote a colourway gradient to a page surface or button fill.
- Don't add texture, blur, canvas or video — the page has none.
- Don't suppress focus (the site's flaw) — use a Flame-red ring instead.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| 368–500 | phone tiers, nav → hamburger |
| 767 / 767.98 / 768 / 769 | phone→tablet, grids reflow (Bootstrap seam) |
| 821 / 1023.98 / 1024 | tablet→desktop |
| 1200+ | desktop max-widths |

**47 breakpoints** on a Bootstrap ladder (note the `.98` fractional max-widths) with a device-targeted overlay. No dark-scheme blocks (`darkSchemeBlocks:0`), no container queries, **18 reduced-motion blocks**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f4f2ef` · Card `#ffffff` · Text `#000000` · Muted `rgba(0,0,0,.5)` · Border `rgba(0,0,0,.25)` · Accent `#d63e31`
- Fonts: Lyon serif (headings, 400, normal tracking) + Suisse Int'l (UI) · Body: 16px · Radius: 8px button / 16px card / 50% swatch · Control height: 48px
- Focus: suppressed on site — use `0 0 0 3px rgba(214,62,49,.4)` · Hover: 0.3s ease-in-out colour/bg/border cross-fade

<le-creuset-marketing_design_language>
Use the Le Creuset design language: a heritage kitchen catalogue set on a genuinely WARM paper ground #f4f2ef (never pure white as a page background) with white #ffffff cards floating on top — the inverse of the usual white-page/grey-card arrangement. Headlines are an old-style SERIF (Lyon) at a single weight 400 with tracking left NORMAL even at 48/56, so restraint comes from weight rather than tracking, while Suisse Int'l carries body at 16/24 and sets every button and eyebrow at 12px UPPERCASE opened to +2px. Ink is #000000 and #0f0f0f with an alpha rgba(0,0,0,.5) for muted text. The signature device is that every enamel colourway is drawn as a TWO-STOP VERTICAL GRADIENT on a 50% circle rather than a flat chip — Flame #ea4436 to #70151b, Marseille #1172ba to #053d68, Nectar #f97c00 to #d43414, Meringue #eae8e4 to #d8d0c2 — so a swatch reads as glaze depth; these belong to product swatches and never become page surfaces. Chromatic UI is limited to Flame red #d63e31 and orange #ed6e00. Structure is an ALPHA hairline, rgba(0,0,0,.25) at over a thousand uses, with rgba(0,0,0,.15) and a 0.5px sub-pixel tier beneath it; radii run 8px on the 48px black button, 16px on media and cards, 50% on swatches; shadows are soft, low-alpha and rare. Motion is a consistent 0.3s ease-in-out on colour, border and button cross-fades over a directional slideIn/growDown/fade entrance kit, with eighteen prefers-reduced-motion blocks. There is no canvas, video, texture or backdrop blur. Feels: warm, heritage, appetising, quietly premium. Avoid: a pure-white page ground, adding weight or negative tracking to the serif, flattening the enamel gradients to solid hexes, promoting a colourway to a surface or button fill, and suppressing the focus ring (use 0 0 0 3px rgba(214,62,49,.4) instead).
</le-creuset-marketing_design_language>