Van Cleef & Arpels Design System

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 <meta> 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

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.