registry://designs/whyashthakker-design-md-templates-skills-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.
| 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" |
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.
#313338) rather than pure black to reduce eye strain over time.#5865f2) acts as the anchor for the brand, representing a bridge between professional tools and gaming energy.#1E1F22 -> #2B2D31 -> #313338) to create depth and focus in the app.#2B2D31 with a hover state that highlights the channel in #35373C and rounds the text area.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.
Share your design system with AI agents worldwide