Bottega Veneta Design System

Overview

Bottega Veneta's digital presence is an exercise in typographic withdrawal. Light-table restraint: the design system removes every element that might compete with the object being sold — no accent color, no display hierarchy, no radius, no decorative chrome — and leaves a white surface on which photography is mounted at full bleed. Where Burberry uses a beige heritage canvas and type-led editorial panels, and where Gucci employs gold wordmarks and chromatic category headers, Bottega Veneta treats the shell as neutral ground and gives the intrecciato grain and the product surface all chromatic authority.

The type system reinforces this withdrawal. Every text element on the page — the navigation link, the h2, the body paragraph, the newsletter label — renders in the proprietary bottegaveneta-webfont at 14px / weight 400 / 22px line-height. Section headings do not grow larger; they grow louder through uppercase text-transform and the bold companion font. There is no 24px or 32px display tier. The 14px h2 is the same height as the 14px footer. Authority on this page comes from composition and image scale, not from typographic hierarchy.

Key Characteristics:

• Achromatic palette — three neutrals: ink black, mid graphite, white. No hue. No brand color in the UI chrome; color belongs to the product photography.
• Flat 14px type across every role — nav, heading, body, label share one size; differentiation comes from weight (400 vs 700) and uppercase transformation only.
• Zero border-radius — every container is hard-edged. The single 7px radius captured appears on a utility widget (swiper control), not a primary UI component.
• No shadow tier — depth comes from image-to-white contrast, not elevation.
• Full-bleed editorial photo grid at multiple sizes — 2-up asymmetric splits, 1-up portrait fills, 3-up thumbnail rows — as the primary navigation surface.
• Newsletter input and footer share the same zero-radius, zero-background white field with a bottom-only 1px ink border separating input from label.
• Proprietary webfont served in two weights only — no intermediate 500 or 600 step.

Colors

Structural

• Ink ({colors.ink} — #000000): frequency 426. Used as text (190), border (190), gradient (46). The dominant system ink — appears as text, hairline border, and gradient mask over photography. There is no warm or cool tint; pure black carries every structural role.
• Ink Mid ({colors.ink-mid} — #333333): frequency 122. Used as text (61), border (61). The secondary text and border tone — sub-navigation labels, category anchor text, mid-weight column dividers. Neither black nor gray; the mid-gray that sits at 32% lightness.
• Ink Muted ({colors.ink-muted} — #767676): frequency 2. Used as text (1), border (1). Sparse — reserved for accessibility-threshold secondary labels where pure black would over-weight the hierarchy.
• Hairline Mid ({colors.hairline-mid} — #bfbfbf): frequency 2. Used as text (1), border (1). A light mid-gray for the lowest-contrast hairlines — input placeholders or utility widget tracks.
• Canvas ({colors.canvas} — #ffffff): frequency 25. Used as text (8), bg (9), border (8). The page floor — the light table on which photography is mounted. Pure white, no cream warmth shift.
• Surface Dark ({colors.surface-dark} — #151b17): frequency 1, bg only. A near-black with a faint green undertone — captures Bottega Veneta's signature deep green at its most muted digital expression. Appears on a single overlay panel; not a primary UI color but the only hint of the brand's material signature in the digital system.

Typography

Font Family

The system runs two proprietary webfonts: bottegaveneta-regular-webfont (weight 400) and bottegaveneta-bold-webfont (weight 700), both falling back to Arial and then the generic sans-serif stack. No variable-weight axis is declared. No secondary typeface — no serif, no monospace.

The most distinctive choice is the rejection of a display scale. Every extracted typography signature sits at 14px for heading, nav, and body roles. The single smaller tier is 12px for captions and footer footnotes. A 24px or 32px hero headline does not exist in the extracted surface.

Hierarchy

Substitutes

The bottegaveneta webfonts are proprietary and not publicly licensed. Helvetica Neue at 400 and 700 is the closest available substitute — the proportions, x-height, and cap height align closely at 14px. If Helvetica is not available, Inter at the same two weights transfers cleanly at 14px body size.

Layout

Spacing System

• Base unit: 12px — the dominant spacing quantum, appearing 5 times in the extracted padding values.
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 30px.
• Hero: zero padding — the full-bleed photograph extends to the browser edge.
• Card and tile padding: {spacing.sm} 12px internally; {spacing.lg} 24px between grid cells.
• Footer column padding: {spacing.lg} 24px top and bottom; columns separated by implicit whitespace rather than explicit gutters.

Grid and Container

• Hero section: full-bleed, no max-width constraint.
• Editorial photo grid: a mix of full-width single images, 2-up asymmetric splits (one portrait, one landscape), and 3-up thumbnail rows — the grid composition varies per campaign.
• Content sections: centered at approximately 1440px, with 16px horizontal margin on each side.
• Footer: multi-column grid (approximately 5 columns) with {spacing.base} (16px) horizontal gutters.

Rhythm

The page alternates between full-bleed image and contained text band in a near-one-to-one ratio. Editorial image fills beat text panels two-to-one — a rhythm that signals fashion-house practice (less copy, more image) rather than the copy-heavy SaaS pattern of alternating hero / feature-row / social-proof.

Elevation

The system has no shadow tier. Zero shadow values were captured in the extraction. Depth on this page comes entirely from two sources: the image-to-white contrast (photography lifted against the white canvas), and the single {colors.surface-dark} overlay panel for modal or drawer contexts. There is no box-shadow elevation vocabulary — cards and inputs sit flat against the canvas with no floating affordance.

Shapes

The radius philosophy is hard-edged: {rounded.none} 0px applies to every component in the system. Buttons are rectangular. Input fields are rectangular. The editorial photo tiles are rectangular. The 7px {rounded.sm} captured in the extraction belongs to the swiper carousel control — a utility widget, not a brand-layer component. The philosophy matches luxury fashion industry convention: the hard right angle reads as precision and craft. Rounding is associated with consumer-app approachability, which conflicts with the positioning.

Components

button-primary — Ink-black fill, white text, hard-edged {rounded.none}, 8×25px padding, 38px height. Appears as "Shop now" / "Add to bag" style CTAs overlaid on editorial photography or adjacent to product tiles.

button-secondary — White fill, ink-black text, 1px ink border, same geometry as primary. Used for secondary navigational actions.

top-nav — White canvas, ink text in {typography.nav-link}, 1px ink bottom border, 44px height. Houses the wordmark (flush left), the primary category links centered, and icons (search, account, bag) flush right. No background change on hover captured.

nav-link — Transparent background, ink text at {typography.nav-link} (14px / 400), 12px horizontal padding. The seven primary categories ("New", "Women", "Men", "Shoes", "Bags", "Jewellery", "Home") use the same font as body text — no weight or size promotion.

hero-section — Full-bleed white-canvas container, zero padding, zero radius. Holds the full-bleed hero photograph with the wordmark overlaid at top-left.

hero-heading — Ink text at {typography.heading-md} (14px / 400) — the same size as the body paragraph. Hero overlay captions do not use a larger type size.

body-paragraph — Ink text at {typography.body-md} (14px / 400 / 22px). The default running-text style.

body-paragraph-muted — Muted ink {colors.ink-muted} at {typography.body-sm} (12px). Footer legal footnotes and sub-caption text.

section-label — Bold uppercase label at {typography.label-md} (14px / 700). The only visual promotion in the typographic system — uppercase replaces size hierarchy.

card — White canvas, ink text, hard-edged, 12px internal padding, 1px ink border. Product cards in grid layout.

photo-tile — White canvas container, zero padding, zero radius. The editorial photo tile in the 2-up or 3-up grid — holds one image at 100% of the tile width.

text-input — White canvas, ink text, zero border-radius, 4px vertical / 0px horizontal padding, 30px height, ink border. The newsletter email input renders without a box border — a bottom-only ink underline marks the field boundary.

newsletter-form — White canvas, 20px vertical padding. Holds the newsletter label and input side-by-side.

footer — White canvas, mid-graphite {colors.ink-mid} text, {typography.body-sm} (12px), 24px padding. Five columns: Store locator, Newsletter, brand links, international, and legal. No background color shift from the page canvas.

Do's and Don'ts

Do treat photography as the sole carrier of chromatic identity. The design system provides a neutral achromatic shell; every emotional and brand signal comes from the campaign imagery. If the photography changes, the brand expression changes — the UI does not compensate.

Do use {typography.heading-label} (14px / 700 / uppercase) as the only hierarchy promotion available. Size increase is not part of this system; the only typographic distinction is weight and case. Resist the impulse to add a 24px or 32px display tier.

Do respect the zero-radius convention. Every container, input, and button uses {rounded.none}. The single 7px radius in the extraction is a utility widget anomaly; it does not represent the brand's geometric intent.

Do keep the footer on the same white {colors.canvas} as the page body. The footer does not use a gray or dark background; it continues the light-table surface and separates from body content by a {colors.ink} top-border hairline only.

Don't introduce a brand-color accent into the UI chrome. Bottega Veneta's deep green, which defines the physical brand, does not appear as a UI color — only as {colors.surface-dark} (#151b17) in a single modal overlay. Adding a green CTA button or a green link-state would conflict with the system's deliberate color withdrawal.

Don't add shadows to cards or buttons. The system has zero captured shadow values. Elevating components with box-shadow introduces a consumer-SaaS depth convention that conflicts with the flat-surface philosophy. Use a 1px {colors.ink} border to delineate surfaces instead.

Don't set nav links at a different size than body text. In this system the nav link ({typography.nav-link}, 14px) is identical in size to the body paragraph. Promoting nav links to 16px or 18px would import a hierarchy convention the brand explicitly rejects.

Don't use {colors.ink-muted} (#767676) for anything other than accessibility-mandated secondary text. It appears only twice in the captured surface. Using it for headers, decorative rules, or card backgrounds would dilute the binary ink/canvas contrast that defines the system.

Known Gaps

• Brand green as a material color: Bottega Veneta's signature deep green appears in physical products and brand identity materials but is absent from the digital UI token set. The single {colors.surface-dark} (#151b17) hint is the closest digital expression and appears on one overlay panel only.
• Hover and active states: no hover capture was available in the extraction; button and link hover treatments are not represented in the components.
• Mobile layout: the extraction captures the desktop viewport (1440px). The mobile responsive layout, which collapses the multi-column photo grid to a single-column stack, is not represented.
• Product page: this DESIGN.md captures the marketing homepage only. The product detail page (PDP), the size-selector, the bag drawer, and the checkout flow carry their own surface tokens not represented here.
• Dark-mode or campaign overrides: seasonal campaigns (runway shows, lookbooks) may inject overlay panels that deviate from the achromatic baseline — these are not represented.
• Motion: the site uses scroll-triggered fade-ins and carousel transitions; easing curves and durations are not captured.
• Accessibility states: focus rings, keyboard-navigation indicators, and error-state styling on the newsletter form are not captured from the marketing surface.