---
id: discord
name: Discord
country: US
category: consumer-tech
homepage: "https://discord.com"
primary_color: "#5865F2"
logo:
  type: simpleicons
  slug: "discord"
verified: "2026-06-06"
added: "2026-06-06"
omd: "0.1"
tokens:
  source: prose-derived
  extracted: "2026-06-09"
  colors:
    primary: "#5865F2"
    primary-hover: "#4752C4"
    primary-active: "#3C45A5"
    green: "#57F287"
    yellow: "#FEE75C"
    fuchsia: "#EB459E"
    red: "#ED4245"
    surface-tertiary: "#1E1F22"
    surface-secondary: "#2B2D31"
    surface-primary: "#313338"
    surface-floating: "#111214"
    text-normal: "#DBDEE1"
    heading: "#F2F3F5"
    muted: "#949BA4"
    interactive: "#B5BAC1"
    link: "#00A8FC"
    grey-secondary: "#4E5058"
    message-box: "#383A40"
    on-primary: "#FFFFFF"
  typography:
    family: { sans: "gg sans", mono: "gg mono" }
    hero:    { size: 56, weight: 800, lineHeight: 1.1, tracking: -0.02, use: "Marketing hero headline" }
    display-lg: { size: 32, weight: 700, lineHeight: 1.25, tracking: -0.01, use: "Modal titles, big moments" }
    h1:      { size: 24, weight: 700, lineHeight: 1.25, use: "Section headers" }
    h2:      { size: 20, weight: 600, lineHeight: 1.30, use: "Sub-sections, settings groups" }
    channel: { size: 16, weight: 600, lineHeight: 1.25, use: "Channel/server headers" }
    body-lg: { size: 16, weight: 400, lineHeight: 1.375, use: "Message text, descriptions" }
    body:    { size: 14, weight: 400, lineHeight: 1.29, use: "Standard UI text, list items" }
    label:   { size: 12, weight: 600, lineHeight: 1.33, tracking: 0.02, use: "Section labels UPPERCASE" }
    caption: { size: 12, weight: 400, lineHeight: 1.33, use: "Timestamps, helper text" }
    code:    { size: 14, weight: 400, lineHeight: 1.29, use: "Inline code, code blocks (gg mono)" }
  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24, xxl: 32, section: 40 }
  rounded: { sm: 4, md: 8, lg: 16, full: 9999 }
  shadow:
    floating: "0 4px 8px rgba(0,0,0,0.24)"
    modal: "0 8px 16px rgba(0,0,0,0.24)"
    high: "0 12px 32px rgba(0,0,0,0.36)"
  components:
    button-primary: { type: button, bg: "#5865F2", fg: "#FFFFFF", radius: 8, padding: "2px 16px", font: "14px/500 gg sans", use: "Primary action — Send, Confirm, Join" }
    button-secondary: { type: button, bg: "#4E5058", fg: "#FFFFFF", radius: 8, padding: "2px 16px", font: "14px/500 gg sans", use: "Neutral secondary action" }
    button-link: { type: button, bg: "transparent", fg: "#FFFFFF", padding: "2px 4px", font: "14px/500 gg sans", use: "Tertiary action, subtle cancel" }
    input: { type: input, bg: "#1E1F22", fg: "#DBDEE1", radius: 4, padding: "10px 12px", font: "16px/400 gg sans", use: "Settings forms, search, login" }
    message-box: { type: input, bg: "#383A40", fg: "#DBDEE1", radius: 8, padding: "11px 16px", font: "16px/400 gg sans", use: "Chat composer" }
    embed-card: { type: card, bg: "#2B2D31", radius: 4, padding: "16px", use: "Rich link previews, bot responses (4px left accent)" }
    settings-card: { type: card, bg: "#2B2D31", radius: 8, padding: "16px 20px", use: "Grouped settings rows" }
    modal: { type: dialog, bg: "#313338", radius: 8, padding: "16px", use: "Confirmation dialogs, server settings" }
    mention-badge: { type: badge, bg: "#ED4245", fg: "#FFFFFF", radius: 9999, padding: "0 4px", font: "12px/700 gg sans", use: "Unread mention counter" }
    nitro-badge: { type: badge, bg: "#5865F2", fg: "#FFFFFF", radius: 4, font: "12px/600 gg sans", use: "Nitro / boosted badge" }
    settings-tab: { type: tab, bg: "transparent", fg: "#B5BAC1", radius: 4, padding: "6px 10px", font: "16px/500 gg sans", active: "bg #404249, text #FFFFFF", use: "Settings sidebar item" }
    tooltip: { type: card, bg: "#111214", fg: "#F2F3F5", radius: 8, padding: "8px 12px", font: "14px/600 gg sans", use: "Hover hints on icons" }
    toast: { type: toast, bg: "#111214", fg: "#DBDEE1", radius: 8, padding: "12px 16px", use: "Transient confirmations (4px left status accent)" }
    toggle: { type: toggle, bg: "#57F287", radius: 9999, use: "Boolean settings — track green on, #80848E off" }
  components_harvested: true
---

# Design System Inspiration of Discord

## 1. Visual Theme & Atmosphere

Discord is the place where communities hang out, and its interface is built to feel like a clubhouse, not an enterprise tool. The product UI lives almost entirely in dark mode by default — deep slate-navy surfaces (`#313338` chat, `#2B2D31` channel sidebar, `#1E1F22` server rail) layered like physical panels, with one electric accent doing all the talking: **Blurple** (`#5865F2`). Blurple is a portmanteau of "blue" and "purple," and that in-between quality is the whole personality — friendly but not corporate, energetic but not aggressive. It is the most-tapped color in the app and the single most recognizable thing about the brand.

The marketing site (`discord.com`) is the playful sibling of the product: bright Blurple fields, hand-drawn-feeling illustrations of Wumpus (the brand mascot) and friends, big rounded headlines, and a tone that reads like a group chat. Where the product is dark and focused, the marketing surface is bright and loud. Both share the same DNA — generous rounded corners, the Blurple accent, and **gg sans**, Discord's proprietary typeface introduced in the 2021 rebrand to replace Whitney/Uni Sans. gg sans has rounded terminals and a warm, geometric character that echoes the friendly curves of the Clyde logo.

The 2021 rebrand brightened the original Blurple (`#7289DA`) into the more saturated, confident `#5865F2` seen today, and standardized a five-color "Discord palette" (Blurple, Green, Yellow, Fuchsia, Red) for accents, statuses, and illustration.

**Key Characteristics:**
- Blurple (`#5865F2`) as the universal interactive accent — buttons, links, mentions, active states
- Dark-mode-first product UI with layered slate-navy surfaces (`#1E1F22` → `#2B2D31` → `#313338`)
- gg sans proprietary typeface — rounded, geometric, warm; 6 weights
- Five-color brand palette: Blurple, Green, Yellow, Fuchsia, Red
- Bright, illustrative, playful marketing surface vs. focused dark product surface
- Generous rounded corners (4px–8px–16px scale) and pill buttons
- Mascot-driven personality (Wumpus, Clyde) and conversational copy

## 2. Color Palette & Roles

### Primary
- **Blurple** (`#5865F2`): Primary interactive color — CTAs, links, mentions, active channel, selected state, focus rings. The workhorse of every actionable element.
- **Blurple Hover** (`#4752C4`): Hover/pressed state for Blurple buttons. A darker, deeper Blurple.
- **Blurple Active** (`#3C45A5`): Pressed/active state, the deepest Blurple step.
- **White** (`#FFFFFF`): Primary text on dark surfaces, button labels on Blurple.

### Brand Palette (Discord Five)
- **Blurple** (`#5865F2`): The signature. Brand and interaction.
- **Green** (`#57F287`): Success, online status, positive confirmation, Nitro accents.
- **Yellow** (`#FEE75C`): Idle status, highlights, playful accent, warnings (soft).
- **Fuchsia** (`#EB459E`): Nitro / premium accent, decorative pop, special moments.
- **Red** (`#ED4245`): Errors, destructive actions, Do Not Disturb status, mention badges.

### Product Surfaces (Dark — default)
- **Background Tertiary** (`#1E1F22`): Server rail (left-most), deepest surface, also app chrome.
- **Background Secondary** (`#2B2D31`): Channel sidebar, member list — the second layer.
- **Background Primary** (`#313338`): Main chat area — the surface you read on.
- **Background Floating** (`#111214`): Tooltips, popouts, context menus — darker than primary for lift.
- **Background Modifier Hover** (`rgba(78,80,88,0.3)`): Row hover in lists and channels.
- **Background Modifier Selected** (`rgba(78,80,88,0.6)`): Selected channel/row background.

### Product Surfaces (Light theme)
- **Background Primary** (`#FFFFFF`): Main chat area in light mode.
- **Background Secondary** (`#F2F3F5`): Channel sidebar in light mode.
- **Background Tertiary** (`#E3E5E8`): Server rail / deepest light surface.

### Text (Dark theme)
- **Text Normal** (`#DBDEE1`): Primary body / message text. Soft off-white, not pure white, to reduce eye strain.
- **Header Primary** (`#F2F3F5`): Headings, usernames, strong labels.
- **Text Muted** (`#949BA4`): Timestamps, secondary metadata, placeholder, channel names (inactive).
- **Interactive Normal** (`#B5BAC1`): Default icon/interactive element color.
- **Interactive Hover** (`#DBDEE1`): Hovered icon/interactive element.
- **Text Link** (`#00A8FC`): Inline hyperlinks in messages (a brighter cyan-blue, distinct from Blurple).

### Borders & Dividers
- **Border Subtle** (`rgba(255,255,255,0.06)`): Hairline dividers between sections.
- **Border Strong** (`#1E1F22`): Channel/server separators, input outlines on dark.
- **Input Background** (`#1E1F22`): Message box and form input fill on dark.

## 3. Typography Rules

### Font Family
- **Primary**: `"gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif`
- **Display (marketing)**: `"ginto", "gg sans", sans-serif` — Discord uses a Ginto-family display face for big marketing headlines.
- **Monospace (code blocks)**: `"gg mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", Menlo, Monaco, monospace`
- **Emoji**: Native platform emoji plus Discord's custom emoji rendering.

gg sans ships in six weights: 300 (Light), 400 (Normal), 500 (Medium), 600 (Semibold), 700 (Bold), 800 (Extrabold). The product UI primarily uses 400, 500, 600, and 700.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Marketing Hero | ginto / gg sans | 56px | 800 | 1.1 | -0.02em | Landing page headline |
| Display Large | gg sans | 32px | 700 | 40px (1.25) | -0.01em | Modal titles, big moments |
| Heading 1 | gg sans | 24px | 700 | 30px (1.25) | normal | Section headers |
| Heading 2 | gg sans | 20px | 600 | 26px (1.30) | normal | Sub-sections, settings groups |
| Channel Name | gg sans | 16px | 600 | 20px (1.25) | normal | Channel/server headers |
| Body Large | gg sans | 16px | 400 | 22px (1.375) | normal | Message text, descriptions |
| Body | gg sans | 14px | 400 | 18px (1.29) | normal | Standard UI text, list items |
| Label | gg sans | 12px | 600 | 16px (1.33) | 0.02em | Section labels (UPPERCASE) |
| Caption | gg sans | 12px | 400 | 16px (1.33) | normal | Timestamps, helper text |
| Code | gg mono | 14px | 400 | 18px (1.29) | normal | Inline code, code blocks |

### Principles
- **Soft white, not pure white**: Body text is `#DBDEE1`, never `#FFFFFF`, on dark surfaces — reduces glare during long chat sessions.
- **Uppercase micro-labels**: Section labels (CHANNELS, ONLINE — 14, etc.) use 12px/600 uppercase with `0.02em` tracking for scannable structure.
- **Weight, not size, for emphasis**: Usernames and headers lean on 600/700 weight rather than dramatically larger sizes — the chat stays dense and readable.
- **Rounded warmth**: gg sans's rounded terminals carry the brand's friendliness into every line of text without extra ornament.

## 4. Component Stylings

### Buttons

Discord buttons are filled, borderless, and pill-to-rounded. Default height is 38px (medium); a 32px small and a 44px large also exist. Radius is 8px for standard buttons (Discord moved toward more rounded buttons post-rebrand; many primary CTAs are fully pill-shaped on marketing).

**Primary (Brand)**
- Background: `#5865F2`
- Text: `#FFFFFF`
- Border: none
- Radius: 8px
- Padding: 2px 16px (min-height 38px)
- Font: 14px / 500 / gg sans
- Hover: background `#4752C4`
- Active: background `#3C45A5`
- Disabled: opacity 0.5, no pointer
- Use: Primary action — Send, Confirm, Join Server, Continue

**Secondary (Grey)**
- Background: `#4E5058`
- Text: `#FFFFFF`
- Border: none
- Radius: 8px
- Padding: 2px 16px
- Font: 14px / 500 / gg sans
- Hover: background `#6D6F78`
- Use: Neutral secondary action paired with Primary (Cancel-adjacent, Back)

**Success (Green)**
- Background: `#248046`
- Text: `#FFFFFF`
- Border: none
- Radius: 8px
- Font: 14px / 500 / gg sans
- Hover: background `#1A6334`
- Use: Positive confirm (Accept Invite, Complete)

**Destructive (Red)**
- Background: `#DA373C`
- Text: `#FFFFFF`
- Border: none
- Radius: 8px
- Font: 14px / 500 / gg sans
- Hover: background `#A12828`
- Use: Delete, Leave Server, Ban, Kick

**Link / Ghost**
- Background: transparent
- Text: `#FFFFFF` (underline on hover)
- Border: none
- Padding: 2px 4px
- Font: 14px / 500 / gg sans
- Use: Tertiary action, "No thanks", subtle cancel inside modals

**Outline**
- Background: transparent
- Text: `#FFFFFF`
- Border: 1px solid `#4E5058`
- Radius: 8px
- Use: Secondary marketing CTA, low-emphasis action on dark

**Marketing CTA (Pill)**
- Background: `#FFFFFF` (on Blurple section) or `#5865F2` (on white section)
- Text: `#23272A` on white / `#FFFFFF` on Blurple
- Radius: 28px (fully pill)
- Padding: 16px 32px
- Font: 20px / 500 / gg sans
- Hover: subtle shadow lift + 1.02 scale
- Use: "Download" / "Open Discord in your browser" landing CTAs

### Inputs

**Text Input (dark)**
- Background: `#1E1F22`
- Text: `#DBDEE1`
- Border: 1px solid `#1E1F22` (default), `#5865F2` on focus
- Radius: 4px
- Padding: 10px 12px
- Font: 16px / 400 / gg sans
- Placeholder: `#87898C`
- Use: Settings forms, search, login fields

**Message Box**
- Background: `#383A40`
- Text: `#DBDEE1`
- Border: none
- Radius: 8px
- Padding: 11px 16px
- Font: 16px / 400 / gg sans
- Placeholder: `#6D6F78` ("Message #general")
- Use: The chat composer — the most-used input in the app

**Error Input**
- Background: `#1E1F22`
- Border: 1px solid `#FA777C`
- Radius: 4px
- Helper text: `#FA777C` 12px below
- Use: Validation error state, paired with inline message

### Cards / Panels

**Embed (link/bot card)**
- Background: `#2B2D31`
- Border-left: 4px solid `#5865F2` (color customizable per embed)
- Radius: 4px
- Padding: 16px
- Use: Rich link previews, bot responses, announcements

**Settings Card**
- Background: `#2B2D31`
- Border: none
- Radius: 8px
- Padding: 16px 20px
- Use: Grouped settings rows, account panels

**Modal**
- Background: `#313338`
- Border: none
- Radius: 8px
- Padding: 16px (header) / 0 16px (body) / 16px (footer `#2B2D31`)
- Shadow: `0 8px 16px rgba(0,0,0,0.24)`
- Use: Confirmation dialogs, server settings, invite flows

### Badges & Pills

**Mention Badge (unread count)**
- Background: `#F23F43` (red)
- Text: `#FFFFFF`
- Radius: 9999px (pill)
- Padding: 0 4px (min 16px)
- Font: 12px / 700 / gg sans
- Use: Unread mention/DM counter on server icons and channels

**Nitro / Premium Badge**
- Background: `#5865F2` or gradient toward `#EB459E`
- Text: `#FFFFFF`
- Radius: 4px
- Font: 12px / 600 / gg sans
- Use: Nitro tags, boosted badges

**Status Pill**
- Online `#23A55A`, Idle `#F0B232`, DND `#F23F43`, Offline `#80848E`
- Radius: 9999px (dot, 10px diameter with `#2B2D31` ring)
- Use: Presence indicator on avatars

### Tabs

**Settings Sidebar Item (Active)**
- Background: `#404249`
- Text: `#FFFFFF`
- Radius: 4px
- Padding: 6px 10px
- Font: 16px / 500 / gg sans
- Inactive: text `#B5BAC1`, transparent bg; hover `#35373C` bg + `#DBDEE1` text

**Channel Item (Active)**
- Background: `rgba(78,80,88,0.6)`
- Text/Icon: `#FFFFFF`
- Left indicator: 8px white pill on the server rail for active server
- Radius: 4px
- Inactive: text `#949BA4`; hover `rgba(78,80,88,0.3)` + `#DBDEE1`

### Tooltips

- Background: `#111214`
- Text: `#F2F3F5`
- Radius: 8px
- Padding: 8px 12px
- Font: 14px / 600 / gg sans
- Shadow: `0 4px 8px rgba(0,0,0,0.24)`
- Arrow: 6px triangle matching background
- Use: Hover hints on icons, server names on the rail

### Toasts / Notifications

- Background: `#111214`
- Text: `#DBDEE1`
- Radius: 8px
- Padding: 12px 16px
- Shadow: `0 8px 16px rgba(0,0,0,0.24)`
- Accent: 4px left border in status color (Blurple/Green/Red)
- Use: Transient confirmations, connection status

### Toggles

- Track On: `#23A55A` (green) — Discord toggles go green when active, not Blurple
- Track Off: `#80848E`
- Thumb: `#FFFFFF` circle with subtle inner shadow; on-state shows a check glyph
- Radius: 9999px (pill track, ~40px wide × 24px tall)
- Use: Boolean settings (notifications, privacy switches)


**Tier 1 sources:** https://discord.com (live production site, verified via live DOM getComputedStyle).

## 5. Layout Principles

### Spacing System
- Base unit: 4px
- Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px
- Message vertical rhythm: 16px group gap, tight 2px within a grouped message run
- Sidebar item spacing: 2px between channels, 8px between channel categories

### Grid & Container (Product)
- **Three-panel shell**: Server rail (72px fixed) → Channel sidebar (240px) → Main content (flex) → optional Member list (240px)
- Server rail icons: 48px rounded-squircle, 8px gap
- Content max readability width is not capped — chat fills available space, messages left-aligned full-bleed

### Grid & Container (Marketing)
- Centered content, max-width ~1260px
- Generous vertical section padding (80–120px)
- Alternating Blurple / white / off-white full-bleed bands

### Whitespace Philosophy
- **Density where it counts**: Chat is information-dense (you want to see history); settings and onboarding are spacious and calm.
- **Panels as physical layers**: The three surface shades create depth without shadows — the eye reads `#1E1F22` < `#2B2D31` < `#313338` as receding-to-near.
- **Marketing breathes loud**: Big type, big illustrations, big Blurple fields — the opposite of the focused product.

### Border Radius Scale
- Tight (4px): Inputs, embeds, channel items, small chips
- Standard (8px): Buttons, modals, cards, tooltips
- Squircle (16px): Server icons, avatars (hover morphs circle→squircle)
- Pill (9999px): Status dots, mention badges, marketing CTAs, toggles

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Base (Level 0) | Surface color only (`#313338`) | Main chat, page background |
| Layer (Level 1) | Adjacent darker surface (`#2B2D31`) | Sidebars, cards — depth via color, not shadow |
| Floating (Level 2) | `0 4px 8px rgba(0,0,0,0.24)` on `#111214` | Tooltips, popouts, context menus |
| Modal (Level 3) | `0 8px 16px rgba(0,0,0,0.24)` on `#313338` | Dialogs, settings overlays |
| High (Level 4) | `0 12px 32px rgba(0,0,0,0.36)` | Full-screen modals, image lightbox |

**Shadow Philosophy**: In dark mode, Discord communicates elevation primarily through *surface color stepping* rather than shadow — a floating panel is darker (`#111214`) than the surface it sits on (`#313338`), which reads as lifted. Shadows are reserved for true overlays (menus, modals) and are soft, pure-black, low-opacity. Marketing surfaces use slightly more playful drop shadows and a faint Blurple glow on hovered CTAs.

### Blur & Overlay
- Modal scrim: `rgba(0,0,0,0.85)` behind dialogs
- Streamer-mode / spoiler blur: heavy gaussian blur revealed on click
- No frosted-glass chrome in the core product — surfaces are opaque for performance and clarity

## 7. Do's and Don'ts

### Do
- Use Blurple (`#5865F2`) for the single primary action and all interactive accents
- Build the product UI dark-first with the three layered surfaces (`#1E1F22` / `#2B2D31` / `#313338`)
- Use soft white (`#DBDEE1`) for body text, reserving pure white for headers/usernames
- Use green (`#23A55A`) for toggles and online status, not Blurple
- Keep buttons filled and borderless with 8px radius; pill (9999px) for marketing CTAs
- Round server icons into squircles (16px) and avatars into circles
- Use the five-color brand palette for status, illustration, and accents
- Let the marketing surface be loud, illustrated, and Wumpus-friendly

### Don't
- Don't use the legacy Blurple (`#7289DA`) — the brand moved to `#5865F2` in 2021
- Don't put Blurple on toggles or success states — those are green
- Don't use pure white (`#FFFFFF`) for long-form body text on dark surfaces
- Don't rely on heavy shadows in-product — depth comes from surface stepping
- Don't mix the playful marketing tone into destructive/safety flows — those stay clear and calm
- Don't crowd the chat with chrome — keep the three-panel shell clean
- Don't recolor status dots arbitrarily — green/yellow/red/grey are fixed semantics

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <768px | Single panel at a time; swipe between server rail, channels, chat, members |
| Tablet | 768–1024px | Two panels visible; member list collapses to a toggle |
| Desktop | >1024px | Full three/four-panel shell |

### Touch Targets
- Mobile rows and buttons: minimum 44px tall
- Server icons: 48px tap target with 8px spacing
- Message action buttons appear on long-press (mobile) / hover (desktop)

### Collapsing Strategy
- Member list (240px) is the first to collapse on narrowing
- Channel sidebar becomes a swipe-in drawer on mobile
- Marketing layout reflows multi-column feature grids to single column under 768px
- Modals become full-screen sheets on mobile

### Image & Media Behavior
- Avatars: 32px (message), 40px (member list), 80px+ (profile) — always circular
- Server icons: 48px squircle, fall back to initials on `#5865F2` if no image
- Inline media: max-width constrained, click to expand to lightbox
- Illustrations (marketing): SVG, scale fluidly, Wumpus and friends anchor each section

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Blurple (`#5865F2`)
- CTA Hover: Blurple Dark (`#4752C4`)
- Surface (chat): `#313338`
- Surface (sidebar): `#2B2D31`
- Surface (rail/floating): `#1E1F22` / `#111214`
- Body text: Soft White (`#DBDEE1`)
- Heading text: `#F2F3F5`
- Muted text: `#949BA4`
- Link: Cyan-Blue (`#00A8FC`)
- Success / Online: Green (`#23A55A` / `#57F287`)
- Error / DND: Red (`#ED4245` / `#F23F43`)
- Idle / Highlight: Yellow (`#F0B232` / `#FEE75C`)
- Premium: Fuchsia (`#EB459E`)

### Example Component Prompts
- "Create a Discord message row: dark surface `#313338`, 40px circular avatar, username in `#F2F3F5` 16px weight 600 next to timestamp `#949BA4` 12px, message body `#DBDEE1` 16px weight 400. Hover: row bg `rgba(78,80,88,0.3)` with action icons appearing top-right."
- "Build a primary button: `#5865F2` bg, white 14px weight 500 text, 8px radius, 2px 16px padding, 38px min-height. Hover `#4752C4`, active `#3C45A5`, disabled opacity 0.5."
- "Design the channel sidebar: `#2B2D31` bg, 240px wide. Category labels uppercase 12px weight 600 `#949BA4` with 0.02em tracking. Channel items 16px `#949BA4`, hover `rgba(78,80,88,0.3)`, active `rgba(78,80,88,0.6)` with white text."
- "Create a message composer: `#383A40` bg, 8px radius, 11px 16px padding, placeholder `#6D6F78` reading 'Message #general', text `#DBDEE1` 16px."
- "Make a server rail: 72px wide `#1E1F22`, 48px squircle icons (16px radius) with 8px gaps. Active server shows an 8px white pill on the left edge. Hover morphs the icon from circle to squircle."

### Iteration Guide
1. Default to dark mode with the three layered surfaces; light mode is a secondary theme.
2. Blurple (`#5865F2`) is the one interactive accent — green is for toggles/status, not actions.
3. Body text is soft white `#DBDEE1`; headers/usernames are `#F2F3F5`; metadata `#949BA4`.
4. gg sans throughout, weights 400/500/600/700; uppercase 12px/600 for section labels.
5. Radius: 4px inputs/embeds, 8px buttons/cards/modals, 16px server icons, pill for badges/CTAs.
6. Depth via surface stepping, not shadow — overlays get soft black low-opacity shadows.
7. Marketing surfaces flip to bright Blurple/white with big pill CTAs and Wumpus illustration.

## 10. Voice & Tone

Discord writes like the friend who runs the group chat — casual, warm, lowercase-comfortable, in on the joke, but never confusing when it matters. The brand voice leans playful ("Group chat that's all fun & games," "hop in when you're free, no need to call") and leans on its mascots (Wumpus, Clyde, Nelly) for personality. But the voice is situational: it gets out of the way in safety, billing, and destructive flows, where copy turns plain and direct.

| Context | Tone |
|---|---|
| Marketing headlines | Playful, lowercase-leaning, community-first ("imagine a place...") |
| CTAs | Short, inviting verbs ("Open Discord", "Join", "Add Friend", "Send") |
| Empty states | Friendly + Wumpus illustration + one suggested action ("It's quiet here... for now.") |
| Success messages | Light, brief, occasionally cheeky ("Friend request sent!") |
| Error messages | Plain and specific — playful tone drops ("Something went wrong. Try again.") |
| Safety / Trust & Safety | Direct, serious, no jokes — clarity over personality |
| Billing / Nitro | Clear value framing, gentle excitement, never pressure |
| Notifications | Concise, scannable, who-did-what-where |

**Forbidden in serious flows.** No memes, no Wumpus, no exclamation-stacking in safety, account-security, payment-failure, or moderation copy. The playful voice is a feature of discovery and community surfaces, not of consequence surfaces.

## 11. Brand Narrative

Discord was founded in **2015** by **Jason Citron** and **Stan Vishnevskiy**, born out of the frustration that existing voice-chat tools (Skype, TeamSpeak, Ventrilo) were clunky for gaming with friends. The original wedge was simple: low-latency voice chat that just worked while you played. From there it grew into "your place to talk" — a platform of community-run **servers** organized into **channels** for text, voice, and video.

The brand's central metaphor is the *clubhouse*: a place that's yours and your friends', persistent, low-pressure, drop-in. The product design encodes this — the three-panel shell is a literal building (rail of buildings → rooms inside → the room you're in), and the dark, focused UI keeps the spotlight on conversation. The mascot **Clyde** (and the rounded logo built from his face) gives the whole system its friendly geometry; **Wumpus**, the wide-eyed blob, is the marketing heart.

The **2021 rebrand** was a pivotal design moment. Discord broadened from "for gamers" to "for everyone — communities of any kind," and the visual system grew up with it: the new brighter Blurple (`#5865F2`), the proprietary **gg sans** typeface replacing licensed fonts, a five-color palette, and a more illustration-forward marketing language. The rebrand kept the playfulness but added range — the system could now be loud and inviting on the landing page and calm and focused in the app.

What Discord refuses: the sterile minimalism of enterprise chat (Slack's neutrality, Teams' corporate gray), and the attention-hungry feed mechanics of social media. There is no algorithmic feed, no like-count dopamine loop. The design's job is to make a *room feel alive* without making it feel like a product trying to capture you. Blurple is friendly, not urgent; the dark surfaces are a place to settle in, not a dashboard to monitor.

## 12. Principles

1. **The conversation is the product.** Chrome recedes (dark layered surfaces) so the message column is always the brightest, most legible thing on screen.
2. **One accent, used sparingly.** Blurple marks the primary action and live state. Overusing it would dilute the one color the brand owns. Status uses its own fixed semantic colors.
3. **Depth by layering, not shadow.** Three surface shades build a sense of physical panels. Reserve shadows for true overlays.
4. **Soft on the eyes.** Long chat sessions demand soft white text and muted contrast steps — never pure-white walls of text.
5. **Playful where you explore, plain where it counts.** Personality (Wumpus, jokes, lowercase warmth) lives on discovery and community surfaces; safety, billing, and destructive flows are direct and calm.
6. **Rounded everywhere.** From gg sans's terminals to server squircles to pill CTAs, the friendly curve is the through-line. Sharp corners feel off-brand.
7. **Status has fixed meaning.** Green = online/success, Yellow = idle, Red = DND/error, Grey = offline. These never get reassigned for decoration.
8. **Communities, not feeds.** No infinite scroll of strangers, no engagement bait. The design serves the room the user chose to be in.

## 13. Personas

*Personas below are fictional archetypes informed by publicly described Discord user segments, not individual people.*

**Maya, 19, Austin TX.** College sophomore who runs a 400-member server for her art community. Lives in dark mode, switches between five servers a day, and treats Discord as her primary social home — more than Instagram. She notices when a server icon's mention badge turns red and triages by color. She expects new features to feel native and unobtrusive; an intrusive popup gets dismissed in half a second. Heavy emoji and custom-sticker user; personality matters as much as function.

**Devon, 27, Seattle.** Backend engineer who uses Discord for three things: a gaming friend group, two open-source project servers, and a hobby mechanical-keyboard community. Values low-latency voice above all (it's why he came), keeps notifications tightly tuned, and reads code blocks in `gg mono` daily. Skeptical of feature bloat — he wants the clubhouse to stay a clubhouse, not become a platform that monetizes his attention. Will pay for Nitro for the quality-of-life perks, not the flex.

**Priya, 34, London.** Community manager who administers a 12,000-member server for a creator. Lives in moderation tools, audit logs, and role/permission settings. For her the playful tone must never leak into safety and moderation surfaces — she needs clear, unambiguous controls. Cares about onboarding flows (rules screens, verification) being legible to brand-new members. Uses the desktop app on a wide monitor with all four panels open.

## 14. States

| State | Treatment |
|---|---|
| **Empty (no messages)** | Wumpus illustration centered, friendly one-liner in `#949BA4` ("This is the start of the #channel channel."), no hard CTA — the message box invites the first message. |
| **Empty (no friends/DMs)** | Larger Wumpus illustration, headline in `#F2F3F5`, single Blurple "Add Friend" button. Warm, inviting copy. |
| **Loading (first paint)** | Skeleton blocks in `#3A3C42` matching message-row layout (avatar circle + text bars). Subtle shimmer. Server rail and sidebars paint first. |
| **Loading (sending message)** | Message appears immediately in a dimmed `opacity: 0.6` state; resolves to full opacity on server ack. Fails to a red retry affordance. |
| **Error (inline field)** | `#FA777C` 1px border on input, helper text below in `#FA777C` 12px. One clear sentence. |
| **Error (connection)** | Top banner in `#F0B232` (reconnecting) or `#F23F43` (offline) with white text, spans the chat width, auto-clears on reconnect. |
| **Error (action failed)** | Toast on `#111214`, `#DBDEE1` text, red left accent, plain copy ("Couldn't send. Try again."). No jokes. |
| **Success (friend added / settings saved)** | Brief toast or inline green flash; a "Saved" pill in `#23A55A`. Settings pages show a sticky "Careful — you have unsaved changes!" bar in `#1E1F22` until saved. |
| **Presence states** | Online `#23A55A`, Idle `#F0B232` (crescent), DND `#F23F43` (minus bar), Offline `#80848E`, Streaming `#593695` (purple). Dot has a `#2B2D31` ring against the surface. |
| **Disabled** | Buttons drop to `opacity: 0.5`, no hover, `cursor: not-allowed`. Inputs keep border geometry, text greys to `#87898C`. |
| **Hover (message row)** | Row bg shifts to `rgba(78,80,88,0.3)`, action toolbar (react, reply, more) fades in top-right over `motion-fast`. |
| **Spoiler / NSFW** | Content covered by heavy blur + `#202225` overlay, revealed on click. Streamer mode auto-blurs sensitive UI. |

## 15. Motion & Easing

**Durations:**

| Token | Value | Use |
|---|---|---|
| `motion-instant` | 0ms | Theme toggles, immediate state flips |
| `motion-fast` | 100ms | Hover reveals, tooltip show, icon color change, message action toolbar |
| `motion-standard` | 200ms | The default — popouts, dropdowns, tab switches, badge pop |
| `motion-emphasis` | 300ms | Modal open, settings page transitions, panel slides |
| `motion-page` | 350ms | Mobile panel swipes, full-screen sheet presentation |

**Easings:**

| Token | Curve | Use |
|---|---|---|
| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Things appearing — popouts, tooltips, modals |
| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Things leaving — dismissals, closing menus |
| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way transitions — accordions, tab content |
| `ease-bounce` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Playful overshoot — server-icon squircle morph, mention-badge pop, emoji reactions |

**Signature motions.**

1. **Squircle morph.** Hovering or selecting a server icon morphs its border-radius from a full circle to a 16px squircle over `motion-standard / ease-bounce`. A white pill simultaneously grows on the left rail edge (4px idle → 40px active). This is the single most recognizable Discord micro-interaction.
2. **Mention badge pop.** A new unread mention scales the red badge from 0 → 1.0 with a slight overshoot (`ease-bounce`, `motion-standard`). Reactions and emoji additions use the same bounce.
3. **Message action toolbar.** On row hover, the react/reply/more toolbar fades and slides 4px into place over `motion-fast / ease-enter` — fast enough to feel instant, smooth enough to feel intentional.
4. **Popout & modal.** Context menus and popouts scale from `0.95 → 1.0` with opacity `0 → 1` over `motion-standard / ease-enter`; modals additionally fade in a `rgba(0,0,0,0.85)` scrim. Dismissals use `motion-fast / ease-exit`.
5. **Reduce motion.** Under `prefers-reduced-motion: reduce`, bounce easings collapse to `ease-standard`, slides become fades, and the squircle morph becomes an instant radius change. The app stays fully usable.

<!--
OmD v0.1 Sources

Direct verification (2026-06-06):
- WebFetch https://discord.com — confirms dark-mode-first product surface, Blurple
  brand accent, playful/community marketing voice ("group chat that's all fun &
  games", "find your friends on discord"), mascot references (Wumpus, Clyde, Nelly),
  filled borderless button approach, rounded UI.
- WebSearch (Discord branding / color sources: discord.com/branding,
  color-name.com, mobbin.com, colorxs.com) — confirms Blurple #5865F2 (2021 rebrand
  from legacy #7289DA), five-color palette Green #57F287 / Yellow #FEE75C /
  Fuchsia #EB459E / Red #ED4245, custom rounded sans-serif (gg sans), Clyde logo.

Token-level product surface values (#1E1F22 / #2B2D31 / #313338 surfaces,
#DBDEE1 text, status greens/reds, message-box #383A40, hover rgba(78,80,88,*))
reflect Discord's widely-documented dark-theme design tokens and are standard
across the public Discord client; treated as authoritative for this reference.

gg sans, gg mono, and the Ginto display family are Discord's publicly-known
proprietary type choices introduced/used post-2021 rebrand.

Personas (§13) are fictional archetypes informed by publicly described Discord
user segments. Any resemblance to specific individuals is unintended.

Interpretive claims (e.g., "depth by layering, not shadow", clubhouse metaphor)
are editorial readings of the design, not documented Discord statements.
-->


---
Source: https://oh-my-design.kr/design-systems/discord · Raw twin of references/discord/DESIGN.md
Install 221 verified references for your AI coding agent: npx oh-my-design-cli install-skills