# Bottega Veneta — Marketing site Design Spec

> Source: bottegaveneta.com/en-us (live DOM, computed styles), 2026-07-25.
> 0 stylesheets blocked. Salesforce Commerce Cloud site — only 3 layout-only
> :root vars, so §2 is read from computed fills/text. Excluded as third-party
> widget chrome (promo/geo modal), NOT brand: a magenta `#d52484`, a pale blue
> `#d3dbe4` and `rgba(115,133,159,.5)` — recorded here rather than in §2 so the
> palette stays brand-only.
> Reality check: **the hint is wrong on the headline claim.** The queue said
> "bold parakeet-green minimalism, serif". Parakeet green is Bottega's *packaging
> and campaign* signature — it is **not on the website chrome at all**. The site
> is stark **white-and-black monochrome**, and the only green present is a very
> dark near-black #151b17 used as a section fill. "Minimalism" is right, and the
> wordmark is a high-contrast serif, but the running type is a **custom sans**
> (bottegaveneta-regular-webfont) at a strikingly small 10–14px.

## 1. Visual Theme & Atmosphere

Uncompromising luxury e-commerce restraint. Chrome is pure white with pure black
type, and every pixel of visual interest is ceded to full-bleed product and
campaign photography. Type is remarkably **small** — nav and body sit at 10–14px
where most brands use 16 — which reads as confidence rather than economy, and
labels are set UPPERCASE. Controls are square-cornered, outlined rather than
filled, and float directly over the imagery. The overall effect is a printed
lookbook with a shopping layer attached: quiet, precise and almost entirely
achromatic. Feels: austere, precise, editorial, confident.

## 2. Color Palette & Roles

| Token | Hex / value | Role / usage |
|---|---|---|
| black | #000000 | primary text and borders (3811 uses) |
| white | #ffffff | canvas, text over photography |
| ink-2 | #333333 | secondary text |
| ink-3 | #272727 | dark UI text |
| slate | #2b333f | cool secondary text |
| grey | #696969 | muted text |
| grey-2 | #555555 | muted text alt |
| grey-3 | #888888 | faint text |
| border-grey | #767676 | secondary border (18 uses) |
| off-white | #efefef | light surface |
| paper | #f6f8f9 | palest surface |
| green-black | #151b17 | dark section fill (the only "green" on the site) |
| scrim | rgba(0,0,0,.8) / .9 / .5 | image scrims |
| error | #eb0000 | validation error |

Rule: the site is achromatic. There is no accent colour — emphasis is achieved by
inverting black and white, never by hue.

## 3. Typography Rules

One custom family in two weights: **bottegaveneta-regular-webfont** and
**bottegaveneta-bold-webfont**, with Arial as the declared fallback. The wordmark
is a high-contrast serif lockup; running text is the sans. The defining trait is
**scale**: nav and body sit at **10–14px** with tight 12–22px leading, and
section labels are 14px UPPERCASE. Tracking is normal throughout — the restraint
comes from size, not letterspacing.

> Specimen substitution: previews load **Cormorant Garamond** for the serif
> wordmark and **Inter** for the sans (one bundled Google Fonts link). The site
> ships the licensed bottegaveneta webfonts.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Wordmark | BV serif lockup | ~22px | 400 | wide, UPPERCASE |
| Section label (h2) | bottegaveneta-regular | 14/22 | 400 | normal, UPPERCASE |
| Button | bottegaveneta-regular | 14/16.1 | 400 | normal |
| Nav | bottegaveneta-regular | 10/12 | 400 | normal |
| Body / caption | bottegaveneta-regular | 10/12 | 400 | normal |
| Emphasis | bottegaveneta-bold | 14 | 700 | normal |

## 4. Component Stylings

Buttons are **square (0px radius)**, 40px tall, `6px 28px 5px` padding, in a
strict inverse pair: black fill with white text, or white fill with black text,
both carrying a **1px #000000** border. Over photography they become white-bordered
transparent labels. Small utility chrome (modals, the cookie bar) uses a 2–3px
radius — the only rounding on the page. Nav is a single white bar: serif wordmark
left, small-caps category links centred, four icons right.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary | #000 fill, #fff text, 0px, 40px, 1px #000 | inverts / 0.2s linear | not defined | — | not observed |
| Secondary | #fff fill, #000 text, 0px, 1px #000 | inverts to black | not defined | — | — |
| Over-image label | transparent, 1px #ffffff, UPPERCASE | fills | not defined | — | — |
| Input | 1px #767676, small radius | — | not defined | — | — |

Focus note: **no custom focus ring was found** in the stylesheets. Record as an
accessibility gap and supply one (e.g. `0 0 0 2px #000000`, white over imagery)
rather than copying the omission.

## 5. Layout Principles

A slim promo bar above a white nav bar, then a full-viewport campaign image or
video with a pair of small outlined labels floated near the bottom centre. Below,
content is edge-to-edge photography in one- and two-up compositions with minimal
captions. Margins are tight; the imagery, not whitespace, does the framing.

## 6. Depth & Elevation

Radius scale is almost entirely **0px** for brand controls; 2px, 3px, 3.6px and
7px appear only on utility chrome, with 20/25/50px and 50% on small round icons.
Shadows exist only on modals — a layered
`rgba(0,0,0,.12) 0 19px 38px, rgba(0,0,0,.22) …` and a soft
`rgba(0,0,0,.2) 0 0 18px` — never on content. Borders carry the structure: **1px
#000000** (21 uses), 1px #767676 (18), 2px #000000 (7), 1px #ffffff over imagery.
No backdrop filters anywhere.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.5s | ease-out | image / panel reveals (dominant, 15x) |
| opacity | 1s | ease | slow photographic fades |
| all | 0.2s | linear | buttons, small chrome |
| opacity | 0.3s | ease | fades |
| visibility, opacity | 0.4s | ease | modal show/hide |
| height | 0.3s | cubic-bezier(0.25, 1, 0.5, 1) | accordions |

House feel: **slow and photographic** — 0.5s ease-out reveals and full 1s opacity
fades, with only small chrome moving quickly (0.2s linear). `@keyframes` are
utility rather than decorative: `fadeIn`/`fadeOut`, `spin`, `pop`,
`openpopindesktop`/`closepopindesktop`, plus a video.js spinner set (the site
uses video.js for campaign video). Custom easing `cubic-bezier(0.6, 0.2, 0, …)`
observed. No animation library detected. **No `prefers-reduced-motion` block**
(`reducedMotionBlocks:0`) — worth adding given two autoplaying videos.

## 8. Backgrounds, Effects & WebGL

Photography-led and effect-free. **27 raster layers** and **2 videos** carry the
page. The only gradients are utility: solid-colour `linear-gradient(#fff,#fff)`
and `linear-gradient(#000,#000)` used as fills, plus one legibility scrim
`linear-gradient(rgba(0,0,0,.8) 0, rgba(0,0,0,.7) 30%, rgba(0,0,0,.7) 70%,
rgba(0,0,0,0) 100%)`. No backdrop-filter, no canvas/WebGL, no grain.

## 9. Do's and Don'ts

### Do
- Keep chrome pure white and black; let full-bleed photography supply everything else.
- Set nav and body at 10–14px — the small scale is the signal of confidence.
- Use UPPERCASE for labels and section headings.
- Make buttons square (0px) and outlined, in strict black/white inverse pairs with a 1px border.
- Float small outlined labels directly over campaign imagery.
- Move slowly: 0.5s ease-out reveals, 1s opacity fades.

### Don't
- Don't add parakeet green (or any accent) to the site chrome — it is a packaging/campaign colour, not a UI colour.
- Don't round the brand controls; rounding belongs only to utility chrome.
- Don't put shadows on content; they exist only on modals.
- Don't scale the type up to conventional web sizes.
- Don't ship without a focus ring or a reduced-motion block; the site omits both.

## 10. Responsive Behavior

A very dense mixed-unit ladder (em-based Commerce Cloud tiers plus a px overlay):

| Breakpoint | What changes |
|---|---|
| 23.4375em / 400–425px | small-phone floor |
| 26.5625em / 550px | large phone |
| 48em (768px) | tablet: nav + grid |
| 64em (1024px) | desktop layout |
| 90em (1440px) | wide desktop |
| 120em (1920px) / 2250px | ultra-wide capping |

Also present: 0em, 47.99em, 63.99em, 64.0625em, 89.99em and px steps at 426, 530,
600, 640, 767, 769, 890, 896, 1023, 1230, 1280, 1700. No dark-scheme blocks
(`darkSchemeBlocks:0`), no container queries, no reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Ink `#000000` · Muted `#696969` · Border `1px #000000` / `#767676` · Dark band `#151b17` · **No accent colour**
- Font: BV custom sans (Inter stand-in) + serif wordmark (Cormorant Garamond) · Body: **10–14px** · Radius: **0px** controls / 2–3px utility · Control height: 40px
- Focus: none defined — add `0 0 0 2px #000` · Hover: black/white inversion, 0.2s linear · Reveals: 0.5s ease-out, 1s opacity

<bottega-veneta_design_language>
Uncompromising luxury e-commerce restraint, and strictly ACHROMATIC — pure white
#ffffff canvas with pure black #000000 type and borders, secondary greys #333333 /
#696969 / #767676, and one dark near-black green #151b17 as a section fill. There
is NO accent colour: parakeet green is a packaging and campaign signature that
never appears in site chrome, and emphasis is achieved by inverting black and
white, never by hue. All visual interest is ceded to full-bleed campaign
photography (27 raster layers, 2 videos) under a simple
rgba(0,0,0,.8)→transparent scrim. The defining typographic move is SCALE: one
custom sans (stand-in Inter) at a strikingly small 10-14px for nav and body with
12-22px leading, section labels 14px UPPERCASE, and a high-contrast serif wordmark
lockup; tracking stays normal, so the restraint comes from size alone. Buttons are
SQUARE at 0px radius, 40px tall, 6px 28px 5px, in strict inverse pairs with a 1px
#000000 border — black-on-white or white-on-black — becoming white-outlined
transparent labels over imagery; 2-3px radii appear only on utility chrome.
Shadows exist only on modals, never content; structure is carried by 1px borders.
Motion is slow and photographic: 0.5s ease-out reveals and 1s opacity fades, with
0.2s linear on small chrome. Feels: austere, precise, editorial. Avoid: adding
parakeet green or any accent to chrome, rounding brand controls, shadows on
content, scaling type up to conventional web sizes, shipping without a focus ring.
</bottega-veneta_design_language>