# Lilnasx Jeanpaulgaultier · Design system migration spec

> Source: https://lilnasx.jeanpaulgaultier.com/en  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a luxury editorial e-commerce experience where the UI completely recedes to let the product photography take center stage.

## 1. Identity DNA

The design system operates on a single, powerful premise: the interface should recede, leaving the product photography as the only protagonist. Like a high-fashion editorial spread where the layout exists only to frame the subject, every typographic and structural decision here is subtractive, built on stark contrast and the brutalist honesty of a strict monochromatic palette.

**One-liner:** A stark, monochromatic luxury e-commerce experience that prioritizes editorial photography and brutalist typography.
**Keywords:** High Fashion · Avant-Garde · Avant-Garde · Luxury · Artistic
**Analogy:** A high-fashion editorial lookbook with stark contrast and bold typography.

## 2. Color

The color system is a study in restraint, consisting of pure black, various greys, and crisp white. This high-contrast monochromatic palette ensures that visual interest and emotional resonance are dictated entirely by the photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#828282` | main background |
| `--bg-soft` | `#E0E0E0` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#222222` | secondary text |
| `--muted` | `#828282` | placeholder |
| `--muted-soft` | `#BDBDBD` | weak hint |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast monochromatic palette that lets the photography dictate the visual interest.

The principle is clear: the interface provides the frame, but the imagery provides the soul.

## 3. Typography

Typography establishes a deliberate tension between avant-garde identity and functional clarity. A custom slab-serif commands editorial headlines, while all UI elements are set in a strict, uppercase grotesque-sans, creating a clear hierarchy between brand statement and utility.

- **Display:** slab-serif
- **Body:** grotesque-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 30px | 1.1 | 400 | -0.5px | Headlines and Newsletter Titles |
| body | 16px | 1.0 | 400 | 0px | Body Text |
| caption | 11px | 1.0 | 400 | 0.3px | UI Elements and Nav Links |

**Type rules:**
- Use the custom display font for all major headings to maintain the avant-garde brand identity.
- Navigation and UI labels are set in a strict uppercase grotesque-sans.
- Maintain tight line heights for display text to match the editorial aesthetic.

## 4. Spacing

Spacing follows a tight, 4px-based rhythm that enforces the strict grid layout of the product display, creating a disciplined visual cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Tight, 4px-based rhythm that respects the strict grid layout of the product display.

## 5. Surfaces

Surfaces are defined by stark, honest borders and a singular shadow treatment. Solid 1px black lines delineate grids and inputs, while a soft, neutral shadow provides minimal, functional depth without decorative flourish.

- **Radius:** sm 2px · md 2px · lg 2px · pill 999px
- **Shadows:**
  - 0 0 5px 0 rgb(128, 128, 128)
- **Borders:** Solid 1px black lines used for grids and inputs.

## 6. Layout

The layout skeleton is an edge-to-edge, two-column grid designed for immersive product presentation. It eliminates gutters and margins, allowing full-bleed editorial photography to dominate the viewport and merge seamlessly with the interface's structural lines.

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

**Skeleton:** Edge-to-edge photography split into a strict 2-column grid for products.

## 7. Motion & Interaction

Motion is applied with surgical minimalism, serving function over flourish. Transitions are subtle and smooth—fades for modal overlays and slight transforms for interactive feedback—ensuring the interface feels responsive without distracting from the static imagery.

- **Durations:** micro 150ms · small 200ms · medium 320ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-in for modal overlays.
  - Subtle transform transitions for interactive elements.

- **Hover:** Standard pointer cursor with minimal visual feedback on most elements.
- **Click:** Instant state changes for form inputs.
- **Transition:** Subtle opacity and transform transitions on hover states.
- **Keyboard:** Standard tab navigation for interactive elements.

## 8. Voice & Don'ts

The editorial voice is assertive and strictly professional, using short, all-caps headlines and direct commands for calls-to-action. This tone mirrors the visual austerity, rejecting any hint of playful or friendly language.

- **Tone:** Assertive, avant-garde, and strictly professional.
- **Headline style:** Short, punchy, all-caps statements or minimal product names.
- **CTA style:** Direct, all-caps commands like 'OK' or 'LOGIN'.
- **Avoid:** Playful language / Soft gradients / Friendly exclamation marks

### Don'ts
- ❌ don't use rounded corners — the design relies on sharp, brutalist rectangular edges.
- ❌ don't add drop shadows to cards — the layout uses a flat, borderless grid system.
- ❌ don't use multi-color gradients — the palette is strictly monochromatic with high contrast.
- ❌ don't use lowercase for navigation — the design strictly enforces uppercase for all UI labels.
- ❌ don't add decorative elements around buttons — the interface relies on solid black blocks.
- ❌ don't use center-aligned body text — the layout uses left-aligned typography for readability.

The system deliberately avoids rounded corners, multi-color gradients, and center-aligned body text, as these elements would contradict the raw, brutalist geometry at the core of the identity.

## System Prompt (paste into AI tool)

```
Design a high-fashion luxury e-commerce interface that feels like a premium editorial lookbook. Use a strict monochromatic palette (black, white, grey) where the photography provides all visual interest. Use a custom slab-serif for display text and a grotesque-sans for UI elements. Maintain a brutalist aesthetic with sharp rectangular buttons, 1px black borders, and full-bleed photography. Ensure all navigation and UI text is strictly uppercase. Key colors are #000000, #828282, and #FFFFFF. Avoid playful elements, rounded corners, and soft gradients to preserve the avant-garde brand identity.
```