A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
21tokens
5type steps
1radius steps
4pxspacing base
Discord, in one page
Discord's iOS app is a dark-first community UI built around one load-bearing color: Blurple (#5865F2). Open the app and you're dropped into a three-pane architecture — a leftmost server rail of rounded-square server icons, a channel list in the middle, and a message thread on the right — compressed into a mobile form factor via horizontal swipe navigation. The canvas is a near-black gradient of grays: the server rail at #1E1F22, the channel list at #2B2D31, the chat area at #313338. These three adjacent grays are so carefully tuned that they read as sibling surfaces rather than competing panels. The whole app feels like a gaming tool: purpose-built, dense, slightly nerdy, unapologetically dark.
The mood is community clubhouse, not broadcast platform. Presence is everywhere — a green (#23A55A) dot next to online users, yellow (#F0B232) for idle, red (#F23F43) for do-not-disturb, gray for offline. Role colors tint usernames throughout chat (admins in red, mods in green, VIPs in hot pink — whatever the server owner configures). Nitro-subscribed users get gradient avatars and animated badges. Custom emoji reactions flood threads during peak moments. The density of visual signals — per-user color, per-role hue, per-channel pings, per-user presence — means the UI has to stay chromatically restrained in its own chrome so server content can scream.
Typography is gg sans (Discord's proprietary font, replacing Whitney in 2023) for titles and UI, with SF Pro Text as the iOS fallback when gg sans isn't loaded. The type scale is compact — 14-20pt working range — because Discord expects many messages per screen. The single moment of chromatic excess is the Nitro Gradient: a purple-to-pink gradient (#5865F2 → #EB459E) used on Nitro badges, Boost badges, and the occasional promo banner. Everything else stays in the gray-and-blurple lane.
Key Characteristics:
- Dark-first canvas — Discord exists in dark mode by default, with carefully tuned gray siblings (
#1E1F22/#2B2D31/#313338) - Blurple (
#5865F2) as the single brand accent — primary CTAs, active states, mentions - Left server rail of 48pt rounded-square server icons with active-indicator bar
- Three-pane architecture: Server rail → Channel list → Chat — compressed via horizontal swipe on mobile
- Role colors on usernames throughout chat — any hex value, user-per-server custom
- Presence dots (green/yellow/red/gray) on every avatar — always visible
- Gradient avatars + Nitro badges for premium users
- Voice channels as first-class UI — tap to join, speaking ring pulses on active speakers
- Custom emoji + animated emoji reactions — heavy use, many per message
- Mention pings with red unread badge — hierarchy: @mention > role > unread
- Spoiler tags, code blocks, Markdown formatting rendered inline
- gg sans (proprietary, 2023+) with SF Pro fallback; compact 14-20pt working range
Do's and don'ts
Do
- Use the three-gray surface system (
#1E1F22rail →#2B2D31list →#313338chat) — the adjacency is the brand - Use Blurple
#5865F2ONLY as primary accent (CTAs, mentions, active states) — not decoratively - Render server icons as 48pt rounded squares with 16pt corner radius default, 12pt on active
- Show the 4pt × 40pt white active-indicator bar on the leading edge of the selected server
- Use presence dots (green/yellow/red/gray) on every user avatar — always visible
- Apply role colors to usernames in chat — this is core to Discord's community identity
- Support full Markdown inline: bold, italic, underline, strikethrough, code, spoiler, quote
- Use gg sans (or SF Pro fallback) — compact 14-16pt working range
- Implement horizontal-swipe navigation between server rail / channel list / chat on mobile
- Show mention pings as red
#F23F43badges with count — priority over plain unread dots
Don't
- Don't use pure black canvas — Discord's dark is a specific gray system, not
#000000 - Don't exaggerate the contrast between the three grays — they should feel sibling
- Don't add decorative shadows on messages or server icons — the app is flat
- Don't use Blurple as a body text color — it's structural, not typographic
- Don't use SF Symbols for channel icons — Discord has proprietary
#/🔊/📢glyphs - Don't use tab-bar style navigation for channels — Discord uses a side rail + list, not a tab bar
- Don't round server icons to full circles — the SQUARE with rounded corners is the brand
- Don't skip the presence dot — status visibility is core
- Don't use heavy-weight body text — 400 for body, 500 for labels, 600 for active
- Don't forget the squircle morph (16pt → 12pt) when a server icon becomes active
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Discord design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Blurple: #5865f2
- Blurple Hover: #4752c4
- Blurple Light: #7289da
- Nitro Gradient: #5865f2
- Light Canvas: #ffffff
- Light Surface 1: #f2f3f5
- Light Surface 2: #ebedef
- Light Divider: #e3e5e8
- Text Primary: #f2f3f5
- Text Secondary: #b5bac1
Type:
- families: Whitney, Consolas, Monospace, Fallback Stack
- scale: 10, 12, 14, 16, 20
- weights: 400, 500, 600, 700
Shape:
- radius: 8
- elevation: Background: `#2B2D31`, 8pt corner radius, 12pt blur shadow
Spacing: 4, 8, 10, 12
Rules:
- Use the three-gray surface system (`#1E1F22` rail → `#2B2D31` list → `#313338` chat) — the adjacency is the brand
- Use Blurple `#5865F2` ONLY as primary accent (CTAs, mentions, active states) — not decoratively
- Render server icons as 48pt rounded squares with 16pt corner radius default, 12pt on active
- Show the 4pt × 40pt white active-indicator bar on the leading edge of the selected server
- Use presence dots (green/yellow/red/gray) on every user avatar — always visible
- Apply role colors to usernames in chat — this is core to Discord's community identity
Avoid:
- Don't use pure black canvas — Discord's dark is a specific gray system, not `#000000`
- Don't exaggerate the contrast between the three grays — they should feel sibling
- Don't add decorative shadows on messages or server icons — the app is flat
- Don't use Blurple as a body text color — it's structural, not typographic
- Don't use SF Symbols for channel icons — Discord has proprietary `#` / `🔊` / `📢` glyphs
- Don't use tab-bar style navigation for channels — Discord uses a side rail + list, not a tab bar
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Blurple (
#5865F2): THE brand color — primary CTAs, active send button, active tab indicator, mention highlight, link color, online-user voice-channel bubble. - Blurple Hover (
#4752C4): Pressed / hovered state for blurple CTAs. - Blurple Light (
#7289DA): Legacy brand blurple (pre-2021), still seen on occasional assets. - Nitro Gradient (
#5865F2 → #EB459E): Diagonal gradient used on Nitro badges, Boost icons, promo ribbons.
Canvas & Surfaces (Dark — Default)
The three-pane gray system is Discord's signature surface language.
- Server Rail (
#1E1F22): The leftmost darkest pane — holds the rounded-square server icons. - Channel List Pane (
#2B2D31): The middle pane — server name + channel list + member list preview. - Chat Canvas (
#313338): The right pane where messages live. Slightly lighter so it reads as "the document". - Input Bar / Surface 2 (
#383A40): Compose bar background, hovered channel row. - Elevated Modal (
#2B2D31): Modal and popover surfaces match the channel-list pane tone. - Divider (
#3F4147): Hairline separators.
Canvas & Surfaces (Light — Rarely Used)
Discord does ship a light mode but ~80% of users stay on dark. Light mode is a straightforward inversion:
- Light Canvas (
#FFFFFF) - Light Surface 1 (
#F2F3F5) - Light Surface 2 (
#EBEDEF) - Light Divider (
#E3E5E8)
Text
- Text Primary (
#F2F3F5): Message text, usernames (default, unroled), titles. - Text Secondary (
#B5BAC1): Usernames in member list, metadata, small labels. - Text Muted (
#949BA4): Timestamps, "was typing", inactive labels. - Text Link (
#00A8FC): Hyperlinks inside messages (distinct blue from Blurple). - Text Disabled (
#5D6069): Disabled labels, section subtitles.
Status (Presence Dots)
- Online Green (
#23A55A): Active users, successful actions. - Idle Yellow (
#F0B232): Away / idle status. - DND Red (
#F23F43): Do Not Disturb, error states, @mention pings. - Offline Gray (
#80848E): Offline or invisible users. - Streaming Purple (
#593695): Currently streaming / Go-Live active.
Role Colors
Server admins define per-role hex colors — any value is valid. Common defaults in Discord's template system:
- Admin Red (
#ED4245), Mod Green (#57F287), Booster Pink (#EB459E), VIP Gold (#FEE75C), Bot Aqua (#23C1D2).
Role color applies to the username in chat and in the right-side member list.
Semantic
- Success (
#23A55A): Successful actions, check states. - Warning (
#F0B232): Warning banners, voice-disconnect notice. - Danger (
#F23F43): Destructive actions, kick, ban, mention ping. - Nitro (Nitro Gradient): Premium-only features, Nitro badge.
- Boost (Boost Pink
#EB459E): Server Boost badge, Level 2/3 indicators.
Type scaleRead the full spec
Font Family
- Primary (2023+):
gg sans(proprietary, released 2023 to replace Whitney) — geometric sans with generous apertures, optimized for long-form chat scanning. - Previous (2017-2023):
Whitney(Hoefler & Co.) — still seen on some legacy assets. - Monospace:
gg mono(2023+) for code blocks; formerlyConsolas. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif - CJK: Falls back to iOS system CJK fonts.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | gg sans | 20pt | 700 | 1.2 | -0.2pt | "General", server name at top of channel |
| Channel Name (Active) | gg sans | 16pt | 600 | 1.25 | -0.1pt | "#general" in channel list |
| Channel Name (Inactive) | gg sans | 16pt | 500 | 1.25 | -0.1pt | Unselected channels |
| Username | gg sans | 16pt | 600 | 1.2 | -0.1pt | Sender name above message, tinted with role color |
| Message Body | gg sans | 16pt | 400 | 1.375 | -0.1pt | The actual message text |
| Timestamp (Inline) | gg sans | 12pt | 500 | 1.2 | 0pt | Next to username in chat |
| Reply Context | gg sans | 14pt | 400 | 1.25 | -0.1pt | The replied-to message preview |
| System Message | gg sans | 14pt | 500 | 1.3 | 0pt | "Welcome @user to the server!" joins |
| Section Label | gg sans | 12pt | 700 | 1.2 | 0.5pt | "ANNOUNCEMENTS" — uppercase tracked |
| Member List Name | gg sans | 14pt | 500 | 1.2 | -0.1pt | Right-side member list |
| Button (Primary) | gg sans | 14pt | 500 | 1.0 | 0pt | "Join", "Continue" |
| Tab Label | gg sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Code Block | gg mono | 14pt | 400 | 1.4 | 0pt | Triple-backtick code block |
| Inline Code | gg mono | 14pt | 400 | 1.0 | 0pt | Backtick-wrapped inline code |
| Blockquote | gg sans | 16pt | 400 | 1.4 | -0.1pt | > quote rendered with leading bar |
Principles
- Compact working range: Most UI sits at 14-16pt. 20pt is the largest non-display size.
- Role colors on usernames: Per-server username coloring from role assignments — applies in chat and member list.
- Weight used sparingly: 400 for body, 500 for labels, 600 for active states, 700 only on screen titles and section labels.
- Markdown inline rendering:
bold,*italic*,__underline__,~~strikethrough~~, `,||spoiler||,> quote` — all rendered inline by default. - gg mono for code: Monospace shifts to
gg monoinside code blocks, inheriting the 14pt / 1.4 line-height.
Components and layoutRead the full spec
Buttons
Primary Blurple Button
- Shape: Rectangle, 8pt corner radius (or 4pt for compact inline)
- Background:
#5865F2 - Text: white, gg sans 14pt weight 500
- Padding: 10pt vertical, 16pt horizontal (standard); 8pt / 12pt compact
- Pressed:
#4752C4+ scale 0.97 - Used for: "Continue", "Send Friend Request", "Join Voice"
Secondary Button
- Background:
#4E5058(dark gray) - Text: white, gg sans 14pt weight 500
- Pressed:
#6D6F78 - Used for: "Cancel", "Maybe Later"
Destructive Button
- Background:
#DA373C - Text: white, same typography as primary
- Used for: "Leave Server", "Delete Message", "Kick User"
Tertiary / Ghost Button
- Background: transparent
- Text:
#5865F2(Blurple) for affirmative,#F23F43for destructive - No border, no fill — text link style
Icon Actions (Pin, Thread, Reply, Reaction, Share)
- Size: 20pt glyph, 36pt hit area
- Default:
#B5BAC1 - Hover/active:
#F2F3F5 - Active role (e.g. pinned):
#5865F2
Send Button (Compose Bar)
- Shape: Icon only (no container) when message short; becomes a
#5865F2circle 32pt when focused - Paper-plane icon 20pt
#5865F2or white (on filled circle)
Cards & Containers
Server Icon (Left Rail)
- Shape: Rounded square, 16pt corner radius default; transitions to 12pt corner radius on hover/active (the "squircle-to-squircle-er" effect)
- Size: 48pt × 48pt
- Padding between icons: 8pt vertical
- Active indicator: 4pt × 40pt vertical bar on the leading edge, white fill, 2pt from icon
- Unread indicator: 8pt × 8pt white dot on leading edge (shorter than active bar)
- Mention indicator: same position as unread dot,
#F23F43red, with white digit count - Custom server image OR initials (first 1-2 letters of server name) on Blurple gradient default background
- Folder grouping: servers can nest inside folders — folder icon is a 2x2 mini-grid of server icons
Channel List Row
- Height: 36pt
- Structure: leading
#(text channel),🔊(voice),📢(announcement), or custom icon → channel name → trailing pin icon + member count (voice only) - Background: transparent default,
#404249on hover,#35373Con active - Active channel: background
#404249+ white name + vertical leading accent bar#5865F23pt - Unread: channel name in white + a small white dot at the far-left
- Mentioned: channel name in white + red "@" pill with count trailing
Message Row
- Layout: 40pt avatar (leading, 16pt inset) → 12pt gap → (username + timestamp inline on first line; message body below)
- Grouping: sequential messages from same user within 5 min skip the avatar + username and just indent
- Padding: 4pt vertical (grouped) / 16pt vertical (first of group)
- Background: transparent default,
#2E3035on hover (desktop — mobile long-press instead) - Reply quote: nested above message, with leading vertical bar in that sender's role color
Voice Channel (Active)
- Channel row expands to show active participants
- Each participant: 24pt avatar + name in role color + speaking ring
- Speaking ring: 2pt green
#23A55Aring around avatar, pulses scale 1.0 → 1.1 when mic is active - Join button: "Join Voice" pill with
#23A55Abackground, white text - Already joined: green
#23A55Aphone icon indicator
Member List Row (Right Pane)
- Height: 44pt
- Structure: 32pt avatar with presence dot (8pt, position bottom-right) → username in role color → status text 12pt muted below
- Presence dot: bottom-right overlay, 2pt border matching canvas color
Navigation
Bottom Tab Bar (Mobile)
- Height: 50pt + safe area
- Tabs: Servers (default), Messages (DMs), Notifications, You (profile)
- Icon size: 22pt
- Active color:
#F2F3F5(white) - Inactive:
#949BA4 - Labels: gg sans 10pt weight 600
- Background:
#1E1F22(matches server rail)
Server Rail Navigation (Mobile) On mobile, the "server rail" is a left-edge drawer — swipe right from any chat to reveal the rail + channel list. Swipe left to close.
- Drawer width: ~75% of screen
- Left edge: 72pt server rail with vertical scroll
- Right side of drawer: 250pt channel list
- Tap a server icon: channel list re-populates for that server
- Tap a channel: drawer closes, chat loads
Chat Top Nav
- Height: 48pt + safe area
- Leading: hamburger / server-rail toggle + channel icon + channel name
- Trailing: pinned-messages icon + member-list icon + search icon
- Background:
#1E1F22with 1pt bottom divider#3F4147
Input Fields
Compose Bar
- Height: ~52pt min, grows multiline
- Background:
#383A40(Surface 2) — intentionally 1 step lighter than chat canvas - Corner radius: 8pt
- Leading + icon (attach file / media — 24pt
#B5BAC1) - Trailing: gift icon + GIF picker + sticker picker + emoji picker (each 22pt)
- Send icon: paper-plane 20pt
#5865F2when text present, gray when empty - Placeholder: "Message #general",
#949BA4 - Focus: subtle
#5865F2glow ring (2pt)
Search Bar
- Background:
#1E1F22 - Corner radius: 8pt
- Height: 36pt
- Leading magnifyingglass
#B5BAC1 - Placeholder: "Search",
#949BA4
Distinctive Components
Server Rail (The Defining Discord Component) The leftmost pane of rounded-square server icons is THE visual signature of Discord.
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Server rail drawer takes 85% of width; member list hidden |
| iPhone 13/14/15 | 390pt | Standard drawer at 75% width |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in nav |
| iPhone 15/16 Pro Max | 430pt | Drawer at 70% width |
| iPad | 768pt+ | Three panes visible in landscape: rail 72pt, channel list 240pt, chat flex-1 |
Dynamic Type
- Message body, username, channel name: respect Dynamic Type scaling
- Timestamps, tab labels, presence dot size: fixed
- Code blocks: respect Dynamic Type but capped at 18pt
Orientation
- Mobile portrait: single pane visible; swipe to switch
- Mobile landscape: two panes visible (channel list + chat)
- iPad: all orientations supported; three panes in landscape
Touch Targets
- Server icon: 48pt × 48pt — generous enough
- Channel row: 36pt height
- Send icon: 36pt hit area
- Avatar tap in chat: 40pt + 8pt hitSlop = 48pt effective
- Reaction chip: 36pt hit area
Safe Area Handling
- Top: safe area honored; Dynamic Island fits into the
#1E1F22nav bar - Bottom: tab bar and compose bar respect home indicator
- Side: server-rail drawer starts beyond safe area, slides in over content
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-discord {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #4a5262;
--heading-color: #4a5262;
--link-color: #0072ac;
--link-hover-color: #005079;
--border-color: #dee0e3;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(74,82,98,0.06);
--card-hover-shadow: 0 6px 18px rgba(74,82,98,0.12);
--header-bg: #4a5262;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6a717b;
--button-bg: #00a8fc;
--button-text-color: #000000;
--button-hover-bg: #0086c9;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f4f5f6;
--button-secondary-text-color: #4a5262;
--button-secondary-hover-bg: #e9eaec;
--button-secondary-border: 1px solid #dee0e3;
--prompt-bg: #f6f6f7;
--prompt-text-color: #4a5262;
--base-font: var(--font-mono);
--heading-font: var(--font-mono);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/messaging/discord/DESIGN.md· 26.5 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.