# Le Labo · Design system migration spec

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

> This site is a masterclass in using photography and typography to establish a premium, artisanal brand identity without relying on a wide color palette.

## 1. Identity DNA

The design system for Le Labo is built as a refined, dark apothecary laboratory. It is a space where the raw, tactile qualities of fragrance materials meet the stark clarity of modern minimalism, creating an environment that feels both artisanal and luxuriously precise.

**One-liner:** A premium fragrance brand presenting a raw, editorial aesthetic through moody photography and stark typography.
**Keywords:** artisanal · raw · apothecary · luxury · fragrance
**Analogy:** A refined, dark apothecary laboratory where raw materials meet modern minimalism.

## 2. Color

The palette is a study in high-contrast monochrome, relying on a strict interplay of black, white, and muted gray. This stark foundation ensures that the textured, moody photography—which serves as the primary visual language—remains the undisputed focus.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#595959` | placeholder |
| `--muted-soft` | `#424242` | weak hint |
| `--line` | `rgba(51, 51, 51, 1.0)` | divider |

**Color principle:** High-contrast monochrome palette relying on white text over dark, textured photography.

The principle is restraint; color is absent to allow texture and light to communicate brand character.

## 3. Typography

Typography is exclusively a bold, geometric grotesque-sans, applied with heavy use of uppercase for headings and labels. This typographic voice is authoritative and architectural, with wide letter-spacing on smaller text creating a deliberate, label-like quality.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 30px | 1.0 | 900 | 0px | Logo and main headings |
| heading | 18px | 1.1 | 700 | 0.5px | Section headings |
| body | 14px | 1.3 | 400 | 0px | Standard body text and UI labels |

**Type rules:**
- Heavy use of uppercase for headings and labels.
- Wide letter-spacing applied to smaller uppercase text.

## 4. Spacing

The spatial rhythm is moderate, marked by generous padding within primary containers that allows content to breathe against its atmospheric backdrop.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Moderate rhythm with generous padding in primary containers.

## 5. Surfaces

Surfaces are defined by their photographic texture rather than decorative UI elements. Depth is suggested through subtle, crisp shadows and a consistent, thin border that frames key components with graphic precision.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0 2px 4px rgba(0,0,0,0.1)
- **Borders:** 1px solid rgba(51, 51, 51, 1.0)

## 6. Layout

The foundational layout is a centered column that commands the viewport. This skeleton is overlaid on full-width background imagery, allowing the atmospheric photography to establish context and mood before the structured content is engaged.

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

**Skeleton:** Centered column layout with heavy use of full-width background imagery.

## 7. Motion & Interaction

Motion is functional and immediate, governed by a philosophy of understated feedback. Fast opacity transitions on hover and click states provide necessary interaction cues without introducing complex or distracting animation.

- **Durations:** micro 100ms · small 300ms · medium 0ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Fast opacity transitions on hover.
  - No complex entry animations observed.

- **Hover:** Opacity change on interactive elements.
- **Click:** Immediate state change with no complex feedback.
- **Transition:** All properties transition quickly (0.1s - 0.3s).
- **Keyboard:** Standard focus ring behavior implied.

## 8. Voice & Don'ts

The editorial voice is direct, authoritative, and understated, mirroring the starkness of the visual system. Headlines are short, punchy uppercase statements, and calls to action are all-caps, high-contrast commands.

- **Tone:** Direct, authoritative, and understated.
- **Headline style:** Short, punchy uppercase statements.
- **CTA style:** All-caps, high-contrast buttons that command attention.
- **Avoid:** Playful language / Bright colors / Decorative elements

### Don'ts
- ❌ Don't use vibrant accent colors — screenshot shows a strictly monochrome palette.
- ❌ Don't use rounded corners on primary buttons — screenshot shows sharp, rectangular edges.
- ❌ Don't use serif fonts for primary headings — screenshot shows a bold, geometric grotesque-sans.
- ❌ Don't clutter the interface with many small icons — screenshot shows a minimalist approach.
- ❌ Don't use light, airy backgrounds — screenshot features dark, moody, and textured photography.
- ❌ Don't use lowercase for primary call-to-action buttons — screenshot shows all-caps text.

The system deliberately rejects playful language, vibrant accents, and decorative elements to maintain its austere, artisanal integrity.

## System Prompt (paste into AI tool)

```
This is a premium fragrance brand site with a dark, editorial aesthetic. It uses a high-contrast monochrome palette (Black #000000, White #FFFFFF, Muted #333333) over full-bleed, moody photography. Typography is exclusively bold, uppercase grotesque-sans (like the declared Bell Gothic Std). Key hex colors are #000, #FFF, and #333. Critical donts: Do not use vibrant accents, do not use rounded corners on buttons, and do not use lowercase for CTAs. The design is minimalist, focusing on the texture of the imagery and the starkness of the typography to convey artisanal luxury.
```
