# Rijksmuseum · Design system migration spec

> Source: https://www.rijksmuseum.nl  ·  Curated by OpenDesign  ·  en

> The site serves as an excellent example of how bold typography and high-quality photography can create a premium, authoritative digital presence for a cultural institution.

## 1. Identity DNA

The system is designed as a digital analogue to a prestigious national gallery entrance: a threshold of stark contrast and monumental imagery that commands immediate attention. Its identity is built on the authority of heritage, expressed through a single, warm accent and the unadorned power of photographic storytelling.

**One-liner:** A premium cultural heritage site showcasing classical art through high-impact photography and bold typographic branding.
**Keywords:** museum · heritage · art · culture · premium
**Analogy:** A prestigious national gallery entrance.

## 2. Color

The palette is a disciplined study in high-contrast monochrome, using white, black, and soft gray as a neutral field. This restraint allows the single, high-chroma orange accent to function with absolute clarity as the sole signal for primary interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#C2CCCE` | placeholder |
| `--accent` | `#CC4C28` | single accent |
| `--line` | `rgba(194, 204, 206, 1)` | divider |

**Color principle:** High-contrast monochrome with a single warm accent, relying on photographic overlays for visual richness.

The core principle is that visual richness comes not from color variety, but from the dramatic interplay of light, shadow, and photographic content.

## 3. Typography

Typographic voice is humanist and structured, employing a sans-serif with clear, bold weights for hierarchy. Rules favor uppercase for navigation and section labels, establishing a formal, gallery-like tone of clear wayfinding.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.95 | 700 | -2px | Hero branding |
| headline | 24px | 1.2 | 700 | 0 | Section titles |
| body | 17px | 1.4 | 400 | 0 | General text |

**Type rules:**
- Uppercase for navigation and section labels
- Bold weights for headlines and primary actions

## 4. Spacing

Spacing follows a generous rhythm, granting containers ample padding to let photography breathe and preventing the layout from feeling cramped.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding within containers to allow photography to breathe.

## 5. Surfaces

Surfaces are flat and clean, with a profound absence of shadows. Structure is communicated through minimal 1px borders on form elements and subtle dividers, never decorative.

- **Radius:** sm 2px · md 4px · lg 8px · pill 999px
- **Borders:** Minimal, typically 1px solid borders on form elements or subtle dividers.

## 6. Layout

The structural skeleton begins with full-bleed hero sections, where large-scale typography is overlaid directly onto immersive photography. This dramatic entry point then transitions into a structured, clean content grid with generous whitespace.

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

**Skeleton:** Full-bleed hero sections with overlaid typography, transitioning to structured content grids.

## 7. Motion & Interaction

Motion philosophy is one of subtle, functional enhancement, not spectacle. Transitions are limited to smooth opacity fades and background-size scaling on hover, designed to be felt rather than actively watched.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle background-size transitions on hover
  - Fade-in/out for content loading
  - Smooth color transitions for interactive states

- **Hover:** Background-color transitions and slight background-size scaling.
- **Click:** Immediate visual feedback.
- **Transition:** All transitions set to default, with specific overrides for background and opacity.
- **Keyboard:** Standard focus management with visible outlines.

## 8. Voice & Don'ts

The editorial voice is authoritative and elegant, using direct, impactful headlines and clear, uppercase calls to action. Language avoids slang and overly casual phrasing, favoring a tone that is inviting yet respectful of the content's cultural weight.

- **Tone:** Authoritative, elegant, and inviting.
- **Headline style:** Direct and impactful, often using uppercase.
- **CTA style:** Action-oriented, uppercase, and highly visible.
- **Avoid:** Slang / Overly casual phrasing / Complex academic jargon

### Don'ts
- ❌ Don't use playful or rounded fonts — screenshot shows a structured, humanist sans-serif.
- ❌ Don't use a multi-color palette — screenshot shows a restrained palette of white, black, and a single orange accent.
- ❌ Don't use decorative borders or complex shadows — screenshot shows a flat, clean surface style.
- ❌ Don't use small, cramped typography — screenshot shows large, legible type with generous spacing.
- ❌ Don't use abstract patterns — screenshot shows high-quality photographic imagery as the primary visual element.
- ❌ Don't use lowercase for navigation — screenshot shows uppercase navigation links.

The system deliberately excludes playful or rounded UI elements, multi-color gradients, and decorative borders, committing fully to a flat, photographic, and typographically bold presentation.

## System Prompt (paste into AI tool)

```
Rijksmuseum is a premium cultural heritage website positioning itself as an authoritative gateway to world-class art. It features a high-contrast palette dominated by white (#FFFFFF) and black (#000000), with a single warm orange accent (#CC4C28) for primary calls to action. The typography uses a humanist-sans-serif (RijksText) with bold, uppercase headlines. Critical donts: Do not use playful fonts or rounded UI elements; avoid multi-color gradients or decorative borders; never use small, cramped typography. The layout relies on massive, full-bleed photographic heroes with large-scale branding overlaid, transitioning into clean content grids.
```
