# Discord · Design system migration spec

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

> Worth including as a prime example of a dark-mode consumer app with a strong, playful brand identity.

## 1. Identity DNA

Discord's design system is built around a single, evocative analogy: a virtual hangout spot for gamers. This identity DNA manifests in a deep indigo background (#1a2081) that creates an immersive, nocturnal atmosphere, punctuated by bright white typography and a signature blurple (#5865f2) accent. The result is a system that feels both playful and purposeful, engineered for extended social interaction rather than passive viewing.

**One-liner:** A dark-mode chat platform for gaming communities and friend groups.
**Keywords:** social · community · gaming · voice · chat · playful
**Analogy:** A virtual hangout spot for gamers

## 2. Color

The color system is anchored by a deep indigo field, a deliberate departure from pure black that adds warmth and depth to the dark-mode canvas. Bright white text provides maximum legibility against this backdrop, while the signature blurple accent is reserved for primary interactive elements, creating a clear hierarchy of attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#1a2081` | main background |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `rgba(255,255,255,0.7)` | secondary text |
| `--muted` | `#353d40` | placeholder |
| `--accent` | `#5865f2` | single accent |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** Deep indigo background with bright white typography and a signature blurple accent for primary actions.

The overarching principle is high contrast for readability and a distinct brand signature that avoids the sterility of monochrome dark modes.

## 3. Typography

Typography employs a dual-voice strategy: a tight geometric sans-serif at weight 800 commands headlines with punchy, all-caps authority, while a highly legible humanist sans at weight 400 handles body text for comfortable, extended reading.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 61px | 1.0 | 800 | -0.61px | Hero headline |
| h2 | 48px | 1.0 | 800 | -0.48px | Section headline |
| h3 | 36px | 1.2 | 700 | -0.36px | Subsection headline |
| body | 16px | 1.5 | 400 | 0px | Body text |

**Type rules:**
- Headlines use a tight geometric sans at weight 800
- Body text uses a highly legible humanist sans at weight 400

## 4. Spacing

An 8px base grid establishes a consistent spatial rhythm, with generous vertical spacing between major sections to let content breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid with generous vertical spacing between major sections

## 5. Surfaces

Surfaces are defined not by borders but by depth and contrast. Containers rely on subtle gradient backgrounds and background contrast to establish hierarchy, avoiding visible structural lines.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 0 128px rgba(88,101,242,0.4)
- **Borders:** None visible on main containers; elements rely on background contrast and subtle shadows.

## 6. Layout

The primary layout skeleton is a standard two-column hero, pairing a massive bold headline with a complex 3D illustration. This structure prioritizes immediate visual impact before transitioning into more straightforward stacked feature sections below the fold.

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

**Skeleton:** Standard two-column hero with text on the left and a complex 3D illustration on the right.

## 7. Motion & Interaction

Motion philosophy is restrained and ambient, serving to reinforce the platform's living, social nature without distracting from core interaction. Subtle floating elements and clean fade-ins on scroll are employed to create a sense of presence and gentle dynamism.

- **Durations:** micro 250ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.8, 0, 0.2, 1)`
- **Patterns:**
  - Subtle background element floating
  - Fade in on scroll

- **Hover:** Subtle opacity reduction or color shift on navigation links
- **Click:** Slight scale reduction on primary buttons
- **Transition:** 0.3s transition on all interactive states
- **Keyboard:** Standard browser focus outlines

## 8. Voice & Don'ts

The editorial voice is consistently playful, inclusive, and energetic, favoring short, punchy, action-oriented language over formal or technical prose. It avoids dense jargon and minimalist sterility in favor of a system with palpable character.

- **Tone:** Playful, inclusive, and energetic
- **Headline style:** Short, punchy, all-caps with heavy weight
- **CTA style:** Direct and action-oriented, often including platform specifics (e.g., 'Download for Mac')
- **Avoid:** Formal corporate language / Dense technical jargon / Minimalist aesthetic without character

### Don'ts
- ❌ don't use thin or light font weights for headlines — screenshot shows weight 800 for display text
- ❌ don't use pure black backgrounds — screenshot shows a deep indigo (#1a2081) background instead
- ❌ don't use small or crowded padding — screenshot shows generous padding (10px 16px) around UI elements
- ❌ don't use sharp corners on containers — screenshot shows rounded corners (12px-16px) on cards and buttons
- ❌ don't use subtle or muted colors for primary actions — screenshot shows high-contrast white and blurple buttons
- ❌ don't use serif or decorative fonts — screenshot shows exclusively sans-serif typefaces for a modern tech feel

This design system deliberately excludes formal corporate language, dense technical jargon, and a minimalist aesthetic that would strip away its essential personality.

## System Prompt (paste into AI tool)

```
Discord's landing page uses a deep indigo background (#1a2081) with high-contrast white typography and a signature blurple (#5865f2) accent for primary buttons. The typography combines a geometric sans for bold, all-caps headlines (weight 800) and a humanist sans for body text. Key critical donts: never use pure black backgrounds, avoid thin font weights for headlines, and always use generous padding (at least 10px 16px) on interactive elements. The layout features a two-column hero with complex 3D illustrations on the right. Interactions are simple with 0.3s transitions.
```