# Wgsn · Design system migration spec

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

> WGSN is a perfect reference for premium editorial SaaS design, demonstrating how a restrictive color palette and strong typography can convey high-end authority.

## 1. Identity DNA

The design system is built on a foundational tension: the clinical precision of an enterprise dashboard married to the considered pacing of a high-end fashion editorial. Like a gallery space designed to let the artwork speak, the interface deliberately recedes, using structure and restraint to foreground the vibrant trend imagery that is WGSN's core output.

**One-liner:** The world's leading trend forecaster.
**Keywords:** trend · forecasting · future · insight · premium
**Analogy:** A high-end fashion editorial meets enterprise SaaS dashboard.

## 2. Color

The palette is a strict exercise in monochromatics, built on pure black and white with semi-transparent blacks for layered depth. This deliberate absence of hue ensures the system remains a neutral stage for the color-rich trend photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.6)` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(0,0,0,0.6)` | divider |

**Color principle:** Monochromatic base with high-contrast black and white, allowing imagery to provide the primary color.

The governing principle is that the interface should never compete with the content it presents.

## 3. Typography

Typography is handled exclusively by DM Sans, a humanist sans-serif chosen for its blend of warmth and clarity. The scale is dramatic, with tight-tracked bold headlines set against generous body text to create a clear, authoritative hierarchy.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Hero headlines |
| h2 | 48px | 1.15 | 400 | 0px | Section headlines |
| body | 18px | 1.6 | 400 | 0px | Body text |

**Type rules:**
- Use DM Sans for all text layers.
- Keep body text legible with generous line-height.
- Use tight letter-spacing for large display text.

## 4. Spacing

Spacing is treated as a premium material, with generous whitespace used to frame content and control the reading pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace to reflect premium positioning.

## 5. Surfaces

Surfaces are defined by razor-thin 1px borders and subtle inset shadows, creating depth without resorting to heavy elevation or skeuomorphism. The system avoids busy backgrounds, relying on solid black, white, or light gray fields to maintain focus.

- **Radius:** sm 4px · md 16px · lg 40px · pill 999px
- **Shadows:**
  - rgb(0, 0, 0) 0px 0px 0px 1px inset
- **Borders:** Thin 1px borders in rgba(0,0,0,0.6).

## 6. Layout

The layout skeleton is anchored by a standard, centered container for content. This is most prominently expressed in a split-screen hero format, which pairs a collage of trend imagery against a panel of bold, typographic statement.

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

**Skeleton:** Standard centered container with split-screen hero layout.

## 7. Motion & Interaction

Motion is minimal and functional, limited to smooth background-color transitions on interactive elements. The philosophy is to provide immediate, professional feedback for user actions rather than decorative animation.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth background-color transitions on interactive elements.

- **Hover:** Background color shifts for buttons and links.
- **Click:** Immediate visual feedback.
- **Transition:** 0.2s to 0.4s transitions for background and border properties.
- **Keyboard:** Standard browser focus management.

## 8. Voice & Don'ts

The editorial voice is authoritative, visionary, and direct, mirroring the confidence of its forecasting insight. Copy is short, forward-looking, and action-oriented, avoiding casual language or passive construction.

- **Tone:** Authoritative, visionary, and professional.
- **Headline style:** Short, punchy, and forward-looking (e.g., 'Create tomorrow').
- **CTA style:** Direct and action-oriented (e.g., 'Request a demo').
- **Avoid:** Casual slang / Passive voice / Overly technical jargon

### Don'ts
- ❌ Don't use bright neon colors — screenshot shows a strictly monochromatic black/white base.
- ❌ Don't use sharp 0px corners — screenshot shows pill buttons (40px) and rounded cards (16px).
- ❌ Don't use wide letter-spacing in headlines — screenshot shows tight tracking (-1px).
- ❌ Don't use thin font weights for headlines — screenshot shows bold/semi-bold display text.
- ❌ Don't use busy backgrounds — screenshot uses solid black, white, or light gray for sections.
- ❌ Don't use small, cramped text — screenshot uses generous 18px body text with high line-height.

The system deliberately excludes bright accent colors, sharp corners, and cramped typography to preserve its core identity of premium, editorial restraint.

## System Prompt (paste into AI tool)

```
WGSN is a premium B2B trend forecasting platform that uses a refined, editorial design language. The color palette is strictly monochromatic, using pure black (#000000) and white (#FFFFFF) with semi-transparent blacks for hierarchy and gray (#999999) for muted elements. Typography is exclusively DM Sans, a humanist sans-serif, ranging from bold 56px headlines to 18px body text. Buttons are pill-shaped (40px radius) with high-contrast fills. The layout is spacious and centered, emphasizing large trend imagery. Critical constraints: never use accent colors, never use sharp corners on buttons, and never let text become cramped. Maintain an authoritative yet visionary tone throughout all copy.
```
