# Design Museum · Design system migration spec

> Source: https://designmuseum.org  ·  Curated by OpenDesign  ·  en

> This site is an excellent reference for institutional design that balances bold typography with immersive photography.

## 1. Identity DNA

The Design Museum's digital presence translates the experience of approaching a bold, architectural gallery entrance into a functional interface. Like the physical building in London, the site leads with structural clarity, using typography and photography as its primary materials.

**One-liner:** A sophisticated cultural institution site that prioritizes photographic impact and bold typographic identity.
**Keywords:** design · museum · contemporary · London · culture
**Analogy:** A bold, architectural gallery entrance translated into a digital interface.

## 2. Color

The color system is a disciplined monochrome foundation—black and white—with a single, high-chroma yellow accent functioning as a directional signal. This palette creates immediate visual authority and focuses attention on photographic content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--accent` | `#E8E316` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome with architectural yellow accents and immersive photography.

The principle is clear: color serves as structure and highlight, never as decoration.

## 3. Typography

Typography is strictly geometric and grotesque, using sans-serif families to construct a voice that is institutional and forward-looking. Tight letter-spacing on large display type creates a sense of architectural tension, while a stark weight contrast establishes immediate hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.1 | 700 | -2px | Hero headlines and logo lockup |
| heading | 30px | 1.2 | 700 | -1px | Section headings and feature titles |
| body | 15px | 1.6 | 400 | 0.1px | Paragraph text and UI labels |
| small | 12px | 1.6 | 500 | 0.2px | Captions and metadata |

**Type rules:**
- Use tight letter-spacing for large display type to create architectural tension.
- Prioritize uppercase styling for navigation and action labels.
- Maintain high contrast between display and body weights for clear hierarchy.

## 4. Spacing

The spacing rhythm is built on a 4px base grid, with deliberate, generous whitespace between major content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous whitespace between major content blocks to allow photography to breathe.

## 5. Surfaces

Surfaces are defined by sharp borders and deliberate shadow, creating clear layers of depth. UI elements are crisply delineated, with active states indicated by a deliberate change in border weight.

- **Radius:** sm 0px · md 4px · lg 0px · pill 999px
- **Shadows:**
  - 0px 32px 68px 0px rgba(0,0,0,0.3)
- **Borders:** 1px solid black for UI elements, 2px solid for active states.

## 6. Layout

The layout skeleton begins with a full-width photographic hero, which centers content and sets the visual tone. The underlying grid supports informational sections, maintaining alignment and balance while allowing photography to dominate.

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

**Skeleton:** Full-width photographic hero with centered content and a grid-based informational layout.

## 7. Motion & Interaction

Motion is architectural and purposeful, used to reveal content with rhythm rather than flourish. Text elements stagger into view on scroll, while micro-interactions on interactive components provide immediate, smooth feedback.

- **Durations:** micro 100ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Staggered fade-in and slide-up for text elements on scroll.
  - Smooth hover transitions for interactive elements.
  - Subtle parallax effects on hero imagery.

- **Hover:** Color inversion or sharp background shift.
- **Click:** Immediate visual feedback with slight scaling or opacity change.
- **Transition:** All properties transition smoothly over 0.1s for micro-interactions.
- **Keyboard:** Standard focus states with visible outlines or color changes.

## 8. Voice & Don'ts

The editorial voice is institutional and authoritative, yet direct and welcoming. Language is concise and often architectural in its phrasing, with calls to action that are clear and emphatic.

- **Tone:** Institutional, authoritative, yet welcoming and forward-thinking.
- **Headline style:** Bold, concise, and often architectural in its phrasing.
- **CTA style:** Direct, action-oriented, and often uses uppercase for emphasis.
- **Avoid:** Avoid overly decorative or script fonts. / Avoid soft, pastel color palettes. / Avoid rounded corners on primary buttons. / Avoid cluttered layouts with insufficient white space. / Avoid generic stock photography. / Avoid low-contrast text for critical information.

### Don'ts
- ❌ Don't use rounded corners on primary buttons — screenshot shows sharp, rectangular button shapes.
- ❌ Don't use low-contrast colors for text — screenshot shows high-contrast black text on white or yellow backgrounds.
- ❌ Don't use decorative or serif fonts — screenshot shows geometric and grotesque sans-serif families.
- ❌ Don't use soft, pastel accent colors — screenshot shows a bold, high-chroma yellow accent.
- ❌ Don't use centered navigation for all elements — screenshot shows left-aligned text with a centered hamburger menu.
- ❌ Don't use generous border-radius on cards — screenshot shows sharp corners or very minimal rounding.

The system deliberately rejects decorative fonts, soft palettes, rounded corners, and cluttered layouts in favor of structural precision.

## System Prompt (paste into AI tool)

```
This is a sophisticated cultural institution website for the Design Museum in London. It uses a high-contrast monochrome palette (black #000000, white #FFFFFF) with a bold architectural yellow (#E8E316) as the primary accent. Typography is strictly geometric and grotesque sans-serif, likely from the DIN Pro family, with tight letter-spacing on large headlines and a clear hierarchy from 50px down to 12px. Layout is grid-based and generous with whitespace, prioritizing large-format photography and bold text overlays. Critical dons: never use rounded corners on primary buttons, never use low-contrast text, and never use decorative or serif fonts. The overall feel is institutional, authoritative, and architecturally precise.
```