Discord Design System

Overview

Discord's marketing site presents a confident dark-mode aesthetic that channels the platform's gaming-community roots into a polished, conversion-focused landing experience. The canvas lives in deep navy-black ({colors.surface-dark}), allowing the signature blurple ({colors.primary} at #5865f2) to pop as the sole voltage color on CTAs and interactive elements. White text floats atop this void with careful opacity gradations — pure {colors.body} for headlines, {colors.text-secondary} at 70% opacity for supporting copy, and {colors.text-muted} at 50% for tertiary information.

The typographic personality splits duties between two proprietary families: Ginto Nord (a geometric grotesque) owns all display work from the 56px hero down through 22px subheads, delivering tight tracking and heavy weight that reads as youthful confidence. GG Sans and ABC Ginto handle body and UI microcopy at more conventional weights (400–500). This dual-family system creates instant hierarchy without resorting to size alone — you always know when you're reading "brand voice" versus "interface instruction."

Shape language leans decisively toward the pill: every button, the login action, and navigation triggers all carry {rounded.pill} (120px radius), producing that distinctive capsule silhouette associated with Discord's product UI. Cards and containers stay more conservative at {rounded.lg} (24px), softening container edges without sacrificing structural clarity. The overall effect balances playful roundness with enough geometric discipline to feel trustworthy for a platform hosting millions of communities.

Sub-systems visible here include a hero dialect (dark band, massive display type, dual-CTA layout with illustration), a navigation dialect (transparent bar, dropdown triggers with hover-fill, flush-right authentication), and an implied feature-section dialect (card grids on elevated surfaces). The cosmic starfield background treatment — subtle dot patterns and gradient depth behind the hero — functions as decorative atmosphere rather than semantic content.

Key Characteristics

• Deep dark canvas ({colors.surface-dark}) with no light-mode variant on this property page
• Single brand-voltage color: blurple {colors.primary} used exclusively on primary CTAs
• Dual-typeface system: Ginto Nord for display ({typography.display-lg}), GG Sans for body ({typography.body-md})
• Pill-shaped interactive elements throughout ({rounded.pill} at 120px radius)
• Opacity-based text hierarchy: 100% → 70% → 50% white
• Generous vertical rhythm with {spacing.hero-padding} (56px) and {spacing.section} (80px)
• Transparent navigation with hover-triggered background fills ({component.nav-dropdown-trigger-hover})
• Secondary button style uses inverted scheme: white fill, dark text ({component.button-secondary})
• No box-shadow elevation on cards — depth comes from background-value contrast only

Colors

Brand & Accent

• Primary Blurple ({colors.primary} — #5865f2): Discord's iconic indigo-blue brand color. Applied as solid fill on the primary CTA button ({component.button-primary}) and as the core identity reference across all marketing touchpoints.
• Primary Hover ({colors.primary-hover} — #4752c4): Darkened blurple state for interactive hover feedback on brand-colored surfaces.
• Primary Active/Pressed ({colors.primary-active} — #3c45a5): Deepest blurple shade used for active/pressed states on primary buttons.
• Accent Blue ({colors.accent} — #7289da): Lighter companion blue appearing in older Discord brand contexts; preserved here for legacy-component consistency.

Surface

• Canvas ({colors.canvas} — #ffffff): Nominal white canvas value (used sparingly in this dark-theme context; primarily carries secondary button fills).
• Surface Dark ({colors.surface-dark} — #0e0f17): Primary page background — a very dark navy approaching black. Hosts the hero band ({component.hero-band}), navigation backdrop, and all major sectional containers.
• Surface Deep ({colors.surface-deep} — #080911): Near-black baseline for deepest layers such as the footer ({component.footer}) or modal underlays.
• Surface Elevated ({colors.surface-elevated} — #1a1b26): Slightly lifted dark value for card surfaces ({component.card-surface}) that need subtle separation from the main canvas.
• Surface Soft ({colors.surface-soft} — rgba(255, 255, 255, 0.1)): 10%-opacity white overlay used for hover states on transparent-background elements like nav triggers.
• Surface Overlay ({colors.surface-overlay} — rgba(88, 101, 242, 0.15)): Subtle tinted overlay for focus rings or decorative brand-colored washes.

Text & Ink

• Ink ({colors.ink} — #000000): Absolute black; appears on light-filled buttons ({component.button-secondary}, {component.button-login}) where high contrast against white is required.
• Body / Text Primary ({colors.body} / {colors.text-primary} — #ffffff): Pure white for headlines, hero copy, and all primary reading content on dark surfaces.
• Text Secondary ({colors.text-secondary} — rgba(255, 255, 255, 0.7)): 70%-white for body paragraphs, descriptions, and supporting narrative text below display headings.
• Text Muted ({colors.text-muted} — rgba(255, 255, 255, 0.5)): 50%-white for tertiary metadata, timestamps, captions, and footer legal copy.
• On Primary ({colors.on-primary} — #ffffff): White text rendered atop blurple button fills; satisfies WCAG AA against {colors.primary}.
• On Dark ({colors.on-dark} — #ffffff): Default light text color for any dark-surface rendering context.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.16)): Subtle 16%-opacity white divider lines separating navigation zones or card boundaries.
• Border Strong ({colors.border-strong} — rgba(255, 255, 255, 0.24)): More visible 24%-opacity borders for input fields or focused-state outlines.
• Input Border ({colors.input-border} — rgba(255, 255, 255, 0.1)): Very faint 10%-opacity stroke for default/unfocused form field borders.

Semantic

• Error ({colors.error} — #ed4245): Discord's red for validation failures, destructive actions, and status indicators.
• Success ({colors.success} — #23a559): Green for confirmation states, online indicators, and positive outcomes.
• Warning ({colors.warning} — #f0b232): Amber/yellow for cautionary messaging and pending states.
• Info ({colors.info} — #00aff4): Cyan-blue used both semantically (informational notices) and as the link color.
• Link ({colors.link} — #00aff4): Bright cyan for inline hyperlinks and external references; distinct from the brand blurple.
• Link Active/Hover ({colors.link-active} — #00d4ff): Lighter cyan for link interaction states.

Typography

Font Family

The Discord marketing site deploys three proprietary typefaces, all served via Discord's CDN:

• Ginto Nord (Abcgintodiscordnord) — A bold, geometric sans-serif with tight spacing and substantial weight presence. Used exclusively for display and heading roles (H1, H2, major titles). The fallback stack includes Arial, sans-serif for environments where the webfont fails to load.
• ABC Ginto (Abcgintodiscord) — The body-weight companion to Ginto Nord, carrying regular (400) weight for paragraph text and longer-form reading content. Falls back to sans-serif.
• GG Sans (Ggsans) — Discord's product-ui font family, available in weights 400–800 with italic variants. Handles navigation links, button labels, caption text, and all interface-level typography where a more neutral, highly legible face is preferred over Ginto's personality.

All three are proprietary fonts not available on Google Fonts or Adobe Fonts. They load asynchronously with font-display: swap to prevent FOIT (Flash of Invisible Text).

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 800 | 1.05 | -0.04em | Reserved for mega-headlines (not used on current landing page but defined for campaign flexibility) | | {typography.display-lg} | 56px | 700 | 1.1 | -0.01em | Hero headline ("GROUP CHAT THAT'S ALL FUN & GAMES") | | {typography.title-md} | 22px | 700 | 1.25 | -0.03em | Section subheadings, feature titles, card headers | | {typography.body-md} | 20px | 400 | 1.3 | 0.016em | Hero descriptive paragraph, key value propositions | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Navigation labels, standard body copy, list items | | {typography.caption} | 14px | 400 | 1.43 | 0 | Footer text, metadata, disclaimers | | {typography.button} | 16px | 500 | 1.25 | 0 | All button labels, CTAs, actionable text | | {typography.nav-link} | 16px | 500 | 1.25 | 0 | Navigation dropdown triggers, top-level menu items | | {typography.label-sm} | 13px | 600 | 1.38 | 0.02em | Small labels, badges, category tags |

Principles

The typography system trusts weight and size above all other signals for establishing hierarchy. Display roles lock into the 700–800 range (Ginto Nord's boldest weights), while body copy sits at a comfortable 400 in GG Sans/ABC Ginto. This creates a stark "headline vs. reading" contrast that works especially well on dark canvases where thinner strokes would lose definition. Letter-spacing is consistently negative or near-zero for display sizes (the 56px headline tracks at -0.01em), tightening the character fit and giving bold type a more compact, modern feel. Body text introduces slight positive tracking (+0.016em at 20px) to aid readability in paragraph form.

Color opacity provides a third hierarchical dimension: the same font family and size can shift from primary (100% white) to secondary (70%) to muted (50%) purely through alpha changes, allowing dense information layouts to remain scannable without introducing additional typefaces or sizes. Uppercase is avoided entirely — even the hero headline renders in sentence case ("Group chat that's all fun & games"), reinforcing Discord's casual, conversational brand voice.

Note on Font Substitutes

Since Ginto Nord, ABC Ginto, and GG Sans are proprietary Discord assets unavailable via public font CDNs, implementations should map to these Google Fonts approximations:

• For Ginto Nord (display/headings): Use Plus Jakarta Sans (weights 700–800) or Space Grotesk (weights 600–700) with tightened letter-spacing. Define as --font-display: 'Plus Jakarta Sans', sans-serif.
• For GG Sans / ABC Ginto (body/UI): Use Inter (weights 400–600) or **DM Sans. Define as --font-body: 'Inter', sans-serif`.

CSS variable declarations should be placed at :root level:

:root {
  --font-display: 'Abcgintodiscordnord', 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body: 'Abcgintodiscord', 'Ggsans', 'Inter', sans-serif;
}

Layout

Spacing System

• Base unit: 4px (with 8px, 10px, 12px, 16px, 24px, 28px, 40px, 56px as the working scale).

• Tokens:

  • {spacing.xxs} (4px) — Micro-spacing for icon gaps and inline decorations.
  • {spacing.xs} (8px) — Tight internal padding in compact components.
  • {spacing.sm} (10px) — Standard internal padding for nav triggers and small buttons.
  • {spacing.md} (16px) — Common gutter and margin value; most-frequent spacing unit in extracted data.
  • {spacing.lg} (24px) — Card internal padding and element separation within sections.
  • {spacing.xl} (40px) — Major inter-block gaps, section-to-section breathing room.
  • {spacing.section} (80px) — Vertical padding for full-width sectional bands (features, testimonials, footer-top).
  • {spacing.hero-padding} (56px) — Specific horizontal padding within the hero band container.

• Section padding (vertical): {spacing.section} (80px) — applied to feature-grid bands, social-proof sections, and pre-footer areas.

• Card internal padding: {spacing.lg} (24px) — consistent inside {component.card-surface} and {component.feature-card}.

• Gutters: 16px–24px between grid items in feature layouts; 12px–16px between nav items.

Grid & Container

• Max content width: 1440px for both <main> and <header> containers (extracted from DOM measurements).
• Density choice: Marketing/editorial density — generous whitespace, large display type, single-column hero narrative. This is not a dashboard or marketplace grid; it's a story-first landing page.
• Desktop grid behavior: The hero operates on a two-column asymmetric split — approximately 45% width for the text column (headline + body + CTAs) and 55% for the illustration column (desktop mockup + phone + characters). Below-the-fold sections likely adopt a 3-column feature grid (inferred from Discord's established pattern language).
• Hero column split: Text left, image right. The text column maxes out around 550–600px for optimal reading measure before the illustration takes over.

Whitespace Philosophy

Discord's marketing layout practices confident spaciousness. The dark canvas absorbs empty space gracefully, making 80px section paddings feel atmospheric rather than wasteful. The hero band uses 56px horizontal padding to push content inward from viewport edges, while the vertical gap between headline and body copy sits around 24–32px — enough to let each block breathe without losing visual connection. This is not editorial-airy (no 120px margins) nor marketplace-dense (no 4-column cramming); it occupies a mid-high comfort zone optimized for emotional resonance over information density.

Header Architecture

|--------------------------------------------------------------------------------|
| [Logo]   Download   Nitro   Discover   Safety v   Quests v   Support v        Log In |
|                                        Blog v   Developers v   Careers       |
|--------------------------------------------------------------------------------|
| <- 1440px max-width, transparent bg, 72px height -> |

Navigation uses a transparent-background bar with left-aligned logo, center-weighted dropdown menu items (each a {component.nav-dropdown-trigger} with chevron indicator), and a flush-right {component.button-login} pill. Dropdown triggers have 12px rounding and 10px×16px internal padding. The entire nav sits at z-index 101 (per media query detection) and likely carries a backdrop-filter: blur() for scroll-time glassmorphism (class nav_blur detected).

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|  GROUP CHAT            +-------------------------------------------+          |
|  THAT'S ALL            |                                           |          |
|  FUN & GAMES           |   [Desktop App Mockup]     [Phone]         |          |
|                        |                                           |          |
|  Discord is great...   |   [Character Illustrations]               |          |
|  Customize your...     |                                           |          |
|                        +-------------------------------------------+          |
|                                                                                |
|  [ Download for Linux ]   [ Open Discord in your browser ]                     |
|                                                                                |
|--------------------------------------------------------------------------------|
|<- Text Col ~45% ->|<-------- Illustration Col ~55% --------->|                |
|<- 56px h-pad ->|                                          |<- 56px h-pad ->|

The hero follows Discord's canonical pattern: display headline → body paragraph → dual-CTA pair → illustration cluster. The CTAs stack horizontally with roughly 16–24px gap between them. The left button ({component.button-secondary}) is white-filled with dark text (download action); the right button ({component.button-primary}) is blurple-filled with white text (browser-open action). The illustration column contains a layered composition: desktop Discord window, mobile device preview, 3D mascot characters, and ambient floating elements (stars, sparkles).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat Baseline | {colors.surface-dark}, no shadow, no border | Page background, hero band base | | 1 — Hairline Outline | 1px {colors.hairline} or {colors.input-border} | Input fields, dividers between nav items | | 2 — Elevated Surface | {colors.surface-elevated} background value | Feature cards, content containers floating above canvas | | 3 — Soft Drop | {extensions.shadows.sm} (0 1px 3px rgba(0,0,0,0.3)) | Dropdown panels, tooltip containers | | 4 — Modal/Dropdown | {extensions.shadows.md} (0 4px 12px rgba(0,0,0,0.4)) | Navigation dropdown menus, modal sheets | | 5 — Prominent Layer | {extensions.shadows.lg} (0 16px 48px rgba(0,0,0,0.5)) | Hero illustration composite, promotional cards | | Focus Ring | {colors.surface-overlay} glow or 2px outline | Keyboard focus state on buttons, inputs, links |

Philosophy: Discord's marketing depth model is value-contrast-first, shadow-second. On a dark canvas, simply lifting a surface from #0e0f17 to #1a1b26 creates perceptible elevation without any shadow cost. Box shadows appear reserved for truly "floating" elements (dropdowns, modals, the illustration collage). The blurple glow effect ({extensions.shadows.glow-blurple}) adds brand-colored atmospheric depth around primary interactive elements when they're in focus or hover states. This creates a cohesive "neon-on-midnight" mood that mirrors Discord's in-app dark theme aesthetics.

Decorative Depth

The hero background features a cosmic starfield treatment — scattered small white dots (likely pseudo-elements or a repeating SVG pattern) at varying opacities, plus larger soft-edged "sparkle" shapes in blurple and magenta tones. These sit behind the content at z-index 0, creating atmospheric depth without competing with foreground elements. Gradient washes may also be present (deep navy at bottom fading toward purple at top), though exact values weren't extractable from flat-CSS inspection. This decorative layer establishes the "space/community/cosmic" metaphor central to Discord's brand storytelling.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Compact inner elements, tag badges, small avatars | | {rounded.DEFAULT} | 12px | Navigation dropdown triggers, default card corners, input fields | | {rounded.md} | 16px | Medium feature cards, image thumbnails | | {rounded.lg} | 24px | Major card surfaces ({component.card-surface}), panel containers | | {rounded.xl} | 32px | Large promotional panels (rare) | | {rounded.pill} | 120px | All buttons ({component.button-primary}, {component.button-secondary}), login CTA, fully rounded elements | | {rounded.full} | 9999px | Avatar circles, status indicators |

Photography Geometry

While the hero features 3D-rendered illustration rather than photography, imagery conventions observed include:

• Aspect ratios: Desktop mockup is widescreen (~16:10), phone mockup is ~19.5:9 (modern smartphone).
• Corner rounding: Device frames carry realistic hardware rounding (~12–16px equivalent), not the extreme pill shape of buttons.
• Full-bleed treatment: Illustration elements extend to container edges within their column; no internal image padding or frame borders.
• Character styling: 3D mascots rendered in Discord's signature style — simplified geometry, vibrant clothing in complementary purples/oranges, matte-to-satin material finishes.
• Layering: Elements overlap with no hard masks — soft drop shadows between character and device create physical stacking illusion.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.nav-dropdown-trigger-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The root navigation container spanning the full viewport width at 72px height. Transparent background with text colored {colors.text-primary} using {typography.nav-link} sizing. Contains logo, dropdown triggers, and login action. Uses z-index: 101 to float above scrolling content. Likely applies backdrop-filter: blur() on scroll (detected class nav_blur). No visible border or shadow in static state.

{component.nav-dropdown-trigger} — Interactive menu item trigger for top-level navigation sections (Safety, Quests, Support, Blog, Developers, Careers). Background is transparent by default, text {colors.text-primary}, rounded to {rounded.DEFAULT} (12px), with {spacing.sm} {spacing.md} padding (10px × 16px). Typography matches {typography.nav-link} at 16px/500 weight. Includes a chevron-down indicator icon (not captured in YAML schema). These are the most numerous interactive elements in the nav bar — nine detected instances.

{component.nav-dropdown-trigger-hover} — Hover/active state for nav dropdown triggers. Background shifts to {colors.surface-soft} (10% white overlay), creating a subtle "glow" highlight that reveals the hit area shape. Text color remains {colors.text-primary}. Rounded unchanged at {rounded.DEFAULT}. Transition duration extracted as background-color 0.25s.

{component.button-login} — The "Log In" action positioned flush-right in the navigation bar. Solid white ({colors.body}) background providing maximum contrast against the dark nav, with dark text ({colors.ink}) for readability. Pill-shaped at {rounded.pill} (120px), padded {spacing.sm} {spacing.xl} (10px × 24px). Uses {typography.button} styling. This inverted color scheme makes it visually distinct from all other nav items, establishing it as the primary user-flow action.

{component.button-login-active} — Pressed/hover state for the login button. Background shifts to {colors.surface-soft} (semi-transparent white), text inverts to {colors.body} (white on translucent fill). Maintains {rounded.pill} geometry. The transition creates a "filled → ghost" morphing effect characteristic of Discord's button interaction language.

{component.button-primary} — Main call-to-action: "Open Discord in your browser." Solid blurple fill ({colors.primary}) with white text ({colors.on-primary}). Heavily pill-rounded at {rounded.pill} (120px), generously padded at {spacing.lg} {spacing.xl} (16px × 32px) giving it substantial click target size. Typography set to {typography.button} (16px/500). This is the highest-voltage conversion element on the page, positioned rightmost in the CTA pair to receive terminal gaze position.

{component.button-primary-active} — Active/pressed state for the primary CTA. Darkens to {colors.primary-active} (#3c45a5) — a significantly deeper blurple that provides clear tactile feedback. Text remains {colors.on-primary}. Rounded and padding unchanged. The color shift is substantial enough to be perceived as "pressed in" rather than merely highlighted.

{component.button-secondary} — Companion CTA: "Download for Linux." Solid white ({colors.body}) background with dark text ({colors.ink}), mirroring the login button's inverted scheme. Identical geometry to primary: {rounded.pill}, {spacing.lg} {spacing.xl} padding, {typography.button} type. Positioned leftward in the CTA pair, serving users who prefer native installation. May include a download-icon prefix (arrow-down icon detected in adjacent markup).

{component.button-secondary-active} — Hover/pressed state for the secondary download button. Background transitions to {colors.surface-soft} (translucent white), text shifts to {colors.body} (white). Creates the same ghost-transition effect as the login button active state, maintaining consistency across all white-filled buttons in the system.

Cards & Containers

{component.hero-band} — Full-width hero section container. Background {colors.surface-dark} matching page canvas (hero feels integrated rather than "card-like"). Text defaults to {colors.body} (white). Typography anchored to {typography.display-lg} for the headline role. Padding set to {spacing.hero-padding} horizontally with generous vertical spacing (implied 80–120px from screenshot proportions). Contains the two-column layout (text + illustration) and hosts the starfield decorative layer behind content.

{component.headline-display} — The "GROUP CHAT THAT'S ALL FUN & GAMES" heading itself. Transparent background inheriting parent surface, white text {colors.body}, typeset in {typography.display-lg} (56px/700 weight/Ginto Nord). Letter-spacing slightly negative (-0.01em) for tight character fit. Line-height compressed to 1.1 for display density. Renders in sentence case (not uppercase), preserving Discord's casual voice. Spans approximately 2–3 lines depending on viewport width.

{component.hero-body-copy} — Descriptive paragraph beneath the headline ("Discord is great for playing games..."). Transparent background, text {colors.text-primary} (pure white), set in {typography.body-md} (20px/400 weight/ABC Ginto). Line-height 1.3 for comfortable paragraph reading. Slight positive letter-spacing (+0.016em) aids legibility. Width constrained to ~550px for optimal measure (55–75 characters per line).

{component.card-surface} — Generic elevated content card for below-hero sections. Background {colors.surface-elevated} (#1a1b26) lifts it visibly off the {colors.surface-dark} canvas. Text color {colors.text-primary}. Rounded to {rounded.lg} (24px) for soft modern corners. Internal padding {spacing.lg} (24px) provides breathing room around content. No border or shadow in default state — elevation comes entirely from background-value contrast.

{component.feature-card} — Individual feature/benefit card within a grid. Transparent background (or very subtly different from parent), white text {colors.text-primary}, rounded {rounded.md} (16px). Padded {spacing.lg} internally. Would contain icon + title + short description. Less visually heavy than {component.card-surface}, designed for dense grid layouts where multiple cards sit side-by-side.

{component.footer} — Site-wide footer container. Background {colors.surface-deep} (#080911) — the darkest value in the palette, creating clear ground-level anchoring. Text rendered in {colors.text-muted} (50% white) for de-emphasis. Typography drops to {typography.caption} (14px) appropriate for legal/navigation metadata. Vertical padding {spacing.section} (80px) with horizontal {spacing.lg} (24px). Multi-column link grid inferred from standard Discord footer pattern.

Inputs & Forms

No explicit text-input components were detected in the above-fold extraction. However, based on Discord's design language, input fields would follow this specification (documented for completeness):

• Default state: Background transparent or {colors.surface-elevated}, border 1px {colors.input-border}, text {colors.text-primary}, rounded {rounded.DEFAULT} (12px), height ~44–48px, padding 12px 16px.
• Focus state: Border shifts to {colors.primary} or shows {colors.surface-overlay} glow ring, potentially accompanied by subtle shadow lift.
• Typography: {typography.body-sm} (16px/400).

Do's and Don'ts

Do

• Do use {colors.primary} (#5865f2) exclusively for primary conversion actions — it's the single brand-voltage color and should never compete with other saturated hues on the same surface.
• Do maintain opacity-based text hierarchy: {colors.body} (100%) for headlines, {colors.text-secondary} (70%) for paragraphs, {colors.text-muted} (50%) for footnotes. Never introduce new hex colors for text variation.
• Do apply {rounded.pill} (120px radius) to every button, CTA, and nav-action element. This extreme rounding is Discord's most recognizable shape signature.
• Do keep the canvas at {colors.surface-dark} (#0e0f17) for all hero and primary-content sections. Reserve {colors.surface-deep} only for footer/ground-level areas.
• Do use Ginto Nord ({typography.display-lg}, {typography.title-md}) for all display and heading roles. Never substitute a generic sans-serif for headline work.
• Do render display headlines in sentence case with negative letter-spacing. Avoid uppercase treatments that would fight the casual brand voice.
• Do pair {component.button-secondary} (white fill, dark text) as the leftward CTA alongside {component.button-primary} (blurple fill, white text) on the right. This ordering is intentional for conversion optimization.
• Do allow generous vertical spacing ({spacing.section} 80px) between major sections. The dark canvas absorbs whitespace beautifully — don't fear "too much empty space."
• Do include the cosmic starfield decorative layer (subtle dots, sparkle shapes) behind hero content at low z-index. It establishes atmosphere without competing with text.
• Do use {colors.surface-elevated} for card backgrounds rather than adding box shadows. Value-contrast elevation is cleaner on dark themes.
• Do set navigation to transparent background with hover-triggered {colors.surface-soft} fills on dropdown triggers. Avoid solid nav bars that would interrupt the immersive hero.

Don't

• Don't use {colors.link} (cyan #00aff4) interchangeably with {colors.primary} (blurple #5865f2). Links serve inline navigation; blurple serves brand actions. They are visually and functionally distinct.
• Don't introduce light-mode surface tokens ({colors.canvas} white) as page backgrounds in this context. The entire marketing property is dark-themed; white is reserved for button fills and text only.
• Don't reduce display type below weight 700. {typography.display-lg} at 700 and {typography.title-md} at 700 are minimums — going lighter would lose impact on dark backgrounds.
• Don't apply {rounded.full} (9999px / circle) to anything except avatar/status-indicator contexts. Buttons use {rounded.pill} (120px), which is extremely rounded but technically elliptical.
• Don't add gradients or rainbow effects to button backgrounds. Solid {colors.primary} fill is the rule; decorative gradients belong only in the atmospheric background layer.
• Don't place {colors.text-muted} (50% white) text on {colors.surface-elevated} or darker without verifying contrast ratios. Muted text belongs on the base {colors.surface-dark} canvas where it has sufficient luminance difference.
• Don't use box shadows for card elevation when background-value contrast achieves the same result more cleanly. Shadows are reserved for truly "floating" elements (dropdowns, modals).
• Don't exceed three opacity levels in the text hierarchy. The 100%/70%/50% system is complete and sufficient — adding intermediate steps (85%, 60%) creates visual noise without functional benefit.
• Don't left-align the primary CTA button in the hero pair. Position {component.button-primary} rightmost to capture terminal scan position in Western reading patterns.
• Don't invent new spacing values outside the defined scale. If a gap falls between tokens, round to the nearest {spacing.*} value rather than introducing ad-hoc pixels.
• Don't apply {typography.body-md} (20px) to navigation or UI chrome — it's reserved for hero-level body copy. Use {typography.body-sm} (16px) or {typography.button} (16px) for interface text.

Motion & Animation

Transition Tokens

/* Color/Background transitions */
--transition-bg: background-color 0.25s ease;
--transition-color: color 0.25s ease;
--transition-all: all 0.25s ease;

/* Transform motion */
--transition-transform: none 0.2s ease-in-out;

/* Font variation (variable-font specific) */
--transition-font-var: font-variation-settings 0.4s ease;

/* Button arrow micro-motion */
--transition-arrow: transform 0.2s ease-in-out;

Keyframe Animations

• spin — Continuous 360° rotation for loading spinner indicators.
• spinner-wandering-cubes-E8DV84 — Wandering-cubes loading animation variant (two cubes orbiting).
• spinner-chasing-dots-rotate-1FNFlo / bounce-1u5AiH — Chasing-dots loader with rotate and bounce phases.
• spinner-pulsing-ellipsis-Zju_Ib — Three-dot pulsing ellipsis for "loading more" states.
• spinner-spinning-circle-rotate-377lhj / dash-YaFg25 — Circular progress spinner with rotating container and dashed arc.
• form-open-28bcFM — Form-panel reveal animation (dropdown or expansion).
• onetrust-fade-in — Cookie-consent banner fade-in (third-party integration).

Interaction Patterns

• Nav dropdown hover: Triggers transition to {colors.surface-soft} background over 250ms (background-color 0.25s), creating a gentle reveal of the pill-shaped hit area.
• Button press state: Both {component.button-primary} and {component.button-secondary} darken their fill on active/pressed state; timing matches the 250ms transition token.
• CTA arrow micro-motion: Extracted CSS references .btn:hover .button-arrow { transform: translateX(2px); } — a 2px rightward shift of an arrow icon inside buttons on hover, encouraging click-through behavior.
• Loading spinners: Multiple spinner variants detected (cubes, dots, circle-dash, ellipsis), suggesting async content loading patterns throughout the site (image galleries, dynamic feature lists, etc.).
• Form open/close: Named animation form-open-28bcFM implies animated dropdown panels or expandable form sections with smooth height/opacity transitions.
• Font variation transition: The font-variation-settings 0.4s transition suggests variable font axes animate on hover (likely weight interpolation from 400→500 on body text, or slight width changes), providing a refined micro-interaction on supported browsers.
• Scroll-triggered reveals: While no explicit intersection-observer animations were named in keyframes, Discord's marketing pattern language universally employs fade-up and staggered-reveal animations for below-fold content entering viewport.

Note: No explicit parallax or 3D transform animations were detected in the CSS extraction. The hero illustration's apparent depth is achieved through static compositing (layered PNG/SVG assets with pre-rendered shadow offsets), not real-time scroll-linked transforms.

Imagery Style

• Illustration-dominant approach: The hero relies entirely on 3D-rendered illustration rather than photography. This aligns with Discord's brand world of customizable digital spaces.
• 3D character mascots: Stylized humanoid figures in Discord's signature art style — simplified proportions, vibrant clothing in purples/blues/oranges, expressive poses (hand-on-hip, leaning, gesturing).
• Product mockups as scenery: The Discord application UI (desktop and mobile) is rendered within the illustration scene as a physical object characters interact with, blurring the line between "product screenshot" and "environmental prop."
• Cosmic/space motif: Background decorative elements include stars, sparkles, soft-glow orbs in blurple and magenta, and deep-space gradient washes — reinforcing the "community universe" metaphor.
• Matte-to-satin material finish: Characters and objects avoid glossy reflections; surfaces read as soft plastic, fabric, or brushed metal, keeping attention on form and color.
• Layered depth without hard edges: Illustration elements overlap with soft drop shadows (matching {extensions.shadows.md} scale), creating physical stacking that feels natural rather than composited.
• Color harmony with UI: Illustration palette echoes the design-system colors — blues map to {colors.primary}, purples to {colors.accent}, skin tones provide warm complement to cool UI.
• Full-bleed integration: Illustration extends to its container edges without framing, borders, or inset shadows — it becomes the background environment rather than a "picture on the wall."
• Responsive complexity expected: Desktop hero shows rich multi-element composition; mobile viewports likely simplify to centered phone-mockup-only or single-character focal point.

Icon System

• Library: Custom SVG iconography (no third-party library detected in framework analysis). Discord maintains a proprietary icon set.
• Specific icons observed:
  • Discord logo mark (game-controller/gamepad abstract shape)
  • Chevron/down-arrow (navigation dropdown indicators)
  • Download/download-arrow (button prefix on {component.button-secondary})
  • External-link or globe icon (implied on "Open in browser" CTA)
  • Menu/hamburger (mobile-nav toggle, though not visible in desktop screenshot)
  • User/person icon (login-related contexts)
• Treatment: Icons use currentColor inheritance, rendering in whatever text color the parent specifies (white on dark surfaces, dark on {component.button-secondary}). Stroke-based construction for outline icons; fill-based for solid icons like the Discord mark.
• Size alignment: Nav-chevron icons appear ~12–14px (inline with 16px text). Button-prefix icons (download arrow) likely 18–20px to maintain visual balance with {typography.button} at 16px. The Discord logo mark in the nav is ~24–28px.
• Stroke weight: Consistent 1.5–2px stroke width on outline icons, ensuring visibility against dark backgrounds without appearing heavy.

Recommended Frontend Stack

- Framework:      Next.js 14+ (React-based SSR/SG for marketing pages)
                 Alternative: Astro (for static-heavy marketing with island architecture)
- Styling:        CSS Modules or Tailwind CSS (with extended config for Discord tokens)
                 Current site appears custom-built; Tailwind would accelerate token mapping
- Fonts:          Self-hosted via Discord CDN (proprietary Ginto Nord, GG Sans, ABC Ginto)
                 Fallback: Plus Jakarta Sans (display) + Inter (body) from Google Fonts
- Animation:      CSS transitions (documented tokens) + Framer Motion for scroll-triggered reveals
                 Vanilla CSS sufficient for hover/active states; JS library for entrance animations
- Icons:          Custom SVG sprite (Discord's own icon set)
                 No icon library dependency needed
- Component lib:  Custom components (no shadcn/Radix detected; Discord builds its own primitives)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | ≤767px | Single-column hero (text stacks above illustration), hamburger nav replaces horizontal menu, CTAs stack vertically (full-width pills), font sizes reduce (~10–15%), illustration simplifies to phone-mockup-only | | Tablet | 768px–1023px | Two-column hero maintained but with reduced widths, nav collapses to essential items + "more" menu, illustration crops to desktop-only (phone hidden), feature grid reduces to 2 columns | | Desktop | 1024px–1279px | Full nav restored, hero at designed proportions (45/55 split), 3-column feature grids, all decorative elements visible | | Wide | ≥1280px | Max container width 1440px engages, extra horizontal padding, potential sidebar/rail elements, largest display type sizes |

Touch Targets

• {component.button-primary} / {component.button-secondary}: Height ~52–56px (16px top/bottom padding + ~20px text + border), width 200px+. Exceeds WCAG AAA 44×44 minimum comfortably.
• {component.button-login}: Height ~40px (10px padding × 2 + ~20px text), width ~100px+. Meets 44px minimum.
• {component.nav-dropdown-trigger}: Height ~40px (10px padding × 2 + ~20px text), width varies by label length. At 40px height, meets minimum on touch devices; tap targets may expand invisibly per platform conventions.
• All interactive elements: Pill-shaped geometry ({rounded.pill}) naturally encourages edge-to-edge tapping without corner "dead zones."

Collapsing Strategy

• Navigation: Horizontal menu collapses to hamburger/drawer pattern below tablet breakpoint (standard Discord pattern). Dropdown triggers become drawer list items with full-width hit areas.
• Hero columns: Two-column asymmetric split becomes single-column stack — headline/body/CTAs occupy full width, illustration moves below as full-bleed image or centers as reduced-composition mockup.
• CTA pair: Horizontal side-by-side arrangement converts to vertical stack with 12–16px gap; each button expands to full available width (or near-full with margins).
• Feature grid: 3-column desktop grid reduces to 2-column (tablet) then 1-column (mobile) with cards expanding to full width.
• Illustration complexity: Desktop's multi-layer composition (desktop + phone + 3 characters + decorations) strips back progressively — tablet may show only desktop mockup, mobile shows only phone screen or single character.
• Typography scaling: {typography.display-lg} (56px) likely scales down to ~36–40px on mobile; {typography.body-md} (20px) reduces to 17–18px. Media query at 1279px detected in source suggests this as a key inflection point.
• Spacing compression: {spacing.hero-padding} (56px) reduces to 24–32px on mobile. Section padding ({spacing.section} 80px) compresses to 40–48px.

Image Behavior

• Hero illustration (desktop): Scales proportionally within the 55% illustration column; maintains aspect ratio; may crop left/right edges rather than shrinking below readability threshold.
• Phone mockup: Hidden on tablet, reappears on mobile as the sole hero image (centered, ~80% viewport width).
• 3D character elements: May be positioned absolutely relative to illustration container; on smaller viewports they either scale with parent or are omitted from DOM to save bandwidth/complexity.
• Decorative stars/sparkles: Background-position fixed or absolute; continue tiling regardless of content width. May reduce in number (fewer dots) on mobile for performance.
• Lazy loading: Below-fold images (feature section illustrations if present) should implement loading="lazy" and Intersection Observer for enter-viewport reveals.

Iteration Guide

1. Initialize with Next.js (or Astro for static focus) and configure CSS Modules or Tailwind with a custom theme extension that maps every token from the YAML frontmatter to utility classes or CSS custom properties. Never hard-code a hex or pixel value that has a corresponding {token} path.

2. Map the font-face declarations for Ginto Nord, ABC Ginto, and GG Sans from Discord's CDN URLs (extracted from @font-face rules in the source CSS). Define CSS custom properties --font-display and --font-body pointing to these families with the Google Fonts fallback chain specified in the Typography > Font Substitutes section.

3. Build the hero band first as the foundational component — it carries the dark canvas ({colors.surface-dark}), the two-column grid (CSS Grid with 45/55 fraction units or flexbox), the display headline in {typography.display-lg}, the body copy in {typography.body-md}, and the dual-CTA row. Get this single section pixel-accurate before building downward.

4. Implement the navigation system as a transparent overlay bar (72px height, position: sticky or fixed, z-index: 101) with left-logo, center-dropdown-triggers, right-login-button. Each dropdown trigger uses {component.nav-dropdown-trigger} specs. Add the backdrop-filter: blur() effect on scroll (class nav_blur detected).

5. Create the button component factory that outputs pill-shaped buttons ({rounded.pill}) with two variants: primary (blurple fill, white text) and secondary (white fill, dark text). Generate active/pressed state classes that darken the fill per {component.button-primary-active} and {component.button-secondary-active} specs. Include the 2px arrow-translate micro-animation on hover.

6. Establish the card surface component using {colors.surface-elevated} background, {rounded.lg} (24px) corners, and {spacing.lg} (24px) internal padding. Build {component.feature-card} as a lighter variant with {rounded.md} (16px) and transparent background for dense grid usage.

7. Add motion layer last — after static layout is verified accurate. Implement the documented transition tokens (--transition-bg at 250ms), scroll-triggered fade-up entrances for below-fold content (using Framer Motion or Intersection Observer + CSS animations), and the font-variation-settings transition (0.4s) for variable-font hover refinement on supported browsers.

8. Test responsive breakpoints at 768px, 1024px, and 1280px specifically. Verify: nav collapses to hamburger, hero stacks to single column, CTAs go vertical/full-width, illustration composition simplifies, and typography scales proportionally. The 1279px media query detected in source is a critical inflection point.

9. Run accessibility audit focusing on: contrast ratios (white text on {colors.surface-dark} exceeds 12:1 — excellent; blurple {colors.primary} with white {colors.on-primary} exceeds 4.6:1 — AA compliant), touch-target sizes (all buttons exceed 44×44), and focus-visible indicators (add {colors.surface-overlay} glow or 2px offset outline for keyboard navigation).

10. Validate token consistency by running npx @google/design.md lint DESIGN.md after any edits. Watch specifically for broken-ref warnings (every {token.path} in prose must resolve to frontmatter keys), orphaned-tokens (tokens defined but never referenced in components or prose), and contrast-ratio flags (text/background pairs failing WCAG thresholds).

Font Setup Implementation Detail:

@font-face {
  font-family: 'Ginto Nord';
  src: url('https://cdn.prod.website-files.com/[discord-cdn-path]/gintonord-regular.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ABC Ginto';
  src: url('https://cdn.prod.website-files.com/[discord-cdn-path]/abcginto-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GG Sans';
  src: url('https://cdn.prod.website-files.com/[discord-cdn-path]/ggsans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Ginto Nord', 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body: 'ABC Ginto', 'GG Sans', 'Inter', sans-serif;
  
  /* Core tokens */
  --color-primary: #5865f2;
  --color-surface-dark: #0e0f17;
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --radius-pill: 120px;
  --spacing-hero: 56px;
}

Replace [discord-cdn-path] placeholders with actual CDN URLs from Discord's production stylesheet. For development without access to proprietary font files, uncomment the Google Fonts fallbacks in the font-family stacks.

Known Gaps

• Hover state specifics: Only default and active/pressed states are documented. Hover (non-pressed mouse-over) styling for buttons, nav items, and links must be interpolated at implementation time following the transition-token guidance.
• Loading/skeleton states: No skeleton loaders, shimmer effects, or pending-state styles were detectable in the above-fold CSS. Recommend implementing skeleton screens matching {colors.surface-elevated} with pulsing {colors.surface-soft} overlays for async content.
• Form validation states: Beyond the default and focus states described, no error ({colors.error}), success ({colors.success}), or warning ({colors.warning}) input border/text treatments were visible in the screenshot. Map these semantic colors to input border and helper-text positions during form implementation.
• Authenticated/user-personalized surfaces: This spec captures the anonymous/marketing landing page only. Dashboard views, server-list interfaces, DM layouts, settings panels, and authenticated user flows were not inspected and likely follow Discord's product-design-system (PDS) specifications rather than these marketing tokens.
• Sub-brand palettes: Discord maintains sub-products (Nitro, Developer Portal, Education, etc.) that may introduce additional accent colors or modified surface treatments beyond the core palette extracted here.
• Exact starfield/decorative values: The cosmic background's dot pattern dimensions, sparkle SVG paths, and gradient-stop positions are rendered via methods (background-image URLs, Canvas API, or inline SVG) not fully inspectable from flat CSS extraction. Recreate procedurally or request original assets from Discord's design team.
• Mobile-navigation drawer: The hamburger-menu state, drawer animation (named form-open-28bcFM may relate), and mobile-nav item styling are absent from the desktop screenshot. Implement per standard off-canvas drawer patterns with {colors.surface-deep} background and {colors.text-primary} list items.
• Internationalization (i18n) implications: Font choices (especially Ginto Nord's tight tracking at large sizes) assume Latin-script languages. CJK, Arabic, or RTL layouts may require adjusted letter-spacing, fallback typefaces, and potentially different radius/token values for cultural adaptation.
• Accessibility-focus-ring specification: While focus-visible behavior is recommended, the exact ring geometry (offset, spread, color blend mode) was not explicitly styled in the extracted CSS. Implement per WCAG 2.4.11 guidelines using {colors.primary} or {colors.surface-overlay} as ring color with 2–3px offset.