---
version: alpha
name: "Gucci"
description: "Ivory canvas and custom GucciSans serif carry a maximalist luxury world — red-green heritage web stripe, Granjon-class italics, opulent zero-radius formalism anchored in House's black ink"

colors:
  # Canvas & surfaces
  background: "#ffffff"
  surface: "#f5f0eb"          # warm ivory — off-white parchment used for alternate sections /* estimated */
  surface-dark: "#000000"     # absolute black for hero overlays and footer
  surface-mid: "#1a1a1a"      # near-black dark surface /* estimated */

  # Ink / text
  ink: "#000000"
  ink-muted: "#666666"        # secondary text, captions, metadata /* estimated */
  ink-light: "#999999"        # tertiary / placeholder /* estimated */
  on-primary: "#ffffff"

  # Brand accent — Gucci Heritage
  primary: "#990000"          # Gucci deep red — CTA, accent, web stripe left /* estimated */
  primary-hover: "#7a0000"    # deeper press-state red /* estimated */
  accent-gold: "#b89a5a"      # heritage gold for borders and accents /* estimated */

  # Web-stripe system (iconic red-green-red ribbon) /* estimated */
  stripe-red: "#990000"       # outer stripe color
  stripe-green: "#2d5a27"     # center stripe color

  # Borders & dividers
  border: "#d4c9be"           # warm gray-beige hairline /* estimated */
  border-dark: "#000000"      # black rule for buttons and strong separators

  # Focus
  focus-ring: "#990000"

  # Semantic
  success: "#2d5a27"          # Gucci green doubles as success
  warning: "#b89a5a"          # warm gold-amber for warnings
  error: "#cc0000"

  # Shadow tint
  shadow-soft: "#c8b8a8"      # warm beige shadow tint /* estimated */

typography:
  display-hero:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0.1px
  nav-link:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.5px
  caption:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px
  label-italic:
    fontFamily: "GucciSans Text, Granjon, Georgia, serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0.2px

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.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
    borderColor: "{colors.border-dark}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  tag-filter:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
---

# Gucci Design System

## Overview

Gucci's web presence is the digital counterpart of its Via Condotti flagship — a space where every surface announces opulence through restraint. The canvas is crisp white (`{colors.background}`), not the warmed parchment of a niche perfumer or the black void of a motor marque, but the pristine white of a Milanese gallery. Into that whiteness Gucci renders a world through imagery: Alessandro Michele's maximalist universe of flowers, tigers, GG monogram, and archival Italian craft, photographed with the density and saturation of a couture lookbook. The UI's job is to hold this spectacle without competing — and it does so through an almost monastic typographic system.

The signature typeface is `GucciSans Text` — a custom serif with old-style proportions and Renaissance ink-trap detailing that echoes the Granjon letterforms cut for House Gucci's editorial publishing in the 1990s. At display scales it runs at weight 300, tracking negative, with the easy languor of a headline set in hot metal. At body sizes it tightens to weight 400 with modest positive tracking, functioning as a legible workhorse without losing the serif personality. Italic cuts carry campaign titles, poetic descriptions, and pull-quotes — the italic is not a style variation but a full voice, used deliberately for emotional registers the roman cannot reach. The monochromatic type system — black on white everywhere — means the House's imagery, not the UI chrome, provides all color.

What gives the design its unmistakable character is the heritage stripe system. Gucci's iconic red-green-red web stripe appears as a hairline decorative element on select UI moments — dividers beneath section headings, accents in navigation, and as the primary visual identifier on the product imagery itself. The stripe arrives from the House's equestrian heritage: luggage straps woven in red and green, worn by horses the Florentine family saddled in the 1920s. Rendered in `{colors.stripe-red}` and `{colors.stripe-green}`, it needs no animation, no gradient, no shadow — a flat three-band horizontal rule, a few pixels tall, carries a century of brand equity.

**Key Characteristics:**
- Ivory white canvas (`{colors.background}`) — pristine, gallery-white, never warmed or tinted
- GucciSans Text at weight 300 for display, weight 400 for body — a Renaissance serif with modern proportions
- Italic type as a distinct editorial voice for campaign headlines, poetic copy, and emotional labels (`{typography.label-italic}`)
- Uppercase button labels with 1.5px letter-spacing (`{typography.button-ui}`) — formal, measured, never loud
- Zero border-radius everywhere — hard rectangular forms, the formalism of archival House design
- Heritage stripe (`{colors.stripe-red}` / `{colors.stripe-green}`) as the sole decorative UI element
- `{colors.primary}` deep red appears sparingly — accent stripes and selective CTA moments, not a theme wash
- `{colors.accent-gold}` warm gold for hairline borders on luxury cards and feature panels
- Bottom-border-only inputs (`0px 0px 1px solid {colors.ink}`) — the ledger line of a Florentine account book
- Generous vertical spacing — sections breathe at `{spacing.3xl}`–`{spacing.4xl}`, product grids at `{spacing.xl}`

## Colors

### Primary Canvas
- **Pure White** (`{colors.background}`): The universal page ground — never warmed to cream, never tinted gray. Gucci's world is played out against this gallerino white.
- **Warm Ivory** (`{colors.surface}`): Alternate section background for editorial stories and heritage content panels. Slightly warmer than white, evoking uncoated art paper. /* estimated */

### Ink
- **House Black** (`{colors.ink}`): Primary text color for everything — headings, body, navigation, button labels, captions. Absolute black. The typography system is monochromatic by design.
- **Muted Ink** (`{colors.ink-muted}`): Captions, price sub-details, metadata labels, placeholder text at lower emphasis.
- **Light Ink** (`{colors.ink-light}`): Tertiary text and disabled element labels. /* estimated */

### Brand Accent
- **Gucci Red** (`{colors.primary}`): The CTA brand moment — used for primary action buttons on dark surfaces, the outer band of the heritage stripe, and select hover states. Appears with deliberate restraint. /* estimated */
- **Heritage Gold** (`{colors.accent-gold}`): Hairline borders on luxury editorial cards, the GG monogram lockup when rendered on light surfaces. Not a UI fill color. /* estimated */

### Heritage Stripe
- **Web Stripe Red** (`{colors.stripe-red}`): Outer bands of the Gucci web stripe divider — the same `{colors.primary}`. /* estimated */
- **Web Stripe Green** (`{colors.stripe-green}`): Center band of the web stripe, drawn from Gucci's equestrian luggage strap heritage. /* estimated */

### Semantic
- **Success** (`{colors.success}`): Uses Gucci green — the brand's secondary heritage hue doubles as affirmation in the system.
- **Warning** (`{colors.warning}`): Warm gold amber, distinct from the accent-gold tone. /* estimated */
- **Error** (`{colors.error}`): A warmer crimson than the primary red — clear enough at small form-validation sizes.

### Borders & Dividers
- **Warm Hairline** (`{colors.border}`): Beige-gray divider between cards, section separators, and card outlines. /* estimated */
- **Black Rule** (`{colors.border-dark}`): High-contrast border for CTA buttons and strong structural rules.

## Typography

### Font Family
- **Primary**: `GucciSans Text`, fallback chain: `Granjon, Georgia, "Times New Roman", serif`
- **Italic voice**: Same family — the italic cut of GucciSans Text is a separate expressive register for campaign copy, descriptive text, and editorial labels
- **Google Fonts substitute**: `IM Fell English` (old-style serif with similar ink-trap character) or `Cormorant` (elegant display serif at light weights)
- **OpenType features**: Old-style numerals for price display, standard ligatures, contextual alternates on the italic cut

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign heroes, seasonal editorial — the House's loudest typographic moment |
| `display` | Section openers, editorial intros, product family headings |
| `heading-section` | Category headers, story section titles |
| `heading-sub` | Product name display, card headings |
| `body-large` | Campaign description paragraphs, editorial storytelling copy |
| `body` | Standard product descriptions, navigation sub-copy |
| `nav-link` | Primary navigation, utility links — uppercase with tracking |
| `button-ui` | All button labels — uppercase, 1.5px letter-spacing |
| `caption` | Price points, product metadata, category labels |
| `label-italic` | Campaign sub-heads, poetic descriptors — italic voice of the House |

### Principles
- **One typeface, two registers**: GucciSans Text roman for structural UI; its italic for emotional, editorial, and poetic copy. The distinction is not decorative — the italic marks a deliberate shift from commerce to culture.
- **Light weight at scale**: Display text runs at weight 300. The lightness is aspirational restraint — Gucci refuses the bold that lesser luxury brands reach for.
- **Uppercase with measured tracking**: Button and navigation labels carry 1–1.5px positive letter-spacing, uppercase. The rhythm is formal without stiffness, like engraved stationery.
- **Negative tracking for display, positive for labels**: Large text (`display-hero`) at `-0.5px`; small labels (`caption`, `button-ui`) at `+1–1.5px`. The inversion tightens large letterforms into monumental blocks while giving small text air.
- **No bold**: The heaviest sanctioned weight is 400 for body text. Emphasis comes from size, case, and register (roman versus italic), never weight.

## Layout

### Spacing System
Base unit: `8px`. The scale steps through `{spacing.xs}` to `{spacing.4xl}`, with section-level whitespace at `{spacing.3xl}` (96px) and `{spacing.4xl}` (128px). Gucci's digital space is generous — the House respects negative space as a signal of luxury that mass-market brands cannot afford.

### Grid & Container
- Max content width: approximately 1440px, centered with generous lateral margins
- Hero: full-bleed photography to viewport edges, product name and CTA overlaid at lower left with controlled padding
- Product grid: 4-column desktop, collapsing to 2 then 1 on mobile, with `{spacing.xl}` gutters
- Editorial campaigns: full-bleed alternating full-width and 2-column layouts
- Footer: multi-column link grid on black surface with white GucciSans Text links

### Whitespace Philosophy
- **Gallery pacing**: Major editorial sections are separated by `96–128px` of white — the equivalent of the padded distance between frames in a luxury exhibition
- **Product breathing room**: Product tiles carry generous padding around imagery; the photography composition extends to the tile edge with no card chrome, no shadow
- **Type-to-image tension**: Large GucciSans Text headlines at weight 300 float within white space adjacent to full-bleed campaign imagery — the asymmetry is composed, not crowded

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default for all surfaces — product cards, hero panels, editorial sections |
| Hairline (Level 1) | `1px solid {colors.border}` or `1px solid {colors.border-dark}` | Button outlines, card frame moments, section dividers |
| Heritage Stripe (Level 2) | `3px` three-band red-green-red stripe | Decorative structural dividers beneath section headings |
| Gold Rule (Level 2a) | `1px solid {colors.accent-gold}` | Luxury editorial card borders, featured product frames |
| Modal Soft (Level 3) | `0 4px 24px rgba(0,0,0,0.12)` (opaque approx: `{colors.shadow-soft}`) | Flyout navigation panels, quick-view overlays |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus indicator on interactive elements |

**Shadow Philosophy**: Gucci's site is functionally shadow-free at the component level. Product cards carry no drop shadow — the photography's own studio lighting generates all perceived depth. The sole soft shadow appears on overlay panels (navigation mega-menus, quick-view drawers), using a warm beige-tinted blur rather than neutral gray. This keeps the shadow system within the House's warm color world, not borrowing from generic SaaS elevation libraries.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, cards, inputs, modals, images, navigation panels |
| `pill` | 9999px | Filter category pills and toggle tags only |

Gucci's shape system is binary: hard rectangles for all primary UI, pill for filter-toggle elements only. The zero-radius absolutism communicates architectural precision — the same formal discipline found in the House's Florentine palazzo architecture and its archival leather goods. Any mid-range radius (4–16px) reads as generic web-app softness inconsistent with the House identity.

## Components

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

### Buttons

- **`button-primary`** — Solid black fill, white GucciSans Text uppercase 13px / 1.5px tracking, 14px×32px padding, zero radius. The House's principal CTA. On hover: shifts to `{colors.surface-mid}` (slightly lighter black), maintaining the dark-on-dark confidence.
- **`button-secondary`** — White fill, `1px solid {colors.border-dark}` outline, same typography. For secondary actions on white surfaces. Hover: inverts to solid black fill with white text.
- **`button-ghost`** — For CTAs overlaid on campaign imagery. White text, no border, no fill — just the GucciSans Text uppercase label.
- **`tag-filter`** — Pill-radius category filters. The only rounded element; signals "toggle" not "action."

### Cards
- **`card`** — No border, no shadow, no radius. Pure white background or transparent, product photography at full bleed. The card IS the image.
- **`card-dark`** — Black surface with 40px padding for editorial story cards on dark sections.

### Inputs
- **`input`** — Bottom-border only (`0px 0px 1px solid {colors.ink}`), zero radius, parchment or white background, GucciSans Text 15px weight 400. The underline-only treatment echoes Florentine account-book ledger lines.
- **`input-focus`** — Focus state deepens the border to `{colors.focus-ring}` (Gucci red), the only moment where the accent color appears in form interactions.

### Navigation
- **`nav-bar`** — White background, centered Gucci wordmark in the proprietary double-G lockup. Left: category links in GucciSans Text 13px weight 400 with 0.5px tracking. Right: search, wishlist, bag icons.
- Mobile: hamburger-triggered full-screen white overlay with vertical GucciSans Text link stack.
- Hover on nav links: thin `{colors.primary}` underline, or the web stripe pattern appears as a 3px decoration beneath.

### Badges
- **`badge`** — Warm ivory surface, ink-muted text, caption typography, zero radius, tight padding. Used for product labels ("New", "Exclusive") and editorial category markers.

## Do's and Don'ts

### Do
- Use GucciSans Text (or Cormorant / IM Fell English as substitute) for all type — including UI chrome, buttons, and navigation
- Deploy the italic register (`{typography.label-italic}`) for campaign sub-copy, descriptive text, and emotional labels — it is a distinct House voice, not a styling accent
- Keep button labels in uppercase with 1.5px letter-spacing (`{typography.button-ui}`) — the formal tracking is non-negotiable
- Use `{colors.border-dark}` (black) for button outlines and major structural rules; reserve `{colors.border}` (warm beige) for card hairlines and dividers
- Apply zero border-radius on all primary components — rectangles only
- Reserve `{colors.primary}` red for input focus rings and the heritage stripe motif — it is a punctuation mark, not a fill color
- Let photography carry the chromatic weight — the UI palette is monochromatic so imagery can be maximalist
- Use the three-band web stripe (red-green-red) as the sole decorative divider element beneath major section headings
- Bottom-border-only inputs — `0px 0px 1px solid {colors.ink}` — never full-border form fields
- Maintain `{spacing.3xl}`–`{spacing.4xl}` (96–128px) between major editorial sections

### Don't
- Don't introduce border-radius between 0px and pill — the system is binary; anything in the middle reads as generic digital
- Don't use bold weight (500+) on GucciSans Text — the system peaks at weight 400; visual emphasis comes from size, case, and italic, never weight
- Don't apply `{colors.primary}` red as a button fill for standard CTAs — the House black is the primary CTA surface; red is a stripe accent
- Don't substitute the heritage stripe with gradients, animations, or decorative illustrations — the flat three-band motif is used with exact restraint
- Don't use `{colors.accent-gold}` as a UI fill or text color — it is a hairline border and decorative accent only
- Don't add box-shadows to product cards or editorial containers — the design is flat; photographic studio light provides all depth
- Don't set navigation or body text in lowercase with no tracking — GucciSans Text's voice requires positive tracking at small sizes
- Don't introduce secondary typefaces — one family for every word; the italic cut handles expressive variation
- Don't use pure `#000000` for dark surfaces (footer, dark cards) — use `{colors.surface-dark}` absolute black but distinguish from body text `{colors.ink}` in code even when visually identical
- Don't crowd product grids — minimum `{spacing.xl}` (40px) gutter between tiles; the breathing room signals the price point

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <480px | Single column, full-bleed hero photography stacks vertically, hamburger nav, body at 14px |
| Mobile Large | 480–768px | 2-column product grid begins, hero text scales to 40px, filter pills scroll horizontally |
| Tablet | 768–1024px | 3-column product grid, condensed navigation, editorial layouts stack |
| Desktop | 1024–1440px | Full horizontal mega-navigation, 4-column product grid, campaign sections at full width |
| Large Desktop | ≥1440px | Max container 1440px with generous lateral ivory margins, hero display text at 64px |

### Touch Targets
- Primary buttons: 14px vertical padding plus 13px text = minimum 44px tap height
- Navigation icons (search, wishlist, bag): minimum 44×44px touch area with SVG icon centers
- Product cards: entire image+title surface is tappable as a link
- Filter pills with pill radius: `8px 16px` padding provides adequate touch area at small sizes

### Collapsing Strategy
- **Navigation**: Full horizontal mega-nav collapses to centered double-G wordmark + hamburger on mobile; mobile overlay is full-screen white with GucciSans Text vertical link stack
- **Hero**: Full-bleed photography at all breakpoints; overlaid text position shifts from lower-left (desktop) to bottom-center (mobile); display size scales from 64px to 32px
- **Product grid**: 4-column → 3-column → 2-column → 1-column, gutter reduces from 40px to 16px; no change to card chrome
- **Editorial sections**: 2-column story layouts stack to single-column on mobile, image always above text
- **Footer**: Multi-column link grid on black surface collapses to stacked accordion groups

### Image Behavior
- Hero imagery: full-bleed to viewport edge using `object-fit: cover` at all breakpoints
- Product photography: fills container width with consistent aspect ratio (typically 3:4 portrait for ready-to-wear, 1:1 square for accessories)
- Campaign imagery: art-directed at desktop proportions; mobile receives a tighter crop but maintains the same photographic quality and color saturation
- No rounded image crops — all photography is rectangular with zero radius, consistent with the House's zero-radius formalism

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — pure white
- Text: `{colors.ink}` — house black
- Secondary text: `{colors.ink-muted}`
- Brand accent: `{colors.primary}` — Gucci red (stripe, focus ring)
- Heritage gold: `{colors.accent-gold}` — hairline borders only
- Stripe red: `{colors.stripe-red}` — web stripe outer bands
- Stripe green: `{colors.stripe-green}` — web stripe center band
- Button fill: `{colors.ink}` (primary), transparent (secondary)
- Border: `{colors.border-dark}` (buttons), `{colors.border}` (cards)
- Input border: `0px 0px 1px solid {colors.ink}` (bottom only)

### Example Component Prompts

- "Create a Gucci campaign hero on pure white `{colors.background}`. Full-bleed editorial photograph occupying the top 85vh. No gradient scrim. Overlaid in the lower-left quadrant: a GucciSans Text heading at 64px weight 300 letter-spacing -0.5px in `{colors.ink}`, then a paragraph in the italic register at 18px weight 300, then a primary button — `{colors.ink}` fill, `{colors.on-primary}` text, GucciSans Text 13px uppercase 1.5px tracking, 14px 32px padding, zero border-radius."
- "Design a Gucci product card on white background, zero border-radius, no shadow. Full-width product photograph (3:4 portrait ratio). Below the image: product name in GucciSans Text 22px weight 400, then price in 15px weight 400 `{colors.ink}`, then a secondary button — white fill, `1px solid {colors.border-dark}`, GucciSans Text 13px uppercase 1.5px tracking, 14px 32px padding, zero radius. Hover on button inverts to `{colors.ink}` fill with `{colors.on-primary}` text."
- "Build a Gucci section heading composition. Centered three-band heritage stripe divider: 1px `{colors.stripe-red}` / 1px `{colors.stripe-green}` / 1px `{colors.stripe-red}`, full-width. Below: GucciSans Text 40px weight 300 letter-spacing -0.25px centered section heading in `{colors.ink}`. Below: one sentence in GucciSans Text italic 18px weight 300 `{colors.ink}` as the editorial subhead."
- "Create a newsletter sign-up section on `{colors.surface-dark}` black background. GucciSans Text 40px weight 300 white headline, italic 18px descriptive sub-copy in white below. Full-width email input: transparent background, `{colors.on-primary}` text, bottom-border-only `0px 0px 1px solid {colors.on-primary}`, zero radius, GucciSans Text 15px weight 400. Submit button in `{colors.on-primary}` white fill, `{colors.ink}` text, GucciSans Text 13px uppercase 1.5px tracking, 14px 32px padding, zero radius."
- "Design a Gucci mega-navigation panel on `{colors.background}` white. Left: double-G wordmark centered. Center: GucciSans Text 13px weight 400 letter-spacing 0.5px horizontal category links in `{colors.ink}` — 'Women', 'Men', 'Children', 'Gifts', 'Beauty'. Hover: thin `{colors.primary}` underline appears. Right: SVG icons for search, wishlist, bag at 24px `{colors.ink}`. Below active category: full-width dropdown panel with editorial campaign imagery left, product category links right, separated by `1px solid {colors.border}`."
- "Create a Gucci filter pill bar below a category heading. Each pill: GucciSans Text 11px uppercase 1px tracking, padding 8px 16px, `{rounded.pill}` radius. Inactive: `{colors.background}` fill, `{colors.ink}` text, `1px solid {colors.border-dark}`. Active: `{colors.ink}` fill, `{colors.on-primary}` text, no border. Pill bar scrolls horizontally on mobile."

### Iteration Guide

1. Start with `{colors.background}` pure white — Gucci's world is always played against pristine white; never warm or tint the canvas
2. Typography default: GucciSans Text (or Cormorant substitute) at weight 300 for display, weight 400 for body — never bold
3. Italic is a full voice: campaign copy, descriptive text, and emotional labels use the italic cut as the House's poetic register
4. All UI chrome in uppercase with positive letter-spacing — `{typography.button-ui}` at 1.5px tracking is the standard
5. Border-radius is binary: `{rounded.none}` for everything except filter pills which use `{rounded.pill}` — no middle ground
6. Color is restrained: `{colors.ink}` and `{colors.background}` handle 95% of the UI. `{colors.primary}` red is reserved for the heritage stripe motif and focus rings only
7. The web stripe (red-green-red, 3px total) is the signature decorative element — deploy beneath major section headings, never animate or gradient it

---

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