--- version: alpha name: "Polène" description: "A Parisian leather-goods maison rendered as pure light and shadow — ultra-thin letterforms, warm editorial photography, and a binary palette so stark it makes the objects sing." colors: # Surface / canvas background: "#ffffff" surface: "#f4f2ef" # warm off-white for editorial fills and product-card backgrounds /* estimated */ # Ink / text ink: "#000000" # navigation, headings, all primary text ink-secondary: "#9d9d90" # secondary labels, metadata, muted captions — rgb(157,157,144) ink-ghost: "#c8c8c2" # placeholder text, disabled states /* estimated — one step lighter than ink-secondary */ # Brand — Polène is achromatic; near-black carries authority primary: "#000000" # CTA fill, primary button on-primary: "#ffffff" # text on dark button surface primary-hover: "#131316" # slight warm-dark on hover — rgb(19,19,22) from link hover data # Interactive states text-hover: "#ffffff" # link hover on dark canvas — was hsl(var(--white)) focus-ring: "#000000" # 2px solid black focus outline # Borders border: "#000000" # button outlines, structural rules border-subtle: "#000000" # input bottom-border; at 10% opacity in practice /* was rgba(0,0,0,0.1) — Google format requires hex */ # Shadow tints shadow-soft: "#000000" # was rgba(0,0,0,0.14–0.2) — modal and button drop shadows /* was rgba — flattened to opaque */ shadow-modal: "#17494d" # was rgba(23,73,77,0.15) — gallery overlay /* was rgba — flattened to opaque */ typography: display-hero: fontFamily: "Canelaweb, Canela, Georgia, serif" fontSize: 98px fontWeight: 300 lineHeight: 0.92 letterSpacing: 0px fontFeature: "ss01" # uppercase ligature alternates active on hero marks display: fontFamily: "Canelaweb, Canela, Georgia, serif" fontSize: 50px fontWeight: 300 lineHeight: 1.08 letterSpacing: 0px heading-section: fontFamily: "Canelaweb, Canela, Georgia, serif" fontSize: 18px fontWeight: 250 lineHeight: 1.0 letterSpacing: 0px heading-sub: fontFamily: "Cormorant Garamond, Cormorant, Georgia, serif" fontSize: 19px fontWeight: 400 lineHeight: 1.17 letterSpacing: 0px body-large: fontFamily: "Cormorant Garamond, Cormorant, Georgia, serif" fontSize: 20px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px body: fontFamily: "Cormorant Garamond, Cormorant, Georgia, serif" fontSize: 17px fontWeight: 400 lineHeight: 1.69 letterSpacing: 0px nav-link: fontFamily: "Sackers, 'Sackers Gothic', 'Century Gothic', Futura, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.12em button-ui: fontFamily: "Sackers, 'Sackers Gothic', 'Century Gothic', Futura, sans-serif" fontSize: 10px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em label-micro: fontFamily: "Sackers, 'Sackers Gothic', 'Century Gothic', Futura, sans-serif" fontSize: 9px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0.18em caption: fontFamily: "Cormorant Garamond, Cormorant, Georgia, serif" fontSize: 12px fontWeight: 400 lineHeight: 2.43 letterSpacing: 0px spacing: xs: 5px sm: 10px md: 20px lg: 40px xl: 54px 2xl: 80px 3xl: 108px rounded: none: 0px sm: 2px # buttons only — barely visible softening components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 10px 15px border: "1px solid {colors.border}" textTransform: uppercase letterSpacing: 0.15em 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.sm}" padding: 10px 15px border: "1px solid {colors.border}" textTransform: uppercase button-secondary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" 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: 32px 0px 5px borderBottom: "1px solid {colors.border-subtle}" input-focus: outline: "2px solid {colors.focus-ring}" borderBottom: "1px solid {colors.border}" nav-bar: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.nav-link}" padding: 20px 40px badge: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.label-micro}" rounded: "{rounded.none}" padding: 2px 0px textTransform: uppercase --- # Polène Design System ## Overview Polène's digital presence exists at the intersection of Parisian craft and gallery silence. The canvas is absolute white (`{colors.background}`), and against it, every element earns its right to exist: a wordmark set in Canelaweb at weight 300 occupying the nav bar in white letters on `{colors.ink}` black, campaign photography shot in warm amber fields and stone-colored studios, a product card so pared back it could be a museum label. Nothing competes with the object. The leatherwork is the visual event; the digital surface is purely the room it lives in. Three typefaces operate in precise roles, each chosen for tonal distinctness rather than contrast-as-decoration. Canelaweb, an ultra-thin display face with calligraphic soul — weight 300 at 98px for hero moments, weight 250 at 18px for editorial asides — carries the brand voice. Cormorant Garamond steps in for running body copy and editorial paragraphs, bringing a classical serif warmth that sits naturally alongside the leather craft ethos. Sackers, a small-capitals grotesque with pronounced tracking, handles navigation labels, button text, and micro-tags — never mixed with the other two in the same sentence. Each face knows its jurisdiction, and the system enforces it absolutely. Color is a philosophical statement here. The entire palette spans `{colors.ink}` black, `{colors.background}` white, and `{colors.ink-secondary}` a warm gray-green at rgb(157, 157, 144) for secondary labels. No brand hue. No seasonal accent. No hover color that introduces new chroma into the system. Every CTA, every focus state, every structural mark is handled by the same black-and-white pairing that governs the photography — light, shadow, and nothing between. **Key Characteristics:** - Absolute white canvas (`{colors.background}`) with ink-black navigation bar as permanent structural anchor - Three-face typographic system: Canelaweb (ultra-light display) · Cormorant Garamond (editorial serif body) · Sackers (uppercase grotesque labels) - `{typography.display-hero}` at 98px / weight 300 — among the most extreme light-weight display uses in luxury e-commerce - Binary palette: `{colors.ink}` and `{colors.background}` carry all meaning; `{colors.ink-secondary}` is the only third value - Zero border-radius on product cards and imagery (`{rounded.none}`); `{rounded.sm}` (2px) reserved for buttons only - Sackers at `{typography.button-ui}` — uppercase, 0.15em tracking — creates a label that reads as engraved rather than typeset - Photography always warm and editorial: amber fields, ochre stone, neutral interiors — never commercial studio white-sweep - Motion is generous but deliberate: 0.3s–0.5s ease for nav and card transitions; 0.8s–1s for hero reveals - Bottom-border-only inputs — no background, no box, no border-radius - Product names in Cormorant Garamond at 19px — readable elegance, not headline scale ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The only page canvas. Every product, every editorial section, every form rests on pure white — no tinted alternates, no section fills. - **Warm Off-White** (`{colors.surface}`): A faint warm step used in editorial section backgrounds and product-card secondary fills. Not pure white — carries a barely-there linen warmth. ### Ink & Text - **Polène Black** (`{colors.ink}`): Navigation bar fill, all primary text, headlines, CTAs. Pure `#000000` — no warming, no softening. The system's one strong chromatic decision is to leave black unqualified. - **Stone Gray** (`{colors.ink-secondary}`): The only third value in the palette — rgb(157, 157, 144), a gray with a trace of olive warmth. Used for size labels, secondary product metadata, and caption text. Its warm undertone ties it to the amber photography rather than reading as generic gray. - **Ghost Ink** (`{colors.ink-ghost}`): Placeholder text and disabled states. One step lighter than `{colors.ink-secondary}`, still warm-tinted. ### Brand Accent - **Polène Noir** (`{colors.primary}`): Every primary interactive surface. There is no brand hue — black carries all CTA authority. - **White on Noir** (`{colors.on-primary}`): Navigation labels, button text on dark fill. ### Text States - **Hover Warm Dark** (`{colors.primary-hover}`): Button hover deepens from `{colors.ink}` to `#131316` — a subtle warm-dark step barely perceptible but felt. - **Inverse Hover** (`{colors.text-hover}`): Link hover on dark nav surface: text goes to `{colors.on-primary}` white — color through contrast inversion, not hue introduction. ### Borders - **Structural Black** (`{colors.border}`): 1px button outlines, input focus borders. - **Whisper Border** (`{colors.border-subtle}`): Input bottom-border at 10% opacity in practice; the measurement carries the same `#000000` value but at reduced alpha — flattened to opaque for token use. ### Shadows - **Surface Shadow** (`{colors.shadow-soft}`): Multi-layer button drop shadow from the modal: `0px 2px 2px, 0px 3px 1px -2px, 0px 1px 5px` — Material-style elevation, low-key. - **Gallery Overlay** (`{colors.shadow-modal}`): A rare teal-toned overlay shadow from the image gallery — `rgba(23,73,77,0.15)` flattened to opaque `{colors.shadow-modal}`. ## Typography ### Font Family - **Display / Brand Voice**: `Canelaweb` (thin and light weights, self-hosted woff2), with fallbacks `Canela, Georgia, serif`. The brand face — ultra-light, calligraphic origins, used exclusively for the largest display moments and small-scale editorial asides at ultra-light (250). - **Editorial / Body**: `Cormorant Garamond` (Regular, self-hosted), with fallbacks `Cormorant, Georgia, serif`. Classical french-influenced serif, used for all body paragraphs, product names, and descriptive text. Brings the letterpress warmth of a lookbook page. - **Label / Navigation**: `Sackers` (self-hosted woff/woff2), with fallbacks `'Sackers Gothic', 'Century Gothic', Futura, sans-serif`. A small-capitals grotesque, used exclusively in uppercase with wide tracking for navigation, buttons, and micro-labels. The face that engraves, not types. - **OpenType Features**: `Canelaweb` uses `ss01` alternate in hero contexts; `Cormorant Garamond` default set with old-style numerals implicit. ### Hierarchy | Token | Use | |---|---| | `display-hero` | 98px Canelaweb 300 — campaign hero headers, opening editorial lines | | `display` | 50px Canelaweb 300 — collection names, editorial feature sections | | `heading-section` | 18px Canelaweb 250 — ultra-light editorial captions, in-page section marks | | `heading-sub` | 19px Cormorant Garamond — product category labels, editorial subheads | | `body-large` | 20px Cormorant Garamond — featured editorial paragraphs, material descriptions | | `body` | 17px Cormorant Garamond — product descriptions, form copy, running paragraphs | | `nav-link` | 13px Sackers 500, 0.12em tracking, uppercase — top navigation links | | `button-ui` | 10px Sackers 500, 0.15em tracking, uppercase — all CTA and action labels | | `label-micro` | 9px Sackers 500, 0.18em tracking, uppercase — size selectors, filter chips, color swatches | | `caption` | 12px Cormorant Garamond, line-height 2.43 — extended caption text, price fine-print | ### Principles - **Jurisdictional typefaces**: Canelaweb for the brand's largest voice; Cormorant Garamond for everything that carries meaning through reading; Sackers for everything that functions as a label or command. Crossing roles breaks the system's tonal contract. - **Extreme weight restraint**: Canelaweb at 250 and 300 — lighter than nearly any other luxury fashion brand's display weight. The ultra-thin letterform is the brand's most recognizable design decision. - **Uppercase as a Sackers privilege**: `text-transform: uppercase` belongs exclusively to Sackers contexts — navigation, button labels, micro-tags. Canelaweb and Cormorant Garamond never uppercase. - **Generously wide tracking on labels**: 0.12em–0.18em on Sackers contexts creates an engraved-stationery quality. No tracking on Canelaweb or Cormorant Garamond — their letterforms carry their own spacing. - **Line-height as breathing room**: `body` at 1.69, `caption` at 2.43 — Polène pages breathe as much as they sell. ## Layout ### Spacing System The complete scale is in the `spacing:` token block. Base unit: ~5px (the site's most common fine increment), scaling to ~108px section gaps at desktop. Polène spaces with editorial restraint — product grid gutters are tight enough to form a unified field, but section transitions breathe with 80–108px gaps that feel more gallery hang than e-commerce shelf. The spacing scale mirrors the brand's treatment of whitespace as a material equal to the content it frames. ### Grid & Container - Max content width: approximately 1440–1660px at large viewports (12 breakpoints documented, including 1659px and 1660px boundaries) - Desktop product grid: typically 4 columns, uniform gutters, no card chrome — images and text alone - Hero sections: full-bleed editorial photography, campaign imagery at full viewport height - Navigation: slim horizontal black bar; POLÈNE wordmark centered in Canelaweb; left nav (Collections, Bags, Ready-to-Wear, Accessories, Stories) and right utilities (Search, Account, Bag) ### Whitespace Philosophy - White canvas is the primary luxury signal — no background variation between sections - The 108px section gap between major editorial moments reads as a held breath between sentences - Product photography never crowds; each image has the negative space it needs to be seen as an object, not a thumbnail ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | All product cards, editorial sections, the entire page canvas | | Input Rule (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Resting form fields | | Input Focus (Level 1) | `outline: 2px solid {colors.focus-ring}` | Input focus state | | Button Lift (Level 2) | `box-shadow: 0px 2px 2px {colors.shadow-soft}, 0px 3px 1px -2px {colors.shadow-soft}, 0px 1px 5px {colors.shadow-soft}` | Primary and secondary buttons | | Modal Overlay (Level 3) | `box-shadow: 0px 5px 15px {colors.shadow-soft}` at 50% opacity | Modal dialogs | | Gallery Veil (Level 4) | `box-shadow: 0px 20px 30px {colors.shadow-modal}` at 15% opacity | Full-screen image overlays | **Shadow Philosophy**: Polène's elevation strategy is nearly flat — buttons carry a barely-visible Material-style multi-layer shadow, and product surfaces hold none. The distinction is functional: buttons need to read as interactive objects against the white canvas; product images must not be elevated above the canvas (the object is already the subject). Modals and gallery overlays use shadow to establish hierarchy without color. ## Shapes The complete radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Product cards, product images, editorial frames, modals, input fields — the whole designed system | | `sm` | 2px | Buttons only — barely detectable, likely a browser-rendering concession | Polène is functionally square. The 2px on buttons is less a design decision than a normalization; visually, every element reads with hard corners. Product photography never rounds into a container. Cards are pure rectangular frames. The system's sharpness is architectural, consonant with the boutique aesthetic of Marais-era Parisian retail. ## Components The complete component spec lives in the `components:` token block. ### Button variants - **`button-primary`** — `{colors.primary}` fill (black), `{colors.on-primary}` white Sackers text at 10px / 0.15em tracking / uppercase, 2px radius, `padding: 10px 15px`, `1px solid {colors.border}` outline. Hover to `{colors.primary-hover}` via `0.2s ease`. Labels like "Add to Cart" never exceed this scale. - **`button-secondary`** — White (`{colors.background}`) fill, `{colors.ink}` text, same Sackers treatment, 1px border. Hover inverts to dark fill with white label — the inversion is the brand's most expressive interactive moment. ### Cards - **`card`** — Pure white surface, zero border, zero shadow, `{rounded.none}`. Product photography sits edge-to-edge at the top; product name in `{typography.heading-sub}` Cormorant Garamond and price/color count in `{typography.label-micro}` Sackers below. No chrome container — the card is a presentational frame, invisible by design. ### Inputs - **`input`** — Transparent background, no visible border on three sides, `border-bottom: 1px solid {colors.border-subtle}` only, `{rounded.none}`. 17px Cormorant Garamond Regular, `{colors.ink}` text. Focus triggers `outline: 2px solid {colors.focus-ring}` (the system's only focus treatment). No background change, no glow. ### Badges / Tags - **`badge`** — No fill, 9px Sackers uppercase in `{colors.ink-secondary}`. Appears as pure label typography above or below product names — swatch counts, category indicators, availability notes. No chip, no border. ### Navigation - **`nav-bar`** — `{colors.ink}` black fill, `{colors.on-primary}` white Sackers text at 13px / 0.12em tracking. POLÈNE wordmark in Canelaweb 300 centered — the only instance of the display face at navigation scale. Link hover transitions to white at full opacity. Sticky at top throughout scroll. ## Do's and Don'ts ### Do - Keep the canvas `{colors.background}` white without exception — no tinted alternates, no dark commerce mode - Use Canelaweb exclusively for display and editorial heading roles; Cormorant Garamond for body and product names; Sackers for navigation and button labels - Apply Sackers only in uppercase with 0.12–0.18em tracking — the face only reads correctly when treated as a label, not running text - Set `border-radius: 0` on all product cards, image frames, inputs, and modals — only `{rounded.sm}` (2px) on buttons - Use warm editorial photography — amber, ochre, stone — never high-key white-studio commercial imagery - Keep `{typography.display-hero}` at weight 300; never add weight for emphasis — size and negative space do that work - Let the object be the event — design frames should disappear; the bag should remain - Apply `{typography.button-ui}` (10px Sackers, uppercase, 0.15em tracking) to every action label, regardless of button size - Use `{colors.ink-secondary}` only for secondary metadata — size labels, color counts, muted captions. Never for body reading copy. - Animate navigation and cards at 0.3–0.5s ease; hero reveals at 0.8–1s ease — duration communicates pace, not urgency ### Don't - Don't introduce a brand hue or seasonal accent — the palette is `{colors.ink}` and `{colors.background}`, full stop - Don't round product card or image frame corners — `{rounded.none}` is absolute for all structural surfaces - Don't cross typeface jurisdictions — Sackers in editorial paragraphs, Canelaweb in navigation, Cormorant Garamond in button labels all break the system's tonal logic - Don't uppercase Canelaweb or Cormorant Garamond — uppercase is Sackers' exclusive grammatical mode - Don't add card elevation, hover lift shadows, or border effects to product tiles — flatness is the design decision - Don't increase `{typography.button-ui}` font size for prominence; tracking and uppercase carry hierarchy, size does not - Don't use white-sweep studio photography — the brand's editorial imagery relies on warm environmental backgrounds - Don't introduce mid-range border-radius (4–16px) anywhere — the system is binary: `{rounded.none}` or `{rounded.sm}` (buttons only) - Don't use `{colors.ink-secondary}` for interactive text — it's strictly for passive metadata - Don't stack competing heading sizes — the scale jumps from 98px to 50px to 18–19px; intermediate sizes dilute the hierarchy --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | < 600px | Single-column; hamburger nav; hero type scales to ~40–50px; stacked product layout | | Mobile | 600–767px | Single-column product grid; nav collapsed; full-bleed campaign images maintained | | Tablet | 768–1023px | Two-column product grid; nav still collapsed; editorial sections shift to two-column | | Desktop | 1024–1279px | Full horizontal nav visible; 3–4 column product grid; 108px section gaps begin | | Large Desktop | 1280–1659px | 4-column grid; full editorial spaciousness; hero type at full 98px | | XL Desktop | ≥ 1660px | Max container; widest product grids; full 3xl vertical section rhythm | ### Touch Targets - Primary buttons: `10px` vertical padding × 2 plus label height — effective touch target ~44px with comfortable padding - Navigation links in mobile drawer: expanded tap zone with minimum 44px height - Product tiles: entire card region is tappable, not just the name - Size selector and swatch buttons: minimum 40px effective target area with `{spacing.sm}` inter-item gap ### Collapsing Strategy - **Navigation**: slim black desktop bar → hamburger drawer on mobile; full-screen slide-over in `{colors.ink}` with white Sackers links - **Type scale**: `{typography.display-hero}` at 98px scales toward 40–50px on mobile while preserving Canelaweb 300 weight - **Product grid**: 4-column desktop → 2-column tablet → 1-column mobile; no gutters change in ratio - **Section rhythm**: 108px desktop gaps compress to 54–80px on mobile while preserving gallery-like breathing room ### Image Behavior - Campaign photography always full-bleed — no max-width constraints on editorial hero images - Product tile images maintain a consistent portrait aspect ratio (approximately 4:5) across all breakpoints - All image frames are `{rounded.none}` — photography never clips to a rounded container - Warm editorial imagery at any breakpoint; the environmental background always reads as part of the composition --- ## Agent Prompt Guide ### Quick Color Reference - Background: White (`{colors.background}`) - Primary text: Polène Black (`{colors.ink}`) - CTA fill: `{colors.primary}` (black) - CTA text: `{colors.on-primary}` (white) - Navigation bar: `{colors.ink}` fill - Secondary labels: Stone Gray (`{colors.ink-secondary}`) - Input border (resting): `{colors.border-subtle}` bottom only - Input focus: `{colors.focus-ring}` 2px outline - No accent color — none needed ### Example Component Prompts - "Build a campaign hero on `{colors.background}` white. Beneath the `{colors.ink}` black navigation bar, a full-viewport warm editorial photograph (amber field, stone interior — never white studio). Overlay the collection name in `{typography.display-hero}` — Canelaweb 300, 98px, line-height 0.92, sentence case — in `{colors.ink}`. No additional decorative elements; the image and one typographic line constitute the hero." - "Create a primary CTA button: `{colors.primary}` black fill, `{colors.on-primary}` white text in `{typography.button-ui}` (10px Sackers, `text-transform: uppercase`, `letter-spacing: 0.15em`), `border-radius: 2px`, `padding: 10px 15px`, `border: 1px solid {colors.border}`. Hover: fill shifts to `{colors.primary-hover}` (#131316) via `transition: background-color 0.2s ease`. No scale, no shadow change." - "Design a product card: `{colors.background}` white surface, `{rounded.none}`, no shadow, no border. Full-width portrait product image (4:5 ratio) edge-to-edge at top. Below: `{typography.heading-sub}` product name in `{colors.ink}` Cormorant Garamond 19px, then `{typography.label-micro}` swatch count in `{colors.ink-secondary}` Sackers 9px uppercase with 0.18em tracking. Zero card chrome — the product is the card." - "Build a desktop navigation bar: `{colors.ink}` black background, full-width. POLÈNE wordmark centered in Canelaweb weight 300 at `{typography.nav-link}` scale, `{colors.on-primary}` white. Left nav items (Collections, Bags, Ready-to-Wear, Accessories, Stories) in `{typography.nav-link}` 13px Sackers, 0.12em tracking, white. Right utilities (Search, Account, Bag) same treatment. Link hover transitions color from white to white at 0.8 opacity via `0.2s ease`. Sticky at top." - "Create a newsletter form input: transparent background, no border on three sides, `border-bottom: 1px solid {colors.border-subtle}`, `border-radius: 0`, `padding: 32px 0px 5px`. `{typography.body}` Cormorant Garamond 17px, `{colors.ink}` text, `{colors.ink-ghost}` placeholder. Focus: `outline: 2px solid {colors.focus-ring}` — no background change, no box-shadow, no glow. Pair with a `{components.button-primary}` to the right in a flex row." - "Render a 4-column product grid on `{colors.background}` white, `{spacing.md}` gutters. Each tile: `{components.card}` — zero chrome, 4:5 portrait image at top, `{typography.heading-sub}` product name below in `{colors.ink}`, then `{typography.label-micro}` swatch/color-count in `{colors.ink-secondary}` and price in `{typography.caption}` Cormorant Garamond. No hover shadow — image may transition to a second editorial shot via `opacity 0.5s ease` as the only hover signal." ### Iteration Guide 1. Open on absolute white (`{colors.background}`) — no tints, no dark-mode sections. If any element has a background color other than `{colors.ink}` (nav) or white (canvas), remove it. 2. Set Canelaweb at weight 300 for display, Cormorant Garamond for all body and product-name text, Sackers for all labels and buttons. If a second Canelaweb weight or a fourth face appears, correct it. 3. Apply `border-radius: 0` to all cards, images, and inputs. `border-radius: 2px` on buttons only. If a product card or image frame has any visible rounding, flatten it. 4. Confirm all Sackers instances are uppercase with ≥ 0.12em tracking. If a Sackers label appears in sentence case or without tracking, the hierarchy signal is lost. 5. Use warm editorial photography — never commercial white-sweep. If a product image has a white studio background that blends with `{colors.background}`, request a reshooot or editorial context shot. 6. Verify section gaps run at approximately `{spacing.3xl}` (108px) on desktop. If sections feel crowded, add air — the gap is the luxury signal, not the product name. 7. Check that `{colors.ink-secondary}` appears only on secondary metadata (swatch count, size labels, captions). If it appears on body copy or navigation, replace with `{colors.ink}`. 8. Confirm motion durations: nav transitions at 0.5s ease, card hover at 0.5s ease, hero reveals at 0.8–1s ease. Faster feels commercial; this pace communicates gallery time. --- ## 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 Polène. Brand names and trademarks belong to their respective owners.