DESIGN.md — Discord

Overview

Discord's design system (internally "Deco") creates a playful yet functional communication hub. Blurple — Discord's signature blue-purple — anchors the identity. The dark-first interface uses layered grays to create spatial depth across servers, channels, and chat panes.

Colors

Primary Palette

Token	Hex	Usage
color-blurple	#5865F2	Brand primary, CTAs, mentions
color-bg-primary	#313338	Main chat background
color-bg-secondary	#2B2D31	Sidebar background
color-text	#FFFFFF	Primary text
color-text-muted	#949BA4	Timestamps, secondary text

Typography

Role	Family	Size	Weight
Display	gg sans	32px	800
Heading	gg sans	20px	600
Body	gg sans	16px	400
Small	gg sans	12px	400

Components

Server Sidebar

• Vertical pill bar, 72px wide
• Circular server icons (48px), hover rounds to squircle
• Selection indicator: white pill on left edge

Message Row

• Avatar (40px) + username (colored by role) + timestamp
• Message content, attachment previews, embeds
• Reaction row with emoji + count bubbles

Voice Channel

• User list with avatar, name, mute/deafen icons
• Green ring on avatar when speaking
• Connect button in green

Do's and Don'ts

Do

• Use Blurple for interactive elements and brand moments
• Layer background shades to create spatial hierarchy
• Use role colors for usernames in chat

Don't

• Don't use pure black (#000) — always use the gray palette
• Don't make server icons smaller than 48px
• Don't suppress notification badges in active conversations