Design System Analysis of Discord

A loud, playful gaming-native system on a deep-indigo canvas lit by Blurple, electric green, and vibrant magenta gradients. Heavy all-caps ABC Ginto Nord display shouts over generously rounded media and full-bleed colour bands.

01 — Foundations

Color Palette

Blurple

#5865f2

Primary CTA, bands, brand mark

Electric Green

#35ed7e

Highest-intent CTA (black label)

Vibrant Magenta

#ec48bd

Gradient feature panels, step cards, badges

Link Cyan

#00b0f4

Inline text links on dark

Indigo Canvas

#0a0d3a

Deep-indigo page base

Raised Indigo

#1e2353

Dark feature cards, pricing, rows

Onyx

#23272a

Classic dark-UI surface

Black

#000000

Full-black showcase bands

White

#ffffff

Display + body text on dark

Muted Ink

#333333

Secondary text on light surfaces

02 — Foundations

Typography

ggsans — ABC Ginto Nord (heavy display) paired with ggsans / ABC Ginto for body; Inter shown as the open-source substitute. Headlines shout in 700-800 all-caps; body drops to 400-500.

display-xl
82px / 800 / 1.0 / 0
DISCORD
display-lg
62px / 800 / 1.05 / 0
DISCORD
display-md
56px / 700 / 1.05 / 0
DISCORD
heading-lg
48px / 700 / 1.1 / 0
DISCORD
heading-sm
22px / 700 / 1.2 / 0
Group chat
body-lg
20px / 500 / 1.4 / 0
Talk, play, hang out
link-lg
18px / 500 / 1.4 / 0
Talk, play, hang out
body
16px / 400 / 1.5 / 0
Talk, play, hang out
link
16px / 500 / 1.4 / 0
Talk, play, hang out
link-sm
14px / 500 / 1.4 / 0
Talk, play, hang out
03 — Components

Button Variants

button-primary · Blurple pill

Blurple fill, white label, 12px radius — the everyday CTA.

button-green · high-intent

Electric green, black label — the single highest-intent action.

button-white
button-ghost · translucent
badgeNew
04 — Components

Cards & Surfaces

Gradient feature panel

Vibrant magenta panel framing a product mockup or 3D prop — the playful signature surface.

Dark feature card

Raised-indigo card holding product screenshots and chat mockups.

Blurple stat / CTA band

Full-bleed Blurple field for big-number stats and CTA bands.

05 — Components

Form Elements

text-input · 16px radius
textarea
06 — Foundations

Spacing Scale

8px base unit. Card interiors run xl (24px) to section (40px); buttons pad sm-lg vertical by xl horizontal.

xxs
4
xs
8
sm
12
md
16
lg
20
xl
24
xxl
32
section
40
07 — Foundations

Border Radius

Soft throughout: 12px on CTAs, 16px on cards and media, 40px+ on gradient feature panels, up to jumbo 120px on signature shapes.

6
xs
6
12
sm
12
14
md
14
16
lg
16
40
xl
40
50
pill
50
120
jumbo
120
999
full
9999
08 — Foundations

Elevation & Depth

Level 0 — flat. Colour field, gradient, and large radius do the work.
Level 1 — soft float. Wide violet-tinted glow (0 3px 68px rgba(69,42,124,0.1)) lifts product media.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; nav → hamburger; CTAs + pricing tiers stack full-width
Tablet768–1023pxGrids collapse toward 2-up / 1-up; nav condenses
Laptop1024–1279pxTightened gutters; 3-col grids retained
Desktop≥ 1280pxFull multi-column grids; centred ~1200px column
375
768
1024
1280
1440

Touch targets: button-primary and button-green clear 44x44 WCAG-AAA via their vertical padding. Collapsing: nav collapses to logo plus hamburger below the tablet breakpoint (Download CTA stays); multi-column pricing/feature grids reflow to a single stacked column; section padding compresses toward 20-32px; gradient cards and bands span full width; display type scales down while keeping weight 700-800.

Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

Starter
$9/month

For individuals getting started.

  • Core features
  • Up to 3 projects
  • Community support
Pro Most popular
$29/month

For teams ready to ship.

  • Everything in Starter
  • Unlimited projects
  • Email support
  • Advanced analytics
Team
$99/month

For organizations operating at scale.

  • Everything in Pro
  • SSO + audit log
  • Priority support
  • SLA & onboarding