---
version: alpha
name: "LOEWE"
website: "https://www.loewe.com"
description: >-
  A Spanish luxury leather-goods house under LVMH whose marketing site runs a
  monochrome system of pure black and near-white — ink black for all type and
  borders, a warm grey canvas for product-image backgrounds, no brand-color
  accent anywhere in the chrome — rendered entirely in Avus, a proprietary
  geometric sans built for the house, at a single weight of 400 across display,
  body, and navigation. The design system trusts full-bleed editorial photography
  and a 0px border-radius policy to carry every visual decision; the only
  non-neutral color the CSS declares is a utility amber-yellow used once as a
  video-player accent, and a deep crimson for form validation.

seo:
  title: "LOEWE Design System for React — ink black on near-white, Avus, 14 components"
  metaDescription: "LOEWE's marketing design system as a DESIGN.md file: pure-monochrome palette, proprietary Avus typeface at weight 400 only, 0px radius everywhere, full-bleed editorial photography. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Monochrome discipline — the entire chrome runs on two tones: ink black and near-white grey; no brand color ever appears in the UI layer"
    - "Single weight across all tiers — Avus runs at 400 for display (22px), body (14px), navigation, and caption; weight is not used as a hierarchy signal"
    - "Zero radius everywhere — 0px border-radius on every element including buttons, cards, and images; the square edge is the identity"
    - "Photography as decoration — all chromatic expression lives in the campaign imagery, never in the system chrome"
    - "Hairline economy — borders render at 1px black with low opacity, used to subdivide the page rather than to indicate elevation"
  tags:
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    LOEWE's marketing site is an act of deliberate restraint that almost no luxury brand attempts at this scale: the entire interface chrome is two colors — ink black and near-white. No accent. No gold. No brand-voltage CTA. The LOEWE logotype renders in pure black at the top-left of a white canvas; product campaigns occupy full-bleed editorial panels below; the only color on the page comes from photography. Where Gucci saturates its site with dark bottle-green and Prada runs an editorial-red accent, LOEWE withholds entirely — the implication being that the objects themselves carry all the chromatic authority worth claiming.

    This DESIGN.md packages the system into a machine-readable spec for React and AI tools. Inside: 12 color tokens drawn from a monochrome palette of ink black, near-white, and a gradient-grey middle tone; 10 typography tokens running Avus (the house's proprietary geometric sans) at weight 400 across every tier — display at 22px, body at 14px, caption at 12px — with no weight variation for emphasis; a 4-token radius scale that starts and ends at 0px; 8 spacing tokens on a 4px base; and 14 component definitions covering the top-nav, product card, editorial heading, and hairline-divided navigation grid.

    Feed this file to Claude or Cursor and it will reproduce LOEWE's specific moves: pure-black type on near-white canvas, Avus at a flat 400 weight, 0px corner radius on every surface, and photography as the sole chromatic voice. The one move worth borrowing only if your brand can sustain it: the refusal to hold a voltage color in reserve. Most brands treat restraint as an accent strategy — LOEWE treats it as a total system property, which reads as categorical confidence rather than minimal branding.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.loewe.com"
      title: "LOEWE — official site"
      description: "LOEWE's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is LOEWE's primary brand color?"
      answer: "LOEWE has no brand accent color in its marketing site chrome. The entire UI system runs on ink black and near-white grey. The only chromatic values declared in the site's CSS are a utility amber-yellow used once as a video-player accent bar, a deep crimson for form validation, and standard utility colors (green for success, orange for warning) that never appear on the live page. The brand's chromatic expression lives entirely in its campaign photography — bags, garments, and accessories in rich terracottas, greens, and golds — never in the UI layer itself."
    - id: "typography"
      title: "What typeface does LOEWE use, and what should I use as a substitute?"
      answer: "LOEWE runs Avus, a proprietary geometric sans-serif built exclusively for the house. It appears at weight 400 across every typographic tier — display headlines at 22px, body copy at 14px, navigation at 14px, and captions at 12px. Weight variation is not used as a hierarchy device; scale and spacing carry the hierarchy instead. There is no italic or condensed variant visible in the captured marketing surfaces. The closest open-source substitute is Futura PT at the same weight; both have the same tall-cap geometric construction and similar x-height. Inter does not substitute well here — its proportions read too rounded compared with Avus's more mechanical geometry."
    - id: "radius"
      title: "What corner-radius does LOEWE use?"
      answer: "LOEWE uses 0px border-radius on every surface — buttons, product cards, image frames, navigation dropdowns, and form inputs all present as hard squares. The extracted radius data confirms zero occurrences of any non-zero radius value across 1,514 scanned elements. The square-corner policy is the most direct expression of the brand's architectural sensibility: a refusal to soften or domesticate any edge. Unlike fashion peers Jacquemus (rounded organic edges) or Valentino (partial pill CTAs), LOEWE holds the 0px line everywhere in the system."
    - id: "layout-grid"
      title: "How does LOEWE's product-grid layout work?"
      answer: "The marketing homepage uses a sequence of full-bleed editorial panels with no padding at the viewport edge — each campaign image fills its containing block. Within panels, product grids use a generous horizontal rhythm with the product navigation subdivided by 1px hairline rules in near-black at 10% opacity. The spacing scale runs on a 4px base with dominant tokens at 8px (product metadata), 24px (section spacing), and 48px (major panel bottom margins). Content text runs left-aligned in a column constrained to approximately 340px wide at desktop, leaving the right side of each panel for product imagery."
    - id: "elevation"
      title: "How does LOEWE handle elevation and shadows?"
      answer: "LOEWE uses no shadows or elevation in its marketing system. Hierarchy is communicated entirely through hairline rules (1px black at various opacity levels: 10% for light dividers, 45% for heavier separators, 30% for page overlays) and typographic scale. There are zero drop-shadow declarations in the captured surfaces. This is consistent with the brand's overall philosophy of flat, graphic surfaces where visual weight comes from photography and spatial proportion rather than from depth simulation."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#000000"
  canvas: "#f6f6f6"
  surface-1: "#ebebeb"
  hairline: "#000000"
  accent-yellow: "#f2ca56"
  error: "#ae3433"
  success: "#56923b"
  warning: "#d87d41"

typography:
  display-xl:
    fontFamily: "Avus, \"Yu Gothic\", \"Hiragino Kaku Gothic Pro\", Meiryo, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  display-md:
    fontFamily: "Avus, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
    letterSpacing: 0
  body-lg:
    fontFamily: "Avus, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  body-md:
    fontFamily: "Avus, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0
  body-sm:
    fontFamily: "Avus, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0
  label-md:
    fontFamily: "Avus, \"Yu Gothic\", \"Hiragino Kaku Gothic Pro\", Meiryo, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0
  button-md:
    fontFamily: "Avus, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0
  nav-link:
    fontFamily: "Avus, \"Yu Gothic\", \"Hiragino Kaku Gothic Pro\", Meiryo, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0
  caption:
    fontFamily: "Avus, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0
  hero-heading:
    fontFamily: "Avus, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0

rounded:
  none: "0px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "80px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "8px 24px"
    height: "36px"
    border: "0"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "8px 24px"
    height: "36px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "48px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px 0px 16px"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px"
    borderColor: "{colors.hairline}"
  product-image-bg:
    backgroundColor: "{colors.canvas}"
    rounded: "{rounded.none}"
    padding: "0px"
  product-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    padding: "8px 0px"
  text-input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "8px 0px"
    height: "36px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: "24px 24px"
  caption:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
---

## Overview

LOEWE's marketing site is defined by a single disciplined absence. **Colorless authority.** The entire UI chrome runs on ink black and near-white with no accent, no CTA voltage, no chromatic badge to signal the brand's LVMH prestige. Where Gucci's site leans on deep bottle-green, Prada deploys editorial red, and Burberry holds a beige palette as its identity signal, LOEWE withholds every non-photographic color from the interface — the implication being that the objects themselves carry all the chromatic authority worth claiming. The logotype sits at the top-left of a bare canvas in plain black ink, and the site's role is to get out of the way of the campaign imagery.

The typographic system reinforces the withholding. Avus, a proprietary geometric sans built exclusively for the house, runs at weight 400 across every tier — 22px display, 14px body, 12px caption — with zero weight variation for emphasis. Scale and position carry the hierarchy; weight does not. A 22px/400 headline and a 14px/400 product label are distinguished only by their size and vertical position, never by stroke thickness. The border-radius property is 0px everywhere in the system, without exception.

**Key Characteristics:**
- Pure ink black (`{colors.ink}`) carries 466 text occurrences and 466 border occurrences — every typographic and structural chrome element in the system.
- Near-white canvas (`{colors.canvas}`) and mid-grey surface (`{colors.surface-1}`) function together as a product-image gradient background.
- Avus at weight 400 across all tiers — display (22px), body (14px), caption (12px) — the only family and the only weight.
- 0px border-radius on every element: buttons, cards, input fields, navigation dropdowns, image frames.
- Full-bleed editorial photography carries all chromatic expression; the system chrome is deliberately colorless.
- Hairlines render at multiple opacities of black — 10%, 30%, 45% — to produce a range of visual weight from ghost dividers to structural borders without introducing any color.
- 4px base spacing unit with dominant tokens at 8px (metadata), 24px (section spacing), and 80px (major vertical rhythm).

## Colors

### Canvas

- **Canvas** (`{colors.canvas}` — #f6f6f6): frequency 79 (gradient fill on product-image backgrounds, page background). The warm near-white that underlies all product photography panels. Not pure white — the slight grey warmth keeps the product imagery from reading against an overexposed field.
- **Surface-1** (`{colors.surface-1}` — #ebebeb): frequency 46, all inside CSS gradients. Paired with the canvas as the dark end-stop of the product-image gradient (canvas to surface-1). Not used as a standalone fill.

### Ink

- **Ink** (`{colors.ink}` — #000000): frequency 933. Used as text (466), border (466), background (1). The sole text and border color in the system — all type, all hairlines, all UI borders in pure black. Wired into `--lw-color-text-primary`, `--lw-color-border-primary`, and `--lw-color-black`. At various alpha levels (58%, 45%, 30%, 10%) this single black produces the full range of secondary icon tints, structural separators, overlay tones, and ghost dividers — the CSS exposes these as opacity variants rather than distinct color values.

### Utility (non-decorative)

- **Accent Yellow** (`{colors.accent-yellow}` — #f2ca56): frequency 1, background only — the video-player accent bar wired as `--lw-color-background-accent` and `--lw-color-yellow`. Not a brand color; functional to the embedded video player only.
- **Error** (`{colors.error}` — #ae3433): frequency 0 in captured render. Declared for form validation states as `--lw-color-utility-negative` and `--lw-color-border-error`.
- **Success** (`{colors.success}` — #56923b): declared as `--lw-color-green`. Not rendered on the captured marketing surface.
- **Warning** (`{colors.warning}` — #d87d41): declared as `--lw-color-orange` and `--lw-color-utility-warning`. Not rendered.

## Typography

### Font Family

The system runs a single proprietary family: **Avus**, a geometric sans built for LOEWE. The declared stack includes CJK fallbacks (`"Yu Gothic"`, `"Hiragino Kaku Gothic Pro"`, Meiryo) for Japanese character support — a signal of the brand's significant presence in the Asia-Pacific luxury market. There is no secondary typeface, no serif tier, no italic variant in the captured surfaces.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 22px | 400 | 20px | Collection headings, editorial panel titles |
| `{typography.display-md}` | 18px | 400 | 25.2px | Sub-section headings |
| `{typography.body-lg}` | 18px | 400 | 18px | Navigation labels, single-line section headers |
| `{typography.body-md}` | 14px | 400 | 19.6px | Product descriptions, primary body copy |
| `{typography.body-sm}` | 12px | 400 | 16.8px | Caption rows, product metadata |
| `{typography.nav-link}` | 14px | 400 | normal | Navigation link labels |
| `{typography.button-md}` | 14px | 400 | 19.6px | CTA labels |
| `{typography.caption}` | 12px | 400 | 16.8px | Footer text, image credits |

### Principles

Weight 400 is the only weight in the system. Hierarchy is communicated exclusively through scale — a 22px headline reads above a 14px product label not because of stroke weight but because of size ratio. This is a deliberate departure from nearly every other luxury e-commerce system: Gucci runs semibold editorial headers, Burberry uses weight 500 for section titles. LOEWE holds flat. The result is a typographic voice that reads as spoken at the same volume throughout, with the photography providing the emphasis.

### Note on Font Substitutes

Avus is proprietary and not available to license. **Futura PT** at weight 400 is the closest open-source-adjacent substitute — same geometric construction, similar cap height. For a free alternative, **Jost** (Google Fonts) comes close at the 14px body tier. Avoid Inter — its rounded counters read too humanist compared with Avus's mechanical geometry.

## Layout

### Spacing System

- **Base unit:** 4px — with 8px as the dominant module.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 80px.
- **Dominant spacing values:** 8px appears 26 times (product metadata gaps, icon margins), 4px appears 24 times (tight internal padding on nav items).
- **Section horizontal padding:** 24px (`{spacing.lg}`) on content columns within editorial panels.

### Grid & Container

- **Full-bleed editorial panels:** campaign photography fills the full viewport width with no horizontal gutter. Each panel is an independent full-bleed image frame.
- **Product grid:** appears to use a 3-column layout within constrained container (~1200px max-width), with products subdivided by 1px hairline rules rather than gutters.
- **Navigation strip:** horizontal scrolling category navigation with items separated by hairlines and right-padded at 24px.

### Rhythm

The page alternates between full-bleed campaign imagery and constrained product navigation text. There is no atmospheric gradient between sections — each editorial panel butts directly against the next. Depth is absent; the layout reads as a sequence of framed photographs with text captions, not as a layered digital interface.

## Elevation

The system carries **no shadows** and no elevation. Depth is absent as a design property. The 24 shadow-related CSS variables in the custom property set are all wired to the Flowplayer video player library — not to any LOEWE UI element. The marketing chrome never lifts a surface above another; hairline rules at various opacities of black do the entire work of spatial separation. This is consistent with the brand's gallery-mode presentation — luxury retail display cases do not cast shadows on each other.

## Shapes

LOEWE runs an absolute **zero-radius policy**. The extracted radius data shows 0px (`--lw-border-radius-0`) as the sole declared value — no occurrences of any non-zero border-radius across 1,514 scanned elements. Buttons, product cards, image frames, navigation dropdowns, and form inputs all present as hard right-angle rectangles. This is not a minimalist approximation of rounding — it is a categorical statement. Where Jacquemus uses soft organic curves and most luxury e-commerce platforms at least apply a 2–4px card radius, LOEWE holds the 0px line as an architectural identity decision. The square corner is the brand's graphic signature in interface form.

## Components

**`button-primary`** — Ink-black fill with near-white text, 0px radius, 8×24px padding, 36px height. LOEWE's primary CTAs render as square black rectangles — no radius, no shadow, no hover-state gradient. The form matches the brand's graphic identity rather than any convention for "clickable affordance."

**`button-secondary`** — Transparent fill with ink text and a 1px black border, same 0px radius and sizing. Used for secondary navigation actions like "Shop all" and category filters.

**`top-nav`** — Near-white canvas surface with the LOEWE logotype flush left, category navigation center, and account/bag icons right. 48px height, 24px horizontal padding, 0px radius. A hairline rule at the nav bottom separates it from page content at near-zero opacity.

**`nav-link`** — Transparent background, ink text in `{typography.nav-link}` (14px / 400), 8px top/bottom padding. No hover state visible on the captured surface. Links read as pure typography, not as interactive affordances.

**`hero-heading`** — Ink text on a transparent background, `{typography.display-xl}` (22px / 400). Campaign panel titles name the collection (e.g., "LOEWE × On") — deliberately short, never descriptive.

**`body-paragraph`** — Ink text at `{typography.body-md}` (14px / 400, 19.6px line-height), 16px bottom padding. Product descriptions and editorial sub-copy.

**`card`** — Near-white canvas fill, 0px radius, no shadow, no padding on the image frame itself. Product cards carry the photography edge-to-edge with text metadata beneath in `{typography.body-sm}`.

**`product-image-bg`** — The linear gradient background (`linear-gradient(to right, {colors.canvas}, {colors.surface-1})`) used behind product photography as a neutral display field — both values are near-neutral greys without true color.

**`product-label`** — Transparent background, ink text in `{typography.body-sm}` (12px / 400), 8px top/bottom padding. Product name, price, and category metadata beneath each product card.

**`text-input`** — Transparent fill, ink text at `{typography.body-md}`, 1px bottom-only black border (no full border box), 8px vertical padding, 36px height. Inputs are underline-style — consistent with the brand's avoidance of enclosed rectangular form elements with rounded corners.

**`footer`** — Near-white canvas, muted-ink text, 24px padding. Navigation links mirror the top-nav category structure. Carries legal text in `{typography.caption}` (12px / 400).

**`caption`** — Transparent background, muted-ink text at `{typography.caption}`. Used for image credits, collection footnotes, and product metadata sub-labels.

## Do's and Don'ts

**Do** use ink black (`{colors.ink}`) for all text and borders — every typographic and structural element in this system runs on a single color. Introducing a grey text tone — even a dark neutral like 60% black — would break the binary discipline and add a hierarchy signal the system deliberately withholds.

**Do** hold border-radius at `{rounded.none}` (0px) on every surface. The square corner is an identity-level commitment, not a default that can be overridden for friendlier interactive affordances. Rounding a button to even 2px changes the brand reading.

**Do** use full-bleed photography as the sole chromatic element. The system is intentionally colorless so that campaign imagery has no competition from the chrome. Decorative colored backgrounds or brand-accented section dividers would break the gallery-mode presentation logic.

**Do** let size alone carry hierarchy. Avus at 400 weight runs from 22px display to 12px caption — the entire visual hierarchy is a scale ratio, not a weight or color shift.

**Don't** use `{colors.accent-yellow}` outside the video-player context — it is wired to `--lw-color-background-accent` and belongs to the Flowplayer embed, not to LOEWE's brand identity. Using it as a highlight or CTA accent would introduce the only non-photographic color into the chrome.

**Don't** render text at weights above 400. The Avus typeface was built for a single weight at varying scales; no bold or semibold variant is deployed anywhere in the system, and none is needed to achieve readability at the captured sizes.

**Don't** introduce box shadows or elevation effects. The system has zero shadow declarations on any LOEWE-owned element. Cards and panels sit flat on the canvas; any visible layering is a product of the photography's own depth.

**Don't** use `{colors.error}` outside form validation states. It is a utility token declared for error messages and input borders only — not a secondary brand accent.

## Known Gaps

- **Interactive states:** no hover, focus, or active states are captured on any element. The marketing site's primary interaction is photography-first navigation; LOEWE does not expose interactive affordances like hover highlights or focus rings on the captured surfaces.
- **Dark mode:** the marketing site is light-mode only. There is no dark-canvas variant, unlike LVMH peers such as Dior who run a dark editorial mode.
- **Product-page surfaces:** this DESIGN.md captures the homepage and collection landing pages. The product detail page (size selector, add-to-bag, color swatch) likely carries additional component tokens not visible on the captured surface.
- **Motion and animation:** the system uses motion transitions for category navigation and product reveals but the spec captures end-state values only. Easing curves and timing are not exposed in the static extraction.
- **Checkout and account surfaces:** the authenticated purchase flow and account management pages operate on a separate surface layer that was not captured.
- **Mobile breakpoints:** the extraction ran at 1440px desktop width. The brand's mobile layout (hamburger navigation, stacked product columns) is not represented here.
- **Typography weights in editorial content:** LOEWE's editorial magazine-style sub-pages and campaign features may deploy additional typographic treatments not visible on the main marketing site.