W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Discord
Discord is the voice-, video-, and text-chat platform for communities — originally built around gaming, now spanning every kind of social server from study groups to creative collectives. The brand voice is playful, irreverent, and warm — "your place to talk." Visually, Discord is anchored on Blurple (#5865F2), the saturated indigo-purple introduced with the 2021 brand refresh (an evolved, more accessible hue replacing the original 2015 #7289DA Blurple). Discord is dark-first by canonical identity: the desktop and mobile client renders Blurple and a set of authored neutrals on a deep gray-blue canvas where motion, emoji, and voice-state color carry the brand voice.
1 palette 3 fonts 0 assets 11 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/discord/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/discord/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Discord
Discord is the voice-, video-, and text-chat platform for communities — originally built around gaming, now spanning every kind of social server from study groups to creative collectives. The brand voice is playful, irreverent, and warm — "your place to talk." Visually, Discord is anchored on Blurple (#5865F2), the saturated indigo-purple introduced with the 2021 brand refresh (an evolved, more accessible hue replacing the original 2015 #7289DA Blurple). Discord is dark-first by canonical identity: the desktop and mobile client renders Blurple and a set of authored neutrals on a deep gray-blue canvas where motion, emoji, and voice-state color carry the brand voice.
Tags: social, gaming, discord, blurple, dark-first, voice
Atoms
Palette
Discord · [email protected] · Proprietary — All Rights Reserved
Discord corporate palette, anchored on Blurple (#5865F2) — the saturated indigo-purple that has been Discord's signature brand color since the 2021 brand refresh (an updated, more accessible hue evolved from the original 2015 #7289DA Blurple). The Discord product is dark-first: the canonical client surface renders Blurple and a small set of authored neutrals on a deep gray-blue canvas (#313338 / #1E1F22) that lets motion, emoji, and voice-state color carry the brand voice.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Whitney ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
body |
Whitney ([email protected]) |
Proprietary — All Rights Reserved | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
discord-blurple |
Discord Blurple | #5865F2 |
discord-blurple-dark |
Discord Blurple Dark | #4752C4 |
discord-old-blurple |
Discord Old Blurple | #7289DA |
discord-greyple |
Discord Greyple | #99AAB5 |
discord-dark-not-black |
Discord Dark But Not Black | #2C2F33 |
discord-not-quite-black |
Discord Not Quite Black | #23272A |
discord-white |
Discord White | #FFFFFF |
discord-canvas-dark |
Discord Canvas Dark | #313338 |
discord-canvas-darker |
Discord Canvas Darker | #2B2D31 |
discord-canvas-darkest |
Discord Canvas Darkest | #1E1F22 |
discord-text-on-dark |
Discord Text on Dark | #F2F3F5 |
discord-text-secondary-dark |
Discord Text Secondary on Dark | #B5BAC1 |
discord-text-tertiary-dark |
Discord Text Tertiary on Dark | #80848E |
discord-green |
Discord Green | #23A55A |
discord-yellow |
Discord Yellow | #F0B232 |
discord-red |
Discord Red | #F23F43 |
discord-fuchsia |
Discord Fuchsia | #EB459E |
discord-light-canvas |
Discord Light Canvas | #FFFFFF |
discord-light-surface |
Discord Light Surface | #F2F3F5 |
discord-light-surface-elevated |
Discord Light Surface Elevated | #EBEDEF |
discord-text-on-light |
Discord Text on Light | #060607 |
discord-text-secondary-light |
Discord Text Secondary on Light | #4E5058 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
discord-light-canvas |
#FFFFFF |
surface |
discord-light-surface |
#F2F3F5 |
surface-elevated |
discord-light-surface-elevated |
#EBEDEF |
text-primary |
discord-text-on-light |
#060607 |
text-secondary |
discord-text-secondary-light |
#4E5058 |
text-tertiary |
discord-greyple |
#99AAB5 |
primary |
discord-blurple |
#5865F2 |
primary-hover |
discord-blurple-dark |
#4752C4 |
accent |
discord-blurple |
#5865F2 |
accent-hover |
discord-blurple-dark |
#4752C4 |
warning |
discord-yellow |
#F0B232 |
warning-hover |
discord-yellow |
#F0B232 |
error |
discord-red |
#F23F43 |
success |
discord-green |
#23A55A |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
discord-canvas-dark |
#313338 |
surface |
discord-canvas-darker |
#2B2D31 |
surface-elevated |
discord-canvas-darkest |
#1E1F22 |
text-primary |
discord-text-on-dark |
#F2F3F5 |
text-secondary |
discord-text-secondary-dark |
#B5BAC1 |
text-tertiary |
discord-text-tertiary-dark |
#80848E |
primary |
discord-blurple |
#5865F2 |
primary-hover |
discord-blurple-dark |
#4752C4 |
accent |
discord-blurple |
#5865F2 |
accent-hover |
discord-blurple-dark |
#4752C4 |
warning |
discord-yellow |
#F0B232 |
warning-hover |
discord-yellow |
#F0B232 |
error |
discord-red |
#F23F43 |
success |
discord-green |
#23A55A |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
discord-canvas-dark |
#313338 |
on-identity |
discord-text-on-dark |
#F2F3F5 |
background |
discord-canvas-dark |
#313338 |
surface |
discord-canvas-darker |
#2B2D31 |
surface-elevated |
discord-canvas-darkest |
#1E1F22 |
text-primary |
discord-text-on-dark |
#F2F3F5 |
text-secondary |
discord-text-secondary-dark |
#B5BAC1 |
text-tertiary |
discord-text-tertiary-dark |
#80848E |
primary |
discord-blurple |
#5865F2 |
primary-hover |
discord-blurple-dark |
#4752C4 |
accent |
discord-blurple |
#5865F2 |
accent-hover |
discord-blurple-dark |
#4752C4 |
mark |
discord-blurple |
#5865F2 |
success |
discord-green |
#23A55A |
warning |
discord-yellow |
#F0B232 |
error |
discord-red |
#F23F43 |
boost |
discord-fuchsia |
#EB459E |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (8)
colorChoice → logo.mark
- allowed: discord-blurple, discord-white, discord-not-quite-black
- forbidden: discord-old-blurple, discord-greyple, discord-fuchsia, discord-red, discord-green, discord-yellow
The Discord wordmark and Wumpus mark render in Blurple, white (on dark surfaces), or Not Quite Black (in monochrome contexts). Old Blurple is deprecated. Status accents (green, yellow, red) and the Boost / Nitro fuchsia are reserved for product UI and never recolor the mark.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, wumpus-redraw, old-blurple-recolor
Discord's brand page prescribes the wordmark and Wumpus mark in approved variants only. Recoloring into Old Blurple, redrawing Wumpus, or applying decorative effects violates the brand-use policy published at discord.com/branding.
variantSelection → logo
- use:
wordmark-white - when:
backgroundColorScheme="dark"
On the canonical Canvas Dark surface, the white wordmark variant is required for legibility. The Blurple wordmark must not be placed directly on Canvas Dark where contrast drops.
variantSelection → logo
- use:
wordmark-blurple - when:
backgroundColorScheme="light"
On light surfaces, the wordmark renders in Blurple. Do not invert the white wordmark onto a light canvas.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Discord Text on Dark (#F2F3F5) on Canvas Dark (#313338) reads comfortably above AA. The rule encodes the floor for any new foreground/background pairing introduced on Discord surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Discord Blurple (#5865F2) on Canvas Dark must remain perceptible at interactive sizes. The 2021 brand refresh specifically tuned the Blurple from Old Blurple (#7289DA) toward higher saturation; falling below 3:1 (AA-large) breaks the interactive affordance of the primary CTA.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, server-impersonation
Discord's brand guidelines restrict use of the Discord wordmark, Wumpus, and Blurple in ways that imply official affiliation or Discord endorsement of a third-party server, on competing- product surfaces, or on unlicensed merchandise.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing introduced on Discord-skinned surfaces.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Whitney is distributed in Light (300), Book (400), Medium (500), Semi-Bold (600), and Bold (700). Discord's display lockups and marketing headlines sit in the 500–700 band; lighter cuts compromise the warm, declarative voice the brand depends on.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Discord's marketing headlines run substantially larger than body copy. A 1.5× minimum size ratio preserves the display-to-prose hierarchy the brand voice depends on.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: discord-canvas-dark, discord-canvas-darker, discord-white
- doesNotPairWith: discord-old-blurple, discord-fuchsia
Blurple is calibrated to read on Discord's deep canvases and on white. Pairing the current Blurple with Old Blurple creates a visible regression; pairing it with Fuchsia (a different brand-accent role) breaks the calibrated primary-vs-secondary hierarchy.
Provenance
- Source: https://discord.com/branding
- License:
Proprietary — All Rights Reserved - Attribution: Discord and the Discord logo are registered trademarks of Discord, Inc. The Blurple value (#5865F2) introduced with the 2021 brand refresh is documented at discord.com/branding and independently verified via the simple-icons brand database, which cites discord.com as the source. The supporting palette (Old Blurple, Greyple, Dark-but-not-Black, Not-Quite-Black) is documented in the same brand page. Whitney is Discord's licensed corporate typeface (designed by Tobias Frere-Jones for Hoefler&Co. / Monotype) and is referenced here with a public-web fallback to Inter when the licensed file is unavailable.
- Imported:
2026-05-18 - Notes: Discord's canonical brand surface is dark-first: the Discord client, the discord.com marketing site, and the Wumpus / mark art all live on a near-black canvas with Blurple used as the primary identity accent. The light-mode role mapping is an authored inversion supporting the user-selectable light theme. Old Blurple (#7289DA) is retained as a deprecated reference in the palette atom for pre-2021 applications.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Discord
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Discord
A clear hierarchy in Discord's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Discord
[email protected]font · heading
Whitney
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Whitney
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ discord-blurple #5865F2 accent-hover
→ discord-blurple-dark #4752C4 background
→ discord-canvas-dark #313338 boost
→ discord-fuchsia #EB459E error
→ discord-red #F23F43 identity
→ discord-canvas-dark #313338 mark
→ discord-blurple #5865F2 on-identity
→ discord-text-on-dark #F2F3F5 primary
→ discord-blurple #5865F2 primary-hover
→ discord-blurple-dark #4752C4 success
→ discord-green #23A55A surface
→ discord-canvas-darker #2B2D31 surface-elevated
→ discord-canvas-darkest #1E1F22 text-primary
→ discord-text-on-dark #F2F3F5 text-secondary
→ discord-text-secondary-dark #B5BAC1 text-tertiary
→ discord-text-tertiary-dark #80848E warning
→ discord-yellow #F0B232 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Whitney prose
→ body Whitney wordmark
→ heading Whitney Palette mode mappings (from discord)
Light mode (14 roles)
accent
→ discord-blurple accent-hover
→ discord-blurple-dark background
→ discord-light-canvas error
→ discord-red primary
→ discord-blurple primary-hover
→ discord-blurple-dark success
→ discord-green surface
→ discord-light-surface surface-elevated
→ discord-light-surface-elevated text-primary
→ discord-text-on-light text-secondary
→ discord-text-secondary-light text-tertiary
→ discord-greyple warning
→ discord-yellow warning-hover
→ discord-yellow Dark mode (14 roles)
accent
→ discord-blurple accent-hover
→ discord-blurple-dark background
→ discord-canvas-dark error
→ discord-red primary
→ discord-blurple primary-hover
→ discord-blurple-dark success
→ discord-green surface
→ discord-canvas-darker surface-elevated
→ discord-canvas-darkest text-primary
→ discord-text-on-dark text-secondary
→ discord-text-secondary-dark text-tertiary
→ discord-text-tertiary-dark warning
→ discord-yellow warning-hover
→ discord-yellow Rules (11 typed constraints)
error · 8 rules
colorChoice logo.mark allowed discord-blurple, discord-white, discord-not-quite-black forbidden discord-old-blurple, discord-greyple, discord-fuchsia, discord-red, discord-green, discord-yellow The Discord wordmark and Wumpus mark render in Blurple, white (on dark surfaces), or Not Quite Black (in monochrome contexts). Old Blurple is deprecated. Status accents (green, yellow, red) and the Boost / Nitro fuchsia are reserved for product UI and never recolor the mark.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, wumpus-redraw, old-blurple-recolor Discord's brand page prescribes the wordmark and Wumpus mark in approved variants only. Recoloring into Old Blurple, redrawing Wumpus, or applying decorative effects violates the brand-use policy published at discord.com/branding.
variantSelection logo use wordmark-white when backgroundColorScheme="dark" On the canonical Canvas Dark surface, the white wordmark variant is required for legibility. The Blurple wordmark must not be placed directly on Canvas Dark where contrast drops.
variantSelection logo use wordmark-blurple when backgroundColorScheme="light" On light surfaces, the wordmark renders in Blurple. Do not invert the white wordmark onto a light canvas.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Discord Text on Dark (#F2F3F5) on Canvas Dark (#313338) reads comfortably above AA. The rule encodes the floor for any new foreground/background pairing introduced on Discord surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Discord Blurple (#5865F2) on Canvas Dark must remain perceptible at interactive sizes. The 2021 brand refresh specifically tuned the Blurple from Old Blurple (#7289DA) toward higher saturation; falling below 3:1 (AA-large) breaks the interactive affordance of the primary CTA.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, server-impersonation Discord's brand guidelines restrict use of the Discord wordmark, Wumpus, and Blurple in ways that imply official affiliation or Discord endorsement of a third-party server, on competing- product surfaces, or on unlicensed merchandise.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The dark-first canvas makes contrast checks the default verification on any new role pairing introduced on Discord-skinned surfaces.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Whitney is distributed in Light (300), Book (400), Medium (500), Semi-Bold (600), and Bold (700). Discord's display lockups and marketing headlines sit in the 500–700 band; lighter cuts compromise the warm, declarative voice the brand depends on.
fontPairing typography.heading requires body minSizeRatio 1.5 Discord's marketing headlines run substantially larger than body copy. A 1.5× minimum size ratio preserves the display-to-prose hierarchy the brand voice depends on.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith discord-canvas-dark, discord-canvas-darker, discord-white doesNotPairWith discord-old-blurple, discord-fuchsia Blurple is calibrated to read on Discord's deep canvases and on white. Pairing the current Blurple with Old Blurple creates a visible regression; pairing it with Fuchsia (a different brand-accent role) breaks the calibrated primary-vs-secondary hierarchy.
Provenance
- Source
- https://discord.com/branding
- License
Proprietary — All Rights Reserved- Attribution
- Discord and the Discord logo are registered trademarks of Discord, Inc. The Blurple value (#5865F2) introduced with the 2021 brand refresh is documented at discord.com/branding and independently verified via the simple-icons brand database, which cites discord.com as the source. The supporting palette (Old Blurple, Greyple, Dark-but-not-Black, Not-Quite-Black) is documented in the same brand page. Whitney is Discord's licensed corporate typeface (designed by Tobias Frere-Jones for Hoefler&Co. / Monotype) and is referenced here with a public-web fallback to Inter when the licensed file is unavailable.
- Imported
2026-05-18- Notes
- Discord's canonical brand surface is dark-first: the Discord client, the discord.com marketing site, and the Wumpus / mark art all live on a near-black canvas with Blurple used as the primary identity accent. The light-mode role mapping is an authored inversion supporting the user-selectable light theme. Old Blurple (#7289DA) is retained as a deprecated reference in the palette atom for pre-2021 applications.