name: Discord
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:
  hero:
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: '-0.02px'
    use: Marketing hero headline
  display-lg:
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: '-0.01px'
    use: Modal titles, big moments
  h1:
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    use: Section headers
  h2:
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    use: Sub-sections, settings groups
  channel:
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    use: Channel/server headers
  body-lg:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.375
    use: Message text, descriptions
  body:
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
    use: Standard UI text, list items
  label:
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0.02px
    use: Section labels UPPERCASE
  caption:
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    use: Timestamps, helper text
  code:
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.29
    use: Inline code, code blocks (gg mono)
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  full: 9999px
spacing:
  xs: 4
  sm: 8
  md: 12
  base: 16
  lg: 20
  xl: 24
  xxl: 32
  section: 40
components:
  button-primary:
    type: button
    backgroundColor: '#5865F2'
    textColor: '#FFFFFF'
    rounded: 8px
    padding: 2px 16px
    typography: 14px/500 gg sans
    use: Primary action — Send, Confirm, Join
  button-secondary:
    type: button
    backgroundColor: '#4E5058'
    textColor: '#FFFFFF'
    rounded: 8px
    padding: 2px 16px
    typography: 14px/500 gg sans
    use: Neutral secondary action
  button-link:
    type: button
    backgroundColor: transparent
    textColor: '#FFFFFF'
    padding: 2px 4px
    typography: 14px/500 gg sans
    use: Tertiary action, subtle cancel
  input:
    type: input
    backgroundColor: '#1E1F22'
    textColor: '#DBDEE1'
    rounded: 4px
    padding: 10px 12px
    typography: 16px/400 gg sans
    use: Settings forms, search, login
  message-box:
    type: input
    backgroundColor: '#383A40'
    textColor: '#DBDEE1'
    rounded: 8px
    padding: 11px 16px
    typography: 16px/400 gg sans
    use: Chat composer
  embed-card:
    type: card
    backgroundColor: '#2B2D31'
    rounded: 4px
    padding: 16px
    use: Rich link previews, bot responses (4px left accent)
  settings-card:
    type: card
    backgroundColor: '#2B2D31'
    rounded: 8px
    padding: 16px 20px
    use: Grouped settings rows
  modal:
    type: dialog
    backgroundColor: '#313338'
    rounded: 8px
    padding: 16px
    use: Confirmation dialogs, server settings
  mention-badge:
    type: badge
    backgroundColor: '#ED4245'
    textColor: '#FFFFFF'
    rounded: 9999px
    padding: 0 4px
    typography: 12px/700 gg sans
    use: Unread mention counter
  nitro-badge:
    type: badge
    backgroundColor: '#5865F2'
    textColor: '#FFFFFF'
    rounded: 4px
    typography: 12px/600 gg sans
    use: Nitro / boosted badge
  settings-tab:
    type: tab
    backgroundColor: transparent
    textColor: '#B5BAC1'
    rounded: 4px
    padding: 6px 10px
    typography: 16px/500 gg sans
    active: 'bg #404249, text #FFFFFF'
    use: Settings sidebar item
  tooltip:
    type: card
    backgroundColor: '#111214'
    textColor: '#F2F3F5'
    rounded: 8px
    padding: 8px 12px
    typography: 14px/600 gg sans
    use: Hover hints on icons
  toast:
    type: toast
    backgroundColor: '#111214'
    textColor: '#DBDEE1'
    rounded: 8px
    padding: 12px 16px
    use: Transient confirmations (4px left status accent)
  toggle:
    type: toggle
    backgroundColor: '#57F287'
    rounded: 9999px
    use: 'Boolean settings — track green on, #80848E off'
fonts:
  roles:
    sans: gg sans
    mono: gg mono

Design System Inspiration of Discord

Overview

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

Primary tasks

• Type a message into the composer and send it to a channel.
• Spot which server has unread mentions and triage by color.
• Talk to friends over voice chat while playing a game.
• Moderate a large community through roles, permissions, and audit logs.
• Get through a server’s rules and verification as a new member.

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.

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.

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.

Colors

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.

Typography

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.

Layout

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

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

Elevation & Depth

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

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.floating: 0 4px 8px rgba(0,0,0,0.24)
• shadow.modal: 0 8px 16px rgba(0,0,0,0.24)
• shadow.high: 0 12px 32px rgba(0,0,0,0.36)

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 — 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. –>

Components

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)

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.

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

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.

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.

Governance

Known Gaps

• Contrast, mention-badge. Text #ffffff on #ed4245 measures 3.84:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.