What font does Discord use?

Discord’s website uses four typefaces: Abcgintodiscord (headings), served from cdn.prod.website-files.com; Abcgintonord 800, served from cdn.prod.website-files.com; ABCGintoNormal-Bold, served from cdn.prod.website-files.com; Abcgintodiscordnord, served from cdn.prod.website-files.com.

What are Discord’s brand colours?

The main colours on discord.gg are Deep Royal Blue (#5865F2), Medium Purple (#B377F3), Spring Green (#57F287), Deep Pink (#EB459E), Slate Blue (#4F51F5) and Blue (#3442D9).

What colour is Discord’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Discord’s logo from?

The logo shown in this guide was found on discord.gg’s homepage. For official logo files and usage rules, check Discord’s own brand or press page.

Is this Discord’s official style guide?

No. SiteStyleGuide made it from discord.gg’s public web pages on 29 October 2026, and isn’t affiliated with Discord. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from discord.gg’s public web pages. Not affiliated with or endorsed by Discord. The real site is discord.gg ↗

Unofficial style guide

Discordstyle guide

Discord’s website (discord.gg) sets its headings in Abcgintodiscord and its body text in Ggsans. Its palette is led by Deep Royal Blue (#5865F2), Medium Purple (#B377F3) and Spring Green (#57F287), with #000000 text on #FFFFFF. Captured from the live site on 29 October 2026.

Website: discord.gg
Typefaces: Abcgintodiscord, Abcgintonord 800, ABCGintoNormal-Bold
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 29 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the discord.gg homepage on a desktop screen — Screenshot of discord.gg on a 1440 px desktop screen, 29 Oct 2026.

Screenshot of the discord.gg homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Discord - Group Chat That’s All Fun & Games; ● 43 / 60 characters
Meta description: 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.; ● 155 / 160 characters
Site name: Discord
og:title: Discord - Group Chat That’s All Fun & Games
og:description: 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.
Language: en
Theme colour: #161cbb

In search results

Discordhttps://discord.com/

Discord - Group Chat That’s All Fun & Games

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.

When shared

discord.gg

Discord - Group Chat That’s All Fun & Games

Discord is great for playing games and chilling with friends, or even building a worldwide community. Customi…

Logo & favicons

Found as: schema.org logo. SVG, 80 × 80.

Logo

On white

On black

On Deep Royal Blue

Favicons

2 found

256 px · ICO apple-touch-icon
32 px · PNG shortcut icon

Discord - Group Chat That’s All Fun & Games

Light browser tab

Discord - Group Chat That’s All Fun & Games

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 32.7%
Black 30.5%
Deep Royal Blue 13.4%
Cool Charcoal 9.6%
Medium Purple 2.5%
Cool Dark Grey 2%
Spring Green 1.4%
Deep Pink 1.4%
Slate Blue 1%
Blue 1%
Light Royal Blue 0.9%
Midnight Blue 0.9%
Pale Violet Red 0.8%
Cornflower Blue 0.6%
Hot Pink 0.6%
Sandy Brown 0.6%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Text, background, border · body, .buttonWhite-1M-wED
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · --ansi-blue, --ansi-bright-blue
Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
17 7 0 84

On text
1.40:1 Fail

On white
15.05:1 AAA

Text, background, border · .buttonDark-3a8taR, .buttonWhite-1M-wED
Cool Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
16 11 0 63

On text
2.81:1 Fail

On white
7.48:1 AAA

Text, border · .rich-safeties-discription h4, .rich-description-wr h4

Colours

Brand colours and accents, most used first

Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
64 58 0 5

On text
4.56:1 AA

On white
4.61:1 AA

Background, text, border · .hero-bl-section.fr, .buttonBrand-24ECS3
Medium Purple

HEX

RGB

HSL

OKLCH

CMYK
26 51 0 5

On text
6.85:1 AA

On white
3.07:1 AA large

Background · .hero-bg-wrapper.video, .heading--h1--build--stroke
Spring Green

HEX

RGB

HSL

OKLCH

CMYK
64 0 44 5

On text
14.46:1 AAA

On white
1.45:1 Fail

Background, text · .btn-green, .hero-button.green
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 71 33 8

On text
5.88:1 AA

On white
3.57:1 AA large

Background, text · .button-bl.pink-gta, .hero-button.pink
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
68 67 0 4

On text
3.83:1 AA large

On white
5.49:1 AA

Background, text · .build_title56_text.is-stroke.is-whats, .build_title56_text.is-shadow.is-whats
Blue

HEX

RGB

HSL

OKLCH

CMYK
76 70 0 15

On text
2.93:1 Fail

On white
7.17:1 AAA

Background, text · .hero-bl-section.fr, .date-heading-snows
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
72 49 0 13

On text
4.57:1 AA

On white
4.60:1 AA

Background · .heading--h1--build--stroke, .heading--h1--build--shadow
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
67 69 0 64

On text
1.39:1 Fail

On white
15.09:1 AAA

Background · .btn_hover, .btn_hover-2
Pale Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 35 25 11

On text
8.93:1 AAA

On white
2.35:1 Fail

Background · .hero-bg-wrapper.video, .build_title56_text.is-stroke
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
48 37 0 15

On text
6.31:1 AA

On white
3.33:1 AA large

Background, border, text · section .button.brand, .button-blue-20px:hover
Hot Pink

HEX

RGB

HSL

OKLCH

CMYK
0 64 37 0

On text
7.26:1 AAA

On white
2.89:1 Fail

Background · .heading-style-stroke-h2.is_centered.color-gradient, .heading-style-shadow-h2.is_centered.color-gradient
Sandy Brown

HEX

RGB

HSL

OKLCH

CMYK
0 41 73 2

On text
9.38:1 AAA

On white
2.24:1 Fail

Background · .heading-style-stroke-h2.is_centered.color-gradient, .heading-style-shadow-h2.is_centered.color-gradient

Gradients

linear-gradient(135deg,#fff6,#ffffff12)
linear-gradient(#ff5ba1,#fa9443)
linear-gradient(#b377f3,#3e70dd)

Dark mode

Switched on by the site

White

#FFFFFF · --button-outline-primary-text
Black

#060A0B · --status-warning-text
Cool Charcoal

#2C2F33
Blue

#3442D9
Slate Blue

#533ED6
Royal Blue

#5865F2
Midnight Blue

#1A1E49

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Abcgintodiscord

Aa 300 Aa 500

Abcgintodiscord

Served from cdn.prod.website-files.com · weights 300, 400, 500 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 900

Abcgintonord 800

Served from cdn.prod.website-files.com · weights 400, 500, 700, 800, 900 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 700

ABCGintoNormal-Bold

Served from cdn.prod.website-files.com · weights 400, 500, 600, 700 · headings · shown in a stand-in if you don’t have it

Aa 500 Aa 700

Abcgintodiscordnord

Served from cdn.prod.website-files.com · weights 500, 700 · headings · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Body 100% / 1.15 weight 400 · gg sans

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

Paragraph 100%

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

Small 100%

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

Button 100% none

Get started

Link 100% weight 400

Sizes in use

Most common across the site

56pxline 1 · 88 rules
48pxline .96 · 75 rules
32pxline 38px · 73 rules
24pxline 30px · 139 rules
20pxline 24px · 277 rules
18pxline 1.3 · 121 rules
16pxline 24px · 248 rules
14pxline 24px · 129 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.button-green · #43B581 · radius 3px

Link

Read our latest news today.

a · #5865F2

Corner radius

8px · 135×
16px · 110×
40px · 80×
12px · 80×
64px · 76×
56px · 73×

Shadows

0 8px 15px #0003
0 1px 1px #0000001a
0 1px #fff
0 1px #ffffffb3

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

479

767

768

848

991

992

1280

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

900 px

870 px

800 px

700 px

600 px

400 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 43 characters, short enough to show in full in search results.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Discord use?: Discord’s website uses four typefaces: Abcgintodiscord (headings), served from cdn.prod.website-files.com; Abcgintonord 800, served from cdn.prod.website-files.com; ABCGintoNormal-Bold, served from cdn.prod.website-files.com; Abcgintodiscordnord, served from cdn.prod.website-files.com.
What are Discord’s brand colours?: The main colours on discord.gg are Deep Royal Blue (#5865F2), Medium Purple (#B377F3), Spring Green (#57F287), Deep Pink (#EB459E), Slate Blue (#4F51F5) and Blue (#3442D9).
What colour is Discord’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Discord’s logo from?: The logo shown in this guide was found on discord.gg’s homepage. For official logo files and usage rules, check Discord’s own brand or press page.
Is this Discord’s official style guide?: No. SiteStyleGuide made it from discord.gg’s public web pages on 29 October 2026, and isn’t affiliated with Discord. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

discord-gg-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* discord.gg design tokens, from SiteStyleGuide (https://sitestyleguide.com/discord.gg) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-charcoal: #23272A;
  --colour-cool-dark-grey: #50555F;
  --colour-deep-royal-blue: #5865F2;
  --colour-medium-purple: #B377F3;
  --colour-spring-green: #57F287;
  --colour-deep-pink: #EB459E;
  --colour-slate-blue: #4F51F5;
  --colour-blue: #3442D9;
  --colour-light-royal-blue: #3E70DD;
  --colour-midnight-blue: #1F1D5D;
  --colour-pale-violet-red: #E292AA;
  --colour-cornflower-blue: #7289DA;
  --colour-hot-pink: #FF5BA1;
  --colour-sandy-brown: #FA9443;
  --gradient-1: linear-gradient(135deg,#fff6,#ffffff12);
  --gradient-2: linear-gradient(#ff5ba1,#fa9443);
  --gradient-3: linear-gradient(#b377f3,#3e70dd);

  /* Typefaces */
  --font-headings: 'Abcgintodiscord', sans-serif;
  --font-buttons: 'Abcgintodiscord', sans-serif;
  --font-body: 'Ggsans', sans-serif;

  /* Type scale */
  --text-body: 100%;
  --leading-body: 1.15;
  --text-p: 100%;
  --text-small: 100%;
  --text-button: 100%;
  --text-a: 100%;

  /* Shape */
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 40px;
  --radius-4: 12px;
  --radius-5: 64px;
  --radius-6: 56px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 479px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 848px;
  --breakpoint-5: 991px;
  --breakpoint-6: 992px;
  --breakpoint-7: 1280px;
  --breakpoint-8: 1440px;
  --max-width-1: 900px;
  --max-width-2: 870px;
  --max-width-3: 800px;
  --max-width-4: 700px;
  --max-width-5: 600px;
  --max-width-6: 400px;
}

{
    "site": "discord.gg",
    "source": "https://sitestyleguide.com/discord.gg",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Cool Charcoal",
            "hex": "#23272A",
            "rgb": [
                35,
                39,
                42
            ]
        },
        {
            "name": "Cool Dark Grey",
            "hex": "#50555F",
            "rgb": [
                80,
                85,
                95
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#5865F2",
            "rgb": [
                88,
                101,
                242
            ]
        },
        {
            "name": "Medium Purple",
            "hex": "#B377F3",
            "rgb": [
                179,
                119,
                243
            ]
        },
        {
            "name": "Spring Green",
            "hex": "#57F287",
            "rgb": [
                87,
                242,
                135
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#EB459E",
            "rgb": [
                235,
                69,
                158
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#4F51F5",
            "rgb": [
                79,
                81,
                245
            ]
        },
        {
            "name": "Blue",
            "hex": "#3442D9",
            "rgb": [
                52,
                66,
                217
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#3E70DD",
            "rgb": [
                62,
                112,
                221
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#1F1D5D",
            "rgb": [
                31,
                29,
                93
            ]
        },
        {
            "name": "Pale Violet Red",
            "hex": "#E292AA",
            "rgb": [
                226,
                146,
                170
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#7289DA",
            "rgb": [
                114,
                137,
                218
            ]
        },
        {
            "name": "Hot Pink",
            "hex": "#FF5BA1",
            "rgb": [
                255,
                91,
                161
            ]
        },
        {
            "name": "Sandy Brown",
            "hex": "#FA9443",
            "rgb": [
                250,
                148,
                67
            ]
        }
    ],
    "fonts": [
        {
            "name": "Abcgintodiscord",
            "stack": "Abcgintodiscord, sans-serif",
            "weights": [
                300,
                400,
                500
            ],
            "source": "Served from cdn.prod.website-files.com"
        },
        {
            "name": "Abcgintonord 800",
            "stack": "\"Abcgintonord 800\", sans-serif",
            "weights": [
                400,
                500,
                700,
                800,
                900
            ],
            "source": "Served from cdn.prod.website-files.com"
        },
        {
            "name": "ABCGintoNormal-Bold",
            "stack": "ABCGintoNormal-Bold, sans-serif",
            "weights": [
                400,
                500,
                600,
                700
            ],
            "source": "Served from cdn.prod.website-files.com"
        },
        {
            "name": "Abcgintodiscordnord",
            "stack": "Abcgintodiscordnord, Arial, sans-serif",
            "weights": [
                500,
                700
            ],
            "source": "Served from cdn.prod.website-files.com"
        },
        {
            "name": "ABC Ginto Normal",
            "stack": "ABC Ginto Normal, sans-serif",
            "weights": [
                100,
                300,
                400,
                500,
                600,
                700,
                900
            ],
            "source": "Served from cdn.prod.website-files.com"
        },
        {
            "name": "Ggsans",
            "stack": "Ggsans, sans-serif",
            "weights": [
                400,
                500,
                600,
                700
            ],
            "source": "Served from cdn.prod.website-files.com"
        }
    ]
}

Other websites using Abcgintodiscord as their main typeface

Discord

discord.com · set in Abcgintodiscord
Save

Websites whose lead colour is closest to Discord’s

SiteGround

siteground.com · 14 hours ago
Save
WeTransfer

we.tl · 3 days ago
Save
CTV News

ctvnews.ca · 5 days ago
Save
WordPress.com

wp.me · 19 hours ago
Save

Captured from discord.gg on 29 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Discord; this guide describes the public website for reference.

Discordstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Cool Charcoal

Cool Dark Grey

Colours

Deep Royal Blue

Medium Purple

Spring Green

Deep Pink

Slate Blue

Blue

Light Royal Blue

Midnight Blue

Pale Violet Red

Cornflower Blue

Hot Pink

Sandy Brown

Gradients

Dark mode

Abcgintodiscord

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run discord.gg?

Also set in Abcgintodiscord

Discord

Similar colours

SiteGround

WeTransfer

CTV News

WordPress.com

Title &
description