--- version: alpha name: "Diptyque" description: "Token-first design system reference for Diptyque — the Parisian fragrance house whose oval label, engraved botanical motifs, and black-on-white typographic restraint define luxury sensory retail on the web." colors: background: "#ffffff" surface: "#f8f8f8" surface-elevated: "#f3efec" ink: "#000000" ink-secondary: "#717171" ink-muted: "#a0a0a0" primary: "#000000" on-primary: "#ffffff" on-background: "#000000" on-surface: "#000000" border: "#d8d8d8" border-strong: "#6d6d6d" focus-ring: "#000000" text-hover: "#565656" # was rgb(86,86,86) — hover state on links shadow-soft: "#6d6d6d" # was rgb(109,109,109) 0px 0px 3px 1px — flattened for hex success: "#018937" error: "#cc0000" typography: display-hero: fontFamily: "Diptyque Saint-Germain, Times New Roman, Times, Georgia, serif" fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px display: fontFamily: "Diptyque Saint-Germain, Times New Roman, Times, Georgia, serif" fontSize: 24px fontWeight: 400 lineHeight: 1.22 letterSpacing: 0px heading-section: fontFamily: "Diptyque Saint-Germain, Times New Roman, Times, Georgia, serif" fontSize: 18px fontWeight: 400 lineHeight: 1.22 letterSpacing: 0px heading-sub: fontFamily: "Diptyque Saint-Germain, Times New Roman, Times, Georgia, serif" fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px heading-label: fontFamily: "Diptyque Saint-Germain, Times New Roman, Times, Georgia, serif" fontSize: 16px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0.5px body-large: fontFamily: "Apercu Pro, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px body: fontFamily: "Apercu Pro, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "Apercu Pro, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0px button-ui: fontFamily: "Apercu Pro, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0px caption: fontFamily: "Apercu Pro, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.35 letterSpacing: 0px micro: fontFamily: "Apercu Pro, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.105px spacing: xs: 4px sm: 8px md: 15px lg: 24px xl: 40px 2xl: 56px 3xl: 75px rounded: none: 0px sm: 3px circle: 9999px # used at 50% in CSS for circular elements — max-px fallback for token storage components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 24px border: 1px solid {colors.primary} button-primary-hover: backgroundColor: "{colors.ink-secondary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 24px border: 1px solid {colors.ink-secondary} button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 24px border: 1px solid {colors.ink} button-secondary-hover: backgroundColor: "{colors.background}" textColor: "{colors.text-hover}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 14px 24px border: 1px solid {colors.text-hover} card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 16px border: none card-surface: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 13px 16px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 13px 16px borderColor: "{colors.focus-ring}" badge: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 10px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" borderBottomColor: "{colors.border}" --- # Diptyque Design System ## Overview Diptyque's website is a digital translation of the legendary oval — the same dense, engraved label that has appeared on every candle since 1963. The page opens on `{colors.background}` pure white, then immediately earns its identity not through color but through typography and ornament: the wordmark "DIPTYQUE PARIS" rendered in Diptyque Saint-Germain, a bespoke serif commissioned exclusively for the house, sits above a navigation in spare Apercu Pro light. Beneath the header, Diptyque unfolds into a world of botanical illustration, warm lifestyle photography (candles lit, petals wet, hands cupped around amber glass), and the recurring decorative motif of the oval itself — the frame that holds everything together. The palette is almost aggressively minimal: `{colors.ink}` black on `{colors.background}` white, softened only by a warm off-white surface (`{colors.surface}`, `{colors.surface-elevated}`) for editorial bands, and a single mid-gray (`{colors.ink-secondary}`) for secondary text and hover states. No brand color, no accent hue. The signature is the custom typeface, not any chromatic identity. What distinguishes Diptyque from other luxury fragrance houses is the confidence of its typographic hierarchy. Diptyque Saint-Germain — a serif with high contrast, delicate hairline strokes, and open letterforms — handles all display and editorial text. Apercu Pro, a geometric humanist sans from Colophon Foundry, handles every transactional and UI surface: navigation links, button labels, price displays, form fields. This two-voice system maps almost exactly onto the brand's own cultural duality: the poetic literary heritage of the founders (an artist, a decorator, a fabric designer who met in Paris in 1961) held in tension with the clarity of a contemporary retail experience. A third voice, Calluna — a Times-adjacent serif — appears for select ornamental moments and the cursive warmth of Desmond Handwriting for personal messaging. The typographic decision is never arbitrary: serif for the brand's imagination, sans for the customer's action. Buttons are sharp rectangles (`{rounded.none}`) with full black fills or white-with-black-border outlines. Box-shadows are essentially absent — only a near-invisible `rgba(0,0,0,0.2) 0px 0px 18px` appears for overlaid modals. Depth and separation come entirely through hairline `{colors.border}` rules and surface tone shifts from pure white to the warm `{colors.surface}`. The hero experience is cinematic: full-width photography of the summer garden collection, product silhouettes, or the flagship store's interior, with editorial headlines in Diptyque Saint-Germain at 32px weight 400. There is no urgency in the design. Everything breathes. **Key Characteristics:** - Bespoke serif `Diptyque Saint-Germain` for all display, editorial headings, and the wordmark — the typographic equivalent of the engraved oval label - Apercu Pro geometric sans for all UI, navigation, and transactional text — readable, unadorned, functional - Pure `{colors.ink}` / `{colors.background}` palette with no chromatic accent — identity lives in custom type and photography, not color - `{rounded.none}` radius on all interactive elements (buttons, inputs, cards) — sharp-edged, engraved-label aesthetic - Warm off-white surface tones (`{colors.surface}`, `{colors.surface-elevated}`) for editorial section breaks — paper, not screen - Shadow-free depth: hairline `{colors.border}` borders and background tone shifts do all the elevation work - Uppercase micro-labels in Diptyque Saint-Germain for category stamps and product names — the oval label's print aesthetic - Desmond Handwriting script for personal gift messages and artisanal copy moments — handcrafted warmth inside a precise system - Full-bleed hero photography with editorial Diptyque Saint-Germain headlines at 32px weight 400 — cinema pace, book typography - Generous vertical spacing (40–75px between major sections) that lets the botanical and lifestyle photography breathe - The oval motif and engraved floral pattern appear as hero backgrounds and section dividers — the brand's most recognizable decorative element - `{colors.success}` deep malachite green used for "In stock" indicators — a natural pigment, not a digital primary ## Colors ### Primary - **Pure White** (`{colors.background}`): The default page canvas — clinical, print-like, never tinted. The page reads as paper. - **Absolute Black** (`{colors.ink}`): All primary text, wordmark, primary buttons, borders on secondary buttons, and focus rings. Uncompromising. - **Warm Near-White** (`{colors.surface}`): Secondary surface for editorial bands and modal backgrounds — the manifest's `themeColor: #F8F8F8`. Barely perceptible warmth. - **Deeper Warm Off-White** (`{colors.surface-elevated}`): For product detail panels and layered content cards — a step closer to linen. ### Text States - **Mid-Grey** (`{colors.ink-secondary}`): Secondary text, breadcrumbs, hover target color for links. The color links fade to on hover — `color: {colors.text-hover}; decoration: none`. - **Placeholder / Muted** (`{colors.ink-muted}`): Form placeholders, disabled text, price metadata. - **Hover Ink** (`{colors.text-hover}`): The exact link hover resolved from live CSS — `#565656`, softer than `{colors.ink-secondary}`. ### Borders & Structure - **Hairline** (`{colors.border}`): Default input borders (`1px solid {colors.border}`), nav bottom rules, section separators. Quiet structure. - **Strong Border** (`{colors.border-strong}`): Secondary button borders on hover, active states, form focus on some fields. ### Semantic - **Malachite Green** (`{colors.success}`): Confirmed stock indicator — organic, botanical. The only non-neutral chromatic value in the system. - **Error Red** (`{colors.error}`): Form validation and error states only — never decorative. ### Shadow - **Overlay Tint** (`{colors.shadow-soft}`): The base of the single modal shadow — `rgba(109,109,109,0.x) 0px 0px 3px 1px`. Flattened to `#6d6d6d` for token storage; multiply at reduced opacity in implementation. ## Typography ### Font Family - **Display / Editorial**: `Diptyque Saint-Germain`, with fallbacks `Times New Roman, Times, Georgia, serif`. A bespoke high-contrast serif commissioned for the house. Regular, Italic, Bold, and BoldItalic cuts all present. The letterforms echo engraved print — high stroke contrast, delicate serifs, generous x-height. - **UI / Body / Buttons**: `Apercu Pro`, with fallbacks `Helvetica Neue, Helvetica, Arial, sans-serif`. A geometric humanist sans from Colophon Foundry. Self-hosted in ExtraLight (200), Light (300), Regular (400), Medium (500), Bold (700), Black (900) — with matching italics. The workhorse of the transactional UI. - **Ornamental Accent**: `Calluna`, with fallbacks `Times New Roman, Times, Georgia, serif`. A refined text serif used in specific editorial moments and footer navigation links for tonal warmth. - **Script / Personal**: `Desmond Handwriting Regular`, self-hosted. Reserved for artisanal gift messaging copy and personal tone moments — the hand behind the house. *Note: All four faces are commercially licensed and self-hosted. For external implementations: EB Garamond or Cormorant Garamond for Diptyque Saint-Germain; Aktiv Grotesk or DM Sans for Apercu Pro.* ### Hierarchy | Token | Use | |---|---| | `display-hero` | Hero section headlines, campaign titles — Diptyque Saint-Germain 32px weight 400 | | `display` | Editorial section openings, feature article headers — Saint-Germain 24px | | `heading-section` | Product category headers, editorial subheadings — Saint-Germain 18px | | `heading-sub` | Product names, card headlines — Saint-Germain 16px regular | | `heading-label` | Uppercase micro-labels, product category stamps — Saint-Germain 16px with tracking | | `body-large` | Lead paragraphs, editorial introductions — Apercu Pro 16px regular | | `body` | Standard body copy, product descriptions, form labels — Apercu Pro 14px | | `nav-link` | Navigation links, breadcrumbs — Apercu Pro 14px light | | `button-ui` | All button labels — Apercu Pro 16px regular | | `caption` | Price metadata, stock indicators, fine print — Apercu Pro 12px | | `micro` | Badge micro-labels, tooltip copy — Apercu Pro 10px with slight tracking | ### Principles - **The two-voice contract is absolute**: Diptyque Saint-Germain for anything editorial, evocative, or brand-defining; Apercu Pro for anything transactional, instructional, or interactive. The line is firm. - **Low weight, high contrast**: Apercu Pro runs at weight 300–400 throughout the UI. Nothing goes bold unless it's a button in error or a product title needing stamp authority. Restraint is the luxury. - **Serif sets tempo, sans handles business**: Section openers in Saint-Germain create a pause; Apercu Pro accelerates through product grids, filters, and checkout. Pace is typographic, not color-coded. - **Uppercase micro-labels reference the oval**: Saint-Germain in 10–16px uppercase for category names and badges echoes the dense engraved type of the original label. Tracking is tight — 0–0.5px — never spaced out decoratively. - **Script is sacred**: Desmond Handwriting appears only in high-emotion moments (gift messages, artisan copy). It is never a heading style or UI label. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 15px (Diptyque's dominant component padding). Scale runs from 4px micro-details to 75px major section dividers. Diptyque uses a generous, editorial pace — most sections stack with 56–75px between them, product grids tighten to 24–40px, component-level chrome uses 13–16px. The page reads like a luxury magazine: intervals are meaningful, never algorithmic. ### Grid & Container - Max content width: approximately 1360–1440px for full-bleed editorial; ~1280px for product grids and content columns - Product grids: typically 2-column to 4-column on desktop, collapsing to 1–2 on mobile - Editorial sections: full-width photography with centred or left-aligned text overlay at ~600–800px max column width - Breakpoints densely layered from 30px upward (mobile-first), with critical transitions at 414px, 640px, 768px, 1024px, 1200px, 1360px ### Whitespace Philosophy - **Cinematic breathing room**: Hero photography sections use full-bleed imagery with headline overlays — space around text is deliberate and editorial, never padded to fill - **Generous section cadence**: 56–75px vertical rhythm between major content areas — the page paces like walking slowly through the Saint-Germain flagship - **Product tiles trust negative space**: Cards have no background, no border, no shadow — the photography and typography stand alone on white ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no border | Page canvas, product cards, editorial sections at rest | | Hairline (Level 1) | `1px solid {colors.border}` | Input fields, nav bottom rule, section dividers | | Strong Rule (Level 2) | `1px solid {colors.ink}` | Button borders (secondary), active states | | Inset Underline (Level 3) | `0px -2px 0px 0px {colors.ink} inset` | Explore collection button active state — hairline under-rule | | Modal Overlay (Level 4) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Welcome/loyalty modals, drawers over content | | Focus Ring | `outline: 1px solid {colors.focus-ring}` | Keyboard navigation focus on buttons and inputs | **Shadow Philosophy**: Diptyque's elevation system is essentially flat. Nothing in the standard product browsing or editorial experience lifts off the page. The single modal shadow (`rgba(0,0,0,0.2) 0px 0px 18px 0px`) appears only for overlaid modals — the loyalty gate and promotional pop-ups. This restraint is consistent with the brand's print sensibility: in a catalog or on an engraved label, depth comes from typographic contrast, not shadow. The page stays firmly on its surface. ## Shapes The complete radius scale is declared in the `rounded:` token block above. Diptyque uses a near-binary system. | Token | Value | Use | |---|---|---| | `none` | 0px | All buttons, inputs, cards, modals — the default and dominant radius | | `sm` | 3px | Subtle chip borders in some product badge contexts | | `circle` | 50% | Profile avatars, circular icon wrappers, progress indicators | Diptyque's shape vocabulary is deliberately engraved-label sharp. Rectangular buttons and inputs are a visual echo of the physical stamp. The oval itself — the brand's most iconic shape — appears as a decorative motif in artwork and pattern, but never as a CSS `border-radius` on interactive elements. The oval is illustration, not UI component. ## Components The complete component spec lives in the `components:` token block above. ### Button variants - **`button-primary`** — Black fill (`{colors.primary}`), white text, `{rounded.none}`, `padding: 15px 24px`, 1px black border. The stamp. Used for "Join Diptyque", "Add to bag" — primary conversion actions. Apercu Pro 16px regular, not bold. - **`button-secondary`** — White fill (`{colors.background}`), black text, 1px black border. Used for "Explore the summer collection" and other discovery CTAs. Hover fades border and text to `{colors.text-hover}`. - **`button-primary-hover`** — Shifts background to `{colors.ink-secondary}` — a controlled softening rather than full reversal. - **`button-secondary-hover`** — Maintains white background; border and text soften to `{colors.text-hover}`. ### Cards Product and editorial cards are frameless — no background fill beyond the page white, no border, no shadow. The photography does the card work. On hover, link text fades to `{colors.text-hover}`. Editorial feature cards on alternating `{colors.surface}` or `{colors.surface-elevated}` bands gain implicit containment through background tone, never through stroke or shadow. ### Inputs - Background: `{colors.background}` (pure white) - Border: `1px solid {colors.border}` at rest - Focus: border sharpens to `1px solid {colors.focus-ring}` (`#000`) — no glow, no color tint - Radius: `{rounded.none}` - Padding: 13–15px vertical, 16px horizontal - Placeholder color: `{colors.ink-muted}` (`#a0a0a0`) - Font: Apercu Pro 16px regular ### Badges Small `{rounded.sm}` chips in Apercu Pro 12px — used for product tags ("New", "Exclusive", etc.). Background draws from `{colors.surface}`. ### Navigation The top navigation is a three-tier structure: (1) a slim announcement bar in Apercu Pro 13px with `0.65px` tracking; (2) a wordmark tier with "DIPTYQUE PARIS" in Diptyque Saint-Germain at approximately 32px, centered horizontally; (3) a horizontal link row in Apercu Pro 14px light — "New & Trending · Gifts · Fragrances · Candles & Home · Bath & Body · Home Decor · About Diptyque". Links default to `{colors.ink}`, hover to `{colors.text-hover}` with `text-decoration: none`. The nav bottom edge carries a `1px solid {colors.border}` rule. On scroll the nav stays fixed, white background remains fully opaque. ## Do's and Don'ts ### Do - Use Diptyque Saint-Germain (or a high-contrast classical serif substitute like EB Garamond) for all display headings, editorial copy, and the wordmark - Use Apercu Pro (or Aktiv Grotesk / DM Sans as substitute) for all navigation, buttons, body copy, and UI labels - Keep `{rounded.none}` on all interactive elements — sharp edges are the brand's physical signature - Set button labels in Apercu Pro 16px weight 400 — not bold, not uppercase, not spaced - Use `{colors.ink}` / `{colors.background}` as the default surface — resist adding tints or tones to the page canvas - Reserve `{colors.surface}` and `{colors.surface-elevated}` for editorial band breaks and product panels — let them do the separation work - Maintain `1px solid {colors.border}` hairlines for input fields and structural rules — no thick borders - Trust product and lifestyle photography to carry visual weight — the UI steps back - Use the oval motif (the engraved botanical pattern) as an illustrative/decorative element in hero and section backgrounds — never as a CSS shape - Apply Desmond Handwriting only for personal, artisanal copy moments — gift messages, hand-feel brand storytelling ### Don't - Don't introduce any chromatic brand accent — Diptyque has no accent hue. The only permitted chromatic values are `{colors.success}` (stock) and `{colors.error}` (validation) - Don't use `border-radius` beyond `{rounded.sm}` (3px) on any button, input, or card — the engraved-label aesthetic is sharp-edged - Don't add box-shadow to product cards or surface components — elevation comes from background tone shift, not shadow - Don't set button labels in bold or uppercase — Apercu Pro regular is the voice, not weight or transform - Don't use Calluna or Desmond Handwriting for UI surfaces — these are tonal accent voices, not workhorse fonts - Don't crowd sections — preserve the 40–75px vertical rhythm; tightening the pacing breaks the editorial register - Don't apply Diptyque Saint-Germain to body copy or navigation links — its role is display and brand identity only - Don't use the oval shape as a CSS `border-radius` pill — it exists in illustration, not in interactive component chrome - Don't introduce gradients onto surfaces — all fills are flat; the only gradient in the system is a 1px underline trick using a linear-gradient for link hover - Don't mix weight 700+ Apercu Pro with the display serif — bold weight reads as out-of-register, breaking the refined two-voice contract --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <414px | Single-column layout, stacked CTAs, hamburger nav, 14px body | | Mobile | 414–767px | Full-width product cards, full-width CTAs, condensed nav bar | | Tablet | 768–1023px | 2-column product grids begin, navigation partially expanded | | Desktop | 1024–1359px | Full horizontal nav, 3–4 column product grids, editorial columns at ~700px max | | Large Desktop | ≥1360px | Maximum container width, full editorial spacing, hero at maximum cinematic scale | ### Touch Targets - Primary and secondary buttons: `padding: 15px 24px` gives approximately 46–48px tap height — meets the 44px minimum - Nav links: `14px` Apercu Pro with generous vertical padding via the nav band - Product card tiles: entire card area is tappable including image and title block - Form inputs: `padding: 13px 16px` provides comfortable 42px tap height on mobile ### Collapsing Strategy - **Navigation**: Horizontal main nav collapses to a hamburger drawer below approximately 1024px; the wordmark stays centered at all sizes; the announcement bar collapses or scrolls on very small viewports - **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; gutters preserved proportionally using the spacing scale - **Hero photography**: Full-bleed at all breakpoints; text overlays reposition from center to bottom-left on mobile for thumb-zone legibility - **Editorial columns**: Max-width reading column (~700px) remains centered on desktop; becomes full-width on mobile with horizontal padding from `{spacing.lg}` - **Typography scale**: `display-hero` at 32px holds on desktop; scales to approximately 24px on mobile — headline weight stays 400, never bolds to compensate ### Image Behavior - Product photography: square or slightly portrait aspect ratios maintained across breakpoints via CSS `aspect-ratio` or `padding-bottom` percentage technique - Hero: full-bleed, art-directed for foreground/background composition at multiple breakpoints - Botanical/oval pattern backgrounds: tile or scale at the section level; never clipped to a tight card edge --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (`#ffffff`) - Text: `{colors.ink}` (`#000000`) - Secondary text: `{colors.ink-secondary}` (`#717171`) - Brand accent: none — Diptyque uses no accent color - Button fill: `{colors.primary}` (`#000000`), button text `{colors.on-primary}` (`#ffffff`) - Border: `{colors.border}` (`#d8d8d8`) - Focus ring: `{colors.focus-ring}` (`#000000`) - Editorial surface: `{colors.surface}` (`#f8f8f8`) - Deep surface: `{colors.surface-elevated}` (`#f3efec`) - Stock green: `{colors.success}` (`#018937`) ### Example Component Prompts - "Create a Diptyque hero section on `{colors.background}`. Full-bleed botanical photography as the background. Centered editorial headline in `Diptyque Saint-Germain` 32px weight 400 line-height 1.2 color `{colors.ink}`. Below, a 16px Apercu Pro regular subline in `{colors.ink}`. Then two side-by-side buttons: one `{components.button-primary}` ('Join Diptyque'), one `{components.button-secondary}` ('Explore the collection'). Both 0px border-radius, 15px 24px padding, 16px Apercu Pro regular." - "Build a Diptyque product card on `{colors.background}` with no shadow, no border, no radius. Square product image at top (candle or fragrance bottle, full-bleed). Below: product category in `Diptyque Saint-Germain` 14px weight 400 uppercase tracking `0.5px` color `{colors.ink-secondary}`. Product name in `Diptyque Saint-Germain` 16px weight 400 color `{colors.ink}`. Price in Apercu Pro 14px weight 400 `{colors.ink}`. On hover, text links fade to `{colors.text-hover}`." - "Design a Diptyque navigation bar: white background, centered wordmark 'DIPTYQUE PARIS' in Diptyque Saint-Germain ~32px weight 400 color `{colors.ink}`. Below: horizontal link row in Apercu Pro 14px weight 300 — 'New & Trending · Gifts · Fragrances · Candles & Home · Bath & Body'. Links `{colors.ink}` default, `{colors.text-hover}` on hover, no underline. Bottom border `1px solid {colors.border}`." - "Create a form input in Diptyque style: `background: {colors.background}`, border `1px solid {colors.border}`, `border-radius: 0px`, padding `13px 16px`, Apercu Pro 16px regular, color `{colors.ink}`, placeholder `{colors.ink-muted}`. Focus: border becomes `1px solid {colors.focus-ring}` — no glow, no color shift. Label above: Apercu Pro 12px weight 400 `{colors.ink}`." - "Build a Diptyque editorial band: background `{colors.surface}` (#f8f8f8), 75px vertical padding. Section headline in Diptyque Saint-Germain 24px weight 400 `{colors.ink}` centered. Body paragraph Apercu Pro 16px weight 400 line-height 1.4 `{colors.ink}` max-width 700px centered. One `{components.button-secondary}` CTA below. No border, no shadow, no radius anywhere." - "Design a Diptyque product badge: background `{colors.surface}`, text `{colors.ink}`, Apercu Pro 12px weight 400, `border-radius: 3px`, padding `4px 10px`. Stock label 'In stock' in `{colors.success}` Apercu Pro 12px. No decorative icon." ### Iteration Guide 1. Start with `{colors.background}` pure white canvas — never introduce tints or off-whites to the base page layer 2. Typography voice assignment is the first decision: is this text editorial (Diptyque Saint-Germain) or transactional (Apercu Pro)? There is no overlap 3. All interactive elements are `{rounded.none}` — add `border-radius: 0` as a global reset for this design language 4. Depth and separation come from `{colors.surface}` background shifts and `1px solid {colors.border}` hairlines — never box-shadow on cards or panels 5. Primary button is flat black (`{colors.primary}`) at Apercu Pro 16px weight 400 — not bold, not uppercase, not letter-spaced beyond default 6. Secondary button is white with black border — the outline button is never grey, never tinted 7. Link hover is `{colors.text-hover}` (`#565656`) with `text-decoration: none` — subtle fade, no underline surprise 8. The oval motif belongs to SVG/illustration — never simulate it with `border-radius: 50%` on rectangular elements 9. Photography is the only decorative investment — trust large-format, well-lit imagery; the UI steps back to serve it 10. Desmond Handwriting script may appear once per page maximum, in gift messaging or campaign copy — treat it like a wax seal, not a font choice --- ## 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 Diptyque. Brand names and trademarks belong to their respective owners.