27 KiB
version, name, description, colors, typography, rounded, spacing, components
| version | name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| alpha | Discord Analysis | An analysis of Discord's design language — a loud, playful gaming-native system built on a deep-indigo canvas lit by Blurple, electric green, and vibrant magenta gradients. Heavy ABC Ginto Nord display type shouts in all-caps over generously rounded media, gradient feature panels, and full-bleed Blurple bands; the mood is arcade-energetic, never corporate. |
|
|
|
|
|
Overview
Discord's marketing design is loud on purpose. The pages live on a deep-indigo canvas ({colors.canvas} — #0a0d3a) that is rarely still: it is washed by an animated mesh of Blurple, violet, and vibrant magenta, then punctuated by full-bleed gradient bands and oversized rounded media. Where most product sites whisper in restrained neutrals, Discord shouts in heavy all-caps ABC Ginto Nord, stacks playful 3D character art, and lets a single electric green CTA ({colors.green}) pop against the cool indigo. The whole system reads like an arcade cabinet: energetic, saturated, unmistakably gaming-native.
The brand anchor is Blurple ({colors.primary} — #5865f2) — Discord's signature indigo-violet. It owns the primary CTA, the marquee and CTA bands, stat cards, and the brand mark. Around it orbit two supporting accents: the electric green ({colors.green}) used for the highest-intent "get started" actions, and a vibrant magenta ({colors.magenta} — #ec48bd) that fills the gradient feature panels and step cards. Surfaces stack in cool darks — the indigo canvas, a raised indigo panel ({colors.surface-indigo}), an onyx UI card ({colors.surface-onyx}), and pure black ({colors.surface-black}) showcase bands.
Geometry is soft and generous. Everyday controls round at {rounded.sm} (12px) and {rounded.lg} (16px); media tiles and feature panels bow out at {rounded.xl} (40px) and beyond; the most expressive shapes reach {rounded.jumbo} (120px) and pill caps. Nothing is sharp. The result is friendly, toy-like, and built to make software feel like play.
Key Characteristics:
- Deep-indigo canvas (
{colors.canvas}) lit by an animated Blurple-to-magenta gradient mesh — never a flat or neutral background. - One iconic brand colour: Blurple (
{colors.primary}) owns CTAs, bands, and the brand mark; electric green ({colors.green}) is reserved for highest-intent actions. - Vibrant magenta (
{colors.magenta}) gradient feature panels and step cards carry the playful, saturated energy. - Heavy all-caps display type in
{typography.display-xl}(ABC Ginto Nord 800) shouting over generously rounded media. - Soft, toy-like geometry: 12–16px on controls, 40px+ on media, up to
{rounded.jumbo}on signature shapes. - Page rhythm: dark-indigo hero → gradient + dark feature cards → black showcase band → Blurple marquee/CTA band → giant wordmark footer.
Colors
Source pages analyzed: home, ads/quests, nitro, trending-games. Blurple, green, magenta, white display type, and the deep-indigo canvas recur on every page; nitro adds the pricing table, trending-games adds the ranked game list.
Brand & Accent
- Blurple (
{colors.primary}— #5865f2): The iconic brand colour. Primary CTA fill, marquee and CTA bands, stat cards, brand mark. The single most-used action colour. - Electric Green (
{colors.green}— #35ed7e): Reserved for the highest-intent CTA ("get started" / "download"), always paired with{colors.ink-dark}text. - Vibrant Magenta (
{colors.magenta}— #ec48bd): The saturated pink that fills gradient feature panels, step cards, and badges — the playful counterweight to the cool indigo. - Link Cyan (
{colors.link}— #00b0f4): Inline text-link colour on dark surfaces.
Surface
- Indigo Canvas (
{colors.canvas}— #0a0d3a): The deep-indigo page base, washed by the animated brand-gradient mesh. - Raised Indigo (
{colors.surface-indigo}— #1e2353): One step up from canvas — dark feature cards, pricing table, game-rank rows, ghost buttons. - Onyx (
{colors.surface-onyx}— #23272a): Discord's classic dark-UI surface; product-chrome cards and dividers. - Black (
{colors.surface-black}— #000000): Full-black showcase bands framing product media.
Text
- White (
{colors.ink}— #ffffff): All display and body text on the dark canvas. The dominant text colour. - Ink (
{colors.ink-dark}— #000000): Text on light fills — the white button and green CTA. - Muted Ink (
{colors.muted}— #333333): Secondary text on the occasional light surface (white product-mockup cards).
Brand Gradient
The hero and feature panels ride an animated mesh that sweeps from {colors.primary} (Blurple) through a deep violet into the vibrant {colors.magenta}, resolving back into the {colors.canvas} indigo at the edges. It is the brand's defining atmospheric signature — always in motion, never a flat fill.
Typography
Font Family
- ABC Ginto Nord — the heavy display face. All marketing headlines, set in 700–800 weight, frequently all-caps. Wide, confident, slightly condensed character that reads as "gaming."
- ABC Ginto — the lighter companion for lead paragraphs, links, and buttons (weight 500).
- ggsans — Discord's in-product UI sans, used for dense body copy (16px / 400).
Note on font substitutes: ABC Ginto Nord and ggsans are proprietary. For an open-source rebuild, pair a heavy geometric grotesque — Hanken Grotesk or Space Grotesk at 700–800 — for display, with Inter or Plus Jakarta Sans for body and UI. Keep headlines bold and tracked tight; the loud, confident display weight is the brand's voice.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} |
82px | 800 | 1.0 | 0 | Hero headline (all-caps) |
{typography.display-lg} |
62px | 800 | 1.05 | 0 | Marquee band, major headline |
{typography.display-md} |
56px | 700 | 1.05 | 0 | Section headline, CTA band |
{typography.heading-lg} |
48px | 700 | 1.1 | 0 | Sub-section heading |
{typography.heading-sm} |
22px | 700 | 1.2 | 0 | Card heading, step label |
{typography.body-lg} |
20px | 500 | 1.4 | 0 | Lead paragraph |
{typography.link-lg} |
18px | 500 | 1.4 | 0 | Large button label, prominent link |
{typography.body} |
16px | 400 | 1.5 | 0 | Default body copy (ggsans) |
{typography.link} |
16px | 500 | 1.4 | 0 | Nav link, button label |
{typography.link-sm} |
14px | 500 | 1.4 | 0 | Small link, badge, fine print |
Principles
- Headlines are short, declarative, and frequently ALL-CAPS in ABC Ginto Nord 800 — the loudest element on every page.
- Body copy drops to the lighter ABC Ginto / ggsans 400–500 so the display type stays the hero.
- The display-to-body weight jump (800 → 400/500) is dramatic on purpose; there is no timid mid-weight in between.
Layout
Spacing System
- Base unit: 8px.
- Tokens:
{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}20px ·{spacing.xl}24px ·{spacing.xxl}32px ·{spacing.section}40px. - Card interiors run
{spacing.xl}–{spacing.section}; buttons pad{spacing.sm}–{spacing.lg}vertical by{spacing.xl}horizontal.
Grid & Container
- Centered max-width content column (~1200px) on the full-bleed indigo canvas.
- Feature sections alternate a two-column split (text + media) with stacked full-width gradient/dark cards.
- Marquee, CTA, and showcase bands are full-bleed colour fields with their own rounded inner containers.
Whitespace Philosophy
Sections breathe through large vertical gaps of indigo, then collide with saturated colour bands for rhythm. Inside cards, generous padding lets oversized 3D art and product mockups float with air.
Responsive Strategy
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Single column; nav collapses to logo + hamburger; CTAs stack full-width |
| Tablet | 768–1023px | Two-column splits begin stacking; gradient cards go full-width |
| Laptop | 1024–1279px | Container narrows; multi-column grids retained |
| Desktop | ≥ 1280px | Full multi-column grids; centered ~1200px column |
(Discord ships an unusually dense breakpoint ladder — dozens of stops between 240px and ~2000px — to keep the oversized display type and 3D art balanced at every width.)
Touch Targets
{components.button-primary} and {components.button-green} clear ≥44px tap height via their vertical padding. Nav links and game-rank rows meet the same minimum on mobile.
Collapsing Strategy
The dark top nav (logo · links · Login · Download CTA) collapses to logo + hamburger below 768px. Two-column feature rows stack media-over-text; gradient and dark cards span full width. The nitro pricing table becomes horizontally scrollable; the trending-games ranked list keeps its row layout but drops secondary columns.
Image Behavior
Product mockups and 3D character art sit inside rounded media frames ({rounded.lg}–{rounded.xl}) or bleed past card edges as decorative props. Media scales fluidly within its container and keeps its corner radius at every width.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No shadow; separation by colour field + large radius | Most cards, colour bands |
| 1 — Soft float | 0 3px 68px rgba(69,42,124,0.1) — wide, violet-tinted, very diffuse |
Floating media cards, elevated mockups |
Discord leans on colour, gradient, and radius for depth far more than on shadow. The one extracted shadow is a wide, violet-tinted diffuse glow that lifts product media off the indigo canvas without a hard edge.
Decorative Depth
- The animated Blurple-to-magenta gradient mesh creates depth by motion and hue rather than shadow.
- 3D character art and product props overlap card edges to build foreground/background layering.
- Full-bleed colour bands (Blurple, black) push depth by contrast against the indigo scroll.
Shapes
Border Radius Scale
| Token | Value | Use |
|---|---|---|
{rounded.xs} |
6px | Small ghost buttons, compact chips |
{rounded.sm} |
12px | Primary / green CTA buttons, links, table cells |
{rounded.md} |
14px | Game-rank rows, mid controls |
{rounded.lg} |
16px | White / ghost buttons, cards, media frames |
{rounded.xl} |
40px | Gradient feature panels, large media tiles |
{rounded.pill} |
50px | Pill caps, badges, avatar chips |
{rounded.jumbo} |
120px | Signature oversized rounded shape cards |
{rounded.full} |
9999px | Circular avatars and icon buttons |
Photography Geometry
Media is presented at soft-cornered rectangles ({rounded.lg}–{rounded.xl}), never hard-edged. The hero media block uses a directional bottom-only radius (88px bottom corners) for a swooping base. Avatars and circular icon controls are fully round.
Components
No hover states documented. Component specs cover Default and Active/Pressed only; variants are separate
components:entries.
Buttons
button-primary — the Blurple pill CTA
- Background
{colors.primary}, text{colors.on-primary}, type{typography.link-lg}, rounded{rounded.sm}, padding{spacing.lg} {spacing.xl}. The everyday action button across hero and feature sections.
button-green — the electric-green high-intent CTA ("Get Started" / "Download")
- Background
{colors.green}, text{colors.ink-dark}, type{typography.link-lg}, rounded{rounded.sm}, padding{spacing.sm} {spacing.xl}. The highest-visibility action; black label for contrast.
button-white — white solid button
- Background
{colors.ink}, text{colors.ink-dark}, type{typography.link}, rounded{rounded.lg}, padding{spacing.xs} {spacing.md}.
button-ghost — translucent indigo button on dark surfaces
- Background
{colors.surface-indigo}, text{colors.ink}, type{typography.link}, rounded{rounded.lg}, padding{spacing.md}.
button-ghost-sm — compact ghost button (quests CTA row)
- Background
{colors.surface-indigo}, text{colors.ink}, type{typography.link-sm}, rounded{rounded.xs}, padding{spacing.sm} {spacing.xxl}.
Cards & Containers
hero — dark-indigo hero
- Indigo
{colors.canvas}field with the animated gradient mesh, white{colors.ink}all-caps headline at{typography.display-xl}, lead paragraph, and a CTA pair. The hero media block carries a swooping bottom-only radius.
feature-card-gradient — vibrant magenta gradient feature panel
- Background
{colors.magenta}gradient, white text,{rounded.xl}(40px), padding{spacing.section}. Frames a product mockup or 3D prop.
feature-card-dark — raised dark feature card
- Background
{colors.surface-indigo}, white text,{rounded.xl}, padding{spacing.xxl}. Holds product screenshots / chat mockups.
showcase-band-black — full-black product showcase band
- Background
{colors.surface-black}, white text,{rounded.xl}, padding{spacing.section}. Frames a hero product demo.
stat-card — big-number stat card (quests)
- Background
{colors.primary}(Blurple), white text, headline at{typography.display-md},{rounded.xl}, padding{spacing.xxl}.
step-card — numbered step panel (1/2/3 process)
- Background
{colors.magenta}gradient, white text, label at{typography.heading-sm},{rounded.lg}, padding{spacing.xl}.
cta-band — full-bleed Blurple CTA band
- Background
{colors.primary}, white headline at{typography.display-md},{rounded.xl}, padding{spacing.section}, with abutton-whiteorbutton-greenCTA.
marquee-band — scrolling all-caps marquee ("PLAY · CHAT · HANG OUT")
- Background
{colors.primary}, white display text at{typography.display-lg}, padding{spacing.lg}.
faq-accordion — collapsible FAQ row (nitro)
- Background
{colors.surface-indigo}, white text, question at{typography.link-lg},{rounded.lg}, padding{spacing.xl}.
Inputs & Forms
Discord's marketing pages surface no standalone text inputs; forms route to the app. The kit-mirror
ex-*form surfaces below model inputs against the brand's{rounded.lg}surfaces and{colors.surface-indigo}fills.
Navigation
nav-bar — dark top navigation
- Indigo
{colors.canvas}bar, white{colors.ink}links at{typography.link}, padding{spacing.md} {spacing.xl}. Slots: Discord logo · text links · "Login" · a Blurple/green Download CTA. Collapses to logo + hamburger on mobile.
footer — dark link footer
- Indigo
{colors.canvas}, white links at{typography.link}, padding{spacing.section}, organized into multi-column link groups above a giant "Discord" wordmark.
Signature Components
pricing-table — nitro plan comparison table
- Raised-indigo
{colors.surface-indigo}surface, body text at{typography.body},{rounded.lg}, padding{spacing.xl}. Two plan columns (Nitro Basic / Nitro) with the popular tier carrying a{colors.magenta}badge, each row ending in abutton-primary"Subscribe".
game-rank-feature — top-ranked game card (trending-games #1/#2/#3)
- Raised-indigo
{colors.surface-indigo}card, large media, rank number + title at{typography.heading-sm},{rounded.lg}, padding{spacing.md}.
game-rank-row — ranked game list row
- Raised-indigo
{colors.surface-indigo}, body text at{typography.body},{rounded.md}, padding{spacing.sm} {spacing.md}. Rank · icon · title · metadata columns.
badge — small rounded tag / category chip
- Background
{colors.magenta}, white text at{typography.link-sm},{rounded.lg}, padding{spacing.xxs} {spacing.sm}.
Examples (illustrative)
Auto-derived kit-mirror demonstration surfaces (
scripts/derive-examples-block.mjs). Eachex-*entry references brand-native primitives so downstream consumers (/preview-design,/generate-kit) re-skin the same 10 surfaces consistently.TO_FILLmarkers indicate missing primitives — resolve in the LLM judgment pass.
ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.
- Properties:
backgroundColor,textColor,borderColor,rounded,padding
ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).
- Properties:
backgroundColor,textColor,rounded,padding
ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).
- Properties:
backgroundColor,rounded,padding
ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).
- Properties:
backgroundColor,rounded,padding,item-divider
ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.
- Properties:
backgroundColor,activeIndicator,rounded,padding
ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.
- Properties:
headerBackground,headerTypography,bodyTypography,cellPadding,rowBorder
ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.
- Properties:
backgroundColor,rounded,padding
ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.
- Properties:
backgroundColor,rounded,padding
ex-empty-state-card — Empty-state illustration frame.
- Properties:
backgroundColor,rounded,padding,captionTypography
ex-toast — Toast notification surface — feature-card shape + medium shadow.
- Properties:
backgroundColor,rounded,padding,typography
Do's and Don'ts
Do
- Lead with the deep-indigo canvas (
{colors.canvas}) and let the animated Blurple-to-magenta gradient carry atmosphere. - Reserve
{colors.green}for the single highest-intent CTA on a page; use{colors.primary}Blurple for everything else action-related. - Shout with
{typography.display-xl}ABC Ginto Nord in all-caps for headlines; drop hard to{typography.body}for copy. - Round generously —
{rounded.sm}–{rounded.lg}on controls,{rounded.xl}+ on media and feature panels. - Frame product mockups inside
{colors.magenta}gradient panels or{colors.surface-indigo}dark cards. - Let 3D character art and props overlap card edges to build playful depth.
Don't
- Don't flatten the canvas to a neutral grey or pure black — the indigo + gradient mesh is the brand.
- Don't use
{colors.green}as a general accent; it is the high-intent CTA only. - Don't set headlines in a timid mid-weight — display type is 700–800 ABC Ginto Nord or it loses the brand voice.
- Don't square off media or cards; the soft
{rounded.xl}+ geometry is core to the playful tone. - Don't lean on drop shadows for depth; depth comes from colour, gradient, and overlapping art.
- Don't introduce a fourth loud accent — Blurple, green, and magenta are the full chord.