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

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

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

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.

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

15. Motion & Easing

Durations:

Easings:

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.