# Discord design system: colors, fonts and tokens

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

Source: https://discord.com, captured 25 June 2026. Page: https://designlang.app/design-system/discord

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#5865f2` | 35 |
| Secondary | `#35ed7e` | 1 |
| Accent | `#1a2081` | 1 |

Neutrals: `#000000`, `#ffffff`, `#333333`, `#23272a`

Backgrounds: `#1a2081`, `#000000`

## Fonts

- Ggsans (sans), 547 elements
- Abcgintodiscord (sans), 403 elements
- ABC Ginto Normal (sans), 153 elements
- Abcgintodiscordnord (sans), 27 elements

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

1px, 24px, 29px, 35px, 48px, 52px, 56px, 60px, 64px, 73px, 76px, 80px, 96px, 106px, 125px, 128px, 134px, 143px, 154px, 157px

## Radii

12px, 16px, 40px, 50px, 60px, 72px, 88px

## Motion

Feel: smooth. Durations: 200ms, 300ms, 500ms.

## Audit

Overall 78/100 (grade C).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/discord-com/discord-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/discord-com/discord-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/discord-com/discord-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/discord-com/discord-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/discord-com/discord-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/discord-com/discord-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/discord-com/discord-com-DESIGN.md)

Regenerate: `npx designlang discord.com`