# Aimé Leon Dore · Design system migration spec

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

> This site is a masterclass in restrained luxury e-commerce design, relying entirely on strong photography, strict typography, and a rigid grid rather than UI embellishments.

## 1. Identity DNA

Aimé Leon Dore operates less as a conventional e-commerce platform and more as a curated gallery for a premium heritage lifestyle brand. The design system functions as a pristine white cube, a deliberate architectural frame whose austerity is designed to direct all focus toward the cinematic editorial photography within. Every structural decision—from the strict monochrome palette to the tracked-out typography—serves to reinforce this gallery-like reverence for the product.

**One-liner:** A minimalist, high-end fashion e-commerce site prioritizing cinematic editorial photography over UI elements.
**Keywords:** Editorial · Lifestyle · Minimalist · Premium
**Analogy:** A curated gallery of a premium heritage lifestyle brand

## 2. Color

The color system is a masterclass in restraint, employing a high-contrast monochromatic spectrum of pure whites, deep near-blacks, and subtle light grays. This neutrality ensures that the rich, varied palettes of the photographic campaigns remain the sole source of chromatic energy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F7F7F7` | quiet area |
| `--ink` | `#181818` | body text |
| `--muted` | `#E4E4E4` | placeholder |
| `--muted-soft` | `#C4C4C4` | weak hint |
| `--line` | `rgba(228, 228, 228, 1.0)` | divider |

**Color principle:** Stark monochrome palette relying on deep blacks, clean whites, and subtle grays to maximize the impact of editorial photography.

The principle is absolute: color is reserved for the product, while the interface remains a silent, neutral frame.

## 3. Typography

The typographic voice is structural and authoritative, built upon clean, geometric and neo-grotesque sans-serif foundations. A frequent use of uppercase and generous letter-spacing transforms functional labels into quiet declarations of premium quality.

- **Display:** geometric-sans
- **Body:** neo-grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 14px | 1.0 | 400 | 1.4px | Brand name and navigation links |
| body | 14px | 1.7 | 400 | 0.6px | Descriptive text and modal body copy |
| caption | 10px | 1.5 | 400 | 1.5px | Date/location text and secondary labels |

**Type rules:**
- Heavy use of uppercase for brand identity, navigation, and interactive labels
- Generous tracking applied to all text sizes for a premium feel
- Clean, wide-set typography paired with full-bleed photography

## 4. Spacing

A strict spacing rhythm creates the generous margins and deliberate breathing room essential to the layout's calm, gallery-like pacing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict spacing system with generous margins within modal and header to allow breathing room.

## 5. Surfaces

Surfaces are defined by absence rather than ornamentation. Depth is implied through clean separation and generous whitespace, with borders appearing only as minimal, functional dividers.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Extremely minimal borders used only for separating distinct elements like input fields, buttons, and menu dividers.

## 6. Layout

The layout skeleton is built for immersion, featuring full-bleed photographic compositions that command the viewport. A fixed, clean header overlays the scene, while content is revealed through large, sharp-edged rectangular modals.

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

**Skeleton:** Full-bleed immersive photography with a centered, fixed header overlay, interrupted by large, clean rectangular modals.

## 7. Motion & Interaction

Motion is employed as a subtle signal of polish, not as decoration. Smooth fade and transform transitions, guided by a specific cubic-bezier curve, ensure interface changes feel deliberate and premium without drawing attention away from the content.

- **Durations:** micro 200ms · small 400ms · medium 500ms
- **Easing:** `cubic-bezier(0.455, 0.03, 0.515, 0.955)`
- **Patterns:**
  - Smooth fade and transform transitions for modal appearances
  - Linear sliding animations for secondary UI elements

- **Hover:** Subtle opacity shifts or simple color inversions on interactive text and icons.
- **Click:** Immediate tactile feedback through clean state changes.
- **Transition:** Consistent use of 0.4s to 0.5s transitions across UI elements for a smooth, premium feel.
- **Keyboard:** Standard logical tab order with visible focus states implied by the highly structured, accessible layout.

## 8. Voice & Don'ts

The editorial voice is refined, premium, and intentionally understated. It mirrors the visual austerity: concise, all-caps headlines and direct, functionally clear calls to action.

- **Tone:** Refined, premium, and intentionally understated.
- **Headline style:** All-caps, tracked-out, concise, and highly structured.
- **CTA style:** Direct, uppercase, and functionally clear.
- **Avoid:** Vibrant or saturated colors / Rounded corners or soft shapes / Dense, cluttered layouts

### Don'ts
- ❌ don't use rounded corners — screenshot shows sharp, rectangular UI elements like buttons and modals
- ❌ don't add colorful accents — screenshot shows a strictly monochromatic, neutral palette
- ❌ don't use heavy drop shadows — screenshot shows flat, clean surfaces without depth effects
- ❌ don't use lowercase navigation — screenshot shows all-caps tracking for primary links
- ❌ don't use playful or decorative fonts — screenshot shows strict, functional sans-serif and geometric type
- ❌ don't use complex grid borders — screenshot shows clean, whitespace-driven separation

The system deliberately does not include rounded corners, saturated colors, playful typography, or heavy drop shadows, as each would compromise the refined, gallery-like atmosphere.

## System Prompt (paste into AI tool)

```
Design a premium e-commerce site with a heavy editorial focus. Use a strict monochromatic palette of deep blacks (#181818), crisp whites (#FFFFFF), and subtle grays (#E4E4E4) to let full-bleed photography lead the experience. Typography should rely heavily on clean, geometric and neo-grotesque sans-serifs, frequently utilizing uppercase and generous letter-spacing to convey luxury. Key interactions and buttons should be stark, rectangular, and minimal. Critical donts include avoiding rounded corners, saturated colors, playful typography, and heavy drop shadows to maintain a refined, gallery-like atmosphere.
```