Discord
Discord sets large Abcgintodiscordnord headlines in a heavy weight on a dark indigo canvas. Indigo (#5865f2) is reserved for actions, on buttons with 12px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 12px, with 16px and 120px on smaller elements.
discord.com ↗Colors
Indigo
#5865f2
Primary actions and links
Bone White
#ffffff
Secondary accent and highlights
Deep Indigo
#1a2081
Page canvas
Void
#000000
Headlines and body copy
Type scale
DisplayGroup chat that’s all fun & gamesAbcgintodiscordnord · 56px · 700
HeadingMAKE YOUR GROUP CHATS MORE FUNAbcgintodiscordnord · 36px · 800
SubheadingProductAbcgintodiscord · 16px · 400
BodyDiscord is great for playing games and chilling with friends, or even building a worldwideAbcgintodiscord · 20px · 400
NavDownload1 of 9Abcgintodiscord · 16px · 500
Buttons
Log InDownload for WindowsOpen Discord in your browserDownload for Windows
Style reference measured from the public page at discord.com on 2026-10-12 for design education. Discord and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.
# Discord — Style Reference > Discord sets large Abcgintodiscordnord headlines in a heavy weight on a dark indigo canvas. Indigo (#5865f2) is reserved for actions, on buttons with 12px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 12px, with 16px and 120px on smaller elements. **Theme:** dark · **Source:** https://discord.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Indigo | `#5865f2` | `--color-accent` | Primary actions and links | | Bone White | `#ffffff` | `--color-secondary` | Secondary accent and highlights | | Deep Indigo | `#1a2081` | `--color-canvas` | Page canvas | | Void | `#000000` | `--color-ink` | Headlines and body copy | ## Typography | Role | Family | Size | Weight | Line height | Tracking | |------|--------|------|--------|-------------|----------| | Display | Abcgintodiscordnord | 56px | 700 | 0.86 | -0.010em, uppercase | | Heading | Abcgintodiscordnord | 36px | 800 | 0.93 | -0.010em, uppercase | | Subheading | Abcgintodiscord | 16px | 400 | 1.25 | 0 | | Body | Abcgintodiscord | 20px | 400 | 1.30 | 0.016em | | Nav | Abcgintodiscord | 16px | 500 | 1.20 | 0 | Font families on the page: Ggsans, ABC Ginto Normal, Abcgintodiscord, Abcgintodiscordnord. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence. ## Shape - Corner radius, most to least used: 12px, 16px, 120px, 104px - Primary button: background `#5865f2`, text `#ffffff`, radius 12px, padding 19.5px 24px, 20px / 400
