Fun with friends
Customize how you show up in chat: emoji, stickers, soundboard, profiles. Observed
The system
Fixed, everywhere
- Blurple #5865F2 as the brand color
- Clyde and the title-case wordmark, never edited or recolored outside white, black and Blurple
- Wide heavy uppercase headlines
- Very large rounded corners
The one thing that varies
The accent colors from the 2021 palette (green, yellow, fuchsia, red) and which 3D props appear
Source: discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine
How loud each format gets
Silent
QuietLegal or trademark page
Calm
Warm
LoudSocial post
LoudestLanding page
Our engine's setting, built from their rules.
Every piece passes two checks
Logo hidden
Cover Clyde. Blurple, wide heavy uppercase, glossy 3D toys and huge rounded glass cards should still say Discord.
Swap test
Put another chat app's logo on it. If it still reads as a party about friends and games, not a productivity tool, it is Discord-like enough.
Strategy
The communications platform for building connections around playing games, through voice, video and text (paraphrase). Published
Together, live
Low-latency streaming and drop-in voice make it feel like the same room. Observed
Everywhere you game
PC, phone and console, one place for your group chats. Observed
Full spec
- For Published
- Players and their friends, plus communities built around games
- Problem Published
- Talking with friends while gaming together was unreliable
- Promise Observed
- A place to talk, play and hang out with friends on any device
- Mission Published
- The best place to hang out before, during, and after playing games (paraphrase of the company page).
Proof behind each pillar
- Fun with friends. Custom emoji in servers launched in 2016 and became one of its most popular features.
- Together, live. Video chat and screen share shipped to all DMs and Group DMs; Go Live streaming followed.
- Everywhere you game. Voice chat on PS5, PlayStation account linking, and apps on PC and mobile.
Story Published
Founders Jason Citron and Stan Vishnevskiy loved games but could not find a reliable way to talk while playing online, so they built a gaming-focused chat app (paraphrase).
Category. Group voice, video and text chat for gamers Published
Why them
- Drop-in voice channels: no calling needed Observed
- Low-latency game streaming to friends Observed
- Built-in Activities and games in chat Observed
- Works on PC, phone and console Observed
Boilerplate Published
Discord is the communications platform that enables you to build meaningful connections around the joy of playing games through voice, video, and text features.
Taglines
They never claim
- No user counts or performance numbers on the homepage Observed
The homepage carries one idea: Discord is where you hang out with friends around games. Six cards each give one hangout moment (customize, stream, drop in, see who's on, do things together, any device).
Source: discord.comdiscord.com/company
Personality and voice
Playfulbut not sillyPublished
Welcomingbut not exclusivePublished
Casualbut not corporateObserved
Boldbut not loud for its own sakeObserved
Discord talks the way its users talk in chat.
Full spec
- Upper case headlines
- Write as “we”, to “you”
- American spelling
- No exclamation marks
- Sentences of 40 words or fewer
- Talk about friends, games and hanging out, not features or productivity
- Casual slang is allowed in body copy (idk, chill, spam memes); never in legal copy
- No stats, customer logos or testimonials on the homepage
- Use "Discord" as a proper noun or an adjective (a Discord server); never turn it into a verb or put it in another name
- The name is always written title case, "Discord", like a person's name
playfulcasualwelcomingbold
Casual, second-person, slangy body copy under shouted uppercase headlines. The company and blog pages are warmer and jokier; the branding page is legal.
- Talk about friends, games and hanging out, not features or productivity
- Casual slang is allowed in body copy (idk, chill, spam memes); never in legal copy
- No stats, customer logos or testimonials on the homepage
- Use "Discord" as a proper noun or an adjective (a Discord server); never turn it into a verb or put it in another name
- The name is always written title case, "Discord", like a person's name
- Homepage voice: talks like a friend in a group chat; slang is fine ("idk", "chill", "spam memes"), second person, no numbers or claims.
- Every headline is a short imperative or promise about hanging out with friends, set in uppercase.
- The blog voice is self-deprecating and jokey about the brand itself (Clyde "is excited", "Mickey Mouse pants").
- Legal and trademark copy (branding page) is formal and precise; keep it separate.
Their words
chillhang outfriendsplaytalk
Never
DISCORD (all caps as the name)Discord as a verb
Source: discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imaginediscord.com
- Don’t use corporate claims like "best-in-class"
- Don’t write the name in all caps as a word
Source: discord.comdiscord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine
Logo
The branding page offers the logo and the Clyde symbol each in white, black and Blurple. The symbol alone is only for places where the Discord brand is already clear.
A simpler, symmetric Clyde reads at pin size and can show expressions.
Full spec
- Use the logo in color (Blurple), black or white
- Use the symbol alone only where the Discord brand is already clearly visible or established
- Wordmark always title case: "Discord"
- Clear space shown on the branding page: the height of the wordmark's "D" around the logo; 1/3 of the symbol around the symbol (diagram)
- Don’t edit, change, distort, recolor or reconfigure the logo
- Don’t use the marks in your server, product, bot or company name
- Don’t use the marks on merchandise
| Lockups | logo (symbol + wordmark), symbol |
|---|---|
| Colors | Blurple, black, white |
| Clear space | diagram: wordmark D height / 1/3 symbol |
| Minimum size | not published |
A horizontal logo (Clyde plus a custom Ginto-based wordmark) and the Clyde symbol alone, each offered in white, black and Blurple. The 2021 refresh freed Clyde from his chat bubble, made him symmetrical and turned his antennas into shoulders.
Source: discord.com/brandingdiscord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine
Color
One saturated signature color (not quite blue, not quite purple) owns the page; the status colors stay in the product.
Full spec
- Blurple is the brand color and the primary button fill
- Type is white on the homepage
- Status colors (green, yellow, red) come from app states; fuchsia is a playful extra
- Light Blurple for the giant footer wordmark and light grounds
| Blurple | #5865F2 / RGB 88 101 242 / PMS 2726 C |
|---|---|
| Light Blurple | #E0E3FF |
| Black | #000000 (branding page); #23272A (2021 palette) |
| Green | #57F287 |
| Yellow | #FEE75C |
| Fuchsia | #EB459E |
| Red | #ED4245 |
The branding page publishes three colors: Blurple #5865F2, Light Blurple #E0E3FF and Black #000000. The 2021 refresh post adds Green, Yellow, Fuchsia, Red, White and a near-black #23272A. The homepage is all Blurple-family: a night-sky gradient from #080925 to #353AAA, glass cards, white type, a Blurple button and the Light Blurple footer wordmark.
Source: discord.com/brandingdiscord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imaginediscord.com
Typography
Group chat that's all fun & games
A wide heavy uppercase gives the shouty, game-box energy; a friendly geometric body keeps it readable.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| ABC Ginto Discord Nord (Bold) | Every headline, the wordmark lettering, the marquee words; always uppercase on the homepage | Proprietary: a custom version of ABC Ginto Nord from Dinamo, licensed by Discord. Not for reuse. | Archivo Archivo is a grotesk with a width axis: at 900 weight and 112% width it matches Ginto Nord Bold's line width within 1% and its cap height within 1px, keeping the wide, heavy, flat-topped uppercase silhouette. |
| ABC Ginto Discord (Regular, Medium) | Body copy, buttons, nav, footer on the marketing site | Proprietary: Discord's custom cut of Dinamo's ABC Ginto Normal. Not for reuse. | DM Sans DM Sans is a low-contrast geometric grotesk like Ginto: same line width (within 0.1%), x-height and cap height at 20px. |
| gg sans | The Discord app itself; on the homepage only inside product videos | Proprietary Discord UI face (shown inside product screenshots and the app). Not for reuse. |
- Headlines uppercase, Nord Bold, line-height under 1
- Body 20px/26px on desktop, 16px/20.8px on phone
- Nav and buttons in the body face, 500 for nav
| Display | ABC Ginto Discord Nord Bold, stand-in Archivo 900 wdth 112 |
|---|---|
| Body | ABC Ginto Discord 400/500, stand-in DM Sans |
| UI | gg sans (app) |
The wordmark is a custom font based on Ginto. The site sets every headline in ABC Ginto Discord Nord Bold, uppercase with very tight leading, and body in ABC Ginto Discord; the app uses gg sans. Open stand-ins: Archivo 900 at 112% width for Nord, DM Sans for body.
Source: discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imaginediscord.com
Graphic elements
Do one tall vertical gradient image (page-bg-desktop.png, background-size cover, position 50% 0): #080925 at the top, up to #1C1E86 by 10%, #353AAA glow around 20-40%, back down to #1B1F5D/#21257D at 60-70% and to near-black #000002 at the bottom; body color #1A2081 behind it. Each band adds a star texture (texture-*.webp, small white/lilac dots and four-point sparkles).
Night-sky gradient ground with stars · the whole homepage behind everything, from the nav to the footer
Do a 1240x610 translucent blurple card with a 120px radius holding a 727x554 video frame with a 104px radius, inset 28px: two nested rounded rectangles, the outer one a lighter glass ring around the media.
Huge-radius glass feature cards · each of the six feature blocks
Do Ginto Nord Bold (stand-in Archivo 900 wdth 112) uppercase, tight leading under 1 (0.86-0.93) so lines nearly touch, white.
Wide, heavy uppercase headlines · every headline and the marquee
Do glossy 3D toys (Wumpus, Clyde cube, egg, coin, box, radish, crown, star) and flat-shaded cartoon characters breaking the card edges, partly off-page, some blurred like depth of field.
Floating 3D props and characters · around and overlapping the cards and hero
Do the Discord wordmark set edge to edge (1440 wide) in #E0E3FF on the blurple footer gradient, close to the page bottom (49px below at 1440).
Giant Light Blurple footer wordmark · bottom of every marketing page
Specimens use sample copy, not Discord’s.
They make a chat app feel like a game world.
Full spec
- one tall vertical gradient image (page-bg-desktop.png, background-size cover, position 50% 0): #080925 at the top, up to #1C1E86 by 10%, #353AAA glow around 20-40%, back down to #1B1F5D/#21257D at 60-70% and to near-black #000002 at the bottom; body color #1A2081 behind it. Each band adds a star texture (texture-*.webp, small white/lilac dots and four-point sparkles)
- a 1240x610 translucent blurple card with a 120px radius holding a 727x554 video frame with a 104px radius, inset 28px: two nested rounded rectangles, the outer one a lighter glass ring around the media
Huge-radius glass cards, night-sky gradient with stars, floating 3D props, a word marquee and the edge-to-edge footer wordmark.
Source: discord.com
Illustration
Characters make the product about people; toys make it playful.
Full spec
- Characters and props break out of cards and off the page edge
- Palette leans blurple, pink and lilac with green accents
Two families: glossy 3D toys (Wumpus, Clyde cube, egg, coin) and a flat-shaded cartoon cast of diverse young characters in purples and pinks. The branding page offers downloadable banners with the cast.
Source: discord.comdiscord.com/branding
Motion
Constant gentle movement keeps the page feeling alive like a server.
Full spec
- Respect reduced motion: swap videos for still images (the site does)
Autoplay looping product videos, a scrolling word marquee, floating parallax props and 0.25-0.3s button fades.
Source: discord.com
Interface & layout
The page, band by band
Navigation
Feature card 1: Make your group chats more fun
Feature card 2: Stream like you're in the same room
Feature card 3: Hop in when you're free
Marquee: Talk / Play / Chat / Hang out
Feature card 4: See who's around to chill
Feature card 5: Always have something to do together
Feature card 6: Wherever you game, hang out here
Buttons
Full spec
Full-bleed gradient page; 100px side margins at 1440; a hero split text-left, art-right with centred buttons below; six cards alternating media left and right; centred closing banner; dense footer.
Measured from discord.com's computed styles at 1440 and 390 with Playwright, 2026-10-31.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 100px | 24px |
| Section padding | 140px | 110px |
| Hero text width | max 491px, centered | full width |
| Card gap | 206px | 206px |
| Navigation | 80px | 80px |
Type, at size
Hero H1
ABC Ginto Discord Nord (Bold) · 56px (phone 27) · line 0.857 · tracking -0.56px · weight 900
Closing banner H2
ABC Ginto Discord Nord (Bold) · 48px (phone 27) · line 1.2 · tracking -0.48px · weight 900
Feature card H2
ABC Ginto Discord Nord (Bold) · 36px (phone 27) · line 0.93 · tracking -0.36px · weight 900
Marquee word
ABC Ginto Discord Nord (Bold) · 61px · line 0.41 · weight 900
Body large (hero and cards)
ABC Ginto Discord (Regular, Medium) · 20px (phone 16) · line 1.3 · tracking 0.32px · weight 400
Hero button label
ABC Ginto Discord (Regular, Medium) · 20px (phone 18) · line 1.3 · tracking 0.25px · weight 400
Nav link / Log In
ABC Ginto Discord (Regular, Medium) · 16px · line 1.2 · weight 500
Footer link
ABC Ginto Discord (Regular, Medium) · 16px (phone 14) · line 1.5 · weight 400
Footer label
ABC Ginto Discord (Regular, Medium) · 16px (phone 14) · line 1.25 · weight 400
- Motion
- marquee, gentle floating props, autoplay product videos, 0.25-0.3s button fades
- Buttons
- rounded
Page anatomy
How Discord’s own landing pages are built, observed on discord.com, 2026-10-31. The full measurements are in spec.md.
- Navigation
- Desktop: transparent bar over the hero (position absolute, not sticky): white Discord logo (Clyde + wordmark) at left, nine text links in the middle, white Log In pill at right. Phone: fixed 64px bar, logo left, a 40px translucent square burger right.
- Hero
- Night-sky ground with soft stars. Left: a three-line uppercase white headline and a four-line body. Right: a big 3D illustrated scene: a dark Discord desktop app on a monitor, a phone, two cartoon characters, a Wumpus robot and a gamepad. Below both, two centred 65px buttons: white Download for Mac and Blurple Open Discord in your browser. Floating blurred 3D props (a pink crown top-centre, a pink-white star at the right edge).
- Feature card 1: Make your group chats more fun
- One rounded glass card (1240x610, radius 120px) holding a 727x554 product video frame (radius 104px) on the left and a 3-line uppercase H2 plus body on the other side; 3D props float around it.
- Feature card 2: Stream like you're in the same room
- One rounded glass card (1240x610, radius 120px) holding a 727x554 product video frame (radius 104px) on the right and a 3-line uppercase H2 plus body on the other side; 3D props float around it.
- Feature card 3: Hop in when you're free
- One rounded glass card (1240x610, radius 120px) holding a 727x554 product video frame (radius 104px) on the left and a 4-line uppercase H2 plus body on the other side; 3D props float around it.
- Marquee: Talk / Play / Chat / Hang out
- A full-width 140px strip with a darker blurple band image, one line of huge white uppercase words separated by small white Clyde marks, scrolling sideways. Desktop only.
- Feature card 4: See who's around to chill
- One rounded glass card (1240x610, radius 120px) holding a 727x554 product video frame (radius 104px) on the right and a 3-line uppercase H2 plus body on the other side; 3D props float around it.
- Feature card 5: Always have something to do together
- One rounded glass card (1240x610, radius 120px) holding a 727x554 product video frame (radius 104px) on the left and a 3-line uppercase H2 plus body on the other side; 3D props float around it.
- Feature card 6: Wherever you game, hang out here
- One rounded glass card (1240x610, radius 120px) holding a 727x554 product video frame (radius 104px) on the right and a 3-line uppercase H2 plus body on the other side; 3D props float around it.
- Closing banner: You can't scroll anymore
- Centred two-line uppercase H2, one white Download for Mac button, then a row of the cast of characters (people, Wumpus, a cat-mouse with a guitar) standing on the footer edge.
- Footer
- A dark-to-blurple gradient block: Clyde symbol, Language select and Social icons on the left; four link columns on the right; a giant edge-to-edge Light Blurple "Discord" wordmark at the bottom, 49px above the page end.
Source: discord.com
In use
Full spec
How loud the system gets by format.
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | Build it the way discord.com is built (kit.spec.page): night-sky gradient page with stars, absolute nav with Log In pill, 3-line wide uppercase white H1 at left with a 3D scene at right, centred white + Blurple 65px buttons, six 1240x610 glass cards (radius 120) with 727x554 video frames (radius 104) alternating sides, a Talk/Play/Chat/Hang out marquee, a centred closing H2 with one white button and the character cast, and the blurple footer with the giant Light Blurple wordmark | which cards and in what order; the props around them | |
| Social post | Blurple or night-sky ground, one wide uppercase headline, a 3D prop or character | which color accent from the 2021 palette | |
| Legal or trademark page | black ground, plain sentence copy, logo tiles with large radii | none |
Rules
Do
- Follow the brand guidelines whenever you use the marks
- Use the marks to say you are a Discord user or have a server, without implying you are Discord or sponsored by it
- Use "Discord" as an adjective for your server or username
- Use the marks and assets digitally only
Don’t
- put the marks or similar ones in your server, brand, product, bot, domain or social names
- adopt confusingly similar trademarks, logos or trade dress
- copy the look and feel of the Discord site, app or marketing
- use the marks on merchandise
Source: discord.com/branding
Steal this kit
Your name and logo, Discord’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Discord doesn’t publish
- Card 5 woman character: measured after scroll at y 4671 but the screenshot shows her higher (about y 4544-4672) because the props parallax; her resting position is approximate
- Typography rules (sizes, leading, case) are not published; all are observed on discord.com
- Logo clear space value is shown only as a diagram (a "D" for the wordmark, 1/3 for the symbol); minimum sizes are not published
- No published grid, spacing scale, radius scale or motion durations
- Icon and illustration style guides are not published; the full Corebook brand kit linked from the branding page could not be reached from our network
- Muted text color and UI greys are not published for marketing
- Voice and tone rules are not published; voice rules here are observed
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with Discord.