A heritage kitchen catalogue that reads like a well-set cookbook, and the rare commerce site whose page ground is genuinely WARM — a paper #f4f2ef with white cards floating on top, the inverse of the usual white-page/grey-card arrangement. Headlines run in Lyon, an old-style serif, 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 a wide +2px. The signature device is how colour is handled: 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 each swatch reads as glaze depth rather than as a colour value, and these never escape the product to become page surfaces. Chromatic UI is limited to Flame red #d63e31 and orange #ed6e00. Structure is unusual too: the dominant hairline is an ALPHA black, rgba(0,0,0,.25) at over a thousand uses, with a 0.5px sub-pixel tier beneath it, and shadows stay soft and rare. Buttons are 48px at 8px radius, and the h1 is deliberately smaller than the h2 — the h1 is a strapline while the h2 carries the display role. Motion is a steady 0.3s ease-in-out over a directional slideIn and growDown entrance kit, backed by eighteen prefers-reduced-motion blocks, among the most thorough captured.
⚠ site only
Browse Le Creuset in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: lecreuset.com.au/en_AU (live DOM, computed styles), 2026-07-27 (desktop 1512px). Salesforce Commerce Cloud.lecreuset.comgeo-redirects to the regional store. Coverage: homepage. OneTrust consent chrome (#onetrust-*,cookieBannerSlideIn) excluded as third-party — note its buttons do inherit the real.btnrecipe, which is why the 8px/48px/+2px values are trustworthy. No brand:rootcolour 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.
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.
| 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 |
| 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 |
| 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.
lyon (Lyon, a Commercial Type old-style serif), 1183 uses, weight 400. Specimen uses Newsreader (open serif stand-in); the site ships Lyon.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.| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.