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
version: alpha name: Discord description: "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."
colors: primary: "#5865F2" on-primary: "#ffffff" primary-hover: "#4752C4" secondary: "#57F287" accent-yellow: "#FEE75C" accent-red: "#ED4245" ink: "#DBDEE1" ink-muted: "#949BA4" canvas: "#313338" surface-1: "#2B2D31" surface-2: "#1E1F22" surface-3: "#111214" border: "#3F4147" online: "#23A55A" idle: "#F0B232" dnd: "#F23F43" offline: "#80848E"
typography: display: fontFamily: "GGSans, Inter, -apple-system, sans-serif" fontSize: 40px fontWeight: 800 lineHeight: 1.1 letterSpacing: -0.02em body: fontFamily: "GGSans, Inter, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.375 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64]
radius: sm: 4px md: 8px lg: 16px xl: 24px pill: 9999px
shadows: card: "0 1px 2px rgba(0,0,0,0.3)" elevated: "0 8px 16px rgba(0,0,0,0.24)" modal: "0 0 0 1px rgba(255,255,255,0.08), 0 16px 40px rgba(0,0,0,0.5)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
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.