--- version: alpha name: "Van Cleef & Arpels" website: "https://www.vancleefarpels.com" description: >- A Paris haute-joaillerie maison whose marketing site runs a completely achromatic brand chrome — pure near-black ink on muted sage-green or ivory canvas — and lets the jewelry photography carry every chromatic statement. Type runs two families in strict weight-400 throughout: Janson Text, a classical book serif at 30–45px for display; and Maison Neue at 10–13px uppercase with 1.5px letter-spacing for every navigation label, CTA, and category chip. There is no primary button color, no CTA fill: every action surface is a hairline-bordered text link or a small 10px uppercase label-button, placing the system in the rare category of brands that refuse to declare a voltage color entirely. seo: title: "Van Cleef & Arpels Design System for React — achromatic ink, Janson Text serif, 14 components" metaDescription: "Van Cleef & Arpels' marketing-site design system as DESIGN.md. Near-black ink on sage-green and ivory canvas, Janson Text display serif, Maison Neue uppercase labels, 15 color tokens, 14 components. For React, Next.js, and AI tools." highlights: - "Achromatic brand chrome — zero brand voltage color; all chromatic interest comes from jewelry photography, not UI elements" - "Janson Text at weight 400 — a classical book serif holds every display headline at 30–45px with no weight variation, no bold tier" - "Maison Neue uppercase labels — 10–13px uppercase tracking at 1.5px letter-spacing appears 37+ times across nav, CTAs, and category chips" - "Sage-green editorial canvas — section bands alternate between near-white, sage-green, and warm ivory rather than a single flat background" - "Hairline-only interaction model — no filled button exists on the captured surface; every CTA is an underlined or uppercase text link with a 1px border" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Van Cleef & Arpels' marketing site operates on a discipline almost no other luxury brand holds: the page itself has no color. Navigation, labels, CTAs, and section headings are rendered in near-black ink on white or sage-green canvas — the only chromatic statements anywhere on the page are the jewelry pieces themselves. Where Cartier uses a deep bordeaux red and Tiffany uses a signature robin-egg blue as persistent brand voltage, Van Cleef & Arpels withholds every chromatic UI element and forces the eye toward the objects being sold. The sage-green section bands — a muted, grey-inflected green visible in the "Enchanted hours" editorial panel — are the closest thing to a brand color the page declares, and even these read as a neutral backdrop for product photography rather than as a brand signal. The DESIGN.md file packages the system into machine-readable tokens for React and AI tools. Inside: 15 color tokens drawn from a rigorously monochromatic chrome — near-black ink at two densities, a mid-grey muted tone, hairline greys, and canvas tones including the sage-green editorial surface. Ten typography tokens span two families — Janson Text, a classical book serif running at 26–45px in weight 400 for every display moment; and Maison Neue, a geometric sans that handles every functional surface (nav, CTA, label, body) at 10–16px in weight 400 with uppercase and 1.5px tracking as the primary emphasis treatment. Fourteen components cover the editorial display pattern, the uppercase-label CTA, the hairline-bordered text input, and the product-photography showcase card. Feed this file to Claude or Cursor and it will reproduce Van Cleef & Arpels' specific restraint: achromatic UI chrome, Janson Text serif at modest weight for display, Maison Neue uppercase for every action surface, and a radius vocabulary that is essentially zero everywhere. The one disciplined move worth studying here is the total refusal to declare a button color — a choice that only works when product photography is rich enough to carry all visual energy. For most teams this spec functions as an extreme reference point for type-and-spacing restraint rather than a direct clone target. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.vancleefarpels.com" title: "Van Cleef & Arpels — official site" description: "Van Cleef & Arpels' public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Van Cleef & Arpels' primary brand color?" answer: "Van Cleef & Arpels declares no brand voltage color in the captured marketing surface. The page is achromatic: ink at near-black (#222222, 511 total occurrences) and a secondary mid-grey (#757575, 152 occurrences) carry every text and hairline surface. The sage-green editorial canvas (#a8b89a, visible in the 'Enchanted hours' section) is the closest thing to a chromatic brand signal, but it functions as a photographic backdrop rather than as a UI accent. There is no filled button, no colored CTA, no brand-colored icon. The system withholds voltage entirely and lets jewelry photography carry all chromatic work." - id: "typography" title: "What typefaces does Van Cleef & Arpels use, and what are good substitutes?" answer: "The system runs two families: Janson Text (a classical book serif, licensed) for all display and editorial headlines at 26–45px in weight 400, and Maison Neue (a geometric sans) for all functional surfaces — navigation, CTAs, body copy, and labels — at 10–16px in weight 400. Display sits at 45px / 400 for h2 hero moments, 26–35px for section headings. Both families run exclusively at weight 400; the only emphasis treatment is Maison Neue in uppercase with 1.5px letter-spacing. Open-source substitutes: EB Garamond or Playfair Display for Janson Text; Inter or DM Sans for Maison Neue." - id: "sage-canvas" title: "Why does Van Cleef & Arpels use a sage-green section canvas?" answer: "The sage-green editorial bands — visible in the 'Enchanted hours' watch section — function as photographic backdrops rather than as chromatic brand signals. The muted grey-green reads as a reference to the lush garden and botanical motifs that run through Van Cleef & Arpels' jewelry iconography (clovers, butterflies, cherry branches). It is close to neutral: at a glance it reads as a warm grey, and only when compared to the near-white sections above does the green tint become distinct. No CSS variable name maps to this color — it is set directly on section elements rather than declared as a brand token." - id: "button-style" title: "Does Van Cleef & Arpels have a primary button, and how does it work?" answer: "The captured marketing surface has no filled primary button. Every call-to-action on the page is either a small 10px uppercase text label in Maison Neue with 1px letter-spacing (the dominant CTA pattern, appearing on scroll-triggered overlays and section CTAs), a hairline-bordered link button (the newsletter subscription field), or an underlined anchor text in 16px body copy. The absence of a filled CTA is deliberate — filling a button would introduce a color choice that would compete with the jewelry photography, which carries all chromatic work. The input field and form submit both use 0px border-radius and a 1px #222222 or #e6e6e6 hairline." - id: "use-in-project" title: "Can I use this DESIGN.md to build a luxury goods marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Van Cleef & Arpels' specific moves: achromatic UI chrome with no brand voltage color, Janson Text serif at weight 400 for display, Maison Neue uppercase labels with 1.5px tracking for CTAs and navigation, sharp-corner geometry throughout, and section bands that alternate between near-white, sage-green, and warm ivory. The main caveat: this system only works when product photography is rich enough to carry all visual energy. For text-heavy or application products, the absence of a voltage color will feel like missing infrastructure rather than deliberate restraint." mockups: - "marketing-hero" - "media-grid" colors: ink: "#222222" ink-secondary: "#757575" ink-deep: "#111111" ink-black: "#000000" ink-mid: "#666666" ink-faint: "#454545" canvas: "#ffffff" canvas-warm: "#f9f9f9" hairline: "#e6e6e6" hairline-light: "#c4c4c4" sage-canvas: "#a8b89a" ivory-canvas: "#f5e9d8" input-text: "#454545" typography: display-xl: fontFamily: "\"Janson Text\", Times, \"Times New Roman\", serif" fontSize: 45px fontWeight: 400 lineHeight: 55px letterSpacing: 0 display-lg: fontFamily: "\"Janson Text\", Times, \"Times New Roman\", serif" fontSize: 35px fontWeight: 400 lineHeight: 45px letterSpacing: 0 display-md: fontFamily: "\"Janson Text\", Times, \"Times New Roman\", serif" fontSize: 30px fontWeight: 400 lineHeight: 40px letterSpacing: 0 heading-md: fontFamily: "\"Janson Text\", Times, \"Times New Roman\", serif" fontSize: 26px fontWeight: 400 lineHeight: 34px letterSpacing: 0 heading-sm: fontFamily: "\"Janson Text\", Times, \"Times New Roman\", serif" fontSize: 18px fontWeight: 400 lineHeight: 25px letterSpacing: 0 body-md: fontFamily: "\"Maison Neue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 30px letterSpacing: 0 body-sm: fontFamily: "\"Maison Neue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 25px letterSpacing: 0 label-md: fontFamily: "\"Maison Neue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 20px letterSpacing: "1.5px" label-sm: fontFamily: "\"Maison Neue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 20px letterSpacing: "1.5px" caption: fontFamily: "\"Maison Neue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 20px letterSpacing: 0 button-md: fontFamily: "\"Maison Neue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 30px letterSpacing: "1px" nav-link: fontFamily: "\"Maison Neue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 20px letterSpacing: "1.5px" rounded: none: "0px" sm: "4px" full: "9999px" spacing: xs: "5px" sm: "10px" md: "15px" base: "20px" lg: "25px" xl: "30px" 2xl: "40px" 3xl: "60px" 4xl: "80px" components: button-primary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "5px 10px" border: "1px solid {colors.ink}" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "5px 0px" border: "0" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "15px 20px" height: "60px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "10px 0px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink-black}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0px" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-secondary}" typography: "{typography.caption}" padding: "0px" editorial-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" padding: "0px" card-product: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "20px" card-editorial: backgroundColor: "{colors.sage-canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "60px 40px" text-input: backgroundColor: "transparent" textColor: "{colors.input-text}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: "5px 0px" height: "31px" borderColor: "{colors.ink}" label-uppercase: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-md}" padding: "5px 10px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-secondary}" typography: "{typography.label-sm}" padding: "40px 20px" --- ## Overview Van Cleef & Arpels' marketing site operates on a discipline that separates it from every other luxury fashion and jewelry brand in the directory. **Colorless chrome.** Where Cartier holds a deep bordeaux and Tiffany holds a robin-egg blue as persistent brand signals, Van Cleef & Arpels declares no voltage color at all — no filled button, no accent icon, no chromatic CTA. The entire UI is achromatic: near-black ink on white, warm ivory, or sage-green canvas. Every chromatic element visible on the page is a jewelry piece, not a UI element. This is not monochrome minimalism in the Linear or Vercel sense — it is a deliberate editorial decision that positions product photography as the only permitted source of color. The typographic system reinforces the choice. Display moments use **Janson Text**, a classical book serif at weight 400 running from 26px through 45px — the same weight across all sizes, no bold tier. Supporting surfaces use **Maison Neue**, a geometric sans at weight 400, where uppercase with 1.5px letter-spacing serves as the single emphasis treatment. The pairing is closer to a print editorial magazine than to any luxury e-commerce peer: the serif holds the showcase copy while the sans annotates and navigates, each family constrained to one weight. **Key Characteristics:** - Achromatic brand chrome: no brand color, no filled button, no colored CTA — 511 ink occurrences and zero brand-voltage background fills. - Janson Text book serif at weight 400 across every display tier (26–45px) — no semibold or bold headline anywhere. - Maison Neue in 13px uppercase with 1.5px tracking appears 37+ times as the primary emphasis signal for navigation, labels, and CTAs. - Section bands alternate between near-white, sage-green, and warm ivory rather than a uniform canvas — color is a photographic staging decision, not a brand token. - Zero primary button fill: every CTA is either a hairline-bordered text button or an underlined link. - Near-zero radius vocabulary: only one 4px rounded token exists on the captured surface; all other UI elements are sharp-cornered. - Generous vertical rhythm: major section padding at 60–90px vertical; body line-height at 30px on 16px body text (1.875 ratio). ## Colors ### Text - **Ink** (`{colors.ink}` — #222222): frequency 511. Used as text (260), border (251). The dominant tone across every heading, paragraph, nav label, and hairline. Near-black rather than pure black — the distinction from #000000 is deliberate at the body reading sizes. - **Ink Secondary** (`{colors.ink-secondary}` — #757575): frequency 152. Used as text (77), border (75). Mid-grey tone for secondary labels, subcategory chips, and secondary navigation elements. Clustered from two near-duplicate hex values in the extraction. - **Ink Deep** (`{colors.ink-deep}` — #111111): frequency 42. Used as text (21), border (21). A slightly deeper near-black appearing on h2 display moments and strong-weight label text. - **Ink Black** (`{colors.ink-black}` — #000000): frequency 16. Used as text (8), border (8). Pure black, appearing sparingly on the most authoritative heading instances and select hairlines. - **Ink Mid** (`{colors.ink-mid}` — #666666): frequency 4. Used as text (2), border (2). An intermediate grey used sparsely for footnote-level metadata. - **Ink Faint** (`{colors.ink-faint}` — #454545): frequency 2. Used as text (1), border (1). Input field text color. ### Canvas - **Canvas** (`{colors.canvas}` — #ffffff): frequency 16. Used as background (2). The primary page floor for the above-fold hero and editorial sections. Clustered from two near-white hex values in the extraction. - **Canvas Warm** (`{colors.canvas-warm}` — #f9f9f9): the declared themeColor — a near-white warm canvas for the page `` theme. Not a distinct rendered surface but the intent color for system UI. - **Sage Canvas** (`{colors.sage-canvas}` — #a8b89a): the muted grey-green editorial backdrop visible in the "Enchanted hours" watch section. Not a declared CSS variable — applied directly as section background. The only chromatic canvas tone on the page; functions as a photographic backdrop rather than a brand accent. - **Ivory Canvas** (`{colors.ivory-canvas}` — #f5e9d8): the warm cream-beige surface visible in the "Golden Beads" and lower editorial bands. Creates the warm alternating-band rhythm below the fold. ### Hairlines - **Hairline** (`{colors.hairline}` — #e6e6e6): frequency 16. Used as text (8), border (8). The lighter border tone — used on form fields, section dividers, and product card outlines. ## Typography ### Font Families The system runs two families. **Janson Text** is a licensed classical book serif (from Linotype) serving every display and editorial headline at 26–45px, exclusively in weight 400 with normal letter-spacing. **Maison Neue** (by Milieu Grotesque) is a geometric sans handling navigation, body copy, CTAs, labels, and captions at 10–16px, also exclusively in weight 400 — with uppercase and 1.5px letter-spacing as the primary emphasis treatment. There is no semibold, no bold, no 700+ moment anywhere on the page. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 45px | 400 | 55px | h2 hero display ("Paris, Tokyo, New York…") | | `{typography.display-lg}` | 35px | 400 | 45px | Sub-section display headlines | | `{typography.display-md}` | 30px | 400 | 40px | Editorial section headlines | | `{typography.heading-md}` | 26px | 400 | 34px | h2 section titles | | `{typography.heading-sm}` | 18px | 400 | 25px | h3 category headings | | `{typography.body-md}` | 16px | 400 | 30px | Default running text | | `{typography.body-sm}` | 14px | 400 | 25px | Secondary body copy | | `{typography.label-md}` | 13px | 400 | 20px | Nav labels, category chips (uppercase, 1.5px tracking) | | `{typography.label-sm}` | 12px | 400 | 20px | Small labels (uppercase, 1.5px tracking) | | `{typography.caption}` | 13px | 400 | 20px | Body captions, metadata (no tracking) | | `{typography.button-md}` | 10px | 400 | 30px | CTA buttons (uppercase, 1px tracking) | | `{typography.nav-link}` | 13px | 400 | 20px | Top-nav links (uppercase, 1.5px tracking) | ### Principles Weight 400 across the entire system is the defining typographic discipline. No bold headline, no semibold subheading — the serif's own optical weight at large sizes does every display job, and Maison Neue uppercase spacing does every emphasis job. The 1.875 line-height ratio on body text (30px on 16px) is unusually generous, giving paragraphs a breathing quality that matches the wide, open page layout. ### Note on Font Substitutes Janson Text is a licensed serif. **EB Garamond** or **Cormorant Garamond** at the same weights are close open-source substitutes at display sizes; at body sizes, **Lora** or **Spectral** carry the same calligraphic weight. For Maison Neue, **DM Sans** or **Inter** at the same weights transfer cleanly; the uppercase tracking is a CSS property that carries regardless of family. ## Layout ### Spacing System - **Base rhythm:** 5px micro-unit, with 10px as the primary module. - **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 10px · `{spacing.md}` 15px · `{spacing.base}` 20px · `{spacing.lg}` 25px · `{spacing.xl}` 30px · `{spacing.2xl}` 40px · `{spacing.3xl}` 60px · `{spacing.4xl}` 80px. - **Section padding:** 60–90px vertical between major editorial bands; the "60px 0px 90px" pattern appears 7 times. - **Card internal padding:** 15–20px on product cards; 60px on large editorial panels. - **Max content width:** ~1320px for body text paragraphs; editorial imagery bleeds full-width. ### Grid & Container - **Hero:** full-bleed image with headline and sub-copy overlaid at center. - **Below-fold:** alternating single-column editorial panels with full-bleed photography on the right and constrained text on the left, typically ~50/50 split. - **Product grid:** 3–4 column product card grid with hairline dividers; each card is product image + small uppercase label + serif product name. - **Section bands:** alternating near-white / sage-green / warm ivory — the canvas change signals a new editorial chapter rather than a new product category. ### Rhythm The page breathes at a magazine pace — wide leading, generous section margins, no band is shorter than ~400px. The alternating canvas tones create rhythm without requiring heading hierarchy to do the structural work. ## Elevation The system has essentially **no shadow tier**. No captured shadow values appear in the extraction — zero shadow occurrences. Depth is achieved entirely through canvas-tone contrast: the sage-green bands are lifted against the white floor by their background-color difference alone. Product photography provides the only three-dimensional depth signal on the page. The single 4px `{rounded.sm}` token suggests a rare pop-over or tooltip; the marketing surface itself is uniformly flat. ## Shapes The radius vocabulary is **near-zero**: a single 4px value appears once in the extraction (1 occurrence total). Every other UI element — nav, buttons, inputs, product cards, editorial panels, image frames — is sharp-cornered. The flat-corner geometry gives the page its architectural precision; soft rounding would introduce warmth the system deliberately withholds. ## Components **`button-primary`** — Transparent fill, near-black `{colors.ink}` text in `{typography.button-md}` (10px / 400 uppercase), 1px `{colors.ink}` hairline border, no radius. The "action" surface on Van Cleef & Arpels is a bordered label, not a filled block. **`button-secondary`** — Transparent fill, ink text in uppercase label tracking. Used for underlined anchor CTAs where no border is appropriate. **`top-nav`** — White canvas, near-black text, uppercase Maison Neue labels at 13px / 1.5px tracking. The VCA wordmark sits centered with sparse nav links flanking it. 60px height. **`nav-link`** — Transparent, ink text at `{typography.nav-link}` (uppercase, 1.5px tracking). Spacing: 10×0px — horizontally tight, vertically breathed. **`hero-heading`** — Pure-black text on transparent background at `{typography.display-xl}` (45px / 400 Janson Text). No padding — the heading floats over imagery. **`section-heading`** — Ink text at `{typography.display-md}` (30px / 400 Janson Text). Used for editorial band headlines like "Enchanted hours" and "The gift promenade." **`body-paragraph`** — Ink text at `{typography.body-md}` (16px / 400, 30px leading). The generous line-height is the defining body-text quality of the system. **`body-paragraph-muted`** — Mid-grey `{colors.ink-secondary}` text at `{typography.caption}` for secondary metadata and subcategory annotations. **`editorial-heading`** — Ink text at `{typography.heading-md}` (26px Janson Text) — the editorial subheading size used for jewelry category titles. **`card-product`** — White canvas, no border radius, 20px padding. Holds product image + uppercase Maison Neue label + serif product name in `{typography.heading-sm}`. **`card-editorial`** — Sage-green `{colors.sage-canvas}` canvas, generous 60×40px padding, sharp corners. The full-bleed editorial section format for showcase chapters. **`text-input`** — Transparent background, ink-faint text, 13px Maison Neue, zero radius, 1px bottom border in `{colors.ink}`. Used in newsletter signup — a borderless field with only the bottom edge marked. **`label-uppercase`** — The nav chip and category label pattern: transparent, 13px Maison Neue uppercase with 1.5px tracking, 5×10px padding. **`footer`** — White canvas, mid-grey text in small uppercase Maison Neue. 40px vertical padding. ## Do's and Don'ts **Do** use Janson Text at weight 400 for every display moment. The system has no bold headline — Janson's optical weight at 45px on a sparse white canvas carries the full display job. Introducing weight 700 would shift the editorial register toward fashion retail rather than haute joaillerie. **Do** use the uppercase tracking treatment (`text-transform: uppercase; letter-spacing: 1.5px`) on Maison Neue as the single emphasis signal. It substitutes for semibold weight in a system that runs exclusively at 400. Use it on every navigation label, CTA, and category chip. **Do** alternate canvas tones between sections — near-white, sage-green, warm ivory — to create editorial rhythm. The canvas variation is a structural device, not a decoration; it signals chapter breaks between product categories. **Do** keep the body line-height at 30px on 16px text (1.875 ratio). The generous leading is a precision setting that matches the wide, sparse page layout — reducing it to 1.5 or 1.6 makes the body copy feel compressed against the open display moments. **Don't** introduce a filled button with a background color. The captured surface has zero filled CTA elements — the single move that most inverts the convention of luxury e-commerce. Adding a burgundy or gold fill button would introduce a voltage color that competes with jewelry photography. Use `{colors.ink}` hairline-bordered text buttons instead. **Don't** use `{colors.sage-canvas}` (#a8b89a) as a text color or icon fill. It appears exclusively as a section background (canvas tone), never as a foreground element. For text on the sage canvas, use `{colors.ink}`. **Don't** use `{colors.ink-secondary}` (#757575) for display or heading text — it is a metadata and secondary-label tone, never a headline color. At 45px, #757575 reads as disabled or faded rather than as a deliberate design choice. **Don't** add border-radius to product cards or editorial panels. The near-zero radius vocabulary is the geometric signature of the system; rounding product cards would make them read as e-commerce commodity tiles rather than as jewelry display cases. ## Known Gaps - **Primary hero content:** the extractor captured a cookie-consent overlay and a post-fold state; the top hero band, primary navigation structure, and main hero imagery are not fully captured in the extracted component samples. - **Product page tokens:** this DESIGN.md captures the home/marketing surface only. Product detail pages (PDP), jewelry configurators, and the L'École des Arts Joailliers educational section likely expose additional typography and layout tokens. - **Dark mode:** no dark-mode variant exists in the captured surface — VCA's marketing is light-only. - **Animation and scroll behaviors:** the page uses scroll-triggered fade reveals for editorial panels and the product carousel uses Swiper.js (the only CSS variable captured is a Swiper default theme color — a library default, not a brand token). Motion timing and easing are not represented here. - **Logged-in states:** the wishlist, cart, and account surfaces expose an interaction model not visible in the public marketing capture. - **International canvas variations:** the extracted URL is the English/global version; regional sites may vary typography and section ordering.