A deep-indigo canvas lit by electric blurple and a fresh mint-green CTA — where ultra-tight uppercase display type slams against pure-white rounded surfaces with black ink. Playful, loud, and unmistakably game-native.
Ggsans is Discord's proprietary humanist sans — shown here with Inter as the body substitute and Archivo standing in for the heavy uppercase display face. Hierarchy is built on size, weight, and aggressively tight line-height rather than tracking.
Discord separates content by raw colour contrast — white panels and vivid blurple-to-indigo image masks on the dark canvas — rather than by shadow. Corners are a strong 16px.
A loose 8px base with generous 40px and 64px steps that give the full-bleed marketing bands their airy rhythm.
Roundness is the dominant texture. A 16px radius shows up everywhere; oversized 30–56px radii shape hero panels and image masks; pills go fully round.
| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Card grids collapse to one or two columns; display type drops to ~40px; coloured bands stack vertically keeping rounded white panels. |
| Tablet | 768–1023px | Four-up grids become two-up; hero padding tightens; split panels stack. |
| Laptop | 1024–1279px | Full multi-column layout returns; hero art sits beside copy. |
| Desktop | ≥ 1280px | Max content width ~1200px, centered, with edge-to-edge coloured bands beyond it. |
Layout note: a content-light, image-and-headline-heavy system that prioritises brand energy and colour over information density.
Illustrative Nitro-style tiering rendered in Discord's tokens — the featured plan inverts to the indigo canvas with green accents. Sample content, not live pricing.
A product-style table rendered in the system's tokens — pill status chips, fully-rounded pager, blurred indigo header tint.
| ID | Server | Members | Status | When |
|---|---|---|---|---|
| #4821 | Midnight Gaming | 12,480 | Online | just now |
| #4822 | Lo-Fi Lounge | 8,902 | Online | 2m ago |
| #4823 | Indie Dev Hub | 5,330 | Idle | 14m ago |
| #4824 | Speedrun Central | 21,008 | Online | 1h ago |
| #4825 | Art & Chill | 3,114 | Idle | 3h ago |
Sign-in and create-account cards using the input, button, and divider tokens. Sample content.