---
version: alpha
name: "Tiffany & Co."
description: "Tiffany Blue on white, a proprietorial serif for editorial grandeur paired with a spare geometric sans, and a flat maison restraint built around the iconic robin's-egg box"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f0f9f9"           # pale Tiffany-Blue tinted panel, secondary section surface /* estimated */
  surface-dark: "#0a1a1a"      # near-black inverse surface for footer /* estimated */

  # Text / ink
  ink: "#1a1a1a"               # near-black primary text /* estimated */
  ink-muted: "#767676"         # muted grey for captions and secondary labels /* estimated */
  on-background: "#1a1a1a"
  on-surface: "#1a1a1a"
  on-primary: "#ffffff"        # white text on Tiffany-Blue CTAs

  # Brand accent — the iconic Tiffany Blue
  primary: "#0abab5"           # Tiffany Blue, Pantone 1837 / Robin's egg blue /* estimated — published brand color */
  primary-dark: "#089490"      # deeper teal for hover states /* estimated */
  primary-container: "#d4f3f2" # tinted Tiffany-Blue wash for light-touch backgrounds /* estimated */

  # State / interaction
  text-hover: "#0abab5"        # links and nav items shift to Tiffany Blue on hover /* estimated */
  focus-ring: "#0abab5"        # Tiffany Blue focus indicator /* estimated */

  # Semantic
  error: "#c0392b"             # deep red for form errors /* estimated */

  # Borders & dividers
  border: "#d9d9d9"            # neutral light grey hairline /* estimated */
  border-dark: "#1a1a1a"       # near-black hairline for strong section rules /* estimated */

  # Shadow tints
  shadow-soft: "#b8e0df"       # Tiffany-Blue-tinted shadow for subtle elevation /* estimated */

typography:
  # Tiffany & Co. uses a proprietary serif (Tiffany-commissioned, Caslon/Garamond-class) for display
  # and a clean geometric sans for all UI chrome.
  # Closest Google Font substitutes: EB Garamond or Cormorant Garamond (serif); Jost or DM Sans (sans)
  display-hero:
    fontFamily: "Tiffany Serif, EB Garamond, Garamond, Georgia, serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -1px
  display:
    fontFamily: "Tiffany Serif, EB Garamond, Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.75px
  heading-section:
    fontFamily: "Tiffany Serif, EB Garamond, Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Tiffany Serif, EB Garamond, Garamond, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Tiffany Sans, Jost, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0.1px
  body:
    fontFamily: "Tiffany Sans, Jost, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1px
  nav-link:
    fontFamily: "Tiffany Sans, Jost, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px
  button-ui:
    fontFamily: "Tiffany Sans, Jost, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2px
  caption:
    fontFamily: "Tiffany Sans, Jost, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.5px
  label-eyebrow:
    fontFamily: "Tiffany Sans, Jost, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 80px
  3xl: 120px
  4xl: 160px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 36px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 36px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
  nav-item-hover:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
---

# Tiffany & Co. Design System

## Overview

The Tiffany & Co. digital presence is the robin's-egg box rendered in pixels — a composition so singular in its chromatic identity that the brand can afford, and does, an almost total restraint everywhere else. The canvas is pure white (`{colors.background}`), the typography is ink-near-black (`{colors.ink}`), and the sole chromatic argument is `{colors.primary}`, a trademarked blue that Tiffany has owned since 1837. The site does not lean on this colour heavily — it deploys it surgically, as primary CTA fills, focus rings, and occasional tinted surface panels — which means every appearance carries the weight of the original blue box. The rest of the system is white silence and photography.

Typography is the second axis of the brand's identity. Tiffany commissions a proprietary serif for display and editorial copy — a Caslon- and Garamond-adjacent face with high-contrast hairline strokes and refined ball terminals, characteristic of eighteenth-century American silversmith lettering, a nod to the brand's 1837 founding. At `{typography.display-hero}` (72px, weight 300), it reads as engraved. For UI chrome, navigation, and transactional text, the brand employs a clean geometric sans with generous letter-spacing and restrained weight — the `{typography.button-ui}` token runs at 2px tracking, stamping every CTA with the precision of a hallmark. The two-typeface contract is immaculate: the serif for prestige, the sans for service.

The third defining quality is the system's structural discipline. Border radius is binary: zero for every structural element, and pill only for the rarest promotional tags. Shadows, with rare exception, do not exist — the dembrandt scrape of the live site returned zero shadow values and zero border-radius values, consistent with a flat, vitrine-style design philosophy. Depth and hierarchy are communicated through the blue, through typographic scale, and through the monumental negative space that separates every content module. Sections breathe at `{spacing.2xl}`–`{spacing.4xl}`. The experience is quiet enough to hear the velvet drawer sliding open.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) — unmodified, unwarmed
- Trademarked Tiffany Blue (`{colors.primary}`) used with precision — CTAs, hover states, focus rings, tinted panel accents
- Dual-typeface contract: proprietary Caslon-class serif for editorial grandeur, geometric sans for UI chrome
- Display serif at 300 weight and large scale — hairline strokes evoke engraved silversmith lettering
- All button labels, eyebrows, and nav chrome in uppercase with wide tracking (`{typography.button-ui}` at 2px, `{typography.label-eyebrow}` at 2.5px)
- Border-radius binary: `{rounded.none}` for all structural elements, `{rounded.pill}` for rare tags only
- Zero drop shadows — the system is flat; depth comes from colour contrast and photography, not elevation
- Atelier-scale whitespace between content sections: `{spacing.2xl}`–`{spacing.4xl}`
- Full-bleed maison photography — jewellery on white, model-editorial, campaign — never rounded crops, never shadow-overlaid
- Near-black ink (`{colors.ink}`) rather than pure black — warmer than `#000`, consistent with printed maison materials
- The secondary surface (`{colors.surface}`) is a barely-tinted pale Tiffany Blue wash — used for alternating editorial panels

## Colors

### Primary Brand
- **Tiffany Blue** (`{colors.primary}`): The entire chromatic identity of the brand, trademarked since 1998 as Pantone 1837 Blue. Applied to the primary CTA button, hover states on links and nav items, focus rings, and the occasional tinted panel. Its impact depends entirely on its scarcity — everything else in the system is achromatic.
- **Tiffany Blue Dark** (`{colors.primary-dark}`): Hover state for the primary CTA — a one-step deepening that communicates physical pressure without shadow or scale change.
- **Tiffany Blue Wash** (`{colors.primary-container}`): The very palest tint of the brand blue, used for badge and tag backgrounds where the full blue would overpower. A translucent echo of the box.

### Canvas & Surface
- **Pure White** (`{colors.background}`): The default page canvas — unmodified, the colour of box tissue paper and maison stationery.
- **Pale Blue Panel** (`{colors.surface}`): Secondary editorial section background — a whisper of Tiffany Blue, barely perceptible. Used for alternating content bands and newsletter modules to create visual rhythm without chromatic noise.
- **Near-Black** (`{colors.surface-dark}`): Footer and occasional inverse-surface hero treatments.

### Text / Ink
- **Primary Ink** (`{colors.ink}`): All primary text — headings, body, labels. Near-black rather than pure black for a warmer, more letterpress-like character.
- **Muted Grey** (`{colors.ink-muted}`): Image captions, secondary metadata, fine print. Recessive by design.

### Borders & Dividers
- **Neutral Hairline** (`{colors.border}`): The default section divider — a quiet grey line between content zones. Never coloured.
- **Dark Rule** (`{colors.border-dark}`): Strong structural rules beneath the masthead, above the footer, framing the secondary button outline.

### Semantic
- **Error** (`{colors.error}`): Form validation — a confident deep red with no warm bias.

### Shadow System
Tiffany & Co. is functionally shadow-free. The dembrandt extract returned an empty `shadows` array and no border-radius values. Depth is communicated through the Tiffany Blue accent's chromatic isolation, photography contrast, and the pale-panel / pure-white surface layering — never through computed lighting. The page surface is a white board. Nothing lifts from it.

## Typography

### Font Family
- **Display / Editorial**: `"Tiffany Serif"`, fallback `EB Garamond, Garamond, Georgia, serif`. A commissioned Caslon-and-Garamond-class face with high contrast between thick strokes and hairlines — the digital equivalent of the lettering on the blue box lid. Not commercially available. For external implementations, EB Garamond (Google Fonts) is the closest open-source match in spirit; Cormorant Garamond for finer hairline contrast.
- **UI / Chrome**: `"Tiffany Sans"`, fallback `Jost, DM Sans, Helvetica Neue, Arial, sans-serif`. A spare geometric sans used for navigation, transactional copy, and all button labels. Distinguished by wide uppercase letter-spacing rather than any intrinsic style — tracking is the Tiffany UI grammar.
- **OpenType Features**: Standard ligatures on serif body copy; no discretionary alternates or swashes.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headlines — one phrase, 72px, weight 300, serif, engraved quality |
| `display` | Secondary editorial titles — 48px, weight 300 |
| `heading-section` | Section openers — 32px, weight 400, serif |
| `heading-sub` | Product category titles, editorial pull-quotes — 22px, weight 400 |
| `body-large` | Lead editorial paragraphs — 18px, geometric sans, weight 300 |
| `body` | Standard body copy, product descriptions — 14px, geometric sans |
| `nav-link` | Primary navigation links — 13px, uppercase, 1px tracking |
| `button-ui` | Button labels, CTA text — 12px, uppercase, 2px tracking |
| `caption` | Image captions, fine print — 11px, geometric sans |
| `label-eyebrow` | Category eyebrows above headings — 11px, uppercase, 2.5px tracking |

### Principles
- **Serif for prestige, sans for service**: the Tiffany Serif carries all editorial and campaign weight; the geometric sans handles every transaction and interaction. The roles never overlap.
- **Display at restraint**: the largest text (72px) is also the lightest weight (300) — hairline contrast at scale evokes engraved silver, not digital loudness.
- **Uppercase chrome with generous tracking**: button labels at 2px tracking, eyebrows at 2.5px — the hallmark rhythm of an eighteenth-century silversmith's mark.
- **No bold in the editorial system**: weight 300 through 400 covers the full range; 700 is absent from Tiffany's digital vocabulary. Emphasis is size and case, never weight.
- **Serif never descends to UI scale**: the Tiffany Serif is reserved for display and editorial headings. At small sizes the hairline contrast collapses; at those scales the geometric sans takes over.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Tiffany lives at the generous end of the luxury-brand spacing spectrum. `{spacing.xl}` (48px) is the minimum between content modules; `{spacing.2xl}` (80px) is the baseline between editorial sections; `{spacing.3xl}` and `{spacing.4xl}` define campaign modules. The negative space is not padding — it is the auditory silence between notes that makes the jewellery visible.

### Grid & Container
- Max content width: approximately 1440px for editorial modules; 1280px for product grids
- Hero modules: full-bleed photography, no container constraints
- Product grid: 4-up on large desktop, 2-up on tablet, 1-up on mobile with consistent `{spacing.lg}` gutters
- Editorial columns: centred 600–900px text blocks for long-form copy, never full-width prose
- The Tiffany wordmark sits centred in the masthead — a symmetrical composition inherited from the printed catalogue

### Whitespace Philosophy
- Every major section transition uses at minimum `{spacing.xl}` vertical padding
- Campaign modules breathe at `{spacing.3xl}`–`{spacing.4xl}` — enough silence to register before the eye moves
- Navigation and footer chrome are compact — the whitespace is reserved for the work, not the apparatus
- Product tile imagery is surrounded by air; tiles never touch and the gutter is always visible

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `box-shadow: none` | Universal default — all cards, modals, panels at rest |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Section dividers, input underlines at rest |
| Strong Rule (Level 2) | `border: 1px solid {colors.border-dark}` | Masthead separator, secondary button outline |
| Blue Accent (Level 3) | `border-bottom: 2px solid {colors.primary}` | Active navigation underline, focus indicator on inputs |
| Scrim (Level 4) | `background: linear-gradient(transparent, rgba(26,26,26,0.4))` | Legibility scrim for text overlaid on dark hero photography |

**Shadow Philosophy**: Tiffany & Co. is flat by design, not by constraint. The dembrandt extract returned zero shadow values. The system communicates depth through the blue accent's chromatic singularity, the pale-panel / pure-white surface layering, and editorial photography contrast — never through simulated light. Every surface sits flush with the page. The experience is closer to a printed maison catalogue than to a software interface.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system is binary:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural elements — buttons, inputs, cards, modals, image crops |
| `pill` | 9999px | Rare promotional tag/badge elements only |

Tiffany does not use mid-range radius values (4–16px). The visual grammar is the sharp rectangle of the blue box — a right-angled object associated with precision craftsmanship. Nothing in the digital system contradicts that geometry. Pill shapes appear only for the occasional promotional label, and even then sparingly.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants

- **`button-primary`** — Tiffany Blue fill (`{colors.primary}`), white label, uppercase 2px tracking, zero radius, 14px 36px padding. The blue CTA is visually reserved for the single most important action per view — add to cart, book an appointment, discover the collection.
- **`button-primary-hover`** — Fill deepens to `{colors.primary-dark}` — a quiet darkening that reads as physical pressure without lifting off the page.
- **`button-secondary`** — Transparent background, `{colors.ink}` label, `1px solid {colors.border-dark}` outline, same typography and padding. Used for secondary paths — "Discover more", "View all collections".
- **`button-secondary-hover`** — Fill inverts to `{colors.ink}` background with white label — a sharp, confident transition.
- **`button-ghost`** — Underline-style link button with no border or background. Used inline for tertiary editorial actions — "Read the story", "Explore the collection".

### Cards

- **`card`** — Zero padding, zero radius, no background fill, no shadow. Product tiles are photography + typography on the white canvas; the "card" is defined by its image edge, not a container.
- **`card-elevated`** — Pale Tiffany Blue (`{colors.surface}`) background with generous padding (`32px`) for editorial feature panels. Still no shadow — elevation is implied by colour contrast, not lighting.

### Inputs

- **`input`** — White background, neutral hairline border (`{colors.border}`), zero radius, no shadow. Form inputs do not announce themselves; they are quiet openings in the white surface.
- **`input-focus`** — Border shifts to Tiffany Blue (`{colors.focus-ring}`), matching the brand accent exactly. The focus state is the only moment a form field uses colour.

### Badges / Tags
- **`badge`** — Pale blue wash background (`{colors.primary-container}`), Tiffany Blue text, pill shape. Used very sparingly for promotional labels ("New", "Limited edition"). An echo of the box, never the box itself.

### Navigation
- White background, full-width masthead with `1px solid {colors.border}` bottom rule
- Wordmark: "TIFFANY & CO." centred in the masthead — the serif logotype, or a geometric all-caps form
- Primary nav: geometric sans links in uppercase, 1px tracking, `{colors.ink}` at rest, shifts to `{colors.primary}` Tiffany Blue on hover
- Active section: `2px solid {colors.primary}` underline beneath the active category
- Mobile: hamburger icon → full-screen white overlay with vertical nav, generous padding, blue hover states

## Do's and Don'ts

### Do
- Use `{colors.primary}` Tiffany Blue exclusively for primary CTAs, nav hover states, and focus indicators — its rarity is the brand
- Set all display copy in the Tiffany Serif at weight 300 — the hairline contrast is the editorial identity
- Uppercase every button label, eyebrow, and nav link with generous tracking (`{typography.button-ui}` at 2px, `{typography.label-eyebrow}` at 2.5px)
- Keep border-radius at `{rounded.none}` for all structural elements — the blue box is a right-angled object; honour that
- Use `{spacing.2xl}`–`{spacing.4xl}` between content sections — the negative space carries the luxury signal
- Reserve `{colors.primary-container}` blue wash for tag backgrounds only — never as a section fill
- Keep all card surfaces flat with `box-shadow: none` — depth comes from photography and colour contrast, not shadows
- Allow product photography to be full-bleed and rectangular — never circle-crop, never apply shadow overlays
- Use the near-black `{colors.ink}` rather than pure `#000000` — the brand reads as warm print, not cold screen
- Default UI and body copy to the geometric sans — the serif is for editorial moments only, never for body paragraphs or form fields

### Don't
- Don't use `{colors.primary}` Tiffany Blue as a background fill for sections — it belongs on small accent elements and CTAs only
- Don't add drop shadows to any surface — the system is flat and confirmed shadow-free
- Don't introduce a third typeface — the serif-plus-geometric-sans contract is the entire typographic identity
- Don't use mid-range border-radius (4–16px) — the system is binary: `{rounded.none}` or `{rounded.pill}` only
- Don't set the serif below 22px — at small sizes the hairline contrast collapses; switch to geometric sans below that threshold
- Don't lowercase button labels or navigation — uppercase tracking is the maison's UI grammar
- Don't add positive letter-spacing to serif display text — keep it at `{typography.display-hero}`'s -1px or tighter
- Don't crowd tile grids — always preserve the visible gutter between product tiles; they must never touch
- Don't use gradients on decorative surfaces — only the legibility scrim (transparent to near-black) is permissible
- Don't substitute Tiffany Blue with a cyan or turquoise approximation — the precise Pantone 1837 is the brand; approximations read as imitations

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column, hamburger nav, hero photography stacks, serif display scales to 36px |
| Tablet | 640–1024px | 2-up product grid, condensed nav, serif display at 48px |
| Desktop | 1024–1440px | Full horizontal nav, 4-up product grid, hero serif at 72px |
| Large Desktop | >1440px | Maximum container (1440px), expanded outer margins, editorial full-bleed at native ratio |

### Touch Targets
- Primary buttons: minimum 44px tap height via 14px vertical padding + 12px line-height at 1.0
- Navigation links: full-row tappable in mobile drawer
- Product tiles: entire image + caption zone is tappable, not just the title link

### Collapsing Strategy
- **Nav**: Horizontal primary nav collapses to a hamburger icon → full-screen white overlay with vertical link stack, generous `{spacing.lg}` row padding, blue hover states retained
- **Hero**: Full-bleed photography scales to fill viewport; serif headline reduces to `{typography.heading-section}` (32px) on mobile
- **Product grid**: 4-up → 2-up → 1-up; gutters scale from `{spacing.lg}` to `{spacing.md}` on mobile
- **Editorial columns**: 600–900px text columns go full-width on mobile with 16px horizontal margin
- **Footer**: Multi-column link grid collapses to accordion on mobile with `{spacing.md}` row height

### Image Behavior
- Photography maintains its native aspect ratio across breakpoints — Tiffany does not crop jewellery to square on mobile
- Full-bleed hero modules use `object-fit: cover` with the focal point preserved via `object-position`
- Product photography is always shown on white — never staged on coloured backgrounds in responsive contexts
- The Tiffany wordmark remains at full resolution at all breakpoints — it never simplifies to an icon

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary Text: `{colors.ink}`
- Tiffany Blue: `{colors.primary}`
- Blue Hover: `{colors.primary-dark}`
- Secondary Surface: `{colors.surface}`
- Muted Text: `{colors.ink-muted}`
- Hairline Border: `{colors.border}`
- Strong Rule: `{colors.border-dark}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Create a Tiffany campaign hero on `{colors.background}` with full-bleed editorial jewellery photography covering the full viewport height. Overlay a centred `{typography.display-hero}` serif headline (72px, weight 300, letterSpacing -1px, color `{colors.background}`) — one or two words. Below it: a `{typography.button-ui}` Tiffany Blue CTA button (`{colors.primary}` fill, white label, uppercase, 2px tracking, `{rounded.none}`, 14px 36px padding). No shadows, no gradients except a transparent-to-rgba(26,26,26,0.4) scrim behind the text."
- "Design a Tiffany product tile — full-width jewellery photography on `{colors.background}`, no border, no shadow, `{rounded.none}`. Below the image: an 11px geometric-sans category eyebrow in `{colors.ink-muted}` uppercase 2.5px tracking, then a 22px `{typography.heading-sub}` serif product name in `{colors.ink}`, then a 14px price in `{colors.ink}`. On hover, the product name shifts to `{colors.primary}` Tiffany Blue."
- "Build a primary CTA button — `{colors.primary}` background, `{colors.on-primary}` white text, `{typography.button-ui}` (12px, uppercase, 2px tracking), `{rounded.none}`, 14px 36px padding. Hover: background deepens to `{colors.primary-dark}`. No shadow, no border."
- "Create a Tiffany navigation bar on `{colors.background}` with a `1px solid {colors.border}` bottom rule. Centre the Tiffany logotype. Set primary nav links at `{typography.nav-link}` (13px, uppercase, 1px tracking, `{colors.ink}`). On hover each link shifts to `{colors.primary}` with a `2px solid {colors.primary}` underline. Include a cart icon and search icon right-aligned."
- "Design a Tiffany editorial text section on `{colors.surface}` pale-blue panel background with `{spacing.2xl}` (80px) vertical padding. Centre a `{typography.label-eyebrow}` uppercase blue eyebrow (`{colors.primary}`, 2.5px tracking), then a `{typography.display}` serif headline (48px, weight 300, `{colors.ink}`), then a 600px-max-width `{typography.body-large}` paragraph (18px, weight 300, `{colors.ink}`, line-height 1.65). No borders, no shadow."
- "Create a Tiffany newsletter signup band on `{colors.surface}` pale-blue panel. Centre: a 32px `{typography.heading-section}` serif headline, one line of 14px `{typography.body}` copy in `{colors.ink-muted}`, a side-by-side input + button. Input: `{colors.background}` fill, `1px solid {colors.border}` border, `{rounded.none}`, 12px 16px padding. Button: `{colors.primary}` fill, `{colors.on-primary}` white label, `{typography.button-ui}` uppercase 2px tracking, `{rounded.none}`, 14px 36px padding."

### Iteration Guide

1. Start from `{colors.background}` white — the canvas is pure and unmodified. Secondary panels use `{colors.surface}` pale Tiffany Blue wash as the only surface variation.
2. Tiffany Blue (`{colors.primary}`) is earned, not given. One CTA per view maximum. Never as a section fill. Nav hover and focus ring are its secondary habitats.
3. Typography hierarchy is strict: Tiffany Serif (weight 300) for editorial headlines 22px+; geometric sans for everything below and all UI.
4. All UI chrome is uppercase with tracking — `{typography.button-ui}` at 2px, `{typography.label-eyebrow}` at 2.5px. No sentence-case in navigation or CTAs.
5. Border radius is `{rounded.none}` for every structural element. The blue box is a right angle. Honour it.
6. Shadow budget is zero. Depth comes from photography contrast and the pale-panel / white surface layering.
7. Whitespace between content zones is never less than `{spacing.xl}` (48px). Campaign sections breathe at `{spacing.3xl}`–`{spacing.4xl}`.
8. Product photography is always on white, always rectangular, always full resolution. Never circle-cropped.
9. The serif is for prestige moments only — if in doubt about whether to use it, use the geometric sans instead.
10. The `{colors.primary}` Tiffany Blue is the only chromatic event in the system — guard it. Its impact depends on everything else being neutral.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Tiffany & Co.. Brand names and trademarks belong to their respective owners.