Discord
A playful, gaming-first marketing interface built on a deep blurple-navy canvas, anchored by Discord's signature blurple (#5865f2) action color and an ultra-wide, all-caps custom display typeface (ABC Ginto Nord). The system reads as energetic and friendly — bold shouting headlines, big pill-radius CTAs, translucent rounded panels holding bright product mockups with pink/green/mint glows, and a near-monochrome blurple palette punctuated by a wide accent spectrum (mint, purple, pink, fuchsia, sky). Brand voltage comes from the condensed wide caps display face and the saturated gradient product cards rather than from chrome or shadow.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
56px · 700 · 0.857
The quick brown fox jumps
display-lg
36px · 800 · 0.93
The quick brown fox jumps
body-lg
20px · 400 · 1.3
The quick brown fox jumps
heading-sm
16px · 400 · 1.25
The quick brown fox jumps
button
16px · 500 · 1.2
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 10px | |
| md | 12px | |
| lg | 16px | |
| xl | 20px | |
| xxl | 24px | |
| xxxl | 28px | |
| huge | 40px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| md | 12px | |
| lg | 16px | |
| pill-sm | 104px | |
| pill | 120px |
FAQ
- What colors does Discord use?
- Discord's core palette includes #5865f2, #4f51f5, #7289da, #ffffff, #000000. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Discord DESIGN.md.
- What font does Discord use?
- Discord's primary typeface is Abcgintodiscordnord. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Discord design system?
- A playful, gaming-first marketing interface built on a deep blurple-navy canvas, anchored by Discord's signature blurple (#5865f2) action color and an ultra-wide, all-caps custom display typeface (AB…