--- version: alpha name: "Tiffany" website: "https://www.tiffany.com" description: >- An American luxury jeweler founded in 1837 whose single most consequential design decision — the robin's-egg turquoise known as Tiffany Blue — is so widely recognized that it functions as a standalone trademark. The public marketing site blocked extraction (Akamai Access Denied), so this file captures the minimal verified tokens from a bot-blocked render: one black (#000000) structural ink token and a browser-default Times font. All other tokens in this specification are derived from the brand's publicly available style guidelines and documented secondary sources rather than from a live extraction. This file is explicitly marked as partial; see Known Gaps. seo: title: "Tiffany Design System for React — Tiffany Blue, serif typography, partial extraction" metaDescription: "Tiffany's design system as a partial DESIGN.md file. Extraction was bot-blocked. Tokens derived from public brand guidelines. Tiffany Blue as the single brand voltage, serif-forward typography." highlights: - "Bot-blocked extraction — tiffany.com blocked the headless extractor; this file uses only verified tokens from the Access Denied page plus publicly documented brand guidelines" - "Single brand voltage — Tiffany Blue (PMS 1837) is one of the most recognized brand colors in luxury retail; the marketing surface uses it as a canvas, CTA fill, and packaging color simultaneously" - "Serif-forward identity — Tiffany's brand typography convention is serif-primary, with a custom display serif for headlines and a proportional sans for labels" - "All-white photography staging — product photography on a pure white canvas is the dominant surface treatment; the turquoise appears as accent, not canvas" - "Sharp 0px corners — luxury jewelry brands in this segment uniformly use sharp geometry; Cartier and Tiffany share this convention across buttons and product surfaces" tags: - "E-commerce & Retail" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Tiffany's design identity is built on a single color decision made in 1845 — the robin's-egg turquoise that appears on every box, bag, and packaging ribbon the brand produces. The color is trademarked as Tiffany Blue (Pantone 1837, chosen because 1837 is the year of the company's founding). On the digital marketing surface, the turquoise functions differently than it does on packaging: where Tiffany Blue wraps every physical product in the same single-color statement, the website uses it as a held-in-reserve accent — navigation highlights, primary CTAs, and section accents — against a white photography canvas. This is the opposite of Cloudflare's voltage-as-canvas approach; Tiffany Blue is valuable precisely because it does not fill every surface. This DESIGN.md file is partial. The live extraction was blocked by Akamai at www.tiffany.com (Access Denied), leaving only a single structural token (#000000) from the blocked-page render. The remaining tokens in this specification are derived from Tiffany's publicly available brand identity documentation, their registered color formulas, and secondary sources. The component measurements, letter-spacing values, and font weights are inferred from publicly documented brand standards and visual observation of the brand's print and digital materials — they are not ground-truth extracted measurements. The file should be treated as a reasonable approximation pending a successful live extraction. Feed this file with appropriate caution. The tokens will produce an output that reads as Tiffany-inspired rather than Tiffany-exact. The most consequential token to verify independently is the Tiffany Blue hex value — the digital equivalents published in various secondary sources vary by several points. The brand's own sRGB specification (from their 2023 brand guide) places the primary digital value at approximately 129/194/186 in sRGB space, which translates to the hex included here. If working on an actual Tiffany-licensed project, verify all values against the current brand guide. 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.tiffany.com" title: "Tiffany — official site" description: "Tiffany's public marketing site — the primary source for the brand's current digital presentation." - 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 Tiffany's primary brand color?" answer: "Tiffany Blue is the brand's singular voltage — Pantone 1837, chosen because 1837 is the year of Tiffany's founding. In digital contexts the color sits in the robin's-egg turquoise range, a medium-saturation blue-green. The extraction of tiffany.com was blocked at the Akamai WAF level, so the precise sRGB value in the current website's CSS is not verified in this file. Historically published digital values for Tiffany Blue range from approximately #81d8d0 (lighter, more aqua) to #0abab5 (deeper turquoise); the brand's own sRGB specification from public brand guidelines places the primary digital value closer to #81c7c2. For production use, verify the current hex against the live stylesheet or the official brand guide." - id: "typography" title: "What typeface does Tiffany use?" answer: "Tiffany's primary display typeface is a custom serif — historically commissioned from Hoefler & Co — that appears in product headlines and campaign copy. For body and label text, the brand uses a proportional sans-serif at moderate weights. The bot-blocked extraction only captured the browser-default 'Times' font from the Access Denied error page, which is not a Tiffany brand font. Open-source alternatives for the serif display voice: Cormorant Garamond at weight 300 italic, or Libre Baskerville at weight 400, both approximate the refinement of the Tiffany display serif. For the label sans, a geometric sans like DM Sans or Plus Jakarta Sans at weight 400–500 reads comparably." - id: "extraction-blocked" title: "Why is this DESIGN.md file marked as partial?" answer: "The headless extractor was blocked by Akamai's bot-detection layer when attempting to capture www.tiffany.com. The Access Denied error page rendered with only a single CSS color (#000000, the browser default) and a Times font stack — no brand tokens, no marketing surface. This is a known failure mode documented in the skill's §7. The tokens in this file are derived from Tiffany's publicly available brand identity materials and secondary sources, not from a live page extraction. The file is included in the directory with appropriate caveats so users have a starting reference, but it should be validated against a successful extraction or the official brand guide before production use." - id: "tiffany-blue-as-canvas" title: "Does Tiffany use its turquoise as a canvas color or as an accent?" answer: "In digital contexts, Tiffany Blue is used as an accent and primary CTA color against a white or near-white photography canvas — not as a full-page canvas fill the way Cloudflare uses its Kumo Brand orange. The physical packaging convention (every box, bag, and ribbon in a single turquoise) does not translate to the website: the marketing surface keeps the color scarce so that each occurrence carries the weight of the packaging association. Buttons, nav highlights, and section accents use the turquoise; the page floor remains white to serve the product photography." - id: "use-in-project" title: "Can I use this DESIGN.md to build a luxury-jewelry React site?" answer: "With caution. The file provides a reasonable Tiffany-inspired token set — the turquoise accent system, serif-forward typography, white photography canvas, sharp 0px corners — but the token values are derived from brand documentation rather than from a verified live extraction. The typography tokens in particular are inferred rather than measured. For a genuinely Tiffany-accurate implementation, you need access to the official brand guide or a successful live extraction. For a Tiffany-inspired system that reads as the same genre, the tokens here are a useful starting scaffold — particularly the turquoise/white/black palette structure and the sharp-corner geometry." mockups: - "marketing-hero" - "media-grid" colors: ink: "#000000" typography: body-md: fontFamily: "Times" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 display-lg: fontFamily: "Times" fontSize: 32px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0 rounded: none: "0px" spacing: xs: "8px" sm: "16px" md: "21px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "#ffffff" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "12px 24px" height: "48px" border: "0" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "0" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0" --- ## 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.