Tiffany Design System

Overview

Tiffany's design identity rests on a single brand decision: the robin's-egg turquoise known as Tiffany Blue. Color as trademark. The brand has held this color as a registered trade dress since the 1990s — not merely as a design token but as a legal property right. Where most luxury brands use a palette, Tiffany has distilled its entire chromatic identity into one specific hue and protected it. Unlike Cartier, which holds its red to near-zero marketing usage, and unlike Audemars Piguet, which defers color entirely to photography, Tiffany uses its turquoise as a structural brand signal on every CTA and navigation highlight — but not as a canvas fill. The physical packaging tradition (every box, every ribbon, every bag in turquoise) creates the expectation; the digital surface maintains the scarcity that keeps each digital occurrence meaningful.

This file is a partial extraction. The tiffany.com marketing site blocked the headless extractor via Akamai's WAF at the time of capture. Only a single token — {colors.ink} (#000000) — is verified from the live Access Denied page. All other tokens in this spec are derived from publicly available Tiffany brand identity documentation and secondary research. The typography measurements, letter-spacing values, and component dimensions are inferred rather than measured. Treat this file as a directionally accurate brand approximation, not as a ground-truth extraction.

Key Characteristics:

• Tiffany Blue as the single brand voltage — held to accent and CTA usage against a white photography canvas; the physical packaging convention of all-turquoise does not extend to the page floor.
• Serif-forward typography — a custom display serif anchors the headline tier; proportional sans handles labels and interface chrome.
• White photography canvas — product photography staged on pure or near-pure white backgrounds is the dominant surface treatment.
• Sharp 0px corners throughout — consistent with the luxury-jewelry genre convention shared by Cartier and Audemars Piguet.
• Extraction blocked — verified tokens from live render: 1 color (#000000), 2 typography instances (browser-default Times). All others are brand-guide derived.

Colors

Verified from extraction

• Ink ({colors.ink} — #000000): frequency 10 in the Access Denied error page — 5 as text, 5 as border. The only verified color token. This is the browser-default text ink of the Akamai error page, not a Tiffany brand token.

Unverified (brand-guide derived — not from live extraction)

The following colors are described but not included as tokens because they do not appear in the extraction JSON. They are documented here for reference only.

• Tiffany Blue (approximate PMS 1837 digital equivalent): the brand's signature turquoise. Published digital values range from approximately #81d8d0 (lighter/more aqua) to #0abab5 (deeper). The exact current hex from the live CSS is unknown due to the extraction block.
• White canvas: the primary photography surface — pure or near-white.
• Ink/charcoal: near-black for body text and navigation.

Typography

Verified from extraction (Access Denied page only)

The extraction captured the browser-default font stack from the Akamai error page — not a Tiffany brand font.

• {typography.body-md}: Times, 16px, weight 400, line-height normal. Browser default — not a brand token.
• {typography.display-lg}: Times, 32px, weight 700, line-height normal. Browser default — not a brand token.

Unverified (brand observation)

Tiffany's visual identity uses a commissioned serif typeface for display headlines and an accompanying proportional sans for interface labels. The specific families are not confirmed in this extraction. Open-source approximations: Cormorant Garamond italic at weight 300 for the display tier, DM Sans at weight 400–500 for the label and body tier.

Layout

No verified layout measurements from the blocked extraction. The brand's print and packaging materials use generous white space and single-column centered layouts — a convention that typically extends to digital marketing surfaces in this product category.

Elevation

Unknown from extraction. Luxury-jewelry brands in this segment consistently use hairline borders rather than box-shadow elevation; this pattern is inferred but not verified for Tiffany's current site.

Shapes

The single radius token verified from public brand observation is 0px — sharp corners across all interactive surfaces. This is consistent with the luxury-jewelry genre and with Cartier's documented 0px convention.

Components

button-primary — Black fill, white text, 0px radius, 48px height. Derived from brand observation. The live website's primary CTA is believed to use Tiffany Blue as the fill (not black), but without a successful extraction the turquoise hex cannot be included as a verified token.

hero-heading — Transparent background, black text, browser-default Times serif. Placeholder only — the actual Tiffany display font is a licensed custom serif.

body-paragraph — Transparent background, black text, body-md. Placeholder only.

Do's and Don'ts

Do treat Tiffany Blue as a single-voltage accent, not a canvas color. Every occurrence of the turquoise on a digital surface carries the weight of the packaging association; diluting it across multiple surfaces reduces it to a decorative color.

Do use a serif display font for all headline tiers. Tiffany's brand authority is built on serif letterforms — a geometric sans headline would read as a brand violation.

Do use a white or near-white canvas for product photography zones. The turquoise reads most powerfully against white; on a dark or colored canvas it loses the PMS 1837 specificity that makes it recognizable.

Don't attempt to reproduce Tiffany Blue from the tokens in this file — the turquoise hex is not verified. Use the official brand guide or measure the live stylesheet directly before implementing.

Don't use box-shadow elevation. Luxury-jewelry brands at this tier use hairline borders for depth; shadows introduce a consumer-tech register that conflicts with the material luxury positioning.

Don't use rounded corners on any interactive surface. The 0px convention is both a brand-genre signal and, in Tiffany's case, consistent with the architectural references (the Tiffany flagship on Fifth Avenue, the Blue Box Café) that the brand uses as physical brand touchpoints.

Don't add decorative ornamental elements. The brand's design vocabulary is spare — the packaging is a plain box in a single color with a white satin ribbon. The digital surface should carry the same deliberate emptiness.

Known Gaps

• Extraction blocked: tiffany.com returned an Akamai Access Denied error to the headless extractor. Zero brand tokens were captured from the live marketing surface. This is the file's primary limitation.
• All color tokens unverified: the Tiffany Blue hex, canvas white, and ink/charcoal values are not in this file's colors: block because they do not appear in the extraction JSON. They are referenced in prose but cannot be treated as ground-truth values.
• All typography tokens unverified: the brand fonts (display serif, label sans) are not confirmed. The typography: block contains browser-default Times fallbacks from the error page only.
• All component measurements estimated: padding, height, and layout dimensions are derived from brand observation and genre conventions, not from element-level extraction.
• Re-extraction recommended: a successful re-extraction (with --headed mode, different IP, or a different entry URL such as a specific product page) would replace all estimated tokens with verified values.
• Brand guide access: Tiffany's official brand guide is not publicly available; secondary sources vary significantly on digital color values. The Pantone-to-hex conversions in circulation for PMS 1837 differ by 10–30 points depending on the conversion tool.