Skip to content
Back to extractor

Overview

Discord's design system emphasizes accessibility, clarity, and responsive elegance. Built on a foundation of generous spacing and legible typography, it prioritizes keyboard navigation and multi-language support with contextual line-height adjustments for scripts like Chinese, Thai, Vietnamese, and Hindi. The palette is deliberately neutral—white backgrounds with focused accent blue—allowing content to remain the focal point.

Signature traits: Accessibility-first focus, responsive language-aware typography, minimal colour palette, generous spacing, smooth micro-interactions, multi-directional icon assets.

Colors

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --color-background | #ffffff | Page backgrounds, primary surface | | Surface | --color-surface | #ffffff | Card and panel backgrounds | | Text Primary | --color-text-primary | #333333 | Headings, body copy | | Text Secondary | --color-text-secondary | #999999 | Captions, placeholders, helper text | | Text Inverse | --color-text-inverse | #ffffff | Text on dark/accent backgrounds | | Border | --color-border | #cccccc | Primary dividers, outlines | | Border Light | --color-border-light | #f0f0f0 | Subtle dividers, HR elements | | Accent | --color-accent | #3898ec | Primary CTA, highlights, focus states | | Accent Dark | --color-accent-dark | #161cbb | Dark emphasis, secondary CTAs | | Error | --color-error | #ea384c | Error states, validation | | Overlay | --color-overlay | rgba(0, 0, 0, 0.1) | Box shadows, subtle overlays |

Typography

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | Arial, sans-serif | 38px | 700 | 44px | 0 | Hero headlines | | Heading | Arial, sans-serif | 32px | 700 | 36px | 0 | Section titles | | Body | Arial, sans-serif | 14px | 400 | 20px | 0 | Paragraph text | | Caption | Arial, sans-serif | 12px | 400 | 18px | 0 | Labels, metadata | | Mono | monospace | 12px | 400 | 18px | 0 | Code blocks, data |

Language-specific adjustments:

  • —CJK (zh-Hans, zh-TW, ja, ko): Line-height reduced to 1.0–1.2 on headings to optimize character density
  • —Thai (th), Vietnamese (vi), Hindi (hi): Line-height expanded to 1.1–1.2 to accommodate diacritics and complex scripts
  • —Hungarian (hu), Russian (ru): Font-size adjustments at specific breakpoints; Russian h2 scaled to 30–40px

Layout

| Token | Value | Context | |-------|-------|---------| | Spacing XS | 5px | Minimal inline gaps | | Spacing SM | 8px | Component padding, tight spacing | | Spacing MD | 10px | Standard component spacing | | Spacing LG | 15px | Section margins, block padding | | Spacing XL | 20px | Layout margins, separators | | Spacing 2XL | 40px | Block-level spacing | | Spacing 3XL | 50px | Hero section spacing | | Max Width | 940px | .w-container constraint |

Responsive strategy: Mobile-first cascade with breakpoints at 479px (mobile), 767px (tablet), 991px (desktop), and 1280px+ (wide). Language-specific font scaling triggers at 992px–1500px range. Navigation collapses to burger menu below 992px; language selector becomes compact at narrow widths.

Elevation & Depth

| Level | CSS Value | Usage | |-------|-----------|-------| | sm | 0 1px 1px rgba(0, 0, 0, 0.1) | Dropdowns, language selector, cards |

Shapes

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Form controls, button variants | | sm | 3px | Scrollbar thumbs, minimal accent elements | | md | 6px | Dropdowns, input fields, language selector | | lg | 8px | Prominent cards, modals | | full | 9999px | Pill buttons, circular elements |

Components

Buttons:

  • —Base: background-color: #3898ec, padding: 9px 15px, border-radius: 0 (sharp default)
  • —Hover: Arrow icons translate 2px rightward; opacity transitions 0.5s
  • —Dark variant: #161cbb for emphasis
  • —Focus: outline: 0.125rem solid #4d65ff with outline-offset: 0.125rem

Language Selector:

  • —Container: display: flex, align-items: center
  • —Dropdown: position: absolute, bottom: 100%, background: white, border-radius: 8px, box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)
  • —Scrollbar (webkit): width: 6px, thumb background-color: white, border-radius: 3px
  • —Flags: width: 24px, height: 16px, margin-right: 8px

Forms:

  • —.w-input, .w-select: height: 38px, padding: 8px 12px, border: 1px solid #ccc, background: white
  • —Focus: border-color: #3898ec, outline: 0
  • —Disabled: background-color: #eee, cursor: not-allowed

Dropdowns & Navigation:

  • —.nav_blur: opacity 0 → 1 on trigger open
  • —Menu animation height scales: 700px (768–1279px), 8000px (1991px+), 870px (base)
  • —Links hover: .button-arrow translate(2px, 0)

Text Utilities:

  • —.text-style-3lines, .text-style-2lines, .text-style-1line: -webkit-line-clamp for ellipsis
  • —.sr-only: Screen-reader-only text with position: absolute, width/height: 1px, overflow: hidden

Accessibility:

  • —All focusable elements: outline: 0.125rem solid #fff (or #4d65ff on light backgrounds)
  • —File upload, buttons: display: flex, justify-content: center, align-items: center
  • —Hover states enable pointer-events; .pointer-events-off disables interaction

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use --spacing-* tokens for all margins/padding | Hard-code pixel values outside the spacing scale | | Apply --color-accent (#3898ec) for primary interactions | Mix accent blue with other brand colours | | Set line-height to 1.0–1.2 for CJK; 1.1–1.2 for Thai/Vietnamese/Hindi | Use default line-height for all languages uniformly | | Use border-radius: 6px–8px for most components | Apply sharp corners (0px) except for explicit button variants | | Implement focus outlines on all keyboard-navigable elements | Skip focus states for accessibility | | Adjust font-size for long text languages (ru, hu, nl) at 992–1500px breakpoint | Ignore language-specific typography requirements | | Use -webkit-font-smoothing: antialiased for legibility | Omit font smoothing on body | | Provide translations for all UI copy with proper locale attributes (html[lang="xx"]) | Assume English-centric layout for all languages |

Agent Prompt Guide

You are working within the Discord design system. Key constraints:

Colours: Use only the defined palette—

  • —Background: #ffffff
  • —Text Primary: #333333
  • —Text Secondary: #999999
  • —Accent: #3898ec (CTAs, highlights)
  • —Accent Dark: #161cbb (emphasis)
  • —Border: #cccccc (dividers)
  • —Error: #ea384c (validation)

Typography: Arial, sans-serif for all body text. Adjust line-height per language:

  • —Default: 20px (body), 36px (h2)
  • —CJK (zh-Hans, zh-TW, ja, ko): reduce to 1.0–1.2
  • —Thai, Vietnamese, Hindi: expand to 1.1–1.2
  • —Hungarian, Russian: scale font at 992–1500px breakpoints

Spacing: Use only the defined scale:

  • —xs: 5px, sm: 8px, md: 10px, lg: 15px, xl: 20px, 2xl: 40px, 3xl: 50px

Radius: Apply contextually:

  • —0px for buttons (sharp), 6–8px for cards/inputs, 9999px for pills

Focus & Accessibility:

  • —All interactive elements: outline 0.125rem solid (white on dark, #4d65ff on light)
  • —Implement hover/active states with opacity/transform transitions
  • —Never remove focus outlines

Responsive:

  • —Mobile: ≤479px; Tablet: 480–767px; Desktop: 768–1279px; Wide: ≥1280px
  • —Adjust navigation, language selector, and typography per breakpoint
  • —Never assume English-only layouts

Never deviate from these constraints. All colour, typography, spacing, and radius values must come from the design system.