LOEWE Design System

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

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.