Cartier Design System

Overview

Cartier's design system runs on case and tracking, not on color. Uppercase authority: every typographic surface — from the 22px product launch headline "INTRODUCING THE NEW ROADSTER" to the 12px nav link "CONTACT US" — runs uppercase in Brilliant Cut at 0.4–1.5px letter-spacing. No other hierarchy signal exists at the same level. The font weight ranges from 400 to 700, but the weight variation is secondary to the uppercase convention — at 12px / 400 / 0.5px, a Cartier nav link reads with the same positional clarity as a 22px heading because both share the same case discipline. Unlike Louis Vuitton, which uses a size-and-weight ladder to establish hierarchy, and unlike Tiffany, which uses its signature turquoise to create hierarchy through color, Cartier levels every tier by uniformly reducing it to capitals.

The system is near-monochrome. Near-black ink ({colors.ink} — #1d1c1c) dominates the page at 796 extracted occurrences — 368 as text, 372 as border, 50 inside gradients. Cartier red ({colors.primary} — #d50032) is declared in the CSS as a brand-layer color and renders in a single background fill on the captured page. The marketing surface reads as white photography with near-black type and borders; no saturated color appears at scale. This is restraint by architecture, not by omission — the CSS has the red; the marketing system simply does not reach for it.

Key Characteristics:

• Uppercase all-caps on every typographic tier, no exceptions — the brand distinguishes levels through size only, never through case change.
• Near-black {colors.ink} (#1d1c1c) as the dominant ink — not true black, a very dark warm near-black with 796 total occurrences across text and borders.
• 0px corners on every surface: buttons, inputs, product cards, section dividers. No radius is applied to any interface element except a circular pill (100%) used for icon buttons.
• Cartier red {colors.primary} (#d50032) held to a single background occurrence — scarcity is the policy.
• Dual proprietary typefaces: Brilliant Cut (geometric sans, uppercase dominant) and Fancy Cut (editorial serif, for product and body copy).
• Letter-spacing rather than weight as the emphasis signal: 0.4px standard, 0.5px moderate, 0.8px wide, 1.5px maximum on button labels.
• Photography does all chromatic work — gold tones, champagne reflections, and steel surfaces appear exclusively through product photography.

Colors

Ink

• Ink ({colors.ink} — #1d1c1c): frequency 796 — dominant ink across text (368), border (372), and gradient (50). Not pure black — a very dark warm near-black that reads as black but carries a slight warmth. Every navigation label, product heading, section border, and gradient uses this tone. The page's monochromatic character comes from this single token doing nearly everything.
• Ink-Pure ({colors.ink-pure} — #000000): frequency 39 — used as text (15), background (7), border (15), and shadow (2). Applied on the cookie banner overlay text, the primary-button fill on the consent modal, and shadow values. Slightly cooler and more absolute than {colors.ink}.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 56 — clustered from pure white (#ffffff), near-white (#f9f9f9), and off-white (#f5f5f5). Used as text (23) on dark fills, background (14), and border (17). The base page canvas and the background of the white-photography sections.
• Surface-1 ({colors.surface-1} — #f9f9f9): merged into the canvas cluster. The slightly-warm white that appears on product card backgrounds and the subscription banner.
• Surface-2 ({colors.surface-2} — #f5f5f5): the softest warm-white surface step, merged into the canvas cluster.

Hairline

• Hairline ({colors.hairline} — #8c8c8c): frequency 2 — a mid-gray tone used as border (1) and text (1). The only gray hairline in the system; the dominant border tone is {colors.ink}.

Brand

• Primary ({colors.primary} — #d50032): frequency 1, as a single background fill. Cartier red — the brand's signature color declared as a brand-layer CSS token. Its near-absence from the marketing surface is intentional; the system treats the red as a signal of maximum priority.

Typography

Font Families

The system runs two proprietary families. Brilliant Cut (and its variant Brilliant Cut Pro) handles every interface and display surface: navigation, buttons, headings, category labels, and overlines. Fallbacks walk Almarai → Helvetica → Arial → sans-serif. All Brilliant Cut instances are uppercase. Fancy Cut (and its variant Fancy Cut Pro) handles editorial body paragraphs and product description text, appearing in sentence case at weights 300–700. The serif voice is the only exception to the all-caps convention.

Hierarchy

Principles

The maximum display size in the extracted system is 22px — the h2 for the "INTRODUCING THE NEW ROADSTER" product announcement. There is no 48px or 60px hero headline in the captured surface; Cartier relies on full-viewport photography rather than giant typographic moments to set the opening tone. The type system is intimate and controlled at the scale where most luxury brands shout. Letter-spacing at 1.5px on button labels makes the 13px button text read as distinctly Cartier — the same tracking that makes a 12px nav link authoritative, amplified further on the single call-to-action.

Font Substitutes

Brilliant Cut is proprietary. For the uppercase geometric sans treatment, Jost (Google Fonts, weight 400–600, uppercase) is the closest open-source match; Futura PT on Adobe Fonts is closer in proportions. For Fancy Cut's editorial serif voice, Cormorant Garamond or EB Garamond at weight 300–400 reproduce the lightness of the Fancy Cut treatment.

Layout

Spacing System

• Base unit: 12px (dominant padding), with 5px as the minimum.
• Tokens: {spacing.xxs} 5px · {spacing.xs} 12px · {spacing.sm} 16px · {spacing.md} 20px · {spacing.base} 28px · {spacing.lg} 32px · {spacing.xl} 36px.
• Nav padding: 0px vertical, 12px horizontal per item.
• Product card padding: 20px top, 15px horizontal, 30.8px bottom — a deliberate asymmetry that gives card footers a generous reading zone.
• Section top margin: approximately 53.6px for major content sections.

Grid & Container

• Full-bleed hero: product photography fills the viewport top edge-to-edge, with the text overlay positioned below or over the lower portion.
• Product grid: 3-column product card grid below the fold — the captured screenshot shows three watch product cards in equal columns at desktop width.
• Nav: centered wordmark with left-grouped category links (HIGH JEWELRY, JEWELRY, WATCHES, BAGS AND ACCESSORIES, FRAGRANCES, HOME & STATIONERY, NEWS, LA MAISON) and right-grouped utilities (wishlist, account, bag, search).

Rhythm

The page presents a full-bleed photography top, then an editorial text zone, then a product grid sequence. There is no decorative band between zones — sections terminate directly into the next. The near-black borders and hairlines do the work of visual separation without added spacing.

Elevation

The system has no visible shadow tier. The 2 captured shadow occurrences are confined to the cookie consent modal (rgba(0,0,0,*) neutral ink). All separation on the marketing surface comes from 1px {colors.ink} borders on product cards and the 3px bottom underline on nav links rather than from elevation or blur.

Shapes

The radius language is strictly binary:

• {rounded.none} 0px — the universal treatment for buttons, inputs, product cards, section containers. Every interactive and content surface in the system uses 0px.
• {rounded.full} 100% — appears in exactly one context: icon-button circles (e.g., wishlist, account, bag in the top nav). No intermediate values.

The 0px convention is the brand's geometry principle: Cartier's jewel settings use precision-cut corners, not rounded bevels. The design system mirrors the product.

Components

button-primary — Pure black {colors.ink-pure} fill, white text, Brilliant Cut Pro at {typography.button-md} (13px / 400 / 1.5px tracking), 0px radius, 50px height. "AGREE" on the cookie consent modal is the canonical instance — an ironic first-contact with the brand's authority button treatment.

button-primary-hover — Near-black {colors.ink} fill on hover — the same perceptual transition between pure black and near-black that runs through the entire system.

button-secondary — Transparent fill, near-black {colors.ink} text, 1px ink border, 0px radius, 40px height. "CONFIGURE ALL COOKIES" and "ALLOW TECHNICAL COOKIES ONLY" are the captured secondary instances.

button-brand — The single validated instance of Cartier red {colors.primary} as a button fill. Reserved for the single highest-priority conversion action. Same 0px radius, same 1.5px letter-spacing.

top-nav — White {colors.canvas} surface, near-black ink text, 0px radius, 52px height. The wordmark "Cartier" renders in a custom logotype; the navigation links are Brilliant Cut 12px / 400 / 0.5px uppercase.

nav-link — Transparent, ink text at {typography.nav-link}, 3px underline bottom rule on hover. The underline is the sole hover affordance in the nav — no background fill, no weight change.

hero-heading — Near-black {colors.ink} text at {typography.display-md} (22px / 600 / uppercase / 0.4px tracking). Smaller than most luxury-brand hero heads; the photography above carries the scale.

section-heading — Ink text, {typography.heading-sm} (16px / 600 / uppercase / 0.5px). Used for sub-section titles within the product announcement zone.

body-paragraph — Near-black body text at {typography.body-md} (Fancy Cut Pro 16px / 400). The only non-uppercase body text in the system; the serif voice breaks the all-caps convention.

body-paragraph-serif — {typography.body-lg} (Fancy Cut 16px / 400) — the editorial body variant with slightly longer line height.

card — Near-white {colors.surface-1} fill, ink text, 0px radius, 20×15px padding (asymmetric). Product photography fills the card top; the text zone below sits with more generous bottom padding (30.8px) than top.

product-label — Transparent, ink text at {typography.label-lg} (14px / 600 / uppercase / 0.4px). Used for product names and category labels on card bottoms.

caption-sm — Ink text at {typography.label-sm} (12px / 400 / uppercase / 0.5px). The micro-caption used for location references, date labels, and footnote text.

text-input — Transparent fill, ink text at {typography.input-md} (Fancy Cut 16px / 300), 0px radius, 35px height, 1px bottom ink border. The subscription email field uses bottom-border-only — the single place where Fancy Cut (not Brilliant Cut) appears in a form context.

newsletter-banner — Near-black {colors.ink} fill, white text, 12px horizontal padding. The persistent promo strip at the very top of the page ("FRAGRANCE SAMPLING: Complimentary fragrance samples included with select purchases.").

Do's and Don'ts

Do set every typographic surface in uppercase through the Brilliant Cut family. The system has no sentence-case sans text; any lowercase Brilliant Cut rendering breaks the brand's authority convention.

Do use {colors.ink} (#1d1c1c) — not pure {colors.ink-pure} (#000000) — as the default text and border color. The near-black is warmer; pure black appears in the cookie modal and shadow contexts only.

Do use 1.5px letter-spacing on button labels ({typography.button-md}). At 13px, the standard 0.5px spacing makes Brilliant Cut button text read as a caption; the 1.5px tracking delivers the required authority at that size.

Do reserve {colors.primary} (#d50032) for the single highest-conversion action on the page. Cartier red at more than one occurrence per page is no longer a signal — it is a decoration.

Don't render any radius between 1px and 99% on Cartier surfaces. The system has exactly two options: 0px (all interface chrome) and 100% (icon circles). A 4px or 8px radius on a button or card reads as a brand violation at the same level as using lowercase.

Don't use Fancy Cut or Fancy Cut Pro for heading text. The serif is the body voice — editorial copy, product descriptions, subscription label. Using it for an h2 or nav link inverts the type-role split and erases the discipline that makes the two-family system work.

Don't use {colors.hairline} (#8c8c8c) as a primary border. The dominant border tone is {colors.ink} (#1d1c1c); the mid-gray appears in only 2 captured occurrences. Using gray borders across the system produces a generic retail look rather than the near-black precision Cartier applies.

Don't add decorative gradients or ornamental chrome between sections. The page transitions through photography alone — no gradient overlays, no decorative dividers. Cartier's scarcity of decoration is as intentional as its scarcity of color.

Known Gaps

• Extraction limitations: the cookie consent modal dominated the captured viewport; the homepage product content was partially obscured. Many marketing surfaces below the modal are estimated from the screenshot and CSS rather than extracted component measurements.
• No CSS custom properties exposed: the extraction found zero :root custom properties, suggesting Cartier's token system lives inside a bundled stylesheet or behind authentication. All color and typography tokens are derived from rendered element styles only.
• Cartier red usage: only a single {colors.primary} occurrence was captured. The full scope of red usage on product, campaign, and collection pages is not represented here.
• Animation: the hero photography appears to animate on load (cross-fade or parallax), but the spec captures end-state values only.
• Dark mode: not present on the captured public marketing surface.
• Product surfaces: the My Account, jewelry configurator, and cart surfaces carry additional component patterns (pricing tables, size selectors, quantity steppers) not captured here.
• Fancy Cut Pro vs. Fancy Cut: the extraction found both variants without clear CSS variable separation — usage distinctions are inferred from the seenOn context and count values.