# Louisiana · Design system migration spec

> Source: https://louisiana.dk  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a 'Refined' and 'Clean' design, demonstrating how minimal color and strong typography can create a powerful, high-end cultural experience.

## 1. Identity DNA

The design system for Louisiana channels the atmosphere of a serene, modern art gallery entrance. It prioritizes contemplative space and typographic authority over decorative flourish, using a stark, high-contrast palette to frame content as the primary artifact.

**One-liner:** A refined and calm museum website emphasizing typography and whitespace.
**Keywords:** museum · art · cultural institution · gallery · exhibitions
**Analogy:** A serene, modern art gallery entrance

## 2. Color

The color strategy is one of radical restraint. Content lives within a strict monochrome framework of black and white, with a single, watery cyan deployed exclusively as a grounding accent for structural blocks.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#B0E0E9` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#226D7A` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Stark, high-contrast black and white for content, accented with a calm, watery cyan.

The principle is that color should define space, not distract from the cultural object it presents.

## 3. Typography

Typographic voice is split between two clear roles: a bold transitional serif commands attention for headings, asserting a classic, authoritative tone, while Open Sans provides a clean, humanist counterpart for body text and interface elements.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.28 | 700 | 0px | Main section headings |

**Type rules:**
- Headings use a bold transitional serif for a classic, authoritative feel.
- Body and UI text use Open Sans for a clean, humanist touch.

## 4. Spacing

Spacing establishes a deliberate, generous rhythm, using large vertical padding to create zones of calm focus and separate content blocks with intention.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical rhythm with large top and bottom padding to create a sense of calm and focus.

## 5. Surfaces

Surfaces are rendered as flat, graphic planes, devoid of shadows or borders. Depth is implied through color contrast and spatial hierarchy alone.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None visible in the main content area, maintaining a flat, clean aesthetic.

## 6. Layout

The fundamental skeleton is a centered content column within a generous container. This calm structure can transition seamlessly into a full-bleed colored block, like a hero section, to signal a shift in context or emphasis.

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

**Skeleton:** Centered content column within a generous container, transitioning into a full-bleed colored block.

## 7. Motion & Interaction

Motion philosophy is one of subtle reinforcement. Transitions are applied globally, smoothing hover states and content reveals to guide the user without spectacle.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Transitions on hover states for interactive elements.

- **Hover:** Subtle state changes on interactive elements.
- **Click:** Standard navigation and expansion of content sections.
- **Transition:** Global transition property applied to elements.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is informative and slightly formal, matching the cultural institution's tone. Headlines are bold, uppercase, and set in a massive serif to command space, while calls to action are subtle, integrated text links.

- **Tone:** Informative, cultural, and slightly formal.
- **Headline style:** Bold, uppercase, and large serif text to command attention.
- **CTA style:** Subtle, integrated text links rather than prominent buttons.
- **Avoid:** Loud colors / aggressive calls to action / visual clutter

### Don'ts
- ❌ Don't use bright, saturated colors — screenshot shows a restrained palette of black, white, and a muted cyan.
- ❌ Don't apply rounded corners to elements — screenshot shows strictly rectangular shapes with sharp edges.
- ❌ Don't use multiple font families for body text — screenshot shows a consistent use of sans-serif for UI elements.
- ❌ Don't create a dense, cluttered layout — screenshot emphasizes generous whitespace and focused typography.
- ❌ Don't use heavy drop shadows or depth effects — screenshot shows a flat, clean design.
- ❌ Don't use sans-serif for main display headings — screenshot shows a bold transitional serif.

The system deliberately avoids loud colors, aggressive CTAs, visual clutter, rounded corners, and drop shadows.

## System Prompt (paste into AI tool)

```
A refined, editorial museum website design that balances classic typography with a clean, modern layout. The palette is strictly black and white for content, with a signature muted cyan (#226D7A) used sparingly for accents or backgrounds. Typography is a mix of a bold transitional-serif for impactful headlines and a humanist-sans for clean body text. The layout prioritizes massive whitespace and a centered content column to create a calm, focused reading experience. Do not introduce bright, saturated colors, rounded corners, or drop shadows. Avoid cluttering the interface, and ensure that headlines remain bold and authoritative.
```
