Discord Design System

Discord's marketing page is dressed like a friend's bedroom poster. The outer frame stays pure black ("#000000"), but the page itself drops into a midnight indigo gradient — "#1a2081" warming into "#24173f" — with a starfield and 3D-illustrated planets, hands holding phones, and bedroom-game-night scenes layered over it. Against that canvas, ABC Ginto Discord Nord shouts the hero in full uppercase at 56-61px weight 700-800 with tight -0.56px tracking, while a single Blurple ("#5865f2") pill CTA does the only color work the chrome ever performs. The brand voltage is famously the singular Blurple — three on-page renders is all it takes, because every other section steals attention with full-bleed candy-colored feature cards (pink, spring green, yellow, fuchsia) and full-width 3D scenes. The chrome is quiet; the illustration is loud.

This file packages the public marketing system as a single Google Labs DESIGN.md spec. Inside: 21 color tokens covering the brand Blurple plus the six-card feature palette, two canvas surfaces, and supporting structural greys; 12 typography styles all set in ABC Ginto Discord / ABC Ginto Discord Nord with one substitution-ready Inter stack and one weight-800 display register; a 5-step radius scale where every CTA pill renders at 12px and feature cards at 50-120px; 8 spacing steps tuned to the 4-8-16 base rhythm; and 24 component recipes covering primary and ghost CTAs, the dark top nav, feature cards in all six accent fills, the rotating word banner, the 3D-scene hero panel, and the support search field.

Feed this file to Claude, Cursor, or GitHub Copilot and the AI will produce React components that look like Discord, not like a generic dark dashboard — uppercase Nord display, single-Blurple CTA discipline, rainbow accent cards swapping per section, and the outer-black / inner-indigo two-tier canvas. Or reference the tokens directly when building social, community, or chat-app marketing surfaces: every hex is quoted, every component recipe ready to paste into Tailwind config or CSS custom properties. The system is worth studying because it proves a social brand can carry a marketing site on illustration energy plus one accent — restraint at the chrome level, maximalism at the imagery level.