---
version: alpha
name: "Bulgari"
description: "Roman opulence system built on a deep obsidian canvas, 18k gold typography, and jewel-saturated photography — the Serpenti spirit rendered in the most unapologetically maximal luxury web language"

colors:
  # Surface / canvas
  background: "#0a0a0a"           # near-absolute black — the deep obsidian ground of Bulgari's digital world /* estimated */
  surface: "#1a1814"              # warm dark surface for section alternates, elevated panels /* estimated */
  surface-light: "#ffffff"        # pure white for high-contrast sections, editorial inserts /* estimated */
  surface-warm: "#f5f0e8"         # warm ivory — product detail pages, secondary story sections /* estimated */

  # Ink / text
  ink: "#ffffff"                  # primary white text on dark canvases
  ink-on-light: "#1a1510"         # near-black brown-tinted ink for light surface sections /* estimated */
  ink-muted: "#9e9485"            # muted warm gray for secondary labels, captions on dark surfaces /* estimated */
  ink-gold: "#c9a84c"             # 18k gold — headings, decorative labels, premium text moments /* estimated */

  # Brand accent — Bulgari gold
  primary: "#c9a84c"              # 18k gold — CTAs, active states, gold rule accents, Serpenti motif highlights /* estimated */
  primary-hover: "#b8962e"        # deeper burnished gold for hover /* estimated */
  on-primary: "#0a0a0a"           # near-black on gold button surface
  primary-container: "#2a2415"    # dark gold tint — secondary button surfaces, hover backgrounds /* estimated */

  # Jewel accent palette — for editorial moments and product category signals
  jewel-emerald: "#1a5c3a"        # Serpenti emerald — green jewel accent /* estimated */
  jewel-sapphire: "#1a3a6e"       # sapphire blue — accent editorial accent /* estimated */
  jewel-ruby: "#7a1a2a"           # ruby red — seasonal accent tone /* estimated */

  # Focus / interaction
  focus-ring: "#c9a84c"           # gold focus ring — consistent with primary brand accent /* estimated */
  text-hover: "#c9a84c"           # link hover shifts to gold

  # Semantic
  error: "#cc3333"                # error red — form validation /* estimated */
  success: "#1a5c3a"              # success green aligned with jewel-emerald /* estimated */

  # Borders & dividers
  border: "#3a3020"               # warm dark gold-tinted border on dark surfaces /* estimated */
  border-gold: "#c9a84c"          # gold hairline rule — section dividers, heading underlines /* estimated */
  border-light: "#d4cbbf"         # warm gray hairline for light surface sections /* estimated */

  # Shadow tints
  shadow-soft: "#000000"          # deep black shadow for elevation on dark surfaces /* estimated */
  shadow-warm: "#1a1410"          # warm near-black ambient shadow for product panels /* estimated */

typography:
  display-hero:
    fontFamily: "Trajan Pro, Trajan, Optima, Georgia, serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.1em
  display:
    fontFamily: "Trajan Pro, Trajan, Optima, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0.08em
  heading-section:
    fontFamily: "Trajan Pro, Trajan, Optima, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.12em
  heading-sub:
    fontFamily: "Trajan Pro, Trajan, Optima, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.1em
  body-large:
    fontFamily: "EB Garamond, Garamond, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.02em
  body:
    fontFamily: "EB Garamond, Garamond, Georgia, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.02em
  nav-link:
    fontFamily: "Trajan Pro, Trajan, Optima, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.15em
  button-ui:
    fontFamily: "Trajan Pro, Trajan, Optima, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.2em
  caption:
    fontFamily: "EB Garamond, Garamond, Georgia, serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.05em
  label-gold:
    fontFamily: "Trajan Pro, Trajan, Optima, Georgia, serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.25em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

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
    textTransform: uppercase
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
    border: "1px solid {colors.border-gold}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-gold}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
    border: "1px solid {colors.primary}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
    borderBottom: "1px solid {colors.border-gold}"
    textTransform: uppercase
  button-ghost-hover:
    textColor: "{colors.ink-gold}"
    borderBottom: "1px solid {colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    rounded: "{rounded.none}"
    padding: 40px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderBottom: "1px solid {colors.border}"
  input-focus:
    textColor: "{colors.ink}"
    borderBottom: "1px solid {colors.border-gold}"
    outline: "none"
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-gold}"
    typography: "{typography.label-gold}"
    rounded: "{rounded.none}"
    padding: 4px 12px
    textTransform: uppercase
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 40px
    textTransform: uppercase
---

# Bulgari Design System

## Overview

Bulgari's digital presence announces itself as the opposite of Parisian restraint. Where French luxury houses deploy white canvas and whispered typography, Bulgari enters on a deep obsidian ground (`{colors.background}`) — near-absolute black that recalls the polished surface of the Palazzo Bulgari's marble, the dark vitrine of a Roman jeweller's case, the velvet bed on which a Serpenti bracelet is displayed. Against this darkness, 18k gold typography (`{colors.ink-gold}`) and jewel-saturated campaign photography radiate with the intensity of colored stones under studio light. This is Roman opulence — bold, sensuous, unapologetic — as far from Nordic minimalism or Milanese restraint as one can travel while still commanding global luxury credibility.

The typographic system draws on classical Roman inscription traditions. Display and navigation type is set in a high-contrast face in the Trajan lineage — uppercase, widely spaced, monumental in its authority — echoing the ancient Roman letterforms carved into marble at the Colosseum, the very stones that surround Bulgari's Via Condotti flagship. Long-form body copy shifts to a warm old-style Garamond-class serif: the ink of the house's editorial voice, slower and more intimate than the Trajan crown. At button and label scale, the Trajan-class face returns in uppercase with generous tracking (`{typography.button-ui}` at `0.2em`) — each character advancing like a gemstone set in a pavé row, each space deliberate.

Color carries the brand's jewellery heritage in the most direct way. `{colors.primary}` is 18k gold, appearing on CTAs, decorative rules, active navigation, and the gold hairline dividers that echo the yellow gold settings of Bulgari's most celebrated pieces. Jewel accent tones — `{colors.jewel-emerald}`, `{colors.jewel-sapphire}`, `{colors.jewel-ruby}` — emerge from campaign photography and seasonal editorial moments, never bleaching into generic pastels. The Serpenti serpent motif, the brand's most recognisable icon, recurs as a graphic device: sinuous, scaled, always in motion, always jewel-eyed.

**Key Characteristics:**
- Deep obsidian canvas (`{colors.background}`) — near-black, warm-tinted dark ground; no Parisian white, no Nordic gray
- 18k gold (`{colors.primary}`) as the universal brand accent — CTAs, active nav, decorative rules, key typographic moments
- Trajan-class uppercase display face (`{typography.display-hero}`) — Roman inscription letterforms, `0.1em` tracking, weight 400
- Old-style Garamond serif (`{typography.body-large}`) for editorial body copy — warm, classical, slower reading rhythm
- Zero border-radius everywhere — `{rounded.none}` for all primary UI; the formalism of Roman stonework
- Bottom-border-only inputs with gold focus upgrade: `1px solid {colors.border}` at rest, `{colors.border-gold}` on focus
- Gold hairline rules (`{colors.border-gold}`) as structural dividers — thematic substitutes for shadows and ornamentation
- Jewel-toned editorial accents (`{colors.jewel-emerald}`, `{colors.jewel-sapphire}`) live in photography, not chrome
- Maximum-contrast photography: jewelry on dark velvet, close-cropped gem detail, campaign portraiture on rich warm grounds
- Generous luxury spacing — section gaps at `{spacing.3xl}`–`{spacing.4xl}` on desktop; the darkness between content sections is itself a visual presence
- Serpenti motif — the snake icon — appears as a recurring graphic element: in hero imagery, navigation iconography, campaign chapter dividers

## Colors

### Surface & Canvas
- **Obsidian Black** (`{colors.background}`): The page ground — deep warm near-black. Not a technical `#000000` but a very dark, barely-warm dark that recalls polished basalt and the interiors of Bulgari's jewel cases. Everything else is seen against this depth. /* estimated */
- **Warm Dark Surface** (`{colors.surface}`): A slightly elevated dark surface for product panels, card backgrounds, and alternate sections — distinguishable from the ground only in close proximity. /* estimated */
- **Pure White** (`{colors.surface-light}`): Used for high-contrast editorial inserts, light-mode sections, and product photography on white sweep. /* estimated */
- **Warm Ivory** (`{colors.surface-warm}`): A warm parchment background for select story sections, detail pages, and editorial copy panels. Echoes the cream of Bulgari's printed catalogues. /* estimated */

### Brand Gold
- **18k Gold** (`{colors.primary}`): The house accent — drawn from Bulgari's yellow gold jewellery settings. Applied to CTA buttons, active navigation underlines, section dividers, and key display labels. Warm and rich, never cold or brassy. /* estimated */
- **Burnished Gold** (`{colors.primary-hover}`): The hover state of the gold accent — slightly darker and more saturated, simulating the sheen of gold at a different angle of light. /* estimated */
- **Gold Text** (`{colors.ink-gold}`): Used for section labels, decorative headings, and badge text that require gold's warmth at typographic scale. /* estimated */

### Ink & Text
- **White on Obsidian** (`{colors.ink}`): Primary text color on dark surfaces — pure white for maximum legibility against the obsidian ground.
- **Warm Dark Ink** (`{colors.ink-on-light}`): Near-black with a warm brown cast for text on light and ivory surface sections. Matches the warmth of the body typeface. /* estimated */
- **Muted Gold-Gray** (`{colors.ink-muted}`): Secondary labels, captions, and metadata on dark surfaces. Warm enough not to read as cold gray. /* estimated */

### Jewel Accents
- **Serpenti Emerald** (`{colors.jewel-emerald}`): The green of Bulgari's most iconic Serpenti pieces — emerald-set snake eyes, emerald vine collections. Used for editorial category accents and seasonal moments. /* estimated */
- **Sapphire Blue** (`{colors.jewel-sapphire}`): Deep cobalt, pulled from the sapphire-set B.zero1 and Diva collections. Category signal color on editorial and advertising moments. /* estimated */
- **Ruby Red** (`{colors.jewel-ruby}`): Deep crimson from ruby-set Serpenti pieces. Seasonal campaign accent. /* estimated */

### Borders & Dividers
- **Gold Hairline** (`{colors.border-gold}`): The signature decorative divider — a `1px solid` gold rule beneath section headings, above footer, and as the input focus upgrade. The digital equivalent of the gold setting edge on a ring. /* estimated */
- **Dark Border** (`{colors.border}`): Warm dark hairline for resting inputs and subtle structural separations on dark surfaces. /* estimated */
- **Light Border** (`{colors.border-light}`): Warm gray for hairlines on ivory and white surface sections. /* estimated */

## Typography

### Font Family
- **Display / Monumental**: `Trajan Pro` (or `Trajan`), fallback: `Optima, Georgia, serif`. A classically proportioned high-contrast Roman inscription face — all-caps, glyphic authority, derived from the same Trajan column letterforms that inspired Roman lapidary carving. Every heading, every navigation link, every button label renders in this voice. Google Fonts approximate: `Cinzel` (closest free match — classical proportion, uppercase-only, similar architectural authority).
- **Body / Editorial**: `EB Garamond` (or `Garamond`), fallback: `Georgia, serif`. A warm old-style humanist serif for long-form editorial copy, product descriptions, and campaign storytelling. The reading voice counterpoints the monumental display face — intimate where the Trajan is grand, conversational where it is architectural.
- **OpenType Features**: Titling alternates on the Trajan-class face for display headings; old-style numerals in Garamond for price points and catalogue references.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 80px Trajan — campaign hero headlines, seasonal collection openers, the brand's loudest typographic statement |
| `display` | 48px Trajan — section headings, editorial intros, collection category titles |
| `heading-section` | 28px Trajan — product category headings, story chapter titles |
| `heading-sub` | 18px Trajan — product names on dark cards, sub-section openers |
| `body-large` | 18px EB Garamond — campaign descriptions, editorial paragraphs, about-us storytelling |
| `body` | 15px EB Garamond — product descriptions, form labels, standard body copy |
| `nav-link` | 11px Trajan uppercase — primary navigation links; `0.15em` tracking |
| `button-ui` | 11px Trajan uppercase — all CTA labels; `0.2em` tracking; the measured authority of engraved text |
| `caption` | 12px EB Garamond — image captions, material notes, SKU metadata |
| `label-gold` | 10px Trajan uppercase — category badges, "New", "Exclusive", "Limited Edition" tags |

### Principles
- **Two-face system, two registers**: Trajan-class for monumental display and all chrome; EB Garamond for editorial body. The switch is absolute — no blurring of roles, no Trajan at body size.
- **Uppercase everywhere in the chrome**: navigation, buttons, badges, and labels are always uppercase. Body prose in Garamond stays sentence-case. The case contract is the brand's formal grammar.
- **Generous tracking on Trajan**: display at `0.08–0.12em`, chrome labels at `0.15–0.2em`. The spacing replicates the optical letterspacing of stone-cut Roman inscriptions — each glyph given air, each word landing with deliberation.
- **Weight restraint**: Trajan is effectively a single-weight face (400 regular). No bold is sanctioned. Authority derives from the face's inherent formal character, not weight escalation.
- **Garamond warmth at body**: EB Garamond's old-style proportions and warm ink trap feel read as handwritten luxury at body scale — the serif correlates with Bulgari's artisan heritage.

## Layout

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

Bulgari's dark canvas makes whitespace behave differently from light-mode luxury sites: dark negative space reads as depth, not emptiness. Section gaps at `{spacing.3xl}` (96px) and `{spacing.4xl}` (128px) on desktop feel like the distance between illuminated display cases in a jewellery boutique — each product zone a discrete presentation, the darkness between them a deliberate pause that intensifies attention.

### Grid & Container
- Max content width: approximately 1440px centered with generous lateral margins
- Hero: full-bleed jewel photography or campaign portraiture to viewport edges; Trajan headline and CTA overlaid at lower-left or centered
- Product grid: 3–4 column desktop with `{spacing.lg}`–`{spacing.xl}` gutters; product photography on dark ground, no card borders
- Editorial campaign sections: alternating full-bleed and 2-column cinematic layouts
- Footer: multi-column link structure on obsidian surface, BVLGARI wordmark centered, gold rule border-top

### Whitespace Philosophy
- **Dark breathing room**: on an obsidian canvas, generous space is not empty — it reads as the velvet interior of a Bulgari jewel case, a deliberate framing device that focuses attention on what is presented within it
- **Photography-led sections**: the jewelry or campaign image is always primary; type and chrome recede to the perimeter
- **Monumental spacing for monumental type**: `{typography.display-hero}` at 80px and `{spacing.4xl}` vertical margin produce a cadence that matches the physical scale of Bulgari's Rome flagship

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default — every surface on the dark ground is flat; depth is implied by the obsidian canvas itself |
| Gold Rule (Level 1) | `1px solid {colors.border-gold}` | Section dividers, heading underlines, input focus states — the gold hairline reads as a jewel setting edge |
| Dark Border (Level 1) | `1px solid {colors.border}` | Resting input underlines, subtle card outlines on elevated dark surfaces |
| Product Panel (Level 2) | `0 8px 40px {colors.shadow-soft}` | Product quick-view panels, filter drawers on dark surfaces — deep black shadow on near-black ground creates subtle but readable lift /* estimated */ |
| Modal (Level 3) | `0 20px 80px {colors.shadow-soft}` | Full dialog overlays, cart drawers, newsletter modals /* estimated */ |
| Focus Ring | `2px solid {colors.focus-ring}` | Gold focus ring on interactive elements — `{colors.primary}` ensures brand-consistent keyboard navigation |

**Shadow Philosophy**: On Bulgari's dark canvas, conventional box shadows are nearly invisible — `{colors.shadow-soft}` (near-black) on `{colors.background}` (near-black) only reads at very high blur values. The system therefore leans on gold rules as the primary structural signal: the `1px solid {colors.border-gold}` hairline performs both the decorative and functional work that shadows do in lighter systems. Floating overlays use deep opaque black shadows with long blur radii to create perceptible separation.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All primary UI — buttons, product cards, inputs, navigation panels, modals, image frames |
| `pill` | 9999px | Functional: cookie-consent toggles, circular icon buttons only |

Bulgari's shape grammar is zero-radius throughout all intentional design. The hard rectangular form recalls the architectural geometry of Roman stonework — the sharp-cut profile of a gemstone table, the right-angle of a Bulgari B.zero1 ring's cylindrical body. No intermediate radius value is sanctioned. Rounded corners would read as casualness in a system built on lapidary precision.

## Components

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

### Button Variants
- **`button-primary`** — `{colors.primary}` (18k gold) fill, `{colors.on-primary}` near-black text, `{rounded.none}`, 11px Trajan uppercase at `0.2em` tracking, `padding: 14px 36px`. The house's definitive CTA — "Discover the Collection", "Shop Now". Gold fill on an obsidian page creates the maximum luxury hierarchy: the button is a gold ingot in the dark.
- **`button-secondary`** — Transparent fill, `{colors.ink}` white text, `1px solid {colors.border-gold}` gold border outline, same typography and padding. Hover shifts fill to `{colors.primary-container}` (dark gold tint) and text to `{colors.ink-gold}`. Used for "Add to Wishlist", "View Details", secondary campaign actions.
- **`button-ghost`** — No fill, no border, bottom underline only (`1px solid {colors.border-gold}`). Used for inline editorial CTAs within body text and editorial storytelling flows.

### Cards
- **`card`** — Warm dark surface (`{colors.surface}`), no border by default, `{rounded.none}`. Product photography fills the card area flush to edges on the dark ground. Product name in `{typography.heading-sub}` (Trajan 18px uppercase) in `{colors.ink}` below, price in `{typography.body}` (EB Garamond 15px) in `{colors.ink-muted}`.
- **`card-light`** — White surface for product detail pages and editorial sections on light grounds. 40px internal padding, `{colors.ink-on-light}` text.

### Inputs
- **`input`** — Transparent background, bottom-border only (`1px solid {colors.border}`), `{rounded.none}`, 15px EB Garamond, `{colors.ink}` text. Focus: border upgrades to `1px solid {colors.border-gold}` gold — the moment of interaction announced in the brand's signature metal.
- **`input-focus`** — Gold underline state; no box glow, no background change.

### Badges / Tags
- **`badge`** — `{colors.primary-container}` dark gold-tint fill, `{colors.ink-gold}` text, Trajan 10px uppercase at `0.25em` tracking, `padding: 4px 12px`, zero radius. Deployed for "NEW", "EXCLUSIVE", "HIGH JEWELLERY", "LIMITED EDITION" product flags.

### Navigation
- **`nav-bar`** — `{colors.background}` obsidian fill, `{colors.ink}` white text, Trajan 11px uppercase at `0.15em` tracking. BVLGARI wordmark centered or at top-left. On hover: a `1px solid {colors.border-gold}` gold underline appears beneath the link — the same gold rule that signs every headline in the system.
- Mobile: hamburger-triggered full-height dark overlay with vertical Trajan nav stack, generous tracking and leading.

## Do's and Don'ts

### Do
- Start every layout on `{colors.background}` obsidian — Bulgari's digital world is dark; the darkness is the luxury signal, not a mood or a mode
- Use `{colors.primary}` 18k gold exclusively for primary CTAs, active navigation indicators, and gold rule dividers — preserve its precious-metal authority by using it sparingly and consistently
- Set all display headings, navigation, and button labels in Trajan Pro (or Cinzel) — uppercase always, tracking generous, weight 400 only
- Reserve EB Garamond for editorial body copy, captions, and product descriptions — the two typefaces have distinct registered roles that must not be blurred
- Apply `{rounded.none}` to every designed element — buttons, cards, inputs, image containers; the hard rectangle is Bulgari's geometric signature
- Use gold hairline rules (`1px solid {colors.border-gold}`) as the primary structural divider — above the footer, beneath section headings, as input focus upgrade
- Allow jewel-toned photography (`{colors.jewel-emerald}`, `{colors.jewel-sapphire}`, `{colors.jewel-ruby}`) to carry chromatic richness — jewel color lives in the image frame, not in chrome
- Maintain `{spacing.3xl}`–`{spacing.4xl}` between major sections on desktop — the dark space between cases is as considered as the cases themselves
- Use Trajan uppercase with `0.15–0.2em` tracking for all navigation and button labels — the inscription rhythm is non-negotiable

### Don't
- Don't use a white or warm-cream canvas for primary pages — `{colors.background}` obsidian is the ground; white sections are editorial inserts, not the default
- Don't introduce mid-range border-radius — `{rounded.none}` everywhere; any softening reads as a generic mass-market concession
- Don't apply `{colors.primary}` gold as a fill for secondary or tertiary UI elements — it is precious; overuse devalues the gold accent's luxury signal
- Don't set body text in the Trajan-class face — EB Garamond handles every body-scale reading moment; Trajan at body size loses its lapidary authority
- Don't add chromatic fills outside the sanctioned jewel accent palette — the dark system does not absorb extra hues gracefully
- Don't use Garamond for navigation or button labels — the Trajan voice is mandatory for all chrome
- Don't apply drop shadows to product cards on the dark canvas — the obsidian ground already implies depth; added shadow creates muddy stacking, not legible elevation
- Don't lowercase navigation, button labels, or badge text — the all-caps Trajan grammar is the House's most recognisable digital convention
- Don't use bold weights — Trajan is single-weight by design; EB Garamond italic provides emphasis in body copy when needed, not bold
- Don't introduce animation on the gold rule accent elements — the hairline is architectural, not decorative; it does not need to move

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | < 375px | Single column, hamburger nav, display type scales to ~36px, hero photography portrait-cropped, body at 14px /* estimated */ |
| Mobile | 375–767px | Single-column product grid, full-bleed hero on obsidian ground, gold rules remain full-width, navigation collapses to dark overlay /* estimated */ |
| Tablet | 768–1023px | 2-column product grid, condensed navigation, editorial layouts stack, section spacing reduces to `{spacing.2xl}` /* estimated */ |
| Desktop | 1024–1439px | Full horizontal navigation visible, 3–4 column product grid, section gaps at `{spacing.3xl}`, full display type scale /* estimated */ |
| Large Desktop | ≥ 1440px | Max container 1440px with lateral dark margins, `{spacing.4xl}` vertical rhythm, `{typography.display-hero}` at full 80px /* estimated */ |

### Touch Targets
- Primary buttons: 14px vertical padding plus 11px text equals minimum 44px tap height — Bulgari standard
- Navigation links: full-row tappable zones in mobile overlay, minimum 48px effective height
- Product cards: entire dark card (image + text area) tappable as a link
- Input fields: full width on mobile, minimum 44px effective tap height via `padding: 12px 0`

### Collapsing Strategy
- **Navigation**: Full Trajan horizontal nav collapses to dark hamburger drawer on mobile — obsidian overlay with BVLGARI wordmark at top, vertical Trajan link stack with `0.15em` tracking at 14px
- **Hero**: Full-bleed campaign photography at all breakpoints; overlaid Trajan headline scales from 80px (desktop) to 36px (mobile); portrait crop on mobile emphasizes face or gem rather than wide composition
- **Product grid**: 4-column → 2-column → 1-column; gap reduces from `{spacing.xl}` to `{spacing.md}`; product photography always on dark ground regardless of viewport
- **Editorial sections**: Full-width and 2-column cinematic layouts stack vertically on mobile; image always leads text
- **Footer**: Multi-column gold-rule-topped link grid on obsidian collapses to stacked vertical sections with Trajan uppercase labels

### Image Behavior
- Hero imagery: full-bleed, `object-fit: cover`, jewelry or portraiture on deep warm ground — never on white at hero scale
- Product photography: dark-ground studio shots fill card containers; consistent portrait aspect (3:4 or 4:5 for jewelry); no border-radius on image frames
- Gem detail photography: extreme close-up facet and setting detail, high jewellery editorial standard — these fill editorial panels at 100% column width
- Serpenti motif imagery: the snake appears as a full-bleed chapter-divider between editorial sections — not a pattern tile but an art-directed detail

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — deep obsidian near-black
- Primary text: `{colors.ink}` — white on dark surfaces
- Body text (light sections): `{colors.ink-on-light}`
- Brand gold accent: `{colors.primary}` — 18k gold
- Gold text labels: `{colors.ink-gold}`
- Secondary text / captions: `{colors.ink-muted}`
- CTA fill: `{colors.primary}` (gold)
- CTA text: `{colors.on-primary}` (near-black)
- Gold hairline rule: `{colors.border-gold}` — `1px solid`
- Resting input border: `{colors.border}`
- Focus input border: `{colors.border-gold}`

### Example Component Prompts

- "Build a Bulgari campaign hero on `{colors.background}` deep obsidian. Full-bleed jewel or campaign photography occupying 85vh. No gradient scrim. Overlaid at center or lower-left: a `{typography.display-hero}` (80px Trajan Pro, `letter-spacing: 0.1em`, uppercase, weight 400) headline in `{colors.ink}` white, then a single `1px solid {colors.border-gold}` gold rule at 80px width below the headline, then a primary button — `{colors.primary}` gold fill, `{colors.on-primary}` near-black text, Trajan Pro 11px uppercase `0.2em` tracking, `padding: 14px 36px`, `border-radius: 0`."

- "Design a Bulgari product card on `{colors.surface}` warm dark surface, `border-radius: 0`, no shadow, no border. Full-width jewelry photograph on dark ground (portrait aspect). Below the image: a thin `1px solid {colors.border-gold}` gold rule full-width, then product name in `{typography.heading-sub}` (Trajan Pro 18px uppercase `0.1em` tracking) in `{colors.ink}`, then price in `{typography.body}` (EB Garamond 15px) in `{colors.ink-muted}`. Hover on card title: text shifts to `{colors.ink-gold}` (18k gold)."

- "Create a Bulgari navigation bar on `{colors.background}` obsidian. BVLGARI logotype centered (or left-aligned) in Trajan Pro, uppercase. Left: category links in `{typography.nav-link}` (Trajan 11px uppercase `0.15em` tracking) in `{colors.ink}` white. Hover: a `1px solid {colors.border-gold}` gold hairline underline appears beneath the hovered link. Right: search, wishlist, bag SVG icons in `{colors.ink}`. Mobile: hamburger triggers full-height obsidian overlay with vertical Trajan nav stack."

- "Build a Bulgari section with heading and gold divider. Background `{colors.background}`. Centered heading in `{typography.heading-section}` (Trajan 28px uppercase `0.12em` tracking) in `{colors.ink}`. Immediately below: a `1px solid {colors.border-gold}` gold rule spanning 120px centered — the lapidary accent. Below that: `{typography.body-large}` (EB Garamond 18px, `line-height: 1.7`) editorial copy in `{colors.ink}`. Section padded `{spacing.3xl}` above and below."

- "Design a Bulgari email input field on `{colors.background}` obsidian. Transparent background, no top/left/right border, `border-bottom: 1px solid {colors.border}` warm dark hairline, `border-radius: 0`, padding `12px 0`. EB Garamond 15px `{colors.ink}` text, `{colors.ink-muted}` placeholder. Focus state: border upgrades to `1px solid {colors.border-gold}` 18k gold underline — no glow, no background change. Submit button beside it: `{colors.primary}` gold fill, `{colors.on-primary}` near-black Trajan uppercase text."

- "Create a Bulgari 'High Jewellery' badge. Background `{colors.primary-container}` (dark gold tint), text `{colors.ink-gold}` in `{typography.label-gold}` (Trajan 10px uppercase `0.25em` tracking), `border-radius: 0`, `padding: 4px 12px`. Place over the product image corner, absolute-positioned, no shadow. The badge names the tier — 'HIGH JEWELLERY', 'SERPENTI', 'B.ZERO1', 'DIVA'S DREAM' — in the Trajan inscription voice."

### Iteration Guide

1. Start with `{colors.background}` deep obsidian — Bulgari's canvas is dark; never default to white as the base
2. Set every display heading and all chrome in Trajan Pro (or Cinzel substitute), uppercase, weight 400 — the Roman inscription register is the brand's fundamental grammar
3. Switch to EB Garamond for all body paragraphs, product descriptions, and editorial copy — the two faces must not share a role
4. Apply `{colors.primary}` 18k gold to the CTA button fill and all gold hairline rules — it is the accent metal of the system; measure its use as you would a precious material
5. All button labels and navigation in `uppercase` with generous tracking (`0.15–0.2em`) — the inscription rhythm demands space between letterforms
6. `border-radius: 0` throughout — no softened corners anywhere in intentional UI
7. Use `1px solid {colors.border-gold}` gold hairline as the primary structural divider — it performs the work that shadows do in other luxury systems
8. Let photography carry the jewel color — `{colors.jewel-emerald}`, `{colors.jewel-sapphire}`, `{colors.jewel-ruby}` belong in the image frame, not in chrome

---

## 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 Bulgari. Brand names and trademarks belong to their respective owners.