Discord is the group chat and voice platform for playing games, hanging out, and building communities. Its dark-first surfaces step through #1e1f22, #2b2d31, and #313338, Blurple (#5865f2) is the only saturated accent in chat, gg sans stays friendly and geometric, and server avatars are 16px rounded squares that snap to circles on hover.
SaaSMinimal
Prompt Template
Base Template
Design a Discord-inspired interface. - Dark-first surfaces: #1e1f22 / #2b2d31 / #313338 (3-step depth); - Blurple #5865f2 as the only saturated accent in the chat surface; - gg sans (Whitney-style) for all text — friendly, geometric, neutral; - Rounded-square server avatars (16px radius) that snap to circles on hover; - Tight chat-row spacing, generous side-panel padding. Colors: #5865f2, #4752c4, #7289da, #1e1f22 with #5865f2 accent. Typography: - Background:.
Variant Prompts
📱 Mobile
Design a mobile app with Discord aesthetics. Use Discord color identity with #5865f2 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Discord style. Use Discord color identity with #5865f2 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Discord design language. Use Discord color identity with #5865f2 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Discord visual identity. Use Discord color identity with #5865f2 accents. Compelling, conversion-focused.
Usage Examples
Discord App
WebBuild a web app with Discord design language and #5865f2 color system.
Discord Dashboard
DashboardCreate a dashboard using Discord style with data visualization and - Background: typography.
✅ Best For
- SaaS
- Community and realtime chat products
- Gamer social interfaces
❌ Avoid For
- Sober government and nonprofit pages
- High-end luxury e-commerce
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.