name: discord-design
version: alpha
description: >
  A playful, cosmic canvas: deep indigo/blurple gradient backgrounds dusted with
  stars, carrying the iconic Blurple (#5865f2) brand voltage and a candy support
  palette (fuchsia, green, yellow). Headlines are set in ABC Ginto Nord — a heavy
  CONDENSED grotesque — UPPERCASE and tight, giving a loud, fun, gamer energy,
  with ABC Ginto Normal for friendly body copy. Surfaces are big, soft,
  glassy rounded cards (translucent panels with vivid gradient art) and 3D
  Wumpus characters. Geometry is very rounded; signature moves: the scrolling
  TALK·PLAY·CHAT marquee and the white-pill CTAs.
colors:
  # Brand
  primary: '#5865f2'          # Blurple — the brand voltage
  on-primary: '#ffffff'
  primary-hover: '#8891f2'    # button-hover lighter blurple
  dark-blurple: '#3442d9'
  purple: '#808aff'
  # Action surfaces
  cta-light: '#ffffff'        # white pill CTA ("Download for Mac")
  on-cta-light: '#23272a'
  cta-green: '#57f287'        # spring-green action ("Open Discord in your browser" / links)
  on-cta-green: '#000000'
  # Surface (dark cosmic)
  surface: '#23272a'          # "not-quite-black" base
  surface-charcoal: '#2c2f33' # raised panels, channel mock
  surface-glass: 'rgba(255,255,255,0.1)' # translucent feature cards over gradient
  # gradient stops for the cosmic background (indigo → blurple)
  bg-indigo-1: 'hsl(241.5 57% 27%)'
  bg-indigo-2: 'hsl(257 100% 20%)'
  bg-near-black: 'hsl(240 7% 5%)'
  # Text
  on-surface: '#ffffff'
  on-surface-secondary: 'rgba(255,255,255,0.7)'
  greyple: '#99aab5'          # muted labels
  off-white: '#f6f6f6'
  # Candy support palette (illustration / accents / gradient art)
  fuchsia: '#eb459e'
  yellow: '#fee75c'
  spring-green: '#57f287'
  red: '#ed4245'
  vivid-cerulean: '#00b0f4'
  orange: '#fda220'
typography:
  font-display: '"ABC Ginto Nord", "Abcgintodiscordnord", Arial, sans-serif'  # heavy CONDENSED — headings. OSS sub: "Anton" / "Archivo Expanded Black"
  font-body: '"ABC Ginto Normal", "Abcgintodiscord", sans-serif'  # body. OSS sub: "Hanken Grotesk" / "Inter"
  h1:
    fontFamily: '{typography.font-display}'
    fontSize: 56px            # scales up on hero ("GROUP CHAT THAT'S ALL FUN & GAMES")
    fontWeight: 700
    lineHeight: 0.86
    letterSpacing: -0.01em
    textTransform: uppercase
  h2:
    fontFamily: '{typography.font-display}'
    fontSize: 40px            # "MAKE YOUR GROUP CHATS MORE FUN"
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -0.03em
    textTransform: uppercase
  marquee:                    # "TALK PLAY CHAT HANG" scrolling band
    fontFamily: '{typography.font-display}'
    fontWeight: 700
    textTransform: uppercase
  body-lg:
    fontFamily: '{typography.font-body}'
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.01em
  body:
    fontFamily: '{typography.font-body}'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
  nav:
    fontFamily: '{typography.font-body}'
    fontSize: 16px
    fontWeight: 500
rounded:
  md: 12px                    # CTA pills / nav buttons
  lg: 14px
  xl: 28px                    # large glassy feature cards (approx)
  pill: 9999px
spacing:
  base: 8px
  scale: [4px, 8px, 16px, 24px, 32px, 48px, 64px, 96px, 128px]
components:
  button-cta-light:           # "Download for Mac"
    backgroundColor: '{colors.cta-light}'
    textColor: '{colors.on-cta-light}'
    typography: '{typography.body}'
    rounded: '{rounded.md}'
    padding: '15px 24px'
  button-cta-blurple:         # "Open Discord in your browser"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.md}'
    hover: '{colors.primary-hover}'
  button-cta-green:           # green action pill / "Login"-style accents
    backgroundColor: '{colors.cta-green}'
    textColor: '{colors.on-cta-green}'
    rounded: '{rounded.md}'
  button-login:               # nav "Log In"
    backgroundColor: '{colors.cta-light}'
    textColor: '{colors.on-cta-light}'
    rounded: '{rounded.pill}'
  card-feature:               # big glassy panels over the gradient
    backgroundColor: '{colors.surface-glass}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.xl}'
    note: 'translucent; contains a vivid gradient-art tile + 3D Wumpus character'
  card-product-mock:          # channel list / DM list mock
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.lg}'
motion:
  # The scrolling TALK·PLAY·CHAT marquee, animated multi-stop gradient
  # backgrounds, floating 3D characters, and playful scroll reveals.
icons:
  style: solid/3d
  sizes: { sm: 20px, md: 24px }
  color-rules: 'Platform glyphs (Xbox/PlayStation/Windows/iOS/Android) in brand color circles; UI glyphs white. The brand mark is the white Clyde/Wumpus face on blurple.'

Discord

discord-design — version alpha

Surfaces studied via Playwright (discord.com home): computed styles + a large :root token set (the famous named brand colors --blurple, --fuchsia, --spring-green, plus dozens of --bg-gradient-* themes). High-confidence extraction; gradient backgrounds are HSL-authored and resolved to representative hexes here.

Overview

Discord's canvas is playful and cosmic: deep indigo→blurple gradient backgrounds dusted with tiny stars, with the iconic Blurple {colors.primary} (#5865f2) as the brand voltage and a candy support palette (fuchsia, spring-green, yellow, cerulean) powering gradient art. The defining type move is ABC Ginto Nord — a heavy, condensed grotesque set UPPERCASE and tight ("GROUP CHAT THAT'S ALL FUN & GAMES") — which gives the loud, fun, gamer energy; ABC Ginto Normal handles the friendly, readable body. Surfaces are big, soft, glassy rounded cards (translucent panels holding vivid gradient-art tiles) interspersed with 3D-rendered Wumpus characters and product UI mockups. Geometry is very rounded and the page is alive with motion: a scrolling TALK·PLAY·CHAT marquee, animated gradient washes, and floating mascots. CTAs are white pills (and a blurple alternate).

Colors

• Blurple — {colors.primary} #5865f2. The signature brand hue: the blurple CTA, the brand logomark field, link/hover accents (hover lightens to {colors.primary-hover} #8891f2). Deep variant {colors.dark-blurple} #3442d9.
• Action surfaces. The hero's primary CTA is a white pill ({colors.cta-light} with #23272a text); a blurple pill is the alternate ("Open Discord in your browser"). Spring-green {colors.cta-green} #57f287 appears as a green action/link with black text.
• Cosmic surfaces. Base "not-quite-black" {colors.surface} #23272a and charcoal {colors.surface-charcoal} #2c2f33 for product mocks; large sections use indigo→blurple gradients ({colors.bg-indigo-1}→{colors.bg-indigo-2}) over near-black. Feature cards are translucent glass ({colors.surface-glass}, white @10%).
• Text. White {colors.on-surface}; secondary white@70%; muted Greyple #99aab5; light fills use {colors.off-white} #f6f6f6.
• Candy support palette. fuchsia #eb459e, yellow #fee75c, spring-green #57f287, red #ed4245, cerulean #00b0f4, orange #fda220 — these drive the gradient-art tiles (pink/magenta and green washes) and the playful mascots; they are decorative, not text colors. (Discord also ships dozens of named profile/background gradient themes — Aurora, Chroma Glow, Citrus Sherbert, etc.)

Typography

• ABC Ginto Nord (Abcgintodiscordnord) — display. A heavy, condensed grotesque, set uppercase, weight 700, tight line-height (≤0.9) and slight negative tracking. Closest open-source substitute: Anton or Archivo Expanded/Black for the condensed-heavy feel.
• ABC Ginto Normal (Abcgintodiscord) — body & nav, friendly and rounded. OSS sub: Hanken Grotesk / Inter.

Token	Family	Size	Weight	Line-height	Case	Usage
h1	Ginto Nord	56px+	700	0.86	UPPER	Hero ("GROUP CHAT THAT'S ALL FUN & GAMES")
h2	Ginto Nord	40px	700	0.9	UPPER	Feature headings ("MAKE YOUR GROUP CHATS MORE FUN")
marquee	Ginto Nord	large	700	—	UPPER	Scrolling TALK·PLAY·CHAT band
body-lg	Ginto Normal	20px	400	1.4	—	Hero sub-copy
body	Ginto Normal	18px	400	1.3	—	Feature body
nav	Ginto Normal	16px	500	—	—	Nav links

Layout

Base unit 8px. The page is a vertical sequence of alternating offset feature rows inside huge rounded sections: a translucent glass card holding a gradient-art tile + product mock on one side, a Ginto-Nord uppercase heading + body on the other, with a floating 3D Wumpus breaking the card edge. Punctuating bands include the scrolling word marquee (TALK · PLAY · CHAT · HANG) and a platform-icon rail (Xbox/PS/Windows/iOS/Android). The footer is a multi-column link directory over the indigo gradient. Layout is loose, generous and bouncy.

Elevation & Depth

Depth is atmospheric, not shadow-driven: glowing gradient washes, translucent glass cards that let the starfield show through, soft blurred orbs/planets, and 3D-rendered characters with real lighting. Cards have soft large-radius edges and gentle ambient shadow. The overall feel is layered and spatial rather than flat.

Shapes

Very rounded. CTA pills/nav buttons at {rounded.md} 12–14px, large glassy feature cards around {rounded.xl} ~28px, product mocks ~14px, and fully-round pills for nav "Log In" and avatars. Big soft corners reinforce the friendly, toy-like, playful brand.

Components

• Light CTA {components.button-cta-light} — white pill, #23272a label ("Download for Mac"); the primary action.
• Blurple CTA {components.button-cta-blurple} — blurple fill, white label ("Open Discord in your browser"), hover → #8891f2.
• Green action {components.button-cta-green} — spring-green pill with black text.
• Glass feature card {components.card-feature} — translucent white@10% panel, ~28px radius, containing a vivid gradient-art tile + a 3D Wumpus character overflowing the edge.
• Product mock {components.card-product-mock} — dark #23272a UI panels (channel list, DM presence list with green "Listening to Spotify"), ~14px radius, used to demo the app.
• Marquee — the looping uppercase Ginto-Nord word band.

Motion

Motion is core to the brand: the scrolling TALK·PLAY·CHAT marquee, slowly animated multi-stop gradient backgrounds, floating/rotating 3D characters, parallax starfields, and playful scroll-reveal of offset cards. The energy is bouncy and lively (befitting a gaming/community product), not subtle.

Iconography

A mix of solid UI glyphs (white, in nav and mocks) and 3D / brand-colored platform badges (Xbox green, PlayStation blue, Windows, iOS, Android in colored circles). The brand mark is the white Clyde/Wumpus face on blurple. Mascots (Wumpus and friends) appear as full 3D illustrations throughout.

Do's and Don'ts

• Do set headlines in ABC Ginto Nord — heavy, condensed, UPPERCASE, tight leading.
• Do ground sections on indigo→blurple gradient + starfield backgrounds.
• Do use Blurple #5865f2 as the brand voltage; white pills as the primary CTA.
• Do lean on translucent glass cards, vivid gradient-art tiles, and 3D Wumpus characters.
• Do keep corners big and soft.
• Do use the candy palette for illustration/gradient art, and animate (marquee, gradients, floating mascots).
• Don't set body in the condensed Nord face — use Ginto Normal for readability.
• Don't flatten the design to plain dark panels; the atmosphere (glow, glass, 3D, stars) is the brand.
• Don't use candy colors for body text; keep text white / white@70% / greyple.

Known Gaps

• Discord ships dozens of named gradient themes (--bg-gradient-*, --checkpoint-*); only the core home-page indigo/blurple set is consolidated here.
• Hero h1 scales responsively above the 56px base; the largest display size is a clamp() not captured as one value.
• Exact glassy-card radius (~28px) is inferred from rendering.