designlang
Brand guidelines #5865f2

June 25, 2026

discord.com

A reading of the visual language at https://discord.com. Every token, every rule, every component — captured from the live site.

Page intent
landing
System grade
C 78/100
Tokens
9 colours · 10 sizes
Generated
designlang
Chapter 00

Essence

discord.com is a Magician brand — cool, kinetic, bold, modern and visionary — anchored on #5865f2 and Ggsans, smooth motion.

Magician archetype · 64% fit · vs Explorer

Adjectives

Personality axes

Cool Warm
Composed Kinetic
Understated Bold
Timeless Modern

Evidence

Chapter 01

About

Page intent
landing 45% confidence
Material language
flat
Imagery style
flat-illustration
Component library
unknown
Stack
webflow
Voice tone
friendly
Chapter 03

Colour

1 primary · 1 secondary · 1 accent · 4 neutrals · 9 total

Primary #5865F2
RGB
88, 101, 242
HSL
235°, 86%, 65%
Secondary #35ED7E
RGB
53, 237, 126
HSL
144°, 84%, 57%
Accent #1A2081
RGB
26, 32, 129
HSL
237°, 66%, 30%

Neutrals

#000000
#FFFFFF
#333333
#23272A

Full palette

#000000
#FFFFFF
#5865F2
#333333
#23272A
#1A2081
#35ED7E
#19175C
#5B62C7

WCAG 100% · 7 passing pairs · 0 failing. Full breakdown in §11.

Chapter 04

Typography

5 families · 10 sizes · 4 weights

Display
Ggsans
Body
Abcgintodiscord
Weights
400, 500, 700, 800

Specimen

GROUP CHAT THAT’S ALL FUN & GAMES
find your friends on discord.

Scale

StepSizeSample
t00 61px GROUP CHAT THAT’S ALL FUN &
t01 48px GROUP CHAT THAT’S ALL FUN &
t02 44px GROUP CHAT THAT’S ALL FUN &
t03 36px GROUP CHAT THAT’S ALL FUN &
t04 22px GROUP CHAT THAT’S ALL FUN &
t05 20px GROUP CHAT THAT’S ALL FUN &
t06 18px GROUP CHAT THAT’S ALL FUN &
t07 17.6px GROUP CHAT THAT’S ALL FUN &
t08 16px GROUP CHAT THAT’S ALL FUN &
t09 14px GROUP CHAT THAT’S ALL FUN &
Chapter 05

Spacing

Base 1px · 33 steps captured

Rhythm

1px
24px
29px
35px
48px
52px
56px
60px
64px
73px
Chapter 06

Shape

7 radii · 0 elevation tiers

Border radii

12px
16px
40px
50px
60px
72px
Chapter 07

Iconography

unknown · 8 captured

Library
unknown
Confidence
0%
Stroke style
roundedCaps
icon
icon
icon
icon
icon
icon
icon
icon
Chapter 08

Motion

Feel: smooth · 3 durations · 1 easings

Duration scale

200ms
300ms
500ms

Easings

Chapter 09

Components

unknown · 1 component patterns captured

Mocks

Card

Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

Detected patterns

button

Slots
label, icon, badge
Variants
primary
Sizes
—
Chapter 10

Voice

friendly · — · —

Headlines from the site

CTA verbs

Chapter 11

Accessibility

100% WCAG 2.1 contrast
7 passing · 0 failing

No failing contrast pairs detected.

Chapter 12

Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variablesvariables.css
:root {
  --color-primary: #5865f2;
  --font-display: "Ggsans";
  --space-base: 4px;
  --radius-md: 16px;
}
Tailwind configtailwind.config.js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#5865f2' },
      fontFamily: { display: ['Ggsans', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '16px' },
    },
  },
};

Run npx designlang pack discord.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

Usage

  1. Lead with the primary.

    It belongs on calls-to-action and one accent moment per screen. Not on body copy.

  2. Two type families, three weights.

    Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

  3. Snap to the spacing scale.

    Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

  4. Treat accessibility as a hard constraint.

    When a colour pair fails WCAG, fix the colour — not the contrast check.