explainx.ainewsletter3.4k
Back to designs

DESIGN.md · explainx registry

Discord

Discord's design system is built for the "always-on" gamer and community member. It prioritizes comfort during long sessions, high-density chat readability, and a playful, vibrant brand voice.

Design System#design#ui#ux#template
Get a custom design.md for your product
DESIGN.md (markdown body)
name
Discord
colors
background: "#313338" # background-primary foreground: "#dbdee1" # text-normal brand: "#5865f2" # Blurple muted: "#949ba4" # text-muted border: "#1e1f22" # background-tertiary (used as border/divider) card: "#2b2d31" # background-secondary accent: "#5865f2" success: "#23a55a" warning: "#f0b232" danger: "#f23f43" # Discord is dark-first, but has a light mode light: background: "#ffffff" foreground: "#313338" muted: "#4e5058" border: "#e3e5e8" card: "#f2f3f5" accent: "#5865f2"
typography
fontFamily: sans: "gg sans, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif" mono: "Consolas, Andale Mono WT, Courier New, monospace" body: fontSize: "16px" lineHeight: "1.375" # Tight leading for chat heading: fontWeight: "700"
rounded
default: "8px" md: "8px" lg: "16px" full: "9999px"

Design System: Discord

Overview

Discord's design system is built for the "always-on" gamer and community member. It prioritizes comfort during long sessions, high-density chat readability, and a playful, vibrant brand voice.

Design Philosophy

  1. Community Centric: Design elements are built to foster interaction—mentions, reactions, and roles are visually distinct.
  2. Comfortable Dark Mode: Uses specific dark grays (#313338) rather than pure black to reduce eye strain over time.
  3. The "Blurple" Energy: The signature Blurple (#5865f2) acts as the anchor for the brand, representing a bridge between professional tools and gaming energy.
  4. Playful Precision: Combines tight, efficient chat layouts with friendly, rounded components and quirky icons.

Colors

  • Blurple (#5865F2): The primary interactive color. High saturation ensures it stands out against both dark and light backgrounds.
  • Status Indicators: Green (Online), Yellow (Idle), Red (DND), and Grey (Offline) are core semantic tokens.
  • Layered Greys: Uses a 3-tier background system (#1E1F22 -> #2B2D31 -> #313338) to create depth and focus in the app.

Typography

  • gg sans: Discord's custom font designed for high legibility in dense chat logs. It has a slightly rounded, friendly character.
  • Chat Density: Uses a tight line-height to allow more messages on screen without sacrificing legibility.

Components

  • The Channel List: Uses #2B2D31 with a hover state that highlights the channel in #35373C and rounds the text area.
  • User Popouts: Compact, card-like overlays with a dark background and high-contrast user information.
  • The "Pill": Used for server icons and mention badges, often morphing from a circle to a rounded-square on hover.

Visual Effects

  • Hover Micro-interactions: Buttons and list items often shift subtly in color or size to provide immediate feedback.
  • Squircle/Circle Morph: Server icons use a signature transition between circular and rounded-square forms.
  • Minimal Shadows: Relies on color contrast between background layers rather than heavy drop shadows.

Usage

  1. Copy DESIGN.md into your project or paste it into your IDE agent chat.
  2. Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
  3. When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Discord on explainx.ai?
Discord's design system is built for the "always-on" gamer and community member. It prioritizes comfort during long sessions, high-density chat readability, and a playful, vibrant brand voice. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?
DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?
Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?
Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?
Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

GET_STARTED →