---
name: Aimé Leon Dore
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#181818"
  neutral: "#E4E4E4"
  bg-quiet: "#F7F7F7"
  muted-soft: "#C4C4C4"
  line: "rgba(228, 228, 228, 1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "1.4px"
  body:
    fontFamily: neo-grotesque-sans
    fontSize: 14px
    lineHeight: 1.7
    fontWeight: 400
    letterSpacing: "0.6px"
  caption:
    fontFamily: neo-grotesque-sans
    fontSize: 10px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "1.5px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A minimalist, high-end fashion e-commerce site prioritizing cinematic editorial photography over UI elements.

*A curated gallery of a premium heritage lifestyle brand*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#181818`)** — uses `ink` token
- **Muted (`#E4E4E4`)** — uses `muted` token
- **Borders (`rgba(228, 228, 228, 1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Strict spacing system with generous margins within modal and header to allow breathing room.

## Elevation & Depth

- Borders: Extremely minimal borders used only for separating distinct elements like input fields, buttons, and menu dividers.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Clean, rectangular buttons with solid black fills for primary actions, stark white backgrounds with black borders for secondary actions.
- **card:** Not visible in the primary view, but implied to be grid-based and borderless based on editorial styling.
- **chip:** Not present.
- **input:** Simple, border-bottom only input fields.
- **hero:** Full-bleed cinematic video or photo hero with a fixed header overlay featuring the brand name and minimal navigation icons.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```