<!-- Generated by ExtractVibe — https://extractvibe.com/brand/discord.com -->
<!-- Extracted: 2026-05-03T16:52:32.914Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Discord"
description: "Discord projects a high-energy, playful, and deeply social vibe that prioritizes community and gaming culture. The aesthetic is bold and accessible, utilizing a vibrant purple identity and stark, high-contrast interactions to create an inviting yet energetic digital hangout space."
colors:
  primary: "#5865f2"
  tertiary: "#8891f2"
  surface: "#ffffff"
  on-surface: "#000000"
  border: "#00b0f4"
  surface-dark: "#5865f2"
typography:
  display-lg:
    fontFamily: "Abcgintodiscordnord"
    fontSize: "56px"
    fontWeight: "700"
    lineHeight: "48px"
    letterSpacing: "-0.56px"
  headline-lg:
    fontFamily: "Abcgintodiscordnord"
    fontSize: "22px"
    fontWeight: "700"
    lineHeight: "17.6px"
    letterSpacing: "-0.66px"
  headline-md:
    fontFamily: "Abcgintodiscord"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "20px"
  body-md:
    fontFamily: "Ggsans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "12px"
  md: "16px"
  lg: "50px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#35ed7e"
    textColor: "#000000"
    rounded: "12px"
    padding: "13.008px 24px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#000000"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    rounded: "16px"
    padding: "10px 16px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#000000"
  button-outline:
    textColor: "#ffffff"
    rounded: "0px"
    padding: "24px 16px 24px 0px"
    fontSize: "16px"
    fontWeight: "500"
    borderColor: "#ffffff"
    borderWidth: "0px 0px 1px"
---

# Discord — Design System

## Overview

Discord's design system embodies the spirit of The Jester and The Everyman, creating a digital space that is both playful and universally accessible. This design prioritizes a high-energy, community-first experience, directly comparable to the vibrant and social ecosystems of Twitch, Spotify, and Roblox. The aesthetic is characterized by bold, high-contrast interactions and a distinctive purple identity, fostering an inviting yet energetic environment for social connection and gaming culture. This is not a minimalist or corporate design; it actively rejects muted palettes and understated interactions in favor of a dynamic and expressive visual language that resonates with its gamer-centric audience.

The design's core function is to facilitate deep social interaction and community building. It leverages its distinct visual identity to stand out in a crowded digital landscape, ensuring immediate brand recognition and a consistent user experience. The emphasis is on clarity and directness in communication, supporting the rapid exchange of information and fostering a sense of belonging. The design avoids ambiguity and overly subtle cues, instead opting for clear visual hierarchy and intuitive navigation that empowers users to engage effortlessly within its vibrant communities.

**Key characteristics:**

- Vibe — playful, community-first, gamer-centric, bold, accessible, social
- Archetypes — The Jester, The Everyman
- Comparable to — Twitch, Spotify, Roblox, Clubhouse
- Design era — contemporary-minimal
- Emotional tone — friendly-energetic
- Target audience — Gamers, online communities, and younger demographics seeking casual social interaction and group coordination tools.
- Visual energy — 8/10 (high-energy/bold)

## Colors

The primary color, `#5865f2` (Discord Purple), is central to the brand's identity, signaling playfulness and high energy. This vibrant hue, paired with a stark `#ffffff` surface, creates a high-contrast, accessible interface that is immediately recognizable and engaging. The palette is designed to be bold and direct, reinforcing the brand's energetic and social character without relying on extensive secondary colors.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#5865f2` | Royal Blue |
| accent / tertiary | `#8891f2` | Cornflower Blue |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| border | `#00b0f4` | Deep Sky Blue |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#5865f2` | Royal Blue |
| background | `#1a2081` | Midnight Blue |

## Typography

The type system, featuring Ggsans, Abcgintodiscordnord, and Abcgintodiscord, establishes a clear, modern, and highly legible visual voice. These fonts are chosen for their clean lines and approachable character, supporting the brand's accessible and community-first ethos. Hierarchy is achieved through distinct font weights and sizes, ensuring critical information is immediately discernible and contributing to a dynamic yet organized interface that facilitates rapid information consumption.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Ggsans | body | self-hosted | 400 |
| Abcgintodiscordnord | heading | self-hosted | 700 |
| Abcgintodiscord | heading | self-hosted | 400 |
| Abcgintodiscord | body | self-hosted | 400, 500 |
| ABC Ginto Normal | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Abcgintodiscordnord | 56px | 700 | 48px | -0.56px |
| Heading 2 | Abcgintodiscordnord | 22px | 700 | 17.6px | -0.66px |
| Heading 3 | Abcgintodiscord | 16px | 400 | 20px | — |
| Body | Ggsans | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `sm` — 12px
- `md` — 16px
- `lg` — 50px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#35ed7e`
- Text — `#000000`
- Radius — `12px`
- Padding — `13.008px 24px`
- Font size — `16px`
- Font weight — `500`
- Border — ` solid #000000`
- Sample copy — "Skip to main content"

**Secondary**

- Background — `#ffffff`
- Text — `#000000`
- Radius — `16px`
- Padding — `10px 16px`
- Font size — `16px`
- Font weight — `500`
- Border — ` solid #000000`
- Sample copy — "Log In"

**Outline**

- Text — `#ffffff`
- Radius — `0px`
- Padding — `24px 16px 24px 0px`
- Font size — `16px`
- Font weight — `500`
- Border — `0px 0px 1px solid #ffffff`
- Sample copy — "Download"

## Do's and Don'ts

### Do

- Use the primary brand color #5865f2 for main interactive elements and active states, with #8891f2 as a lighter accent for hover states or secondary highlights.
- Apply Ggsans at 400 weight for all body copy, maintaining a strict 24px line-height for readability.
- Style primary Call-to-Action buttons with a bright green background (#35ed7e), black text (#000000), 12px border-radius, and a 1px black border for high visibility.
- Format all headings in sentence-case using Abcgintodiscordnord at 700 weight to maintain a casual yet structured hierarchy.
- Utilize the dark mode background color #1a2081 for immersive, low-light environments, ensuring text remains high-contrast black or white as appropriate.
- Implement medium border-radius (16px) for secondary buttons and large border-radius (50px) for pill-shaped elements or avatars to soften the UI.
- Employ direct, imperative copywriting with frequent exclamations (e.g., 'Hop in', 'Go chat') to drive immediate user action and engagement.
- Maintain a flat design aesthetic by strictly avoiding box-shadows and gradients, relying on solid color blocks and spacing for visual hierarchy.

### Don't

- Do not use emoji in marketing copy or UI labels, as the brand maintains a clean, text-focused aesthetic.
- Avoid title case for headings; always use sentence-case to preserve the casual, conversational tone.
- Do not apply box-shadows or drop-shadows to any element, including cards, buttons, or modals.
- Avoid using gradients or complex textures; the design relies on solid, flat colors like #ffffff and #1a2081.
- Do not use serif fonts or alternative typefaces; strictly adhere to the Ggsans and ABC Ginto family.
- Avoid vague CTAs; do not use passive language like 'Learn more' instead of direct commands like 'Download' or 'Log In'.
- Do not use light gray text on light backgrounds or dark text on dark backgrounds without ensuring sufficient contrast ratios.
- Avoid sharp, 0px border-radius on interactive elements unless specifically designing outline links or text-only buttons.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 9/10 | casual |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 6/10 | balanced |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — simple
- Jargon — some
- CTA style — direct action verbs with platform-specific instructions
- Rhetorical devices — repetition, imperative mood, hyperbole

### Sample copy

> Group chat that’s all fun & games

> YOU CAN'T SCROLL ANYMORE.BETTER GO CHAT.

> Hop in when you're free, no need to call

> See who's around to chill

> stream like you’re in the same room

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/discord.com) | 100% |
| primary | — | svg | [link](https://extractvibe.com/api/assets/brands/discord.com/logo-svg-7.svg) | 84% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/discord.com/logo-6.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/discord.com/logo-4.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/discord.com/logo-5.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/discord.com/logo-2.svg) | 80% |
| wordmark | color | svg | [link](https://extractvibe.com/api/assets/brands/discord.com/logo-3.svg) | 80% |
| favicon | — | ico | [link](https://extractvibe.com/api/assets/brands/discord.com/logo-1.ico) | 74% |
| favicon | — | ico | [link](https://extractvibe.com/api/assets/brands/discord.com/logo-0.ico) | 62% |

## Sources

- Official brand guidelines — https://discord.com/branding
- Live brand page — https://extractvibe.com/brand/discord.com
- Raw JSON — https://extractvibe.com/api/brand/discord.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/discord.com/design.md
- Extracted — 2026-05-03T16:52:32.914Z
- Generator — ExtractVibe vv1
- Quality score — 100/100