---
version: alpha
name: "Bottega Veneta"
description: "An achromatic quiet-luxury system anchored by a proprietary light-weight roman, a pure white canvas, and the brand's signature Bottega green used with surgical restraint — zero border-radius, maximum editorial whitespace, no logo on the product."

colors:
  # Surface / canvas
  background: "#ffffff"             # manifest background_color — primary canvas
  surface: "#f5f5f5"                # subtle secondary section fill, product grids

  # Ink / text
  ink: "#000000"                    # primary text, wordmark, all body copy (424 instances, highest count)
  ink-secondary: "#333333"          # secondary labels, subdued nav items, captions
  ink-ghost: "#bbbbbb"              # placeholder, disabled, fine print

  # Brand — Bottega green as announcement bar accent, never on product chrome
  primary: "#2e5339"                # Bottega signature dark green — estimated from brand identity
  on-primary: "#ffffff"             # text on green surface
  primary-container: "#3d6b4a"      # hover lift on green — estimated

  # Interactive states
  primary-hover: "#1a3324"          # deeper green on hover — estimated
  text-hover: "#1883fd"             # was rgb(24, 131, 253) — dembrandt link hover (third-party injected)
  focus-ring: "#000000"             # 1px solid black outline on focus

  # Semantic
  error: "#cc0000"                  # form validation — estimated, no brand data

  # Borders
  border: "#000000"                 # 1px solid black on buttons, inputs, dividers
  border-subtle: "#d8d8d8"          # was rgb(216,216,216) — light hairline section rules

  # Shadow tints
  shadow-soft: "#333333"            # was rgba(0,0,0,0.2) — Google format requires hex; used on modals/overlays

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0.05em
  display:
    fontFamily: "Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0.04em
  heading-section:
    fontFamily: "bottegaveneta-regular-webfont, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  heading-sub:
    fontFamily: "bottegaveneta-regular-webfont, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "bottegaveneta-regular-webfont, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.18px
  body:
    fontFamily: "bottegaveneta-regular-webfont, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0px
  nav-link:
    fontFamily: "bottegaveneta-regular-webfont, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  nav-category:
    fontFamily: "bottegaveneta-bold-webfont, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.57
    letterSpacing: 0px
  button-ui:
    fontFamily: "bottegaveneta-regular-webfont, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.1em
  label:
    fontFamily: "bottegaveneta-regular-webfont, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.12px
  caption:
    fontFamily: "bottegaveneta-regular-webfont, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 60px
  3xl: 120px

rounded:
  none: 0px
  xs: 2px      # cookie/consent UI only — not present on brand components

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 25px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.background}"
    rounded: "{rounded.none}"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 25px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.none}"
    padding: 0px
  card-product:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.none}"
    padding: 16px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 4px 0px
    border: "0px none {colors.border}"
    borderBottom: "1px solid {colors.border}"
  input-focus:
    outline: "1px solid {colors.focus-ring}"
    backgroundColor: "{colors.background}"
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px 12px
  nav-item-hover:
    textColor: "{colors.ink-secondary}"
  announcement-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    padding: 8px 16px
  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 8px
---

# Bottega Veneta Design System

## Overview

Bottega Veneta's digital identity is a masterclass in subtraction. Where other luxury houses brandish logos and gold leaf, Bottega operates on the logic that the product is the brand — and the design system's only job is to stay out of its way. The canvas is pure `{colors.background}` white, the type is the brand's own proprietary roman with elegant proportions borrowed from classical humanist tradition, and the single chromatic note is the label's signature `{colors.primary}` green, deployed exclusively in the announcement bar — a single stripe of color at the very top of the page that disappears the moment you scroll.

The palette extracted by dembrandt confirms what the screenshot makes visually obvious: three tones define the entire system. `{colors.ink}` black anchors typography, buttons, and borders; `{colors.ink-secondary}` provides the secondary text register; `{colors.background}` white is the canvas everything floats on. The absence of mid-tone grays, the rejection of rounded corners in brand UI, and the near-total lack of decorative shadow all point to a single governing principle — restraint as luxury signal.

Typography does the heavy lifting that ornament refuses to. The proprietary `bottegaveneta-regular-webfont` is a refined geometric roman that sits comfortably at small text sizes while projecting quiet authority in navigation and product labels. Uppercase transforms appear only in secondary headings and categories — never for entire blocks of body copy. Generous line heights (1.57 on body text) and tight letter-spacing keep reading effortless across the dense editorial grids that define the homepage layout.

**Key Characteristics:**
- Achromatic two-tone system: `{colors.ink}` and `{colors.background}` carry 98% of all UI decisions; no chromatic accent on product chrome
- Proprietary webfont (`bottegaveneta-regular-webfont`) self-hosted in two cuts — regular and bold — with Arial as the sole fallback
- Zero border-radius on all brand UI components: buttons, cards, inputs, drawers are completely square-edged (`{rounded.none}`)
- `{colors.primary}` Bottega green appears in one location — the announcement bar — then vanishes; it is a scent, not a presence
- Editorial photography grid on the homepage operates as the primary visual texture; UI chrome is deliberately invisible behind it
- Button typography set in uppercase with expanded letter-spacing — not for decoration but to mark interactivity without weight or color
- Input fields use only a bottom border rule (`{colors.border}` 1px solid black) — no surrounding box, no radius, no background fill
- Motion is minimal: 0.3–0.4s ease transitions on nav reveal; the slowest animation is a 1s hero fade at launch
- Navigation mega-menu exposes full taxonomy in a typographic grid — no icons, no thumbnails, pure text hierarchy
- Logo wordmark at top-left, unfailingly small; never centered, never large; "Bottega Veneta" appears once
- Breakpoints span 400px to 2250px — 22 defined values for a genuinely responsive luxury experience
- Product imagery bleeds to the container edge with no card chrome, no drop shadow, no inset border

## Colors

### Primary Surface
- **White** (`{colors.background}`): The dominant canvas. Every page, panel, overlay, and drawer starts here. No tints, no overlays.
- **Off-white** (`{colors.surface}`): Used for secondary section fills in product grids and editorial stripes — perceptible only in comparison to the primary white.

### Text Registers
- **Black** (`{colors.ink}`): Primary text, the wordmark, all CTA text, and border strokes. Carries the full visual weight of the system.
- **Dark grey** (`{colors.ink-secondary}`): Secondary labels, subdued navigation items, product price secondary lines.
- **Light grey** (`{colors.ink-ghost}`): Placeholders, disabled states, legal fine print.

### Brand Accent
- **Bottega Green** (`{colors.primary}`): The house's proprietary green — a dark, muted forest tone derived from the label's long-standing color identity. Used exclusively in the announcement bar. On-screen it reads as a grounded, organic dark green: neither loud nor safe.

### Interaction States
- **Focus ring** (`{colors.focus-ring}`): 1px solid black outline — consistent with the border vocabulary; no colored glow.
- **Border rule** (`{colors.border}`): 1px solid black on all interactive components — buttons, inputs, drawers.
- **Subtle rule** (`{colors.border-subtle}`): Light grey hairlines between sections and inside accordion panels.

## Typography

### Font Family
- **Primary**: `bottegaveneta-regular-webfont`, self-hosted as `.woff2`. A proprietary geometric roman with narrow proportions and elegant terminals. Fallback: `Arial, sans-serif`.
- **Bold**: `bottegaveneta-bold-webfont`, used for category labels and navigation headings requiring emphasis without weight escalation. Fallback: `Arial, sans-serif`.
- **Display pairing**: For editorial headline contexts — estimated as `Cormorant Garamond` — a refined old-style serif that pairs with the brand's tactile, woven-leather identity. (The primary webfont dominates at body scale; a display serif is conventional for Bottega's editorial campaigns.)

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign headlines, editorial section titles |
| `display` | Section leads, featured category heads |
| `heading-section` | Product category headers, navigation mega-menu titles |
| `heading-sub` | Product sub-labels, filter panel heads |
| `body-large` | Editorial paragraph copy, feature descriptions |
| `body` | Product names, prices, standard body text |
| `nav-link` | Primary navigation items, mega-menu links |
| `nav-category` | Bold category labels in the mega-menu header row |
| `button-ui` | All CTAs — uppercase-transformed, expanded spacing |
| `label` | Tags, pill labels, announcement bar copy |
| `caption` | Legal text, image credits, fine print |

### Principles
- A single typeface family handles all registers — cuts (regular, bold) provide the only typographic differentiation
- Uppercase is reserved for buttons and secondary category headings; never used for paragraphs or product names
- Letter-spacing stays near zero except for `button-ui` (0.1em) and `body-large` (0.18px) — refined, not wide
- Font size range is narrow: 10px–48px across 11 tokens, with most UI text clustered between 12–20px
- Line height is generous at body scale (1.57) to support dense editorial grids without crowding

## Layout

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

Bottega uses a compressed lower register (xs, sm, md) for internal component padding and a expansive upper register (xl, 2xl, 3xl) for section breathing room. The 195px value appearing 8 times in dembrandt data points to very large structural margins — editorial columns held at a dramatic distance from the viewport edge on large screens.

### Grid & Container
- Max content width: approximately 1440px (primary viewport reference in breakpoints)
- Photography grid: 5-column equal-width at desktop — no gutters, edge-to-edge images
- Max content width caps at approximately 1280–1440px on large displays, with content indented 16px on mobile
- Navigation mega-menu reveals a typographic grid with category columns separated by 60px horizontal spacing

### Whitespace Philosophy
- Whitespace is the primary luxury signal — section margins are generous to the point of feeling bold
- Photography is given maximum area; UI chrome shrinks to the minimum viable footprint
- Dense product grids alternate with single-image editorial moments; rhythm is editorial, not e-commerce

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Products, cards, navigation — the dominant state |
| Subtle (Level 1) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Overlay panels, drawers — flattened to `{colors.shadow-soft}` |
| Modal (Level 2) | `rgba(0,0,0,0) 0px 2px 4px + rgba(50,50,93,0.1) 0px 7px 14px` | Cart/checkout surfaces |
| Payment widget | `rgb(199,197,199) 0px 0px 12px 2px` | Third-party payment iframe border glow |
| Focus Ring | `1px solid {colors.focus-ring}` | All interactive elements on keyboard focus |

**Shadow Philosophy**: Bottega's shadow vocabulary is effectively non-existent for brand UI. Shadows appear only where functionally required — overlays that need to feel elevated above the page, payment widgets with iframe boundaries. The design aesthetic is emphatically flat: product photographs stand on a white plane with no lift, no depth, no frame. Every shadow in the dembrandt output traces back to consent dialogs or third-party payment widgets, not Bottega's own components.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything in the brand design system — buttons, cards, inputs, drawers, modals |
| `xs` | 2px | Consent dialog controls only (third-party UI, not brand) |

The shape philosophy is the clearest expression of Bottega's aesthetic: absolute right angles everywhere. There is no spectrum — no sm, md, lg radius progression. The system is binary: 0px for brand UI, and a minimal 2px that appears only in cookie preference dialogs. This severity aligns with the woven leather aesthetic (the Intrecciato pattern is itself a grid of precise rectangles) and distinguishes Bottega sharply from the soft, rounded UI common in contemporary e-commerce.

## Components

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

### Button Variants
- **`button-primary`** — Black fill, white text, square-edged, uppercase typography with expanded spacing. The visual weight of black-on-white makes these impossible to miss without relying on color contrast tricks.
- **`button-secondary`** — White fill with 1px black border. The ghost-on-white approach preserves the canvas while marking the action boundary. Hover deepens to `{colors.surface}` fill.
- **`button-ghost`** — No border, no fill; text only with `{typography.button-ui}` uppercase. Used for secondary actions like "View all" where hierarchy demands invisibility.

### Cards
Product cards have zero chrome: no `{colors.surface}` fill, no shadow, no border, no radius. The image bleeds to the grid boundary and the product name appears below in `{typography.body}` with price in `{typography.label}`. The lack of card frame is a deliberate choice — the product is the container.

### Inputs
All inputs use the bottom-border-only pattern: `1px solid {colors.border}` at the bottom edge, no surrounding box, `{rounded.none}`. Focus state adds `outline: 1px solid {colors.focus-ring}` — a hairline square that matches the existing stroke vocabulary.

### Navigation
Fixed top navigation bar in `{colors.background}` white, wordmark at far left, links centered in `{typography.nav-link}`, utility icons (search, phone, account, bag) at far right. Mega-menu reveals on hover with a 0.3–0.4s ease transition on `visibility` and `opacity`, presenting a typographic product grid. No images in the mega-menu — the hierarchy is entirely typographic.

### Announcement Bar
The single `{colors.primary}` green stripe at the very top of the page. Set in `{typography.label}` in `{colors.on-primary}` white. It is the only moment of chromatic presence in the interface.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the default surface for every component and panel — resist the urge to add a tint for "hierarchy"
- Keep all CTAs in `{colors.ink}` or bordered with `{colors.border}` — two states only; no mid-tone grays for tertiary actions
- Set button copy in uppercase with `{typography.button-ui}` tracking — this is how interactivity is signaled, not color
- Use `{rounded.none}` everywhere in brand UI; tolerate `{rounded.xs}` only when overriding third-party consent dialogs
- Apply `{colors.primary}` green exclusively for the announcement bar or global alert — never as a decorative accent, hover highlight, or secondary button fill
- Maintain the bottom-border-only input pattern; never wrap inputs in a rounded box
- Let photography bleed edge-to-edge in product grids; never add drop shadows or inset borders to images
- Use `{typography.nav-link}` weight 400 — not bold — for primary navigation; bold is reserved for `nav-category` headers only
- Respect generous section spacing (`{spacing.2xl}` or `{spacing.3xl}`) between major content blocks; the whitespace is structural
- Keep the wordmark small, top-left, and unadorned

### Don't
- Don't introduce rounded corners on any brand component — `{rounded.sm}` and above are incompatible with this system
- Don't use `{colors.primary}` green on buttons, links, badges, or interactive states — it reads as brand, not action
- Don't add background fills to product cards; card chrome competes with the photograph and signals commodity retail, not luxury
- Don't use more than two type weights in any single view; the system uses regular and bold only
- Don't place the wordmark centered, oversized, or repeated — one instance, one position, always small
- Don't add decorative shadows or ambient glows to product imagery; the flat-plane presentation is deliberate
- Don't use any color in the mega-menu or navigation beyond `{colors.ink}` and `{colors.background}` — the typography organizes the information
- Don't set body copy in uppercase; uppercase belongs only to buttons and category label headings
- Don't stack multiple CTA types in close proximity; the hierarchy is primary / ghost only — never three button variants on one screen

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single-column product grid; wordmark shrinks; navigation collapses to hamburger |
| Mobile | 425–767px | 1-2 column grid; full-bleed hero images; bottom nav sheet replaces mega-menu |
| Tablet | 768–1023px | 2-3 column product grid; sidebar nav panels; standard mega-menu returns |
| Desktop | 1024–1439px | 4-5 column product grid; full mega-menu visible; max editorial spacing |
| Large Desktop | ≥1440px | 5-column grid with expanded lateral margins; editorial rhythm at maximum |

### Touch Targets
- Buttons use at minimum `8px 25px` padding on a 14px font — touch height approximately 36px. Mobile CTAs should be reviewed for 44px minimum tap target compliance.
- Navigation items in the mobile sheet receive expanded padding vs the desktop link strip.
- The announcement bar remains persistent and tappable across all sizes.

### Collapsing Strategy
- Desktop mega-menu collapses to a full-screen drawer on mobile with accordion-style category expansion
- Photography grid goes from 5-column → 2-column → 1-column across the breakpoint range
- Hero section compresses but maintains full-bleed edge-to-edge photography at all sizes
- Utility icons (search, account, bag) remain accessible at all breakpoints — they anchor the top-right position on mobile

### Image Behavior
- All product images are aspect-ratio locked, edge-to-edge within their grid cell
- Hero images stretch to 100vw at every breakpoint with no letterboxing
- No lazy-loaded placeholder tints or blurred previews — the white canvas holds until the image loads

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- CTA background: `{colors.ink}`
- CTA text: `{colors.background}`

### Example Component Prompts

- "Build a Bottega Veneta product card using `{colors.background}` as the card surface — no border, no shadow, no radius. Display a full-bleed square product image, product name in `{typography.body}` `{colors.ink}`, and price in `{typography.label}` `{colors.ink-secondary}`. No card chrome whatsoever."
- "Create a primary CTA button using `{colors.ink}` background, `{colors.background}` text, `{typography.button-ui}` uppercase type with 0.1em letter-spacing, `{rounded.none}`, padding `{spacing.sm}` vertical and `25px` horizontal. On hover: transition background to `{colors.ink-secondary}` over 0.3s ease."
- "Build a hero section with `{colors.background}` canvas and a full-viewport-width editorial photograph. Overlay no UI chrome. Below the image, set a single line of display text in `{typography.display-hero}` `{colors.ink}`, centered in a generous container with `{spacing.3xl}` vertical padding. Add a ghost `{components.button-ghost}` CTA below."
- "Design a Bottega Veneta navigation bar: `{colors.background}` bar with no border or shadow. Wordmark `BOTTEGA VENETA` at far left in `{typography.nav-link}` `{colors.ink}`. Center links in `{typography.nav-link}` with `{spacing.lg}` horizontal gap. Utility icons (search, account, bag) at far right. Bar height approximately 80px. On link hover: opacity transition 0.2s ease to `{colors.ink-secondary}`."
- "Create a newsletter email input field: white `{colors.background}` fill, no box border, only `1px solid {colors.border}` bottom rule, `{typography.body}` `{colors.ink}` text, `{rounded.none}`. On focus: `outline: 1px solid {colors.focus-ring}` hairline square. Inline submit button as `{components.button-primary}` to the right, zero gap between field and button."
- "Render the Bottega Veneta announcement bar: a full-width `{colors.primary}` green stripe, `{spacing.sm}` vertical padding, centered `{typography.label}` `{colors.on-primary}` copy. No close button. This is the only green element in the entire interface."

### Iteration Guide

1. Start with `{colors.background}` white as the absolute base — resist adding any tint or warm-white surface before exhausting the pure white canvas
2. Use `{colors.ink}` for all text, borders, and CTA fills; introduce `{colors.ink-secondary}` only for secondary information registers
3. Apply `{typography.button-ui}` uppercase with 0.1em tracking on all CTAs — interactivity is signaled by transform and tracking, never by color
4. Keep shadows at Level 0 (none) for all product and brand UI; add `{colors.shadow-soft}` overlays only on drawers and modals that float above the page
5. Set `{rounded.none}` globally and do not override for any brand component
6. Reserve `{colors.primary}` green for the announcement bar token only — it is a scent not a palette; any additional green usage breaks the quiet luxury register
7. Photography is the design — ensure images bleed to container boundaries with no decorative frame, and treat `{spacing.2xl}` or greater as the minimum breathing room between editorial sections

---

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