{
"schema": "brand-kit@2",
"palette": {
"paper": "#FFFFFF",
"surface": "#E0E3FF",
"ink": "#23272A",
"ink_muted": "#4E5058",
"accent": "#5865F2",
"on_accent": "#FFFFFF",
"accent_secondary": "#EB459E",
"night": "#1A2081",
"on_night": "#FFFFFF",
"extras": [
{
"name": "Blurple",
"hex": "#5865F2",
"role": "Primary brand color: logo color option, the brand button fill (Open Discord in your browser), every blurple ground",
"prov": "published",
"source": "https://discord.com/branding",
"also": [
"https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine"
],
"pms": "2726 C",
"rgb": "88, 101, 242"
},
{
"name": "Light Blurple",
"hex": "#E0E3FF",
"role": "Published second brand color: light grounds; on the homepage it is the giant footer wordmark fill",
"prov": "published",
"source": "https://discord.com/branding",
"site_use": "footer wordmark SVG fill (observed https://discord.com/ (2026-10-31))"
},
{
"name": "Black",
"hex": "#000000",
"role": "Published third brand color on the branding page: logo-on-black ground, guide page ground",
"prov": "published",
"source": "https://discord.com/branding"
},
{
"name": "Not quite black",
"hex": "#23272A",
"role": "The 2021 palette's Black (HEX 23272A, RGB 35,39,42); text on white buttons (Download for Mac)",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine",
"site_use": "white button text color (observed https://discord.com/ (2026-10-31))"
},
{
"name": "Green",
"hex": "#57F287",
"role": "2021 palette: status-inspired accent (Online); PMS 3385 C",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine"
},
{
"name": "Yellow",
"hex": "#FEE75C",
"role": "2021 palette: status-inspired accent (Away)",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine"
},
{
"name": "Fuchsia",
"hex": "#EB459E",
"role": "2021 palette: playful pink accent, not tied to an app status; PMS Rhodamine",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine"
},
{
"name": "Red",
"hex": "#ED4245",
"role": "2021 palette: added in 2021, status-inspired (Do Not Disturb)",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine"
},
{
"name": "White",
"hex": "#FFFFFF",
"role": "All homepage type and the white button fill",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine",
"site_use": "every headline, body line and nav label on the homepage (observed https://discord.com/ (2026-10-31))"
},
{
"name": "Deep space",
"hex": "#1A2081",
"role": "Body background color under the page gradient image (body.is-dark-blue); the page reads as a night-sky blue",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Space top",
"hex": "#080925",
"role": "Darkest stop of the page gradient image, at the very top (behind the nav)",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Space glow",
"hex": "#353AAA",
"role": "Brightest stop of the page gradient image (about 20-40% down the page)",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Phone ground",
"hex": "#161CBB",
"role": "Root ground measured at 390px",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Marquee edge",
"hex": "#27266A",
"role": "Edges of the marquee strip ground image",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Marquee centre",
"hex": "#5A60C4",
"role": "Centre of the marquee strip ground image",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Space bottom",
"hex": "#000002",
"role": "Bottom stop of the page gradient (behind the closing banner)",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Footer middle",
"hex": "#3D43AB",
"role": "Middle of the footer gradient image",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Footer top",
"hex": "#211F62",
"role": "Top of the footer gradient image",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Footer bottom",
"hex": "#5764EE",
"role": "Bottom of the footer gradient image (near Blurple), behind the wordmark",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Button hover grey",
"hex": "#C7C8CE",
"role": "White buttons (Log In, Download for Mac) turn this grey on hover",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "UI muted",
"hex": "#4E5058",
"role": "Not used on the homepage; muted UI text role is not published. Kept only as the kit ink_muted placeholder: use white at 70% on dark grounds instead",
"prov": "inferred",
"source": "no published muted text color; homepage uses rgba(255,255,255,0.7)"
}
]
},
"typography": {
"display": {
"family": "Archivo",
"steal_family": "Archivo",
"weight": 900,
"width_axis": 112,
"tracking": -0.01,
"line_height": 0.86,
"fallback_stack": "Archivo, \"Arial Black\", sans-serif",
"real": "ABC Ginto Discord Nord Bold (a custom cut of Dinamo's ABC Ginto Nord, licensed; not available to us)",
"stand_in": true,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"site": {
"family_css": "Abcgintodiscordnord (ABCGintoDiscordNord-Bold.woff2)",
"weight": "700 (H1) and 800 requested on H2s; only the Bold file exists, so both render Bold",
"size_px": "56 H1 / 48 closing H2 / 36 section H2 desktop; 27 on phone",
"line_height": "0.857 H1 (48 at 56), 0.93 H2 (33.5 at 36), 1.2 closing H2 (57.6 at 48)",
"tracking": "-0.01em (-0.56px at 56, -0.36px at 36)",
"case": "uppercase via text-transform",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"calibration": "Rendered \"GROUP CHAT THAT'S ALL FUN & GAMES\" at 56px: real Nord Bold 1337px wide, cap height 39.2px. Archivo 900 at font-stretch 112% = 1328px (-0.7%), cap 38.5px. Unbounded 700 1380px but cap 42px and rounded terminals; Lexend Exa 900 1391px and lighter ink (19.5 vs 24.1 ink/px); Dela Gothic One 1405px. Per line at 56px: GROUP CHAT real 444 / Archivo 437, THAT'S ALL 377/381, FUN & GAMES 464/466; closing line 1032/1026. Archivo 900 / wdth 112 is the match: load Archivo from Google Fonts with the wdth axis (62..125) and set font-stretch: 112%."
},
"body": {
"family": "DM Sans",
"steal_family": "DM Sans",
"weight": 400,
"tracking": 0.016,
"line_height": 1.3,
"scale": 1,
"fallback_stack": "\"DM Sans\", \"Helvetica Neue\", Arial, sans-serif",
"real": "ABC Ginto Discord Regular / Medium (custom cut of Dinamo's ABC Ginto Normal, licensed; not available to us)",
"stand_in": true,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"site": {
"family_css": "Abcgintodiscord (ABCGintoDiscord-Regular.woff2 400, -Medium.woff2 500)",
"weights": "400 body and buttons, 500 nav links and Log In",
"sizes_px": "20 body (16 phone), 20 hero buttons (18 phone), 16 nav and footer",
"line_height": "1.3 (26px at 20, 20.8px at 16)",
"tracking": "0.32px on hero and first card body, 0.25px on buttons, normal elsewhere",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"calibration": "Rendered the hero body line at 20px: real Ginto Discord Regular 925px, x-height 10px, cap 14px, ink 4.51/px. DM Sans 400 = 924px (-0.1%), x 10.1, cap 14, ink 4.31. Figtree 895px (-3%), Inter 952 (+3%). Nav labels at 16px/500: real 555px, DM Sans 549px (-1%). DM Sans is the match for body, buttons, nav and footer. Wrap test with the real face: hero (491px) 4 lines, card bodies at 384px 6/6/4/4/5/5 lines and at 275px (phone) 7/7/5/5/6/5 lines: DM Sans 20px/26px +0.32px reproduces every count."
}
},
"style": {
"button_shape": "rounded",
"button_note": "12px radius on 65px marketing buttons, 16px on the nav Log In; white or Blurple fills only, no outline buttons",
"corners": "very large radii: 120px glass cards, 104px media, 56px/48px on phone; the branding page uses about 48px on logo tiles",
"linework": "none: depth comes from 3D renders and gradients",
"motion": "marquee, gentle floating props, autoplay product videos, 0.25-0.3s button fades",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"voice": {
"tone": [
"playful",
"casual",
"welcoming",
"bold"
],
"notes": [
"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": [
{
"id": "headline-case",
"kind": "headline_case",
"value": "upper",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"note": "set via text-transform; source copy is mixed case"
},
{
"id": "person",
"kind": "person",
"value": "we_you",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"id": "spelling",
"kind": "spelling",
"value": "en-US",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"id": "no-exclaim",
"kind": "exclamations",
"value": "never",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"note": "no exclamation mark anywhere on the homepage"
},
{
"id": "short",
"kind": "max_sentence_words",
"value": 40,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"note": "longest homepage sentence is 33 words"
},
{
"id": "friends",
"kind": "guidance",
"text": "Talk about friends, games and hanging out, not features or productivity",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"id": "casual",
"kind": "guidance",
"text": "Casual slang is allowed in body copy (idk, chill, spam memes); never in legal copy",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"id": "no-proof",
"kind": "guidance",
"text": "No stats, customer logos or testimonials on the homepage",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"id": "adjective",
"kind": "guidance",
"text": "Use \"Discord\" as a proper noun or an adjective (a Discord server); never turn it into a verb or put it in another name",
"prov": "published",
"source": "https://discord.com/branding"
},
{
"id": "title-wordmark",
"kind": "guidance",
"text": "The name is always written title case, \"Discord\", like a person's name",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine"
}
],
"approved": {
"phrases": [
"hang out",
"group chat",
"talk, play, and hang out",
"Imagine a Place"
],
"words": [
"chill",
"hang out",
"friends",
"play",
"talk"
]
},
"banned": [
"DISCORD (all caps as the name)",
"Discord as a verb"
],
"is_not": [
"corporate",
"technical",
"salesy"
],
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"spec": {
"source": "https://discord.com/",
"how": "computed styles at 1440 and 390 with Playwright, 2026-10-31",
"provenance": "observed",
"motion": [
{
"name": "button-hover",
"easing": "ease",
"duration_ms": 300,
"use": "white buttons fade to #C7C8CE and gain a soft shadow (transition 0.3s)",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "nav-login-hover",
"easing": "ease",
"duration_ms": 250,
"use": "Log In background-color transition 0.25s",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "marquee",
"use": "Talk / Play / Chat / Hang out strip scrolls left continuously (JS driven); the screenshot shows one resting frame",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "parallax-props",
"use": "3D props drift vertically as you scroll (transform translateY up to about 240px); the hero props bob gently",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "product-video",
"use": "each feature card autoplays a looping product video; reduced-motion swaps in still images",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
}
],
"icons": {
"grid": "not published",
"sizes": [
{
"name": "ui",
"px": 24,
"use": "download arrow, chevrons, social icons"
}
],
"stroke": "filled glyphs, not published",
"color": "white on dark, #23272A on white buttons",
"rule": "plain filled UI icons; the brand's personality goes into 3D props, not icons",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"signature": [
{
"id": "night-sky-gradient",
"name": "Night-sky gradient ground with stars",
"where": "the whole homepage behind everything, from the nav to the footer",
"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)",
"dont": "use a flat color or put white or Light Blurple sections on the homepage",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"id": "glass-card",
"name": "Huge-radius glass feature cards",
"where": "each of the six feature blocks",
"spec": "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",
"dont": "use small radii, borders, drop shadows or white cards",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"id": "wide-uppercase",
"name": "Wide, heavy uppercase headlines",
"where": "every headline and the marquee",
"spec": "Ginto Nord Bold (stand-in Archivo 900 wdth 112) uppercase, tight leading under 1 (0.86-0.93) so lines nearly touch, white",
"dont": "use sentence case, regular weight or extra leading",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine",
"note": "the wide face is published (custom font based on Ginto); uppercase and leading are observed"
},
{
"id": "3d-props",
"name": "Floating 3D props and characters",
"where": "around and overlapping the cards and hero",
"spec": "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",
"dont": "replace them with icons, emoji or flat illustration tiles",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"id": "footer-wordmark",
"name": "Giant Light Blurple footer wordmark",
"where": "bottom of every marketing page",
"spec": "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)",
"dont": "shrink it into a normal footer logo",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
}
],
"page": {
"source": "https://discord.com/",
"date": "2026-10-31",
"prov": "observed",
"voices": "Two voices. The homepage (this anatomy) is the campaign voice: shouty uppercase wide headlines, casual gamer talk in the body (\"idk doing homework or something\"), second person, no numbers or proof. The branding page is plainer and legal. A landing page follows the homepage voice; legal and trademark copy follows the branding page.",
"nav": {
"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
; 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)"
},
"sections": [
{
"name": "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
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
, 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"
},
{
"name": "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
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
, 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"
},
{
"name": "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
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
, 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"
},
{
"name": "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"
},
{
"name": "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
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
, 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"
},
{
"name": "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
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
, 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"
},
{
"name": "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
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
, 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"
},
{
"name": "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."
},
"dark_ground": {
"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"
}
},
"bands": [
{
"label": "Navigation",
"ground": "transparent over #080925",
"content": "logo, 9 links (6 with chevrons), Log In",
"desktop": "80px, absolute, items centred on y 60",
"phone": "64px fixed: logo + 40px burger",
"anatomy": [
"Not sticky on desktop; no border or blur"
]
},
{
"label": "Hero",
"ground": "page gradient + star texture",
"content": "3-line uppercase H1, 4-line body, 3D app scene, two centred buttons",
"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",
"anatomy": [
"Buttons centred below both columns, not under the text"
]
},
{
"label": "Feature card 1: Make your group chats more fun",
"ground": "page gradient",
"content": "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.",
"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",
"anatomy": []
},
{
"label": "Feature card 2: Stream like you're in the same room",
"ground": "page gradient",
"content": "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.",
"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",
"anatomy": []
},
{
"label": "Feature card 3: Hop in when you're free",
"ground": "page gradient",
"content": "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.",
"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",
"anatomy": []
},
{
"label": "Marquee: Talk / Play / Chat / Hang out",
"ground": "marquee-line.png",
"content": "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.",
"desktop": "y 3451-3591, 140px tall, full bleed",
"phone": "not shown on phone",
"anatomy": []
},
{
"label": "Feature card 4: See who's around to chill",
"ground": "page gradient",
"content": "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.",
"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",
"anatomy": []
},
{
"label": "Feature card 5: Always have something to do together",
"ground": "page gradient",
"content": "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.",
"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",
"anatomy": []
},
{
"label": "Feature card 6: Wherever you game, hang out here",
"ground": "page gradient",
"content": "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.",
"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",
"anatomy": []
},
{
"label": "Closing banner: You can't scroll anymore",
"ground": "page gradient",
"content": "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.",
"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",
"anatomy": []
},
{
"label": "Footer",
"ground": "gradient #211F62 to #5764EE",
"content": "symbol, language select, social, 4 link columns, giant Light Blurple wordmark",
"desktop": "y 7263-8086",
"phone": "y 6007-6971 with accordions",
"anatomy": [
"Wordmark fills the width (x 41-1398) with 49px of gradient below it; not cropped"
]
}
],
"layout": {
"page_margin": {
"desktop": 100,
"phone": 24
},
"section_padding": {
"desktop": 140,
"phone": 110
},
"container_max": 1240,
"hero_text_max": 491,
"columns": 2,
"columns_phone": 1,
"gutter": 48,
"gutter_phone": 0,
"card_gap": 206,
"nav_height": 80,
"note": "Feature cards are 1240 wide at x 100 (100px margins); text columns 384px; the hero text starts at x 100 too, but the nav sits at a 40px inset (logo x 40, Log In right edge 1400). Vertical gap between cards varies 189-301px (519px around the marquee). Phone: 24px margins, cards 342 wide.",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"type": [
{
"role": "Hero H1",
"id": "display-xl",
"face": "display",
"size": {
"desktop": 56,
"phone": 27
},
"line_height": 0.857,
"tracking_px": -0.56,
"tracking_phone_px": -0.27,
"weight": 900,
"width_axis": 112,
"case": "uppercase",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"note": "real face weight 700 (Bold); stand-in Archivo needs 900 at wdth 112"
},
{
"role": "Closing banner H2",
"id": "display-lg",
"face": "display",
"size": {
"desktop": 48,
"phone": 27
},
"line_height": 1.2,
"tracking_px": -0.48,
"weight": 900,
"width_axis": 112,
"case": "uppercase",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"role": "Feature card H2",
"id": "display-md",
"face": "display",
"size": {
"desktop": 36,
"phone": 27
},
"line_height": 0.93,
"tracking_px": -0.36,
"tracking_phone_px": -0.27,
"weight": 900,
"width_axis": 112,
"case": "uppercase",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"role": "Marquee word",
"id": "marquee",
"face": "display",
"size": {
"desktop": 61,
"phone": 61
},
"line_height": 0.41,
"weight": 900,
"width_axis": 112,
"case": "uppercase",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"note": "desktop only"
},
{
"role": "Body large (hero and cards)",
"id": "body-lg",
"face": "body",
"size": {
"desktop": 20,
"phone": 16
},
"line_height": 1.3,
"tracking_px": 0.32,
"weight": 400,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"role": "Hero button label",
"id": "button-lg",
"face": "body",
"size": {
"desktop": 20,
"phone": 18
},
"line_height": 1.3,
"tracking_px": 0.25,
"weight": 400,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"role": "Nav link / Log In",
"id": "nav",
"face": "body",
"size": {
"desktop": 16,
"phone": 16
},
"line_height": 1.2,
"weight": 500,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"role": "Footer link",
"id": "footer-link",
"face": "body",
"size": {
"desktop": 16,
"phone": 14
},
"line_height": 1.5,
"weight": 400,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"role": "Footer label",
"id": "footer-label",
"face": "body",
"size": {
"desktop": 16,
"phone": 14
},
"line_height": 1.25,
"weight": 400,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"note": "rgba(255,255,255,0.7)"
}
],
"components": {
"button_white_large": {
"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)",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"states": {
"hover": {
"measured": {
"fill": "#C7C8CE",
"shadow": "rgba(0,0,0,0.2) 0 8px 15px"
},
"css": {
"background-color": "#C7C8CE",
"box-shadow": "0 8px 15px rgba(0,0,0,0.2)"
},
"prov": "observed"
}
},
"note": "phone 56px tall, 18px label"
},
"button_blurple_large": {
"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)",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"note": "no icon; phone 56px tall, 18px label; no visible hover change measured"
},
"button_login": {
"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)",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)",
"states": {
"hover": {
"measured": {
"fill": "#C7C8CE"
},
"css": {
"background-color": "#C7C8CE"
},
"prov": "observed"
}
}
},
"feature_card": {
"radius": 120,
"width": 1240,
"height": 610,
"padding": "28px",
"note": "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",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"video_frame": {
"radius": 104,
"width": 727,
"height": 554,
"note": "overflow hidden, object-fit cover, autoplay loop muted product video; show the poster at rest. Phone 306x233 radius 48px",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"nav_link": {
"text": "#FFFFFF",
"font_size": 16,
"weight": 500,
"padding": "10px 16px",
"note": "chevron-down after dropdown labels",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"footer_link": {
"text": "#FFFFFF",
"font_size": 16,
"weight": 400,
"note": "24px line, 12px between links",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"language_select": {
"fill": "rgba(255,255,255,0.1)",
"radius": 16,
"height": 56,
"width": 314,
"padding": "17.5px 16px 17.5px 24px",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"burger": {
"fill": "rgba(255,255,255,0.1)",
"radius": 14,
"height": 40,
"width": 40,
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"marquee": {
"height": 140,
"gap": 56,
"note": "Clyde mark 36x27 between words; words Ginto Nord 61px white",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
}
},
"breakpoints": {
"phone_max": 767,
"all": [
479,
767,
991
],
"prov": "inferred",
"source": "Webflow default breakpoints (the site is built on Webflow); not measured"
}
},
"system": {
"fixed": [
"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"
],
"flex": "The accent colors from the 2021 palette (green, yellow, fuchsia, red) and which 3D props appear",
"traits": [
{
"text": "The 2021 refresh aimed to be \"bold and playful\" (blog).",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine",
"prov": "published",
"is": "Playful",
"not": "silly"
},
{
"text": "The look was meant to be as welcoming as the app (paraphrase).",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine",
"prov": "published",
"is": "Welcoming",
"not": "exclusive"
},
{
"text": "Body copy uses friend talk: idk, chill, spam memes.",
"source": "https://discord.com/ (2026-10-31)",
"prov": "observed",
"is": "Casual",
"not": "corporate"
},
{
"text": "Heavy wide uppercase and saturated Blurple.",
"source": "https://discord.com/ (2026-10-31)",
"prov": "observed",
"is": "Bold",
"not": "loud for its own sake"
}
]
},
"formats": [
{
"format": "Landing page",
"level": 5,
"must": "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",
"flex": "which cards and in what order; the props around them"
},
{
"format": "Social post",
"level": 4,
"must": "Blurple or night-sky ground, one wide uppercase headline, a 3D prop or character",
"flex": "which color accent from the 2021 palette"
},
{
"format": "Legal or trademark page",
"level": 1,
"must": "black ground, plain sentence copy, logo tiles with large radii",
"flex": "none"
}
],
"checks": [
{
"name": "Logo hidden",
"text": "Cover Clyde. Blurple, wide heavy uppercase, glossy 3D toys and huge rounded glass cards should still say Discord."
},
{
"name": "Swap test",
"text": "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_yours": {
"note": "Everything above transfers. These are Discord's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.",
"replace": [
"identity",
"purpose",
"positioning",
"messaging.pillars",
"messaging.proof_points",
"messaging.taglines",
"messaging.boilerplate"
],
"reference": {
"purpose": {
"mission": {
"text": "The best place to hang out before, during, and after playing games (paraphrase of the company page).",
"prov": "published",
"source": "https://discord.com/company",
"paraphrase": true
},
"story": {
"text": "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).",
"prov": "published",
"source": "https://discord.com/company",
"paraphrase": true
},
"values": []
},
"positioning": {
"statement": {
"text": "The communications platform for building connections around playing games, through voice, video and text (paraphrase).",
"prov": "published",
"source": "https://discord.com/company"
},
"category": {
"text": "Group voice, video and text chat for gamers",
"prov": "published",
"source": "https://discord.com/company"
},
"audience": {
"text": "Players and their friends, plus communities built around games",
"prov": "published",
"source": "https://discord.com/company"
},
"problem": {
"text": "Talking with friends while gaming together was unreliable",
"prov": "published",
"source": "https://discord.com/company"
},
"promise": {
"text": "A place to talk, play and hang out with friends on any device",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
"differentiators": [
{
"text": "Drop-in voice channels: no calling needed",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"text": "Low-latency game streaming to friends",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"text": "Built-in Activities and games in chat",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"text": "Works on PC, phone and console",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
}
]
},
"messaging": {
"taglines": [
{
"text": "Group chat that's all fun & games",
"where": "homepage H1",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"text": "Imagine a Place",
"where": "mantra introduced with the 2021 refresh",
"prov": "published",
"source": "https://discord.com/blog/happy-blurpthday-to-discord-a-place-for-everything-you-can-imagine"
}
],
"attributes": [
"fun",
"friends",
"games"
],
"boilerplate": {
"text": "Discord is the communications platform that enables you to build meaningful connections around the joy of playing games through voice, video, and text features.",
"prov": "published",
"source": "https://discord.com/company"
},
"pillars": [
{
"name": "Fun with friends",
"claim": "Customize how you show up in chat: emoji, stickers, soundboard, profiles.",
"proof": [
"p-emoji"
],
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Together, live",
"claim": "Low-latency streaming and drop-in voice make it feel like the same room.",
"proof": [
"p-voice"
],
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
},
{
"name": "Everywhere you game",
"claim": "PC, phone and console, one place for your group chats.",
"proof": [
"p-platforms"
],
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
}
],
"proof_points": [
{
"id": "p-emoji",
"kind": "other",
"text": "Custom emoji in servers launched in 2016 and became one of its most popular features.",
"source": "https://discord.com/company",
"prov": "published"
},
{
"id": "p-voice",
"kind": "other",
"text": "Video chat and screen share shipped to all DMs and Group DMs; Go Live streaming followed.",
"source": "https://discord.com/company",
"prov": "published"
},
{
"id": "p-platforms",
"kind": "other",
"text": "Voice chat on PS5, PlayStation account linking, and apps on PC and mobile.",
"source": "https://discord.com/company",
"prov": "published"
}
],
"claim_boundaries": [
{
"text": "No user counts or performance numbers on the homepage",
"prov": "observed",
"source": "https://discord.com/ (2026-10-31)"
}
]
}
}
}
}