primary
#5865F2Main CTA and brand field.
Blurple framing, pill buttons, animated-feeling surfaces, and dark utility layers make Discord feel social first and software second.
Anyone free for a quick game night? I dropped the invite bundle and the new sticker pack.
Premium perks unlocked. Upload limit boosted and profile cosmetics ready.
01 / Colors
#5865F2Main CTA and brand field.
#798DF9Docs and atmospheric support.
#5765F2Hover inside the Blurple family.
#3442DADeeper pressed interaction.
#5865F2Links behave like actions.
#FFFFFFCards, dropdowns, and bands.
#F6F6F6Section alternation and resets.
#F2F3F5Utility panels and neutral cards.
#202225Dense dark product shell.
#0E0619Nitro and docs darkness.
#23272AMain dark text and buttons.
#4F545CReadable core copy.
#99AAB5Secondary labels and metadata.
#57F287Bright status green.
#FEE75CCheerful alert yellow.
#ED4245Utility and exception red.
#E0E3FFSoft branded wash.
#15F5BAPremium perk energy.
#FF6AEFCollectible premium accent.
#5865F2Loud branded footer slab.
02 / Typography
display — 56px / 800 / 0.96 / -0.02em / Space Groteskhero — 48px / 800 / 1.00 / -0.01em / Space Groteskheadline-lg — 40px / 700 / 1.20 / -0.01em / Space Grotesktitle-lg — 32px / 700 / 1.25 / -0.01em / Space Grotesktitle-md — 24px / 700 / 1.33 / 0 / Space Grotesktitle-sm — 20px / 500 / 1.40 / 0 / Manropebutton — 20px / 500 / 1.20 / 0 / Manropebody-lg — 20px / 400 / 1.40 / 0 / Manropebody — 16px / 400 / 1.50 / 0 / Manropelabel — 14px / 500 / 1.29 / 0.02em / Manropecaption — 14px / 400 / 1.29 / 0 / Manropecode — 14px / 400 / 1.40 / 0 / monospace03 / Buttons
04 / Cards & Surfaces
White cards float over pale bands and let type and CTA carry the emphasis.
Explore feature →Cool gray panels feel closer to product UI and structure.
See structure →Lift stays soft and short-range, never glossy.
Open detail →Premium cards should feel like unlockables, not generic gradients.
Claim perk →Dense nav and dark contrast shift the voice toward utility.
Read reference →05 / Brand-Specific Product Patterns
Animated avatar, larger uploads, cosmetics, premium energy.
Watch 3 more minutes to unlock the reward.
06 / Forms
07 / Spacing
8px12px16px24px32px80px08 / Radius
0pxhard edge / structural only
4pxoutline utility button
8pxdropdowns and feature cards
16pxsurface cards and larger tiles
28pxmain CTA silhouette
9999pxpills, nav utility, reaction chips
09 / Elevation
Hierarchy usually comes from color and scale before shadow.
box-shadow: none;Used for white informational cards on pale bands.
0 3px 9px rgba(0,0,0,.10)Reserved for spotlighted cards and premium modules.
0 8px 30px rgba(35,35,35,.10)10 / Extracted Component Tokens
:root {
--brand-primary: #5865F2;
--brand-accent: #798DF9;
--brand-accent-pressed: #3442DA;
--brand-ink: #23272A;
--brand-body: #4F545C;
--brand-muted: #99AAB5;
--brand-canvas: #FFFFFF;
--brand-surface: #F6F6F6;
--brand-surface-alt: #F2F3F5;
--brand-success: #57F287;
--brand-error: #ED4245;
--brand-light-blurple: #E0E3FF;
--brand-nitro-mint: #15F5BA;
--brand-nitro-pink: #FF6AEF;
--brand-utility-dark: #202225;
--brand-utility-darker: #0E0619;
--type-display: 56px;
--type-headline: 40px;
--type-body: 16px;
--radius-md: 8px;
--radius-xl: 28px;
--radius-pill: 9999px;
--space-md: 16px;
--space-xl: 32px;
--space-section: 80px;
}