---
site: "Discord - Group Chat That’s All Fun & Games"
url: "https://discord.com"
generated_at: "2026-06-25T08:27:03.312Z"
generator: "designlang@13.0.0"
intent: landing
material: flat
tokens:
  colors:
    primary: "#5865f2"
    secondary: "#35ed7e"
    accent: "#1a2081"
    background: "#1a2081"
    foreground: "#000000"
  typography:
    sans: Ggsans
    base: 16
  spacing:
    scale: "[1, 24, 29, 35, 48, 52, 56, 60, 64, 73]"
  radii:
    lg: 16
    full: 72
---

# Overview

A **landing** page (heuristic confidence 0.45), dressed in **flat** material.

> "GROUP CHAT THAT’S ALL FUN & GAMES"

The author writes in a **friendly** voice; headings tend to be **Title Case** case and **balanced**.

Reading order detected on the source: `nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → nav → pricing → nav → sidebar → footer → nav → nav → nav → nav`.

Source: <https://discord.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#5865f2` | 35 |
| secondary | `#35ed7e` | 1 |
| accent | `#1a2081` | 1 |
| background | `#1a2081` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#ffffff` · `#333333` · `#23272a`

**Total unique colors detected:** 9.

# Typography

**Families**
- `Ggsans` · 547 uses
- `Abcgintodiscord` · 403 uses
- `ABC Ginto Normal` · 153 uses
- `Times` · 65 uses

**Body size:** `16px` / line-height `normal`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `48px` | `700` | `57.6px` |
| h2 | `44px` | `700` | `37.7143px` |
| h3 | `36px` | `800` | `33.48px` |
| h4 | `22px` | `700` | `17.6px` |

# Layout

**Scale:** `1px` · `24px` · `29px` · `35px` · `48px` · `52px` · `56px` · `60px` · `64px` · `73px`

**Layout primitives:** 13 grid containers · 201 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

_No discrete shadow tokens detected — flat material._

**Z-index layers:** 17 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `lg` — `12px`
- `lg` — `16px`
- `full` — `40px`
- `full` — `50px`
- `full` — `60px`
- `full` — `72px`

# Components

**Detected patterns:** `buttons` · `links` · `navigation` · `footer` · `dropdowns` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | primary | — | 6 |

# Do's and Don'ts

**Do's**
- Use `download`, `log`, `open` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Title Case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **flat** material — match shadow and radius habits.

**Don'ts**
- Don't 5 font families — consider limiting to 2 (heading + body).
- Don't 181 !important rules — prefer specificity over overrides.
- Don't 91% of css is unused — consider purging.
- Don't 68526 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://discord.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._