Discord
A community communication platform built around the iconic blurple (#5865F2) on a dark three-tone surface system — deep background (#313338), elevated panels (#2B2D31), and the darkest modals (#1E1F22). The UI reads as game-adjacent without being garish: rounded shapes, expressive emoji reactions, status indicators in four meaningful colors, and a sidebar that holds entire community architectures. Typography uses GGSans (Discord's custom typeface) — a rounded geometric grotesque that's playful but still legible at chat density. Blurple appears on primary CTAs, active channel indicators, and the brand itself — a color so tied to Discord it's named in community vocabulary.
Color Tokens
1. Visual Theme & Atmosphere
Discord is a dark-native product that doesn't offer light mode as a primary experience — its community of gamers and creators expect the dark surface. The three-surface stack (background, elevated, deep) creates natural depth without brightness. Blurple (#5865F2) is one of the most brand-loyal colors in tech — users call it by its name, and it appears on virtually every platform where Discord is discussed. The system is dense and feature-rich (servers, channels, voice, threads, forums) yet remains navigable through strong spatial hierarchy.
2. Color System
Four-depth surface system:
- Background: #313338 — the base chat and channel surface
- Elevated: #2B2D31 — sidebar, elevated panels
- Deep: #1E1F22 — modals, context menus, overlays
- Deepest: #111214 — drop shadows and extreme depth
- Blurple: #5865F2 — CTAs, active channel indicator, role colors
- Status four-way: Online #23A55A / Idle #F0B232 / DnD #F23F43 / Offline #80848E
- Semantic: Green (join/success), Yellow (warning), Red (error, DnD)
3. Typography
GGSans is Discord's custom typeface — rounded terminals, high x-height, designed for screen legibility at chat scale. Bold (800) for display and server names. Regular (400) for message body. The 16px/1.375 line-height creates a comfortable chat density — slightly tighter than document reading but not cramped.
4. Components & Patterns
- Server list: Far-left column, circular server icons, notification badge top-right, unread indicator left bar
- Channel list: Sidebar in #2B2D31, category headers in small-caps, text/voice/thread/forum channel types
- Message thread: Avatar + username + timestamp header, then message body; reactions row below
- Voice channel: Video grid of participant tiles, control bar at bottom
- Role badges: Pill-shaped, role color background, username color inheritance
- Slash commands: Autocomplete popup above message input
5. Spacing & Layout
Three-column: server list (72px) + channel list (240px) + content. Message padding: 16px horizontal, 2px between same-author messages, 16px between different authors. Member panel (240px) optional on right.
6. Motion & Interaction
Message send: optimistic instant insert. Reaction add: count bounces. New message notification: subtle slide-in from bottom of channel. Voice join: smooth tile reflow. User mention: recipient sees @highlight pulse.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for