Discord design system
Discord's website (discord.com) uses a dark interface with #5865f2 as its primary color and Ggsans as the main typeface, with Abcgintodiscord alongside it. designlang measured 10 font sizes from 14px to 61px, 20 spacing values, 7 corner radii.
Discord colors
The brand roles and neutrals discord.com renders, with how many elements use each one.
Brand colors
- Primary
#5865f235 uses - Secondary
#35ed7e1 uses - Accent
#1a20811 uses
Neutrals
#0000001,456 uses#ffffff814 uses#33333324 uses#23272a10 uses
Backgrounds
#1a2081#000000
Text colors
#0000001.57:1 on #1a2081#3333331.06:1 on #1a2081#ffffff13.4:1 on #1a2081#23272a1.12:1 on #1a2081#5865f22.91:1 on #1a2081
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 100% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#000000 | #ffffff | 21:1 | AAA |
#ffffff | #5865f2 | 4.61:1 | AAA |
#23272a | #ffffff | 15.05:1 | AAA |
Discord fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- Ggsans: sans, body (547 elements)
- Abcgintodiscord: sans, most text (403 elements)
- ABC Ginto Normal: sans, body (153 elements)
- Abcgintodiscordnord: sans, most text (27 elements)
Body text: 16px at weight 400, line height normal.
Weights in use: 400, 500, 700, 800.
Type scale
| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 61px | 700 | 25px | -0.61px | div |
| 48px | 700 | 57.6px | -0.48px | h2, span, br |
| 44px | 700 | 37.7143px | -0.44px | h1 |
| 36px | 800 | 33.48px | -0.36px | h2 |
| 22px | 700 | 17.6px | -0.66px | h2 |
| 20px | 400 | 26px | 0.32px | p |
| 18px | 400 | 24px | 0.25px | a, svg, g, path |
| 17.6px | 400 | 24px | normal | div |
| 16px | 400 | normal | normal | html, head, style, meta |
| 14px | 500 | 18.2px | 0.25px | a |
Spacing and radii
Spacing scale
Corner radii
- 12px
- 16px
- 40px
- 50px
- 60px
- 72px
- 88px
Medium radii lead, with a few larger ones.
Motion
The motion reads as smooth.
Durations
sm: 200msmd: 300mslg: 500ms
Easing
- ease-in-out (1 uses):
ease
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (27), links (135), navigation (287), footer (53), dropdowns (133), switches (17).
By category
| Color Discipline | 100/100 |
|---|---|
| Typography Consistency | 50/100 |
| Spacing System | 70/100 |
| Shadow Consistency | 85/100 |
| Border Radius Consistency | 90/100 |
| Accessibility | 100/100 |
| CSS Tokenization | 100/100 |
- 5 font families — consider limiting to 2 (heading + body)
- 181 !important rules — prefer specificity over overrides
- 91% of CSS is unused — consider purging
- 68526 duplicate CSS declarations
Download the tokens
The files designlang wrote for discord.com. Run it yourself for a fresh read: npx designlang discord.com.
The core values as CSS variables
:root {
--color-primary: #5865f2;
--color-secondary: #35ed7e;
--color-accent: #1a2081;
--color-background: #1a2081;
--color-text: #000000;
--color-neutral-1: #000000;
--color-neutral-2: #ffffff;
--color-neutral-3: #333333;
--color-neutral-4: #23272a;
--font-primary: "Ggsans", sans-serif;
--font-secondary: "Abcgintodiscord", sans-serif;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 40px;
}Read discord.com yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Discord use?
What are Discord's brand colors?
How do I use the Discord design system in my own app?
Is this the official design system?
Measured from the public pages of discord.com on 25 June 2026. Discord is a trademark of its owner; designlang is not affiliated with it. More: the full Discord brand kit, the token extraction guide and the markdown version of this page.