--- version: alpha name: "Cartier" website: "https://www.cartier.com" description: >- A Parisian jeweler and watchmaker founded in 1847 whose marketing site runs two proprietary typefaces — Brilliant Cut (a custom geometric sans with a 0.5px uppercase tracking convention) and Fancy Cut (a custom serif for editorial body text) — across a near-black ink canvas (#1d1c1c) that bleeds through every navigation label, border, and product headline. Cartier red (#d50032) is declared in the CSS and present in a single background fill, but the system reads as essentially monochrome: near-black text and borders on white and near-white photography backgrounds, no chromatic brand accent applied at scale in the marketing chrome. Sharp 0px corners throughout. Every typographic surface runs uppercase letter-spacing; the brand communicates authority through case and tracking, not through weight. seo: title: "Cartier Design System for React — Brilliant Cut, near-black #1d1c1c, 15 components" metaDescription: "Cartier's design system as a DESIGN.md file. Brilliant Cut proprietary sans, Fancy Cut editorial serif, near-black #1d1c1c ink, Cartier red #d50032, 15 color tokens, 15 components. For React, Next.js, and AI tools." highlights: - "Uppercase all-caps convention — every typographic surface from h2 to nav links to button labels runs uppercase with 0.4–1.5px letter-spacing; weight is irrelevant when case does the authority work" - "Near-black #1d1c1c dominant ink — 796 total occurrences across text (368), border (372), and gradient (50); the system's deepest chromatic move is a near-black, not true black" - "Cartier red scarcity — #d50032 exists as a CSS color and appears in exactly one background fill; the marketing surface reads as monochrome despite the declared brand voltage" - "Sharp 0px corners everywhere — buttons, inputs, section dividers, product cards; the Maison communicates precision through geometry, not through softness" - "Dual proprietary typefaces — Brilliant Cut (geometric sans) for interface chrome, Fancy Cut (editorial serif) for product copy and labels; neither is available on Google Fonts" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Cartier's marketing site communicates hierarchy without weight. Every surface — from the 22px h2 "INTRODUCING THE NEW ROADSTER" to the 12px nav link "UNITED STATES" — runs uppercase with 0.4–0.8px letter-spacing in Brilliant Cut at weight 400 or 600. The font never goes heavier than 700 (used once in bold inline text) and never goes lighter than 300 (used in Fancy Cut label instances). The authority signal is case, not weight: ALL CAPS at 12px reads as confidently as 22px because both share the same tracking discipline. Where Louis Vuitton distinguishes tiers through size-and-weight ladders and Tiffany leans on its Tiffany Blue to carry brand identity, Cartier holds color almost entirely in reserve and makes the typographic system do all the positional work. This DESIGN.md file packages the system into 15 color tokens — the near-black ink that dominates 796 extracted occurrences, a pure white and near-white surface cluster, a mid-gray muted tone, and Cartier red (#d50032) declared but scarcely rendered; 15 typography tokens spanning Brilliant Cut (geometric sans) in five size-weight combinations and Fancy Cut (editorial serif) in three sizes; 1 radius token (the dominant 0px sharp); 7 spacing tokens; and 15 component definitions covering hero heading, body paragraph, navigation, CTA buttons, product card, and subscription input. The extraction captured only 5 colors (one of them through a cookie banner) and zero CSS custom properties — the site's token system lives behind authentication or in a separate style bundle. Feed this file to Claude or Cursor and it will reproduce Cartier's specific moves: uppercase everywhere, letter-spacing as the emphasis tool rather than weight, near-black ink on white photography, 0px corners, Brilliant Cut proprietary sans with Helvetica as the first public fallback. The most consequential discipline to carry forward: the absence of Cartier red as a decorative accent is not an omission — it is the brand's restraint signal. The red appears once, on the most singular action, which is precisely where scarcity creates authority. 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.cartier.com" title: "Cartier — official site" description: "Cartier's 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 Cartier's primary brand color?" answer: "Cartier's declared brand voltage is the Cartier red (#d50032) — a deep, saturated red that appears in a single background fill on the captured marketing page. The CSS marks it as a brand-layer color, but the system's rendering discipline holds it to near-zero usage on the marketing surface. The dominant ink is near-black #1d1c1c (796 total occurrences), and the surface reads as monochrome: near-black on white and near-white photography. The red is not used for CTAs, nav accents, or decorative fills at scale — it is reserved, not absent. A competent interpretation of the system should treat #d50032 as a single-action accent (the primary purchase CTA) and nowhere else." - id: "typefaces" title: "What typefaces does Cartier use, and what are the open-source substitutes?" answer: "Cartier runs two proprietary families. Brilliant Cut is a custom geometric sans used for every interface surface — navigation, buttons, headings, caption labels — at 12px to 22px across weights 400 to 600. All Brilliant Cut instances run uppercase with 0.4–1.5px letter-spacing. Fancy Cut is a custom serif used for editorial body paragraphs and product description labels at 14–16px in weight 300–400. Brilliant Cut Pro is a variant used for button labels and some heading instances. Open-source substitutes: for Brilliant Cut's geometric uppercase treatment, Futura PT (available on Adobe Fonts) or Jost (Google Fonts) match the proportions closely. For Fancy Cut's editorial serif, Cormorant Garamond or EB Garamond in weight 300–400 are the closest available alternatives." - id: "cartier-red-usage" title: "Why does Cartier barely use Cartier red on its own website?" answer: "The extraction captured only 1 occurrence of Cartier red (#d50032), as a single background fill — almost certainly a product badge or promotional chip, not a CTA or decorative element. Luxury brands in the Richemont portfolio (Cartier, Van Cleef, IWC) consistently treat their signature colors as scarcity signals: the color appears when it means something specific, not as ambient brand decoration. This is the opposite of Cloudflare's approach (voltage-as-canvas) or Airbnb's (Rausch saturating every primary CTA). At Cartier, the monochrome system is the sophistication statement — the red punctuates rather than pervades. Overusing #d50032 in a Cartier-inspired UI would read as a costume rather than a design decision." - id: "uppercase-convention" title: "Why does Cartier run everything in uppercase?" answer: "Every typographic surface in the captured system — h2, nav links, button labels, caption labels, even body paragraphs in some cases — runs uppercase in Brilliant Cut or Brilliant Cut Pro. The tracking values (0.4–1.5px) spread the capitals just enough to prevent the heaviness that uppercase text can produce at small sizes, while ensuring that the system's authority reads at every scale without a weight increase. At 12px / uppercase / 0.5px tracking, a Cartier nav link occupies the same visual authority register as a 22px Cartier product heading. This is the system's version of a flat hierarchy — no tier is louder than another because every tier has the same gestural voice." - id: "use-in-project" title: "Can I use this DESIGN.md to build a luxury-jewelry product page in React?" 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 Cartier's specific moves: uppercase all-caps Brilliant Cut, near-black #1d1c1c ink, 0px sharp corners, letter-spacing as the emphasis tool, and Cartier red reserved for a single highest-priority action. The 15 components cover nav, hero heading, body paragraph, CTA, subscription input, and product card. The main practical caveat: Brilliant Cut is a proprietary typeface not available publicly. Jost at weight 400–600 in uppercase with the letter-spacing values from this spec is the closest available alternative." mockups: - "marketing-hero" - "media-grid" colors: ink: "#1d1c1c" ink-pure: "#000000" canvas: "#ffffff" surface-1: "#f9f9f9" surface-2: "#f5f5f5" hairline: "#8c8c8c" primary: "#d50032" typography: display-md: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 33px letterSpacing: "0.4px" heading-md: fontFamily: "\"Brilliant Cut Pro\"" fontSize: 19.2px fontWeight: 700 lineHeight: 26.88px letterSpacing: "0.5px" heading-sm: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: "0.5px" body-lg: fontFamily: "\"Fancy Cut\", Almarai, Times, serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "0.5px" body-md: fontFamily: "\"Fancy Cut Pro\"" fontSize: 16px fontWeight: 400 lineHeight: 22.4px letterSpacing: "0.5px" body-sm: fontFamily: "\"Fancy Cut Pro\"" fontSize: 14px fontWeight: 400 lineHeight: 19.6px letterSpacing: "0.5px" label-lg: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 23.1px letterSpacing: "0.4px" label-md: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: "0.5px" label-sm: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: "0.5px" label-sm-wide: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: "0.8px" label-sm-caps: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 12px letterSpacing: "0.5px" button-md: fontFamily: "\"Brilliant Cut Pro\"" fontSize: 13px fontWeight: 400 lineHeight: 20px letterSpacing: "1.5px" nav-link: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: "0.5px" input-md: fontFamily: "\"Fancy Cut\", Almarai, Times, serif" fontSize: 16px fontWeight: 300 lineHeight: 24px letterSpacing: "0.5px" bold-inline: fontFamily: "\"Brilliant Cut\", Almarai, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 21px letterSpacing: "0.5px" rounded: none: "0px" full: "100%" spacing: xxs: "5px" xs: "12px" sm: "16px" md: "20px" base: "28px" lg: "32px" xl: "36px" components: button-primary: backgroundColor: "{colors.ink-pure}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "6px 3px" height: "50px" borderColor: "{colors.canvas}" button-primary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "6px 3px" height: "50px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "9px 22.2px" height: "40px" borderColor: "{colors.ink}" button-brand: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "9px 22.2px" height: "40px" border: "0" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 12px" height: "52px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: "0px 0px 3px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-sm}" padding: "0" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-pure}" typography: "{typography.body-md}" padding: "0" body-paragraph-serif: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" padding: "0" card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "20px 15px 30.8px" product-label: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-lg}" padding: "0" caption-sm: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.label-sm}" padding: "0" text-input: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.input-md}" rounded: "{rounded.none}" padding: "0" height: "35px" borderColor: "{colors.ink}" newsletter-banner: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.label-sm}" padding: "11.2px 12px" --- ## 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 | Token | Family | Size | Weight | Line Height | Tracking | Use | |---|---|---|---|---|---|---| | `{typography.display-md}` | Brilliant Cut | 22px | 600 | 33px | 0.4px | Product launch h2, uppercase | | `{typography.heading-md}` | Brilliant Cut Pro | 19.2px | 700 | 26.88px | 0.5px | Section heading variant | | `{typography.heading-sm}` | Brilliant Cut | 16px | 600 | 24px | 0.5px | Sub-section headings | | `{typography.body-lg}` | Fancy Cut | 16px | 400 | 24px | 0.5px | Editorial product copy | | `{typography.body-md}` | Fancy Cut Pro | 16px | 400 | 22.4px | 0.5px | Standard body paragraph | | `{typography.body-sm}` | Fancy Cut Pro | 14px | 400 | 19.6px | 0.5px | Secondary editorial copy | | `{typography.label-lg}` | Brilliant Cut | 14px | 600 | 23.1px | 0.4px | Product title labels | | `{typography.label-md}` | Brilliant Cut | 14px | 400 | 21px | 0.5px | Card content labels | | `{typography.label-sm}` | Brilliant Cut | 12px | 400 | 18px | 0.5px | Navigation links, meta labels | | `{typography.label-sm-wide}` | Brilliant Cut | 12px | 400 | 18px | 0.8px | Button-adjacent labels | | `{typography.label-sm-caps}` | Brilliant Cut | 12px | 400 | 12px | 0.5px | Micro-label captions | | `{typography.button-md}` | Brilliant Cut Pro | 13px | 400 | 20px | 1.5px | Primary and secondary button labels | | `{typography.nav-link}` | Brilliant Cut | 12px | 400 | 18px | 0.5px | Top-nav link labels | | `{typography.input-md}` | Fancy Cut | 16px | 300 | 24px | normal | Form input placeholder and value | | `{typography.bold-inline}` | Brilliant Cut | 14px | 700 | 21px | 0.5px | Inline bold text within body copy | ### 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.