# Dezeen · Design system migration spec

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

> This site is a perfect example of a premium editorial design that prioritizes content and photography through a highly structured and refined visual system.

## 1. Identity DNA

The design system translates the physical gravitas of a premium architecture magazine into a digital format. It operates like a well-constructed building, where a rigorous grid and high-contrast materials provide a clear, authoritative foundation for showcasing content.

**One-liner:** A clean, image-led editorial platform for architecture and design with a signature blue accent.
**Keywords:** Architecture · Design · Magazine · Curated · Photographic
**Analogy:** A premium design magazine brought to the web, prioritizing large editorial photography and clean typography.

## 2. Color

The palette is a disciplined study in contrast, built on a foundation of black and white. A single, signature muted blue provides a calculated accent, preventing starkness while maintaining editorial seriousness.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f0f0f0` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#757575` | placeholder |
| `--accent` | `#556e9b` | single accent |
| `--line` | `rgba(85, 110, 155, 1)` | divider |

**Color principle:** High-contrast black and white base with a signature slate-blue accent.

The color principle is one of restraint and maximum impact through a minimal, high-contrast scheme.

## 3. Typography

Typography separates function through a clear hierarchy: a humanist sans-serif for navigational clarity and headlines, and a transitional serif for the authoritative weight of article body text. This pairing reinforces the system's editorial rigor.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Headlines |
| h1 | 40px | 1.1 | 700 | 0 | Section headers |
| body | 18px | 1.3 | 400 | 0 | Article text |
| small | 14px | 1.5 | 700 | 0 | Captions and metadata |

**Type rules:**
- Use sans-serif for headlines and navigation.
- Use serif for article body text.
- Weight 700 is heavily used for emphasis and navigation.
- Maintain tight letter-spacing for large display text.

## 4. Spacing

Rhythm is established through generous whitespace, which isolates editorial blocks and gives each piece of content room to command attention.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace separates editorial blocks.

## 5. Surfaces

Surfaces are flat and sharp, defined by crisp 3px borders rather than shadows or gradients. This approach emphasizes content hierarchy and structural clarity over simulated depth.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Sharp 3px borders for section dividers.

## 6. Layout

The layout skeleton is a strict, column-based editorial grid. It prioritizes a dominant left column for primary articles, using a clear visual hierarchy to guide the reader's focus through the content.

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

**Skeleton:** Strict grid with a dominant left column for articles and a right column for secondary content.

## 7. Motion & Interaction

Motion is functional and understated, limited to smooth, swift transitions for background and color state changes. The philosophy is one of calm continuity, avoiding expressive animation that might distract from the content.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth transitions for background and color changes.

- **Hover:** Background color shifts on interactive elements.
- **Click:** Instant response.
- **Transition:** Color and background transitions at 0.2s.
- **Keyboard:** Standard browser focus outlines.

## 8. Voice & Don'ts

The editorial voice is authoritative, sophisticated, and clean, mirroring the system's visual precision. Headlines are short, descriptive, and impactful, while calls-to-action remain understated and direct.

- **Tone:** Authoritative, sophisticated, and clean.
- **Headline style:** Short, descriptive, and impactful.
- **CTA style:** Understated and direct.
- **Avoid:** Slang / Overly casual language / Decorative fonts

### Don'ts
- ❌ Don't use rounded corners on cards — screenshot shows sharp 0px borders.
- ❌ Don't use a colorful accent palette — screenshot is dominated by black, white, and a single muted blue (#556e9b).
- ❌ Don't use sans-serif for long-form text — screenshot uses a serif font for article body.
- ❌ Don't add drop shadows to containers — screenshot shows flat surfaces.
- ❌ Don't use complex layouts — screenshot uses a strict, clean grid.
- ❌ Don't use playful typography — screenshot relies on high-contrast, serious weights.

This system deliberately rejects decorative fonts, playful elements, and rounded corners to preserve its serious, curated architectural aesthetic.

## System Prompt (paste into AI tool)

```
Dezeen is a premium architecture and design editorial platform. Its design DNA is built on a high-contrast black and white palette with a signature muted blue (#556e9b) accent. Typography uses a humanist sans-serif for headlines and a transitional serif for body text, maintaining a sophisticated and authoritative voice. Critical rules: use sharp 0px borders, avoid rounded corners, and maintain a strict editorial grid. Never use playful or decorative elements; the aesthetic is clean, curated, and photographic.
```