Discord
discord.com“Discord projects a high-energy, playful, and deeply social vibe that prioritizes community and gaming culture. The aesthetic is bold and accessible, utilizing a vibrant purple identity and stark, high-contrast interactions to create an inviting yet energetic digital hangout space.”
Color Palette
Colors
Light Mode
Dark Mode
Typography
Fonts
Ggsans
sans-serif
Abcgintodiscordnord
Arial, sans-serif
Abcgintodiscord
sans-serif
Abcgintodiscord
sans-serif
ABC Ginto Normal
sans-serif
The quick brown fox
16pxThe quick brown fox
56pxThe quick brown fox
22pxThe quick brown fox
16pxComponents
Design System
Voice & Tone
Personality
Visual Energy
Design Era
contemporary-minimal
Emotional Tone
friendly-energetic
Target Audience
Gamers, online communities, and younger demographics seeking casual social interaction and group coordination tools.
Comparable Brands
Brand Rules
Dos & Don'ts
Do
- Use the primary brand color #5865f2 for main interactive elements and active states, with #8891f2 as a lighter accent for hover states or secondary highlights.
- Apply Ggsans at 400 weight for all body copy, maintaining a strict 24px line-height for readability.
- Style primary Call-to-Action buttons with a bright green background (#35ed7e), black text (#000000), 12px border-radius, and a 1px black border for high visibility.
- Format all headings in sentence-case using Abcgintodiscordnord at 700 weight to maintain a casual yet structured hierarchy.
- Utilize the dark mode background color #1a2081 for immersive, low-light environments, ensuring text remains high-contrast black or white as appropriate.
- Implement medium border-radius (16px) for secondary buttons and large border-radius (50px) for pill-shaped elements or avatars to soften the UI.
- Employ direct, imperative copywriting with frequent exclamations (e.g., 'Hop in', 'Go chat') to drive immediate user action and engagement.
- Maintain a flat design aesthetic by strictly avoiding box-shadows and gradients, relying on solid color blocks and spacing for visual hierarchy.
Don't
- Do not use emoji in marketing copy or UI labels, as the brand maintains a clean, text-focused aesthetic.
- Avoid title case for headings; always use sentence-case to preserve the casual, conversational tone.
- Do not apply box-shadows or drop-shadows to any element, including cards, buttons, or modals.
- Avoid using gradients or complex textures; the design relies on solid, flat colors like #ffffff and #1a2081.
- Do not use serif fonts or alternative typefaces; strictly adhere to the Ggsans and ABC Ginto family.
- Avoid vague CTAs; do not use passive language like 'Learn more' instead of direct commands like 'Download' or 'Log In'.
- Do not use light gray text on light backgrounds or dark text on dark backgrounds without ensuring sufficient contrast ratios.
- Avoid sharp, 0px border-radius on interactive elements unless specifically designing outline links or text-only buttons.
Design Assets
Visual Elements
.webp)
How to use this file
1. Save this file as DESIGN.md in your project root (sibling to README.md).
2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.
3. Validate or export tokens with the official CLI:
npx @google/design.md lint DESIGN.md npx @google/design.md export --format tailwind DESIGN.md
Developer Access
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/discord.com \
-H "x-api-key: ev_your_key"
# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
-H "x-api-key: ev_your_key"
# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
-H "x-api-key: ev_your_key"Extract your own brand kit
Get colors, fonts, voice, and personality from any website in seconds. Open source.