# Fritz Hansen · Design system migration spec

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

> A benchmark for high-end product sites, showing how restraint and typography can create a luxurious digital presence.

## 1. Identity DNA

The Fritz Hansen design system functions as a refined Scandinavian gallery, where every element exists in deliberate relation to the whole. Its identity is built on a foundation of premium restraint, heritage, and the quiet authority of considered objects.

**One-liner:** A premium, minimalist showcase for high-end furniture and design events.
**Keywords:** premium · scandinavian · furniture · design · heritage
**Analogy:** A refined Scandinavian design gallery.

## 2. Color

The color palette operates with the discipline of a monochrome photograph, built on a strict black-and-white foundation. A single, muted pastel green is reserved exclusively for interactive highlights, ensuring chromatic silence elsewhere.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EFEEEB` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#C6C6C6` | placeholder |
| `--accent` | `#D6E1B9` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Strict monochrome with a single muted pastel accent.

The guiding principle is that color should be a functional signal, not a decorative field.

## 3. Typography

Typography speaks in a clean, highly legible sans-serif voice, with bold, uppercase headlines acting as structural signage. The category choices reject any hint of ornament, leaning into a geometric purity that supports the brand's minimalist posture.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 34px | 1.0 | 500 | -0.5px | Headlines and event titles |
| body | 14px | 1.57 | 400 | 0 | Body text and descriptions |
| caption | 11px | 1.43 | 400 | 0 | Metadata and secondary info |

**Type rules:**
- Uppercase text used for navigation and some labels.
- Tight tracking on display sizes.
- Clean, highly legible sans-serif throughout.

## 4. Spacing

The rhythm is established through generous vertical padding that creates a contemplative cadence between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding with tight line-heights for headlines.

## 5. Surfaces

Depth is conveyed not through shadow, but through precise, structural separation. A single 1-pixel black border is the primary tool for defining edges and creating a flat, layered hierarchy.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid #000000 used for structural separation.

## 6. Layout

The layout skeleton is an asymmetric grid, engineered to give large-format photography maximum presence. Its asymmetry is not chaotic but measured, creating dynamic visual weight that guides the eye with purpose.

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

**Skeleton:** Asymmetric grids with high-quality photography.

## 7. Motion & Interaction

Motion philosophy is one of subtle enhancement, not performance. Animations are smooth, consistent fades and transforms that mark transitions with elegance, never drawing attention to themselves.

- **Durations:** micro 250ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.01, 0.25, 1)`
- **Patterns:**
  - Smooth fade-ins for content sections.
  - Subtle transform animations on scroll.

- **Hover:** Subtle opacity or color change.
- **Click:** Immediate response, no bounce.
- **Transition:** Smooth, consistent easing curves across elements.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is sophisticated, quiet, and authoritative. It communicates in bold, concise headlines and direct calls to action, letting the product and imagery carry the narrative weight.

- **Tone:** Sophisticated, quiet, and authoritative.
- **Headline style:** Bold, uppercase, and concise.
- **CTA style:** Clear, direct, and often accompanied by an arrow.
- **Avoid:** Vibrant colors / Playful language / Complex gradients / Rounded corners

### Don'ts
- ❌ Don't use rounded corners — screenshot shows perfectly sharp edges.
- ❌ Don't use drop shadows — screenshot shows flat, border-separated surfaces.
- ❌ Don't use a vibrant primary color — screenshot shows a muted green and strict monochrome.
- ❌ Don't use a serif font — screenshot shows a clean, geometric sans-serif.
- ❌ Don't use decorative icons — screenshot shows minimal, functional UI elements.
- ❌ Don't clutter the layout — screenshot shows vast amounts of whitespace.

What this system deliberately avoids is just as defining as what it includes: vibrant color, playful language, decorative flourish, and any form of rounded softness.

## System Prompt (paste into AI tool)

```
This design represents Fritz Hansen, a premium Scandinavian furniture brand. The identity is minimalist and sophisticated, relying on a monochrome palette (#000000 ink on #FFFFFF background) with a single muted pastel accent (#D6E1B9) for language selectors. Typography is a clean grotesque-sans, used with tight tracking for headlines and generous spacing for body text. The layout is spacious, emphasizing large-scale photography. Critical donts: never use rounded corners, avoid drop shadows, and don't introduce vibrant, high-saturation colors.
```
