Social & Media

Discord

discord.com16 colors19 componentsAbcgintodiscordMulti-page · 12 screens

Discord is great for playing games and chilling with friends, or even building a worldwide community. Customize your own space to talk, play, and hang out.

Remix Visit

Remix

Visit

12 screenshots captured· discord.com

1 / 12 · Discord - Group Chat That’s All Fun & Games · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from discord.com

Primary

#060A0B

#5865F2

#202024

#798DF9

#23272A

#00B0F4

#2C2F33

#99AAB5

Neutral

#FFFFFF

#000000

#333333

#28282C

#A1A1A5

#F7F7F7

#727377

#E1E1E5

Typography · AbcgintodiscordGoogle Fonts

body20px · 400 · 26px

span16px · 500 · 19.2px

h316px · 400 · 20px

Typography · ABC Ginto NormalGoogle Fonts

button16px · 400 · 24px

Typography · AbcgintodiscordnordGoogle Fonts

h172px · 700 · 64.8px

h248px · 700 · 48px

h156px · 700 · 48px

h222px · 700 · 17.6px

h336px · 400 · 36px

Typography · gg sansGoogle Fonts

input14px · 400 · 20px

h137.8px · 600 · 42px

h216.8px · 600 · 25.2px

h314.7px · 600 · 21px

body16.8px · 400 · 25.2px

button14.7px · 400 · 25.2px

Spacing

12px

16px

40px

4px

32px

8px

24px

80px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.442733 0.000579804 -0.00658998 / 0.3) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.376763 0.00188313 -0.0064694 / 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

Components · 19

Remixes of Discord

3 remixes

Latest remixes