Design teardown
Discord
A dark indigo marketing page with condensed all-caps headlines, casual paragraphs, and white and blurple pills on huge rounded illustration slabs.
discord.com
Design character
Night arcade
The homepage is a full-bleed night-blue field with a faint star texture and large illustrated characters. Headlines are condensed, uppercase, and tightly leaded. Body copy is one short conversational paragraph. Interface chrome stays limited to white and blurple pills, while color and depth come from gradient slabs and product art.
Typography
Display is a custom condensed face, uppercase, with line-height tighter than the font size and slight negative tracking. Interface and body copy use a separate custom grotesque at regular and medium weights. The page default is another custom sans that paragraphs override.
Color system
The page sits on a deep indigo body color, shifted locally by texture images. Text is white. Actions are a white pill and a blurple pill. Feature slabs are painted gradients, not flat tokens. Footer labels are a muted lavender white.
Spacing and geometry
The page is spacious and mostly on an 8px rhythm, with large exceptions for column gaps and section padding. Feature rows breathe; controls are compact pills.
Layout
A fixed logo and login pill sit over a scrolling page. The hero is a wide two-column band inside a 1320px container. Later sections alternate text and media inside oversized rounded slabs, then a centered closing line and a multi-column footer.
Motion
Motion is mostly video inside the rounded frames, plus short fades on controls. Nav links shift font variation rather than color. A hidden full-viewport blur is ready for the menu and stays invisible. Reduced-motion stills are present in the DOM.
UI fingerprint
- Tighter than the type Uppercase display is 56px on a 48px line-height, and section titles are 48px on about 45px, with -0.01em tracking.
- White and blurple only Chrome is a white pill and a #5865f2 pill. Everything else colorful is illustration.
- Sticker slabs Feature panels use a 120px outer radius and 104px media radius, with no border or shadow.
- Fixed mark, scrolling links The logo and login pill stay fixed. The center nav is in an absolute 80px bar and scrolls away.