# Loewe · Design system migration spec

> Source: https://www.loewe.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in luxury e-commerce design, demonstrating how powerful, high-quality imagery and extreme restraint in UI can create a premium brand experience.

## 1. Identity DNA

Like a high-fashion magazine spread brought to life, the system constructs its world through stark contrast and generous negative space. Every element exists to frame the photograph, not compete with it.

**One-liner:** A premium fashion house site that pairs large-scale photography with minimalist chrome to elevate product storytelling.
**Keywords:** luxury · fashion · editorial · craft · playful
**Analogy:** A high-fashion magazine spread brought to life.

## 2. Color

The palette is a study in restraint: a monochrome foundation of pure black and white lets the product imagery command full attention. A single, vibrant cyan accent appears only at the brand's signature, acting as a quiet but unmistakable punctuation mark.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--accent` | `#00AEEF` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Stark black and white base that lets rich photographic imagery dominate, punctuated by a singular, bold cyan accent.

The governing principle is photographic dominance; color serves as frame, not subject.

## 3. Typography

The typographic voice is singular and geometric, using Avus across every scale from massive hero headlines to discreet metadata. Hierarchy is established not through weight or varied font families, but through deliberate size relationships and generous vertical breathing room.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.0 | 400 | 0 | Large hero titles |
| heading | 22px | 1.15 | 400 | 0 | Section headings |
| body | 14px | 1.4 | 400 | 0 | Body text and navigation |
| caption | 13px | 1.3 | 400 | 0 | Small labels and metadata |

**Type rules:**
- Use Avus for all primary headings and UI elements.
- Maintain a strict typographic hierarchy with generous spacing between levels.
- Keep font weights regular or medium; avoid bold weights in standard text.

## 4. Spacing

Rhythm is measured on a consistent 4px base grid, with generous horizontal padding that creates a deliberate, unhurried pace for content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid with generous padding, often 24px horizontally, to create breathing room around content blocks.

## 5. Surfaces

Surface treatment is aggressively minimal. Shadows are absent, and the only division comes from thin, 1px solid black lines where absolute separation is required.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Minimal, using 1px solid black lines for subtle division where necessary.

## 6. Layout

The layout skeleton is that of a full-bleed editorial spread, where large photography dominates the viewport. A fixed top navigation bar anchors the experience while content flows with magazine-like spaciousness.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A full-bleed, magazine-style layout dominated by large imagery, with generous whitespace and a fixed top navigation bar.

## 7. Motion & Interaction

Motion is treated as a functional polish rather than a decorative layer. Transitions are smooth and predictable, using opacity fades and subtle transforms to reveal content without disrupting the visual hierarchy.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0, 0, 0.3, 1)`
- **Patterns:**
  - Smooth opacity transitions for revealing content.
  - Subtle transform animations for navigation menus and overlays.
  - Flex-basis transitions for expanding content sections.

- **Hover:** Subtle opacity changes or visual reveals, maintaining the site's refined feel.
- **Click:** Smooth transitions and state changes, often revealing more text or a new view.
- **Transition:** Use cubic-bezier(0, 0, 0.3, 1) for most transitions to ensure smooth, non-jarring movement.
- **Keyboard:** Standard focus states are likely implemented for accessibility, though not explicitly detailed in the static views.

## 8. Voice & Don'ts

The editorial voice is confident and slightly poetic, speaking directly in declarative headlines. Calls to action are deliberately understated, often just a word and a small triangle icon, trusting the user's intent.

- **Tone:** Confident, sophisticated, and slightly poetic.
- **Headline style:** Direct, declarative, and often evocative, using large, clean typography.
- **CTA style:** Subtle and integrated, using a small triangle icon (▸) next to text links rather than prominent buttons.
- **Avoid:** Avoid cluttering the interface with unnecessary UI elements or decorative graphics. / Avoid using heavy drop shadows or complex gradients. / Avoid jarring or abrupt animations.

### Don'ts
- ❌ Don't use drop shadows — screenshot shows flat, clean layouts.
- ❌ Don't use rounded corners on containers — screenshot shows sharp, zero-radius edges.
- ❌ Don't use bold font weights for body text — screenshot shows regular weight text.
- ❌ Don't use complex gradients — screenshot shows solid colors and clean photography.
- ❌ Don't use a wide, filled button style for primary actions — screenshot shows minimalist text links.
- ❌ Don't overcrowd the layout with multiple columns of text — screenshot shows generous whitespace.

The system deliberately forgoes visual decoration—no gradients, no rounded corners, no filled buttons—to preserve the purity of the photographic narrative.

## System Prompt (paste into AI tool)

```
You are designing a premium fashion house website. The aesthetic is editorial and photographic, dominated by large imagery and minimalist UI. Key colors are a clean white (#FFFFFF) background, black (#000000) text, and a singular, bold cyan (#00AEEF) accent for the brand name. Typography uses a geometric sans-serif (Avus) across all scales, from massive display titles to small navigation text. Critical don'ts: Never use drop shadows on elements. Never apply rounded corners to containers. Never use bold font weights for standard body copy. The layout is magazine-style with generous whitespace and full-bleed imagery. Interactions should be smooth and subtle, using cubic-bezier easing.
```
