What is Cartier's primary brand color?

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.

What typefaces does Cartier use, and what are the open-source substitutes?

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.

Why does Cartier barely use Cartier red on its own website?

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.

Why does Cartier run everything in uppercase?

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.

Can I use this DESIGN.md to build a luxury-jewelry product page in React?

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.

Cartier Design System

Cartier's design system as a DESIGN.md file.

About Cartier DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source cartier.com

E-commerce & Retail

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.

What makes it distinct

Uppercase all-caps conventionevery 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 ink796 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 everywherebuttons, inputs, section dividers, product cards; the Maison communicates precision through geometry, not through softness
Dual proprietary typefacesBrilliant Cut (geometric sans) for interface chrome, Fancy Cut (editorial serif) for product copy and labels; neither is available on Google Fonts

Live at cartier.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

cartier.com

Explore Cartier

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Cartier design system FAQ

Common questions about Cartier's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Cartier — official site

Cartier's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.