# Discord: brand book and build spec

Discord's brand is Blurple, Clyde and a wide custom Ginto wordmark. Its homepage turns that into a night-sky page of glossy 3D toys, huge-radius glass cards and shouty uppercase headlines that talk like friends in a group chat.

From unfairly.ai/brand-guidelines/discord, checked 2026-10-31. Unofficial study; not affiliated with Discord.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Discord sells hanging out, not software: everything on the page is a toy (3D props, cartoon cast, a smiling logo), and the only serious things are the type weight and the Blurple. Based on: the homepage has no numbers, logos or features lists; every headline is about friends; the 2021 refresh freed Clyde to show expressions and brightened the palette to be "bold and playful"

## Purpose

Mission: The best place to hang out before, during, and after playing games (paraphrase of the company page). (published; https://discord.com/company)

Story: 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). (published)

## Fixed and flexible

Never changes:
- 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

## Positioning

- **Statement**: The communications platform for building connections around playing games, through voice, video and text (paraphrase). (published)
- **Category**: Group voice, video and text chat for gamers (published)
- **Audience**: Players and their friends, plus communities built around games (published)
- **Problem**: Talking with friends while gaming together was unreliable (published)
- **Promise**: A place to talk, play and hang out with friends on any device (observed)
- **Differentiators**: Drop-in voice channels: no calling needed; Low-latency game streaming to friends; Built-in Activities and games in chat; Works on PC, phone and console

## Messaging

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:
- Group chat that's all fun & games (homepage H1)
- Imagine a Place (mantra introduced with the 2021 refresh)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Fun with friends | Customize how you show up in chat: emoji, stickers, soundboard, profiles. | Custom emoji in servers launched in 2016 and became one of its most popular features. | observed |
| Together, live | Low-latency streaming and drop-in voice make it feel like the same room. | Video chat and screen share shipped to all DMs and Group DMs; Go Live streaming followed. | observed |
| Everywhere you game | PC, phone and console, one place for your group chats. | Voice chat on PS5, PlayStation account linking, and apps on PC and mobile. | observed |

They never claim:
- No user counts or performance numbers on the homepage

## Voice

Tone words: playful, casual, welcoming, bold.

Traits:
- Playful, but not silly (published)
- Welcoming, but not exclusive (published)
- Casual, but not corporate (observed)
- Bold, but not loud for its own sake (observed)

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

Rules a copy check enforces:
- 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

Their words: chill, hang out, friends, play, talk.
Never: DISCORD (all caps as the name), Discord as a verb.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Blurple | #5865F2 | published | Primary brand color: logo color option, the brand button fill (Open Discord in your browser), every blurple ground |
| Light Blurple | #E0E3FF | published | Published second brand color: light grounds; on the homepage it is the giant footer wordmark fill |
| Black | #000000 | published | Published third brand color on the branding page: logo-on-black ground, guide page ground |
| Not quite black | #23272A | published | The 2021 palette's Black (HEX 23272A, RGB 35,39,42); text on white buttons (Download for Mac) |
| Green | #57F287 | published | 2021 palette: status-inspired accent (Online); PMS 3385 C |
| Yellow | #FEE75C | published | 2021 palette: status-inspired accent (Away) |
| Fuchsia | #EB459E | published | 2021 palette: playful pink accent, not tied to an app status; PMS Rhodamine |
| Red | #ED4245 | published | 2021 palette: added in 2021, status-inspired (Do Not Disturb) |
| White | #FFFFFF | published | All homepage type and the white button fill |
| Deep space | #1A2081 | observed | Body background color under the page gradient image (body.is-dark-blue); the page reads as a night-sky blue |
| Space top | #080925 | observed | Darkest stop of the page gradient image, at the very top (behind the nav) |
| Space glow | #353AAA | observed | Brightest stop of the page gradient image (about 20-40% down the page) |
| Phone ground | #161CBB | observed | Root ground measured at 390px |
| Marquee edge | #27266A | observed | Edges of the marquee strip ground image |
| Marquee centre | #5A60C4 | observed | Centre of the marquee strip ground image |
| Space bottom | #000002 | observed | Bottom stop of the page gradient (behind the closing banner) |
| Footer middle | #3D43AB | observed | Middle of the footer gradient image |
| Footer top | #211F62 | observed | Top of the footer gradient image |
| Footer bottom | #5764EE | observed | Bottom of the footer gradient image (near Blurple), behind the wordmark |
| Button hover grey | #C7C8CE | observed | White buttons (Log In, Download for Mac) turn this grey on hover |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | ABC Ginto Discord Nord | Proprietary: a custom version of ABC Ginto Nord from Dinamo, licensed by Discord. Not for reuse. | Archivo | Archivo, "Arial Black", sans-serif |
| body | ABC Ginto Discord | Proprietary: Discord's custom cut of Dinamo's ABC Ginto Normal. Not for reuse. | DM Sans | "DM Sans", "Helvetica Neue", Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-xl-* | display | 56px | 27px | 0.857 | -0.56px | 900, width 112 |
| Closing banner H2 | --text-display-lg-* | display | 48px | 27px | 1.2 | -0.48px | 900, width 112 |
| Feature card H2 | --text-display-md-* | display | 36px | 27px | 0.93 | -0.36px | 900, width 112 |
| Marquee word | --text-marquee-* | display | 61px | 61px | 0.41 | 0px | 900, width 112 |
| Body large (hero and cards) | --text-body-lg-* | body | 20px | 16px | 1.3 | 0.32px | 400 |
| Hero button label | --text-button-lg-* | body | 20px | 18px | 1.3 | 0.25px | 400 |
| Nav link / Log In | --text-nav-* | body | 16px | 16px | 1.2 | 0px | 500 |
| Footer link | --text-footer-link-* | body | 16px | 14px | 1.5 | 0px | 400 |
| Footer label | --text-footer-label-* | body | 16px | 14px | 1.25 | 0px | 400 |

## Layout

Measured on https://discord.com/: computed styles at 1440 and 390 with Playwright, 2026-10-31.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 100px | 24px |
| Section padding | 140px | 110px |
| Container max width | 1240px | full |
| Hero text width | max 491px | full |
| Grid columns | 2 | 1 |
| Gutter | 48px | 0px |
| Card gap | 206px | 206px |
| Navigation height | 80px | 80px |

Breakpoints from Discord's CSS: 479, 767, 991px.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 80px, absolute, items centred on y 60
   - Phone: 64px fixed: logo + 40px burger
   - Not sticky on desktop; no border or blur
2. Hero
   - Desktop: y 0-896; H1 y 232 x 100; art x 580 y 162 832x480; buttons y 706
   - Phone: y 64-732: art, H1, body, two stacked buttons, all centred
   - Buttons centred below both columns, not under the text
3. Feature card 1: Make your group chats more fun
   - Desktop: card y 1036-1646; section padding 141px 0 112px
   - Phone: x 24-366 (342 wide), y 829, height 535 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line
4. Feature card 2: Stream like you're in the same room
   - Desktop: card y 1852-2462; section padding 95px 0
   - Phone: x 24-366 (342 wide), y 1582, height 547 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line
5. Feature card 3: Hop in when you're free
   - Desktop: card y 2651-3261; section padding 95px 0 190px
   - Phone: x 24-366 (342 wide), y 2368, height 530 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line
6. Marquee: Talk / Play / Chat / Hang out
   - Desktop: y 3451-3591, 140px tall, full bleed
   - Phone: not shown on phone
7. Feature card 4: See who's around to chill
   - Desktop: card y 3780-4390; section padding 190px 0 136px
   - Phone: x 24-366 (342 wide), y 3121, height 508 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line
8. Feature card 5: Always have something to do together
   - Desktop: card y 4661-5271; section padding 136px 0 151px
   - Phone: x 24-366 (342 wide), y 3864, height 528 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line
9. Feature card 6: Wherever you game, hang out here
   - Desktop: card y 5572-6182; section padding 151px 0 190px
   - Phone: x 24-366 (342 wide), y 4619, height 508 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line
10. Closing banner: You can't scroll anymore
   - Desktop: y 6371-7275 (overlaps the footer top by 12px); no padding
   - Phone: 27px/32.4px, 3 lines centred (YOU CAN'T SCROLL / ANYMORE. / BETTER GO CHAT.) at y 5388
11. Footer
   - Desktop: y 7263-8086
   - Phone: y 6007-6971 with accordions
   - Wordmark fills the width (x 41-1398) with 49px of gradient below it; not cropped

## Page anatomy

How Discord's own landing pages are built, part by part (observed; https://discord.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: 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.
- ground: transparent over the page gradient (the top of the page is #080925 going to #1A2081)
- height: 80px desktop, every item centred on y 60 (the bar has 40px top inset); 64px phone
- border: none
- logo: variant white horizontal logo: Clyde symbol plus "Discord" wordmark; px nav-logo.svg (165x24 file) drawn at 144x21 (width 144px, height auto). Never 165 wide; position desktop: artwork x 41-184, y 49-70 (centred on y 60); phone: x 25-168, y 21-42 (same 144x21); file https://discord.com/branding
- links: count 9; labels Download, Nitro, Discover, Safety, Quests, Support, Blog, Developers, Careers; dropdowns Discover, Safety, Quests, Support, Blog and Developers carry a white chevron-down 8px after the label: a 12x12 icon box holding a 10x6 stroked chevron (stroke 1.5px, round caps), no asset supplied; size 16px/19.2px; weight 500; color #FFFFFF; alignment absolute positions, measured: label text starts at x 273, 382, 453, 569, 669, 774, 888, 975, 1112 (Download, Nitro, Discover, Safety, Quests, Support, Blog, Developers, Careers); Careers ends at x 1167. Link boxes (padding 10px 16px): Download 255-364, Nitro 364-435, Discover 435-552, Safety 552-652, Quests 652-757, Support 757-870, Blog 870-957, Developers 957-1095, Careers 1095-1184. Build the row as a flex starting at x 255 and check each label x; if the stand-in font runs short, fix the box widths so labels land on these x values. Never let the row compress (Careers must start at x 1112)
- actions:
  - Log In: white pill-ish button #FFFFFF fill, #000000 text, 16px/500, padding 10px 16px, radius 16px, 80x39 at x 1320 y 41 (right edge at 1400 = 40px inset); hover fill #C7C8CE (transition background-color 0.25s)
- sticky: no on desktop (absolute, scrolls away); fixed on phone
- phone: shows logo (artwork 144x21 at x 25 y 21) and burger; menu burger button 40x40 at x 326 y 12, radius 14px, fill rgba(255,255,255,0.1), three white lines of different lengths (hamburger icon 24px); cta none in the bar; Log In lives in the menu

**Hero**
- summary: 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).
- desktop: section y 0-896 (nav overlays the top 80px); padding 176px 0 125px; column split text column x 100-591 (491px); art x 561-1412; vertical anchors headline top y 232 (3 lines of 48px: GROUP CHAT / THAT'S ALL / FUN & GAMES, bottom 376); body y 398-502 (4 lines of 26px, breaks after "with", "community.", "and"); art box y 162-642; buttons y 706-771; body line breaks Discord is great for playing games and chilling with / friends, or even building a worldwide community. / Customize your own space to talk, play, and / hang out. (force these with <br>; phone breaks: Discord is great for playing games and / chilling with friends, or even building a / worldwide community. Customize your / own space to talk, play, and hang out.); body copy verbatim Discord is great for playing games and chilling with friends, or even building a worldwide community. Customize your own space to talk, play, and hang out.; text max width 491px for headline and body; media art box x 580 y 162 832x480: hero-device.webp drawn background-size contain, position 19% 50%; hero-layer.webp (a 292x721 full-length boy character with blue hair) drawn 82px wide x 202px tall, background-position 81.5% 90% of the art box, so he stands right of the phone (about x 1188-1270, y 412-614); then on top: hero-character.webp (girl in pink jacket) 173x246 at x 561 y 430; hero-wumpus.webp 168x132 at x 853 y 510; hero-wumpus-plate.webp (file 253x46) drawn 173 wide x 32 tall (keep its ratio; never stretch) at x 851 y 483, rotated about 8deg: the green leaf on Wumpus's head; hero-clyde.webp 58x65 at x 688 y 565 (small robot by the gamepad). These parts already line up as one scene when placed at these coordinates. Easiest correct build: one absolutely positioned art box with the composite and its 4 overlays at the listed offsets.; cta size Download for Mac 262x65 at x 414; Open Discord in your browser 326x65 at x 700; 24px gap; the pair is centred on the page (x 414-1026)
- phone: order art (hero-mobile.webp 328x265 at x 31 y 84), headline, body, Download for Mac, Open Discord in your browser; alignment centred text; props keep the props on phone (never hide them): float-crown.webp 84x84 at x 199 y 21 (behind the art), float-star.webp 112x128 at x 336 y 165 (half off the right edge); sizes headline 27px/24px, 3 lines (GROUP CHAT / THAT'S ALL FUN & / GAMES; set the phone H1 width 325 and if the stand-in breaks as GROUP CHAT / THAT'S ALL / FUN & GAMES, reduce letter-spacing to -0.5px) y 381-453, width 325; body 16px/20.8px centred y 473-556 (4 lines); Download for Mac 244x56 at x 73 y 596 (18px text); Open Discord in your browser 299x56 at x 46 y 676; 24px between buttons; hero ends y 732
- at rest: Static: the art is still; props float up and down slightly (animation only). The crown (float-crown.webp, 216x216 at x 479 y 56) and star (float-star.webp, 188x202 at x 1298 y 289, half off the right edge) are rendered as blurred images (the blur is in the artwork); rotate the crown about 5deg and the star about -11deg.
- type: headline Archivo 900 wdth 112 (Ginto Nord stand-in) 56px/48px, -0.56px, uppercase, #FFFFFF; body DM Sans 20px/26px 0.32px #FFFFFF
- cta: button_white_large then button_blurple_large (see components); white one has a 24px download arrow icon (icon-download.svg, #23272A) 16px before the label
- proof: none (no logos, numbers or quotes anywhere on the homepage)

**Feature card 1: Make your group chats more fun**
- summary: 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.
- ground: page gradient (no own color); the band carries a star texture image (Texture 2)
- desktop: band card y 1036-1646; section padding 141px 0 112px; card x 100-1340 (1240x610), radius 120px, padding 28px; ground = card-bg-1.png drawn background-size cover (a soft translucent blurple glass gradient, lighter top-left); block-1: backdrop blur(10px); media video frame x 128 y 1064, 727x554, radius 104px, overflow hidden, plays video-1.mp4 (autoplay muted loop playsinline, object-fit cover) with poster-1-group-chats.jpg as its poster. video poster: pink-to-maroon gradient with a phone showing the emoji picker and a blurple "Upload Emoji" button; text heading y 1208 (3 lines, 100px), body y 1318 (6 lines, 156px), text x 904 w 384, vertically centred in the card; H2 to body gap 10px; body lines are exact with DM Sans 20px/26px +0.32px at 384px; props float-party-wumpus.gif (pink robot peeking over the card top edge) 147x94 at x 1017 y 956, BEHIND the card (z below it): only its head shows above the card top; float-egg.webp 222x244 at x -24 y 1418, BEHIND the card: the part over the card is hidden by the card, so it shows only left of x 100 and below y 1646
- phone: card x 24-366 (342 wide), y 829, height 535 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line; order H2, body, then the video frame (306x233, radius 48px, x 42) 40px below the body; 18px from frame bottom to card bottom; type H2 27px/24.3px uppercase in 3 lines, text x 58 w 275; body 16px/20.8px 0.32px (card 1 only: line-height 19px) in exactly 7 lines at 275px (DM Sans at 0.32px tracking gives this count; never narrow the column); props float-party-wumpus.gif 105x67 at x 181 y 771 (peeks over the card top, BEHIND it); float-egg.webp 190x209 at x -56 y 1373 (below the card, half off the left edge) (keep every prop on phone)
- anatomy:
  - H2 lines: MAKE YOUR / GROUP CHATS / MORE FUN
  - Body copy (verbatim): Use custom emoji, stickers, soundboard effects and more to add your personality to your voice, video, or text chat. Set your avatar and a custom status, and write your own profile to show up in chat your way.
  - Desktop body line breaks as measured on the page (force them with <br> because the stand-in wraps differently): Use custom emoji, stickers, / soundboard effects and more to / add your personality to your voice, / video, or text chat. Set your avatar and / a custom status, and write your own / profile to show up in chat your way.
  - Phone body line breaks as measured (force with <br>, phone only): Use custom emoji, stickers, / soundboard effects and more to / add your personality to your voice, / video, or text chat. Set your avatar / and a custom status, and write your / own profile to show up in chat your / way.
  - No button, link, eyebrow or icon inside the card
- components: feature_card, video_frame

**Feature card 2: Stream like you're in the same room**
- summary: 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.
- ground: page gradient (no own color); the band carries a star texture image (Texture 3)
- desktop: band card y 1852-2462; section padding 95px 0; card x 100-1340 (1240x610), radius 120px, padding 28px; ground = card-bg-2.png drawn background-size cover (a soft translucent blurple glass gradient, lighter top-left); is-reverse: backdrop blur(80px); media video frame x 576 y 1880, 727x554, radius 104px, overflow hidden, plays video-2.mp4 (autoplay muted loop playsinline, object-fit cover) with poster-2-stream.jpg as its poster. video poster: green-framed stream tile with a desert game scene, a LIVE badge and three participant tiles; text heading y 2024 (3 lines), body y 2134 (6 lines), text x 150 w 384, vertically centred in the card; H2 to body gap 10px; body lines are exact with DM Sans 20px/26px +0.32px at 384px; props desktop: no visible prop at rest (the Clyde cube is hidden behind the card; only a 2-3px sliver shows below the card bottom). Phone: float-clyde-cube.webp 172x176 at x 29 y 2083, below the card bottom-left
- phone: card x 24-366 (342 wide), y 1582, height 547 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line; order H2, body, then the video frame (306x233, radius 48px, x 42) 40px below the body; 18px from frame bottom to card bottom; type H2 27px/24.3px uppercase in 3 lines, text x 58 w 275; body 16px/20.8px 0.32px (card 1 only: line-height 19px) in exactly 7 lines at 275px (DM Sans at 0.32px tracking gives this count; never narrow the column); props float-clyde-cube.webp 172x176 at x 29 y 2083 (overlapping the card bottom-left) (keep every prop on phone)
- anatomy:
  - H2 lines: STREAM LIKE / YOU'RE IN THE / SAME ROOM
  - Body copy (verbatim): High quality and low latency streaming makes it feel like you're hanging out on the couch with friends while playing a game, watching shows, looking at photos, or idk doing homework or something.
  - Desktop body line breaks as measured on the page (force them with <br> because the stand-in wraps differently): High quality and low latency streaming / makes it feel like you're hanging out on / the couch with friends while playing a / game, watching shows, looking at / photos, or idk doing homework or / something.
  - Phone body line breaks as measured (force with <br>, phone only): High quality and low latency / streaming makes it feel like you're / hanging out on the couch with / friends while playing a game, / watching shows, looking at photos, / or idk doing homework or / something.
  - No button, link, eyebrow or icon inside the card
- components: feature_card, video_frame

**Feature card 3: Hop in when you're free**
- summary: 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.
- ground: page gradient (no own color); the band carries a star texture image (Texture 4)
- desktop: band card y 2651-3261; section padding 95px 0 190px; card x 100-1340 (1240x610), radius 120px, padding 28px; ground = card-bg-3.png drawn background-size cover (a soft translucent blurple glass gradient, lighter top-left); block-2; media video frame x 128 y 2679, 727x554, radius 104px, overflow hidden, plays video-3.mp4 (autoplay muted loop playsinline, object-fit cover) with poster-3-hop-in.jpg as its poster. video poster: dark blurple gradient with a server channel list (The Crew) and a main-chat message; text heading y 2832 (4 lines, 134px), body y 2976 (4 lines), text x 904 w 384, vertically centred in the card; H2 to body gap 10px; body lines are exact with DM Sans 20px/26px +0.32px at 384px; props float-box.webp 217x208 at x 1102 y 2533, IN FRONT of the card, sitting on its top-right edge
- phone: card x 24-366 (342 wide), y 2368, height 530 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line; order H2, body, then the video frame (306x233, radius 48px, x 42) 40px below the body; 18px from frame bottom to card bottom; type H2 27px/24.3px uppercase in 4 lines, text x 58 w 275; body 16px/20.8px 0.32px (card 1 only: line-height 19px) in exactly 5 lines at 275px (DM Sans at 0.32px tracking gives this count; never narrow the column); props float-box.webp 188x182 at x 296 y 2905, opacity 0.6, rotated 10deg, half off the right edge (keep every prop on phone)
- anatomy:
  - H2 lines: HOP IN WHEN / YOU'RE FREE, / NO NEED TO / CALL
  - Body copy (verbatim): Easily hop in and out of voice or text chats without having to call or invite anyone, so your party chat lasts before, during, and after your game session.
  - Desktop body line breaks as measured on the page (force them with <br> because the stand-in wraps differently): Easily hop in and out of voice or text / chats without having to call or invite / anyone, so your party chat lasts before, / during, and after your game session.
  - Phone body line breaks as measured (force with <br>, phone only): Easily hop in and out of voice or / text chats without having to call or / invite anyone, so your party chat / lasts before, during, and after your / game session.
  - No button, link, eyebrow or icon inside the card
- components: feature_card, video_frame

**Marquee: Talk / Play / Chat / Hang out**
- summary: 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.
- ground: marquee-line.png stretched (cover): a horizontal band #27266A at the edges to #5A60C4 in the middle
- desktop: band y 3451-3591, 140px tall, full bleed; row one row vertically centred (y 3507-3534 for the marks): repeat [Clyde mark, word] with 56px gap; words TALK, PLAY, CHAT, HANG OUT repeated; type Archivo 900 wdth 112, 61px, uppercase, #FFFFFF, words 25px tall boxes (line-height tight); mark marquee-mark.webp (white Clyde) 36x27
- phone: shown not shown on phone
- anatomy:
  - Static resting state: the row starts with a Clyde mark at x -384 so PLAY is the first whole word (x 48); then CHAT (x 388), HANG OUT, TALK... (first frame in the screenshot shows ... PLAY, CHAT, HANG OUT, TAL cut at the right edge)
  - Motion: continuous leftward scroll (animation only)
- components: marquee

**Feature card 4: See who's around to chill**
- summary: 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.
- ground: page gradient (no own color); the band carries a star texture image (Texture 5)
- desktop: band card y 3780-4390; section padding 190px 0 136px; card x 100-1340 (1240x610), radius 120px, padding 28px; ground = card-bg-4.png drawn background-size cover (a soft translucent blurple glass gradient, lighter top-left); is-reverse; media video frame x 579 y 3808, 727x554, radius 104px, overflow hidden, plays video-4.mp4 (autoplay muted loop playsinline, object-fit cover) with poster-4-around.jpg as its poster. video poster: maroon-to-pink gradient with an Online/Offline member list; text heading y 3978 (3 lines), body y 4088 (4 lines), text x 153 w 384, vertically centred in the card; H2 to body gap 10px; body lines are exact with DM Sans 20px/26px +0.32px at 384px; props float-coin.webp 210x211 at x 4 y 4181, a blurred lilac coin BEHIND the card: visible only left of x 100
- phone: card x 24-366 (342 wide), y 3121, height 508 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line; order H2, body, then the video frame (306x233, radius 48px, x 42) 40px below the body; 18px from frame bottom to card bottom; type H2 27px/24.3px uppercase in 3 lines, text x 58 w 275; body 16px/20.8px 0.32px (card 1 only: line-height 19px) in exactly 5 lines at 275px (DM Sans at 0.32px tracking gives this count; never narrow the column); props float-coin.webp 132x133 at x -52 y 3686 (below the card, half off the left edge) (keep every prop on phone)
- anatomy:
  - H2 lines: SEE WHO'S / AROUND TO / CHILL
  - Body copy (verbatim): See who's around, playing games, or just hanging out. For supported games, you can see what modes or characters your friends are playing and directly join up.
  - Desktop body line breaks as measured on the page (force them with <br> because the stand-in wraps differently): See who's around, playing games, or just / hanging out. For supported games, you / can see what modes or characters your / friends are playing and directly join up.
  - Phone body line breaks as measured (force with <br>, phone only): See who's around, playing games, / or just hanging out. For supported / games, you can see what modes or / characters your friends are playing / and directly join up.
  - No button, link, eyebrow or icon inside the card
- components: feature_card, video_frame

**Feature card 5: Always have something to do together**
- summary: 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.
- ground: page gradient (no own color); the band carries a star texture image (Texture 6)
- desktop: band card y 4661-5271; section padding 136px 0 151px; card x 100-1340 (1240x610), radius 120px, padding 28px; ground = card-bg-5.png drawn background-size cover (a soft translucent blurple glass gradient, lighter top-left); block-4; media video frame x 128 y 4689, 727x554, radius 104px, overflow hidden, plays video-5.mp4 (autoplay muted loop playsinline, object-fit cover) with poster-5-together.jpg as its poster. video poster: green gradient with a phone in a voice call, a YouTube tile and a Share your screen pill; text heading y 4846 (3 lines), body y 4956 (5 lines), text x 896 w 384, vertically centred in the card; H2 to body gap 10px; body lines are exact with DM Sans 20px/26px +0.32px at 384px; props three characters BEHIND the card, peeking over its top edge above the text: card5-characters-bot.png 201x149 at x 847 y 4535, card5-woman.webp 201x201 at x 836 y 4671, card5-garfield.webp 221x329 at x 1007 y 4511; everything below the card top (y 4661) is hidden by the card, so only heads and shoulders show and nothing reaches the H2; float-radish.webp 227x246 at x 59 y 5039 (white radish with a green sprout) IN FRONT of the card, over its bottom-left corner
- phone: card x 24-366 (342 wide), y 3864, height 528 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line; order H2, body, then the video frame (306x233, radius 48px, x 42) 40px below the body; 18px from frame bottom to card bottom; type H2 27px/24.3px uppercase in 3 lines, text x 58 w 275; body 16px/20.8px 0.32px (card 1 only: line-height 19px) in exactly 6 lines at 275px (DM Sans at 0.32px tracking gives this count; never narrow the column); props characters BEHIND the card, peeking over its top edge: card5-characters-bot.png 90x67 at x 156 y 3808, card5-woman.webp 90x90 at x 148 y 3868, card5-garfield.webp 98x145 at x 229 y 3797; float-radish.webp 108x117 at x -17 y 4370 (keep every prop on phone)
- anatomy:
  - H2 lines: ALWAYS HAVE / SOMETHING TO / DO TOGETHER
  - Body copy (verbatim): Watch videos, play built-in games, listen to music, or just scroll together and spam memes. Seamlessly text, call, video chat, and play games, all in one group chat.
  - Desktop body line breaks as measured on the page (force them with <br> because the stand-in wraps differently): Watch videos, play built-in games, listen / to music, or just scroll together and / spam memes. Seamlessly text, call, / video chat, and play games, all in one / group chat.
  - Phone body line breaks as measured (force with <br>, phone only): Watch videos, play built-in / games, listen to music, or just / scroll together and spam memes. / Seamlessly text, call, video chat, / and play games, all in one group / chat.
  - No button, link, eyebrow or icon inside the card
- components: feature_card, video_frame

**Feature card 6: Wherever you game, hang out here**
- summary: 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.
- ground: page gradient (no own color); the band carries a star texture image (Texture 7)
- desktop: band card y 5572-6182; section padding 151px 0 190px; card x 100-1340 (1240x610), radius 120px, padding 28px; ground = card-bg-6.png drawn background-size cover (a soft translucent blurple glass gradient, lighter top-left); is-reverse: card ground image only (the site lists a white sheen gradient under it, but the opaque image hides it: never add a sheen or a bright rim); media video frame x 579 y 5600, 727x554, radius 104px, overflow hidden, plays video-6.mp4 (autoplay muted loop playsinline, object-fit cover) with poster-6-platforms.jpg as its poster. video poster: dark-to-blurple gradient with a column of five round platform badges (Xbox, PlayStation, Windows, iOS, Android) at the left; text heading y 5757 (3 lines), body y 5867 (5 lines), text x 153 w 384, vertically centred in the card; H2 to body gap 10px; body lines are exact with DM Sans 20px/26px +0.32px at 384px; props float-plump.webp 293x293 at x 1028 y 5262 (a purple round prop with a pink handle) floating just above the card top-right (it ends at y 5555, 17px above the card)
- phone: card x 24-366 (342 wide), y 4619, height 508 (measured; trust it), radius 56px, padding 28px 18px 18px; the text block has a further 16px side inset: text column x 58-333 (275px) (card 5: x 64-327, 263px); the H2 may overflow its column to x 348 when the stand-in runs wide; never wrap it into an extra line; order H2, body, then the video frame (306x233, radius 48px, x 42) 40px below the body; 18px from frame bottom to card bottom; type H2 27px/24.3px uppercase in 3 lines, text x 58 w 275; body 16px/20.8px 0.32px (card 1 only: line-height 19px) in exactly 5 lines at 275px (DM Sans at 0.32px tracking gives this count; never narrow the column); props float-plump.webp 134x134 at x 282 y 4493 (above the card top-right, half off the edge) (keep every prop on phone)
- anatomy:
  - H2 lines: WHEREVER YOU / GAME, HANG OUT / HERE
  - Body copy (verbatim): On your PC, phone, or console, you can still hang out on Discord. Easily switch between devices and use tools to manage multiple group chats with friends.
  - Desktop body line breaks as measured on the page (force them with <br> because the stand-in wraps differently): On your PC, phone, or console, you can / still hang out on Discord. Easily switch / between devices and use tools to / manage multiple group chats / with friends.
  - Phone body line breaks as measured (force with <br>, phone only): On your PC, phone, or console, you / can still hang out on Discord. / Easily switch between devices and / use tools to manage multiple / group chats with friends.
  - No button, link, eyebrow or icon inside the card
- components: feature_card, video_frame

**Closing banner: You can't scroll anymore**
- summary: 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.
- ground: page gradient darkening to #000002 at the bottom, with the Texture 7 star image
- desktop: band y 6371-7275 (overlaps the footer top by 12px); no padding; h2 y 6371, x 276-1165 (889 wide) centred, 2 lines: "YOU CAN'T SCROLL ANYMORE." / "BETTER GO CHAT." 48px/57.6px -0.48px uppercase #FFFFFF; button Download for Mac 262x65 at x 589 y 6596 (centred), white #FFFFFF, #000000 text, 20px, padding 12px 24px 12px 56px, download icon as a 32px background image at 25px from the left; art three layers, back to front: (1) banner-characters.png 1024x484 at x 208 y 6814, the cast with a gap in the middle; the footer (z above it) covers its bottom 35px, so feet stop at the footer edge y 7263. (2) the footer. (3) the big blue Wumpus centred in the gap, IN FRONT of the footer: banner-wumpus-list.webp (the leaf) 312x121 at x 571 y 6907, then banner-wumpus-sitting.webp 304x389 at x 573 y 7015 (its legs overlap the footer to y 7404). Desktop shows all three; never leave the middle empty
- phone: h2 27px/32.4px, 3 lines centred (YOU CAN'T SCROLL / ANYMORE. / BETTER GO CHAT.) at y 5388; button 199x50 at x 96 y 5548, 16px, padding 10px 16px 10px 48px; art banner-wumpus-list.webp (leaf on the head) 332x97 at x 37 y 5627, banner-wumpus-sitting.webp 332x424 at x 29 y 5742, overlapping the footer top
- anatomy:
  - Exactly one button; no body copy
  - Cast behind the footer, Wumpus in front of it (desktop and phone)
  - Button text here is #000000; the hero white button uses #23272A (both measured)
- components: button_white_large

**Footer**
- summary: 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.
- ground: footer-bg.png stretched (cover): #211F62 at top to #3D43AB mid to #5764EE at the bottom; the closing banner characters overlap its top edge
- anatomy:
  - Desktop band y 7263-8086 (page ends at 8086); padding 20px 0 0. Content starts y 7363.
  - Left column x 40, absolute y values (do not use margins that drift): footer-symbol.svg (white Clyde, 59x44) at y 7363-7407; 47px gap to the Language label
  - Language label top y 7454 (text ink 7458-7472): 16px/20px 400 rgba(255,255,255,0.7). 16px below it, the select at x 40 y 7490 (to 7546), 314x56, radius 16px, fill rgba(255,255,255,0.1), padding 17.5px 16px 17.5px 24px; "English" 16px/24px #FFFFFF; 24px chevron-down (footer-chevron.svg) at the right (x 330)
  - Social label at y 7594 (same style as Language). Five 24px white icons at y 7630, x 40, 93, 146, 199, 252 (53px pitch): X, Instagram, Facebook, YouTube, TikTok
  - Four link columns, each 200px wide, at x 540, 760, 980, 1200 (220px pitch). Heading y 7363: 16px/20px 400 rgba(255,255,255,0.7). Links from y 7395, 16px/24px 400 #FFFFFF, one every 36px (24px line + 12px gap)
  - Product: Download, Nitro, Status, App Directory, Gift Cards
  - Company: About, Jobs, Brand, Newsroom
  - Resources: Support, Safety, Blog, Creators, Community, Developers, Quests, Official 3rd Party Merch, Feedback
  - Policies: Terms, Privacy, Cookie Settings, Guidelines, Acknowledgements, Licenses, Company Information
  - Wordmark: footer-wordmark.svg (#E0E3FF letters "Discord", viewBox 1765x280, no inset) drawn 1358px wide x 215px tall at x 41, top y 7822; the letters span x 41-1398 and y 7824 (top of the i dot) to 8037 (baseline). 49px of footer gradient remain below it; the page ends at 8086. It is NOT cropped. No copyright line, address or phone appears on the homepage.
- phone: Symbol at x 24 y 6107; Language label 14px, select 342x56; "Menu" label 14px rgba(255,255,255,0.7) at y 6364, then four collapsed accordions (Product, Company, Resources, Policies) 18px/500 rgba(255,255,255,0.7), each row about 70px tall with a 1px rgba(255,255,255,0.1) divider and a chevron at the right; Social label and five icons (53px pitch) at y 6774; wordmark drawn 342px wide (x 24-366) x 54px, top y 6886, 31px of gradient below it to the page end 6971; not cropped.

**On dark grounds**
- secondary button: white fill #FFFFFF with #23272A text (there is no outline button)
- link: #FFFFFF, no underline
- muted text: rgba(255,255,255,0.7) (labels in the footer)
- hairline: rgba(255,255,255,0.1) (phone footer dividers)
- logo variant: white Clyde + wordmark; Light Blurple #E0E3FF for the giant footer wordmark

## Components

- **button white large** (observed): fill #FFFFFF, text #23272A, radius 12, height 65, padding 15px 24px, padding x 24, font size 20, weight 400, face body, example Download for Mac (hero, 262x65, with a 24px download icon before the label). phone 56px tall, 18px label
  - hover (observed): fill #C7C8CE, shadow rgba(0,0,0,0.2) 0 8px 15px
- **button blurple large** (observed): fill #5865F2, text #FFFFFF, radius 12, height 65, padding 19.5px 24px, padding x 24, font size 20, weight 400, face body, example Open Discord in your browser (hero, 326x65). no icon; phone 56px tall, 18px label; no visible hover change measured
- **button login** (observed): fill #FFFFFF, text #000000, radius 16, height 39, padding 10px 16px, padding x 16, font size 16, weight 500, face body, example Log In (nav, 80x39)
  - hover (observed): fill #C7C8CE
- **feature card** (observed): radius 120, width 1240, height 610, padding 28px. Ground is a soft glass gradient image (card-bg-N.png, cover), lighter at the top-left; some cards add backdrop-filter blur. Phone: radius 56px, 342 wide, padding 28px 18px 18px
- **video frame** (observed): radius 104, width 727, height 554. overflow hidden, object-fit cover, autoplay loop muted product video; show the poster at rest. Phone 306x233 radius 48px
- **nav link** (observed): text #FFFFFF, font size 16, weight 500, padding 10px 16px. chevron-down after dropdown labels
- **footer link** (observed): text #FFFFFF, font size 16, weight 400. 24px line, 12px between links
- **language select** (observed): fill rgba(255,255,255,0.1), radius 16, height 56, width 314, padding 17.5px 16px 17.5px 24px
- **burger** (observed): fill rgba(255,255,255,0.1), radius 14, height 40, width 40
- **marquee** (observed): height 140, gap 56. Clyde mark 36x27 between words; words Ginto Nord 61px white

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| button-hover | ease | 300ms | white buttons fade to #C7C8CE and gain a soft shadow (transition 0.3s) | observed |
| nav-login-hover | ease | 250ms | Log In background-color transition 0.25s | observed |
| marquee |  |  | Talk / Play / Chat / Hang out strip scrolls left continuously (JS driven); the screenshot shows one resting frame | observed |
| parallax-props |  |  | 3D props drift vertically as you scroll (transform translateY up to about 240px); the hero props bob gently | observed |
| product-video |  |  | each feature card autoplays a looping product video; reduced-motion swaps in still images | observed |

## Icon tokens

Grid not published, stroke filled glyphs, not published (observed).
| Name | Size | Use |
|---|---|---|
| ui | 24px | download arrow, chevrons, social icons |

## Signature moves

### Night-sky gradient ground with stars

Where: the whole homepage behind everything, from the nav to the footer.
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).
Don't: use a flat color or put white or Light Blurple sections on the homepage.

### Huge-radius glass feature cards

Where: each of the six feature blocks.
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.
Don't: use small radii, borders, drop shadows or white cards.

### Wide, heavy uppercase headlines

Where: every headline and the marquee.
Do: Ginto Nord Bold (stand-in Archivo 900 wdth 112) uppercase, tight leading under 1 (0.86-0.93) so lines nearly touch, white.
Don't: use sentence case, regular weight or extra leading.

### Floating 3D props and characters

Where: around and overlapping the cards and hero.
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.
Don't: replace them with icons, emoji or flat illustration tiles.

### Giant Light Blurple footer wordmark

Where: bottom of every marketing page.
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).
Don't: shrink it into a normal footer logo.

## Messaging: rules

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).

Why it works: Friends and fun are the product; features are framed as moments with friends.

- One promise per card, framed as an activity with friends
- No stats or proof on the homepage

Sources: https://discord.com/, https://discord.com/company

## Voice: rules

Casual, second-person, slangy body copy under shouted uppercase headlines. The company and blog pages are warmer and jokier; the branding page is legal.

Why it works: Discord talks the way its users talk in chat.

- 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
- Don't use corporate claims like "best-in-class"
- Don't write the name in all caps as a word

Sources: https://discord.com/, https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine

## Logo: rules

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.

Why it works: A simpler, symmetric Clyde reads at pin size and can show expressions.

|  |  |
|---|---|
| Lockups | logo (symbol + wordmark), symbol |
| Colors | Blurple, black, white |
| Clear space | diagram: wordmark D height / 1/3 symbol |
| Minimum size | not published |

- 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

Sources: https://discord.com/branding, https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine

## Color: rules

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.

Why it works: One saturated signature color (not quite blue, not quite purple) owns the page; the status colors stay in the product.

|  |  |
|---|---|
| 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 |

- 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

Sources: https://discord.com/branding, https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine, https://discord.com/

## Typography: rules

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.

Why it works: A wide heavy uppercase gives the shouty, game-box energy; a friendly geometric body keeps it readable.

|  |  |
|---|---|
| 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) |

- 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

Sources: https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine, https://discord.com/

## Graphic elements: rules

Huge-radius glass cards, night-sky gradient with stars, floating 3D props, a word marquee and the edge-to-edge footer wordmark.

Why it works: They make a chat app feel like a game world.

- 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

Sources: https://discord.com/

## Illustration: rules

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.

Why it works: Characters make the product about people; toys make it playful.

- Characters and props break out of cards and off the page edge
- Palette leans blurple, pink and lilac with green accents

Sources: https://discord.com/, https://discord.com/branding

## Motion: rules

Autoplay looping product videos, a scrolling word marquee, floating parallax props and 0.25-0.3s button fades.

Why it works: Constant gentle movement keeps the page feeling alive like a server.

- Respect reduced motion: swap videos for still images (the site does)

Sources: https://discord.com/

## Interface and layout: rules

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.

Why it works: Alternation gives rhythm without needing section headers.

|  |  |
|---|---|
| Page margin | 100px desktop, 24px phone |
| Card | 1240x610, radius 120 |
| Media | 727x554, radius 104 |

- Alternate the media side card by card
- Keep text columns about 384px wide
- Phone: everything stacks, text first, 24px margins

Sources: https://discord.com/

## Rules: rules

The branding page lists legal do's and don'ts.

Why it works: Protects the marks while letting users say they have a Discord server.

- 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
- Don't adopt confusingly similar trademarks, logos or trade dress
- Don't copy the look and feel of the Discord site, app or marketing
- Don't use the marks on merchandise

Sources: https://discord.com/branding

## By format

How loud the system gets by format. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 5 | 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 | 4 | 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 | 1 | black ground, plain sentence copy, logo tiles with large radii | none |

## Checks before anything ships

- **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.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Discord's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- 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

Logos and reference images belong to Discord. Look at them on Discord's own pages; don't reuse them.