# Louis Poulsen · Design system migration spec

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

> This site is a masterclass in editorial e-commerce, proving that a minimalist monochromatic palette paired with exceptional typography and photography can create a highly premium experience.

## 1. Identity DNA

The Louis Poulsen digital system is an editorial gallery for high-end industrial design. It operates like a well-curated museum wing, where the architecture of the page recedes to let the craftsmanship of the lighting pieces command attention.

**One-liner:** A premium lighting brand with a clean, editorial, and gallery-focused visual language.
**Keywords:** design · lighting · premium · architectural
**Analogy:** An editorial gallery for high-end industrial design

## 2. Color

The palette is strictly monochromatic, a deliberate void built from white, black, and neutral grays. Its purpose is to be invisible, creating a clean stage for the rich product photography to provide the only chromatic variation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F6F6F6` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(0,0,0,0.25)` | divider |

**Color principle:** High-contrast, monochromatic palette that lets rich photography and white space dominate.

The core principle is that color is a privilege reserved for the object, not the interface.

## 3. Typography

The typographic voice is built on a refined transitional serif for display headlines and a clean humanist sans-serif for text. This pairing establishes a tone of authoritative elegance, balancing historical gravitas with contemporary clarity.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 300 | -1.5px | Hero headlines |
| headline | 30px | 1.1 | 300 | -0.8px | Section titles |
| body | 14px | 1.5 | 400 | 0px | General text |

## 4. Spacing

All spacing follows a 4px base grid, creating a consistent, rhythmic structure.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with comfortable, generous whitespace for an editorial feel.

## 5. Surfaces

Depth is conveyed through photography and careful composition rather than simulated light or shadow. The system employs a flat surface language, relying on 1px borders and the inherent depth of the images themselves to define hierarchy.

- **Radius:** sm 2px · md 4px · lg 40px · pill 999px
- **Borders:** 1px solid rgba(0,0,0,0.25) for separators; heavy use of borders for interactive list items.

## 6. Layout

The layout skeleton is asymmetric and editorial, designed for cinematic impact. It orchestrates full-viewport hero sections, dense masonry-style photo grids, and full-bleed list areas to create a dynamic, magazine-like reading flow.

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

**Skeleton:** Asymmetric editorial layout with large hero images, multi-column masonry-style photo grids, and full-width list sections.

## 7. Motion & Interaction

Motion is restrained and purposeful, intended to confirm interaction without becoming spectacle. It follows a philosophy of subtle enhancement, using smooth ease-in-out transitions to maintain the site's elegant composure.

- **Durations:** micro 150ms · small 200ms · medium 350ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth hover transitions on links and list items, subtle scaling transforms on interactive elements.

- **Hover:** Subtle background or text color changes; active state indicators on category list items.
- **Click:** Clean state changes, minimal visual feedback to maintain elegance.
- **Transition:** Smooth ease-in-out transitions for most interactive states.
- **Keyboard:** Standard focus management, likely utilizing outline styles for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, premium, and evocative, focusing on the craft and heritage of lighting design. Communication prioritizes clarity and sophistication, avoiding clutter and any sense of casual playfulness.

- **Tone:** Confident, premium, and evocative, focusing on the craft and history of lighting design.
- **Headline style:** Elegant, all-caps serif typography with tight tracking.
- **CTA style:** Minimalist, often using simple arrows or uppercase sans-serif text.
- **Avoid:** Cluttered layouts / Loud or aggressive colors / Playful or overly casual language

### Don'ts
- ❌ don't use rounded corners — screenshot shows sharp 90-degree edges on all UI components.
- ❌ don't use drop shadows — screenshot shows flat surfaces relying on borders and photography for depth.
- ❌ don't use bright accent colors — screenshot shows a strictly monochromatic palette with black, white, and gray.
- ❌ don't use bold font weights — screenshot shows predominantly regular (400) and light (300) weights.
- ❌ don't use cluttered navigation — screenshot shows a minimal top bar with ample horizontal spacing.
- ❌ don't use heavy container padding — screenshot shows a layout that allows photography and text to sit near the viewport edges.

The system deliberately rejects decoration, opting instead for the purity of clean edges, flat surfaces, and unadorned typography.

## System Prompt (paste into AI tool)

```
This site is a premium editorial e-commerce experience for a high-end lighting brand. The design relies heavily on cinematic photography, generous whitespace, and a strict monochromatic palette of white (#FFFFFF) and black (#000000) with neutral grays (#F6F6F6). Typography uses a refined transitional serif for display headings and a clean humanist sans-serif for body text and navigation. Key critical don'ts include: never use drop shadows or border-radii on cards, never introduce high-chroma accent colors, and never use bold font weights that disrupt the elegant, airy feel. Ensure all interactions utilize smooth ease-in-out transitions to maintain the premium aesthetic.
```
