Discord

Discord's marketing system sits on a deep-indigo canvas (#0a0d3a) washed by an animated Blurple-to-magenta gradient mesh, shouts its headlines in heavy all-caps ABC Ginto Nord, and keeps geometry soft with 40px media corners. Blurple (#5865f2) owns every action, electric green (#35ed7e) is reserved for the single highest-intent CTA, and vibrant magenta (#ec48bd) fills the gradient feature panels and step cards.

Homepage Example

Discord
Download Open Discord
YOUR PLACE
TO TALK
Voice, video and text conversations for communities.
Download for Linux Open in Browser
PLAY · CHAT · HANG OUT

Color Palette (13)

Blurple#5865f2
On-primary#ffffff
Electric Green#35ed7e
Vibrant Magenta#ec48bd
Link Cyan#00b0f4
Indigo Canvas#0a0d3a
Raised Indigo#1e2353
Onyx#23272a
Surface Black#000000
Ink#ffffff
Ink Dark#000000
Muted Ink#333333
Hairline#23272a

Typography (10)

display-xl
display-xl82px · weight 800
display-lg
display-lg62px · weight 800
display-md
display-md56px · weight 700
heading-lg
heading-lg48px · weight 700
heading-sm
heading-sm22px · weight 700
body-lg
body-lg20px · weight 500
link-lg
link-lg18px · weight 500
body
body16px · weight 400
link
link16px · weight 500
link-sm
link-sm14px · weight 500

Components (16)

nav-bar
nav-bar
button-primary
button-primary
button-green
button-green
button-white
button-white
button-ghost
button-ghost
button-ghost-sm
button-ghost-sm
feature-card-gradient
feature-card-gradient
feature-card-dark
feature-card-dark
showcase-band-black
showcase-band-black
stat-card
stat-card
step-card
step-card
cta-band
cta-band
marquee-band
marquee-band
pricing-table
pricing-table
badge
badge
footer
footer

Border Radius

6 (6px)
12 (12px)
14 (14px)
16 (16px)
40 (40px)
120 (120px)
pill (9999px)

Design Philosophy

Overview

Discord's marketing design is loud on purpose. The pages live on a deep-indigo canvas (#0a0d3a) that is rarely still: it is washed by an animated mesh of Blurple, violet and vibrant magenta, then punctuated by full-bleed gradient bands and oversized rounded media. Where most product sites whisper in restrained neutrals, Discord shouts in heavy all-caps ABC Ginto Nord, stacks playful 3D character art, and lets a single electric green CTA pop against the cool indigo. The whole system reads like an arcade cabinet: energetic, saturated, unmistakably gaming-native.

Key Characteristics

  • Deep-indigo canvas (#0a0d3a) lit by an animated Blurple-to-magenta gradient mesh — never a flat or neutral background
  • Blurple (#5865f2) owns CTAs, marquee bands, stat cards and the brand mark; electric green (#35ed7e) is reserved for the single highest-intent action
  • Vibrant magenta (#ec48bd) fills the gradient feature panels, step cards and badges — the playful counterweight to the cool indigo
  • Heavy all-caps display type in ABC Ginto Nord 800 (82px hero) shouting over body copy that drops to 16px / 400
  • Soft, toy-like geometry: 12-16px on controls, 40px on media and feature panels, up to 120px on signature shapes
  • Page rhythm: dark-indigo hero, gradient and dark feature cards, black showcase band, Blurple marquee/CTA band, giant wordmark footer

Do's and Don'ts

Lead with the indigo canvas and let the animated gradient carry atmosphere. Reserve green for the one highest-intent CTA and use Blurple for everything else action-related. Round generously — 40px+ on media and feature panels. Don't flatten the canvas to neutral grey or pure black, don't set headlines in a timid mid-weight, don't lean on drop shadows for depth, and don't introduce a fourth loud accent: Blurple, green and magenta are the full chord.

개요

디스코드의 마케팅 디자인은 의도적으로 요란합니다. 페이지는 딥 인디고 캔버스(#0a0d3a) 위에 놓이며, 그 위에는 블러플(Blurple), 바이올렛, 비비드 마젠타로 구성된 애니메이션 메시 그라디언트가 흐릅니다. 대부분의 제품 사이트가 절제된 뉴트럴로 속삭일 때 디스코드는 무거운 대문자 ABC Ginto Nord로 소리치고, 장난스러운 3D 캐릭터 아트를 겹쳐 놓으며, 하나의 일렉트릭 그린 CTA가 서늘한 인디고 위에서 튀어나오게 합니다. 전체 시스템은 오락실 캐비닛처럼 읽힙니다. 에너지 넘치고, 채도 높고, 게임 네이티브 그 자체입니다.

핵심 특징

  • 애니메이션 블러플-투-마젠타 그라디언트 메시로 조명되는 딥 인디고 캔버스(#0a0d3a) — 평평하거나 뉴트럴한 배경은 절대 사용하지 않음
  • 블러플(#5865f2)이 CTA, 마퀴 밴드, 스탯 카드, 브랜드 마크를 담당하고 일렉트릭 그린(#35ed7e)은 최고 의도의 단 하나의 액션에만 사용
  • 비비드 마젠타(#ec48bd)가 그라디언트 피처 패널, 스텝 카드, 배지를 채우며 서늘한 인디고의 장난스러운 균형을 잡음
  • ABC Ginto Nord 800(히어로 82px)의 무거운 대문자 디스플레이 타입이 16px / 400 본문 위에서 소리침
  • 부드럽고 장난감 같은 기하: 컨트롤 12-16px, 미디어와 피처 패널 40px, 시그니처 도형은 최대 120px
  • 페이지 리듬: 다크 인디고 히어로, 그라디언트와 다크 피처 카드, 블랙 쇼케이스 밴드, 블러플 마퀴/CTA 밴드, 거대 워드마크 푸터

Do's and Don'ts

인디고 캔버스로 시작하고 애니메이션 그라디언트가 분위기를 담당하게 하세요. 그린은 최고 의도의 CTA 하나에만, 블러플은 그 외 모든 액션에 사용합니다. 미디어와 피처 패널은 40px 이상으로 넉넉하게 둥글리세요. 캔버스를 뉴트럴 그레이나 순수 블랙으로 평평하게 만들지 말고, 헤드라인을 소심한 중간 굵기로 두지 말며, 깊이를 위해 드롭 섀도에 의존하지 마세요. 네 번째로 큰 액센트 색을 도입하지 않는 것이 중요합니다 — 블러플, 그린, 마젠타가 완전한 코드입니다.

概要

Discord のマーケティングデザインは意図的に騒がしい。ページはディープ・インディゴのキャンバス(#0a0d3a)の上にあり、ブループル、バイオレット、鮮やかなマゼンタによるアニメーションのメッシュグラデーションが流れる。ほとんどのプロダクトサイトが抑制されたニュートラルで囁く中、Discord は重い全大文字の ABC Ginto Nord で叫び、遊び心のある 3D キャラクターアートを重ね、一つのエレクトリックグリーンの CTA を涼しいインディゴの上に際立たせる。全体はアーケード筐体のようだ — 充電し、彩度が高く、確かにゲーミング・ネイティブ。

主要な特徴

  • ブループルからマゼンタへ動くアニメーショングラデーションメッシュに照らされたディープ・インディゴのキャンバス(#0a0d3a) — 平坦な背景やニュートラル背景は使わない
  • ブループル(#5865f2)が CTA・マーキーバンド・統計カード・ブランドマークを担い、エレクトリックグリーン(#35ed7e)は最も意図の強い唯一のアクション専用
  • ビビッドマゼンタ(#ec48bd)がグラデーションのフィーチャーパネル、ステップカード、バッジを満たす
  • ABC Ginto Nord 800(ヒーロー 82px)の重い大文字ディスプレイ書体が 16px / 400 の本文の上で叫ぶ
  • 柔らかく玩具的なジオメトリ: コントロールは 12-16px、メディアとフィーチャーパネルは 40px、象徴的な形は最大 120px
  • ページのリズム: ダークインディゴのヒーロー、グラデーションとダークのフィーチャーカード、ブラックのショーケースバンド、ブループルのマーキー / CTA バンド、巨大ワードマークのフッター

Do's and Don'ts

インディゴのキャンバスから始め、動くグラデーションに空気感を担わせる。グリーンは最も意図の強い CTA 一つに、ブループルはそれ以外のアクション全般に使う。メディアとフィーチャーパネルは 40px 以上と大胆に丸める。キャンバスをニュートラルグレーまたは純黒で平坦にせず、見出しを控えめな中間の太さにせず、奥行きのためにドロップシャドウに頼らず、4 番目に大きなアクセントカラーを持ち込まないこと — ブループル、グリーン、マゼンタで完結する。

Frequently Asked Questions

Q. What are Discord's brand colors?

The Discord palette uses 13 colors, led by Blurple (#5865f2), On-primary (#ffffff), Electric Green (#35ed7e), Vibrant Magenta (#ec48bd), Link Cyan (#00b0f4). The primary brand color is Blurple (#5865f2).

Q. What fonts does the Discord design system use?

Display type is set in ABC Ginto Nord at 82px / weight 800, while body and UI text uses ABC Ginto at 14px / weight 500.

Q. What kind of website is Discord?

Discord is a Productivity & SaaS brand. Its design system documents 13 colors, 10 type styles and a 7-step border-radius scale.

Q. What border radius values does Discord use?

The radius scale runs from 6 (6px) to 120 (120px): 6 (6px), 12 (12px), 14 (14px), 16 (16px), 40 (40px), 120 (120px).

Q. Where can I see the Discord design system?

This page shows Discord's color palette, typography scale, components, border radii and design philosophy in English, Korean and Japanese.