Typography
scale ratio 1.322- Abcgintodiscordnorddisplay700 80059%
- Abcgintodiscordbody400 50042%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Abcgintodiscordnord | 56px | 700 | 0.857 | -0.01em |
| headline | Abcgintodiscordnord | 36px | 800 | 0.93 | -0.01em |
| title | Abcgintodiscord | 16px | 400 | 1.25 | 0em |
| body | Abcgintodiscord | 20px | 400 | 1.3 | 0.016em |
| body-sm | Abcgintodiscord | 16px | 500 | 1.2 | 0em |
Type scale
Aa16Aa20Aa36Aa48Aa56Aa61
- Body size
- 20px / 1.3
- Display size
- 56px
- Display tracking
- -0.01em
- Case
- upper
Color
dark schemePalette by painted area
- Text on bg
- 13.40:1
- Muted on bg
- undefined:1
- Accent on bg
- 13.40:1
- Dark mode
- none
Declared accent tokens
- --brand#5865F2painted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 10
- 12
- 16
- 20
- 24
- 28
- 29
- 34.5
- 36
- 40
- 42
- 48
Corner radii
1216
Shadows (0)
none
- Borders
- none
- Section padding
- 276px
Components
exact computed valuesbutton-primary
Download for Mac
- backgroundColor
- #FFFFFF
- textColor
- #23272A
- rounded
- 12px
- padding
- 15px 24px
- height
- 65px
- fontFamily
- Abcgintodiscord
- fontSize
- 20px
- fontWeight
- 400
button-secondary
Open Discord in your browser
- backgroundColor
- #5865F2
- textColor
- #FFFFFF
- rounded
- 12px
- padding
- 19.5px 24px
- height
- 65px
- fontFamily
- Abcgintodiscord
- fontSize
- 20px
- fontWeight
- 400
Layout & motion
- Container
- 1240px
- Grid columns
- 12
- Hero
- left-aligned+media-below
- Navigation
- top-static+transparent
- Page height
- 8,086px
- Easing
- ease
- Durations
- 200ms 250ms 300ms 400ms
- Transitions
- 34
- Keyframes
- 0
- Stack
- webflow, jquery, google-tag-manager, cloudflare
Page sections (10)
section labels are heuristic
01nav
02heroGroup chat that’s all fun & games
03gallery?MAKE YOUR GROUP CHATS MORE FUN
04gallery?stream like you’re in the same room
05logosHop in when you're free, no need to call
06gallery?See who's around to chill
07gallery?always have something to do together
08gallery?wherever YOU GAME, HANG OUT HERE
09cta?YOU CAN'T SCROLL ANYMORE. BETTER GO CHAT.
10footerPolicies
How Discord compares
- Body text
- 20px: larger than 90% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.32×: steeper than 63% of indexed sites (median 1.28×).
- Container
- 1240px: narrower than 50% of indexed sites (median 1242px).
- Text contrast
- 13.4:1: lower than 84% of indexed sites (median 17.6:1).
- Page length
- 8,086px: shorter than 52% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Abcgintodiscordnord
- The only site in the index that loads Abcgintodiscordnord.
- Abcgintodiscord
- The only site in the index that loads Abcgintodiscord.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Discord use?
Discord uses Abcgintodiscordnord for headings. Abcgintodiscord is used for body text.
What are Discord's brand colors?
Discord's website uses a dark scheme: background #1A2081, text #FFFFFF.
How is Discord's website laid out?
The most common corner radius is 12px, body text is 20px with 1.3 line height, and the page container is 1240px wide.
