The visual approach
Discord's homepage opens on background-dark: #0B0C0F, a near-black field that pushes white text and purple accents forward with zero ambiguity. The hero headline runs at display-xl: 96px with an 800 weight in Ginto Nord, Discord's custom display face. That combination—oversized point size, extra-bold weight, proprietary font—establishes authority before the reader processes the words.
The purple brand accent (brand-primary: #5865F2) appears sparingly: primary CTAs, the occasional underline, glowing effects on the pulsing LIVE badge. White buttons (button-white: #FFFFFF) handle the conversion work. The palette is deliberately constrained. Three colors do most of the lifting: near-black, white, purple.
Typography drops through five named stops. display-xl at 96px for hero headlines. display-lg at 80px for section openers. heading-xl at 48px for subsections. body-lg at 20px for feature descriptions. body-md at 16px—set in gg sans, Discord's UI typeface—for navigation and supporting copy. The scale is steep enough to enforce hierarchy without requiring color or decoration.
The design layers Three.js–rendered 3D illustrations over the flat typographic grid. Characters, device mockups, floating eggs, and mascots sit at different z-depths and scroll at 0.3× to 0.7× the speed of the content layer. Background starfields crawl at 0.2×. The effect is depth without disorientation—playful but not gimmicky.
What works
The typography scale solves a structural problem: how do you make a voice-chat platform feel substantial when the product is invisible. Discord can't show a polished dashboard or a beautifully rendered deliverable. The UI lives inside a small window on your second monitor. So the homepage compensates with typographic mass. display-xl at 96px and 800 weight feels like a statement, not a tagline.
Button hovers use transform: translateY(-2px) over 180ms ease-out with a simultaneous shadow expansion. The timing is fast enough to feel responsive but slow enough to read as intentional lift, not a jitter. Primary CTAs add a subtle 1.02× scale. The white "Download" button likely inverts or tints on hover—the brief doesn't specify, but the pattern holds: every interactive surface acknowledges the cursor.
The LIVE badge pulses continuously at 1.0 to 1.08 scale over 1400ms ease-in-out infinite, synchronized with a 0–8px purple glow. That 1400ms duration is slow enough to read as ambient rather than alarming. Faster would feel like an alert. Slower would disappear into the background. The timing reinforces "always on" without demanding attention.
Dropdown menus slide down over 240ms ease-out. Navigation links transition in 120ms. 3D elements tilt 2–4° and scale to 1.05× on hover over 300ms with a custom cubic-bezier. Every interaction has a defined timing budget. Nothing snaps. Nothing drags.
The parallax implementation keeps background elements moving at 0.2× scroll speed, midground illustrations at 0.3–0.5×, and foreground characters at 0.6–0.7×. The range is tight enough to preserve readability but wide enough to register as depth. The slower the layer, the farther back it reads. The system is legible because the ratios are consistent.
What a builder can borrow
Start with the motion parameters, not the visual style. The 180ms ease-out for button lifts is a transferable constant. The 1400ms pulse duration for always-on states is a timing reference worth testing in other contexts. The parallax ratios—0.2× for distant layers, 0.7× for near—define a safe range that creates depth without breaking scroll comprehension.
The typography scale strategy is more portable than the specific sizes. Discord runs a 6:1 ratio between display-xl (96px) and body-md (16px). That spread enforces hierarchy even in monochrome. If your product lacks visual richness—if it's developer tools, infrastructure software, anything that resists decoration—extreme type scale compensates. Pair it with heavy weights (700–800) and a tight palette.
The component-level hover states assume every interactive surface gives feedback. Buttons lift. Links underline or fade. 3D elements tilt. The specific transforms matter less than the consistency. Pick a timing budget (180–300ms), pick a transform (translateY, scale, rotate), apply it everywhere. The system feels considered because it repeats.
The purple accent works because it appears in fewer than 10% of page elements. When everything is purple, nothing is. Discord reserves brand-primary: #5865F2 for CTAs, focus states, and the occasional glow effect. The restraint makes the color meaningful. If your brand accent is everywhere, it's not an accent.