mdshop
Back to designs
D

Design System inspired by Discord

Voice chat platform. Blurple brand, dark UI, playful gaming aesthetic.

Usage
npx getdesign@latest add discord

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
16
Bookmarked
0
Not an official Discord design system. A curated starting point for building Discord-like UIs with your AI coding agent.

Voice chat platform. Blurple brand, dark UI, playful gaming aesthetic.

Preview
discord.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF DISCORD

Voice chat platform. Blurple brand, dark UI, playful gaming aesthetic.

Explore the systemView tokens

Color Palette

Voice chat platform. Blurple brand, dark UI, playful gaming aesthetic.

Primary
Blurple
#5865f2
Brand color
Green
#57f287
Brand color
Yellow
#fee75c
Brand color
Fuchsia
#eb459e
Brand color
Red
#ed4245
Brand color
Dark BG
#313338
Brand color
Darker
#2b2d31
Brand color
Darkest
#1e1f22
Brand color
White
#ffffff
Brand color

Typography

A type system inspired by Discord.

gg sans
gg sans, gg sans
Noto Sans
Noto Sans, gg sans
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Discord.

Not detected on this URL

Components

Other component primitives mapped from the Discord spec.

Not detected on this URL