Does Bottega Veneta have a brand color in its digital system?

No — and that absence is the point. The captured marketing surface exposes only achromatic values: ink black, mid graphite, pure white, and a handful of mid-range grays used for accessibility-compliant secondary text. Bottega Veneta's distinctive deep-green leather is a material brand signal that does not appear as a UI token. The brand chose to keep all chromatic energy inside the product photography rather than injecting a signature color into the digital chrome. This is the inverse of the approach taken by peers like Hermès (orange) or Loewe (warm cream); Bottega Veneta treats color as belonging to the object, not to the interface.

What typeface does Bottega Veneta use on its site?

Bottega Veneta runs a proprietary webfont family served as bottegaveneta-regular-webfont and bottegaveneta-bold-webfont, falling back to Arial and sans-serif. The regular weight (400) is used at 14px / 22px line-height for every surface — navigation links, section headings, body paragraphs, and footer text are typographically identical. The bold weight (700) appears at the same 14px size with uppercase text-transform on section anchors like category labels. There is no larger display size in the captured surface; a 24px or 32px display tier does not exist in the extracted typography. The nearest open-source substitute is Helvetica Neue at 400 and 700 weights, matching the neutral geometric proportions.

What corner-radius style does Bottega Veneta use?

The system is essentially zero-radius. The only border-radius value captured in the extraction is 7px, appearing exactly once on a utility element (likely a cookie or swiper control, not a primary UI component). Every visible container — the search field, the newsletter input, the navigation bar, editorial photo frames — is hard-edged with no rounding. This is consistent with luxury fashion convention: the hard edge signals precision and craft, while rounding implies the soft accessibility-first UX conventions of consumer SaaS. Comparable zero-radius systems include Aesop, The Row's digital presence, and Celine.

What spacing scale does Bottega Veneta use?

The captured spacing values cluster around a 12px base with 24px as the primary content gap. The most frequent padding seen is 0 16px (horizontal scroll bar and sub-menu gutter), 12px (modal and tile spacing), and 24px (section-to-section). There is no 4px or 8px micro-spacing tier in the captured marketing surface — the system skips the dense micro-grid that dev-tools and SaaS products use and opts instead for a sparser 12/24px rhythm that matches the white-space-forward luxury convention. Footer column spacing sits at 24px top-bottom, matching the editorial 24px module.

Can I use this DESIGN.md to build a luxury fashion e-commerce interface?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Bottega Veneta's achromatic discipline: pure white canvas as a light table, hard-edged zero-radius components, a single 14px proprietary webfont at two weights, and no UI color injection. The one important caveat: the 'photography-as-brand' move requires full-bleed high-fidelity product imagery to carry the system. Without it, the achromatic shell reads empty rather than assured. Most fashion and luxury e-commerce interfaces using this spec should plan to substitute bottegaveneta-webfont with Helvetica Neue or a comparable neutral geometric sans.

Bottega Veneta Design System

Bottega Veneta's marketing-site design system as a DESIGN.md file.

About Bottega Veneta DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source bottegaveneta.com

E-commerce & Retail

Bottega Veneta's marketing site is one of the most restrained luxury digital systems in operation. The homepage opens on a full-width photograph — a close crop of dark hair, the curve of a sunglasses arm — with the wordmark set small in the top-left corner in the brand's proprietary webfont. No hero text, no gradient overlay, no CTA floated over the image. The photograph fills the browser edge-to-edge and the only type on it is the navigation bar, rendered in the same 14px / weight 400 that the footer uses. The digital shell makes no bid for attention; it steps aside for the object.

This DESIGN.md packages the system as machine-readable tokens for React tooling. Inside: 12 color tokens covering an achromatic range from ink black through mid graphite to pure white, with no hue anywhere in the palette; 10 typography tokens running the proprietary bottegaveneta-regular-webfont (and its bold companion) at a single 14px base size across every role — hero heading, nav link, body paragraph, and label are typographically identical except for weight and case transformation; 5 spacing tokens on a loose 12–24px base; and 14 component definitions covering the flat-edged primary button, the zero-radius text input, the full-bleed hero section, the editorial photo grid, and the newsletter form.

Feed this file to Claude or Cursor and it reproduces Bottega Veneta's specific restraint: no radius, no shadow, no accent color, a single type size that refuses to hierarchize, and a white canvas that functions as a light table. The one move worth studying — and the one hardest to execute without flinching — is the decision to treat typography as a structural substrate rather than a communication tool. Every headline on the site is the same weight and size as the footer copyright. Authority comes from image scale, not typographic muscle.

What makes it distinct

Photography-as-brand-voltagezero chromatic UI elements; the image grid carries every emotional signal while the shell stays resolutely neutral
Flat 14px typographya single font size across nav, h2, body, and label, differentiated only by weight (400 vs 700) and case (none vs uppercase)
Achromatic disciplineonly three neutrals captured: ink black, mid graphite, and white; no tints, no tones, no brand color in the UI
Zero border-radiusevery container, input, and button is hard-edged; rounding appears once at 7px on a single utility element and nowhere else
Light-table shellthe page functions as a frameless white surface on which product photography is mounted; no chrome competes with the object being sold

Live at bottegaveneta.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

bottegaveneta.com

Explore Bottega Veneta

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Bottega Veneta design system FAQ

Common questions about Bottega Veneta's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Bottega Veneta — official site

Bottega Veneta's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.