iOS Design Spec

# Where it's safe
to talk, kinda loud.

The Discord iOS app, dissected. A dark canvas built around the server rail. Blurple is the only system color. Role tints, role tints everywhere.

View Design Tokens Explore Surfaces
9:41
DZ
RN
CS
AI
+
Direct Messages
Friends 3
@marie
typing...
@danielx
sent a gif
2
@kira
do not disturb
@cosmo
offline · 2d
@penny
In voice · #lounge
study-group (4)
a: see you tonight
Servers
DMs
Search
You
Direct Messages
9:41
DZ
RN
CS
design-zone
INFO
rules
welcome
TEXT
general
figma-talk
showcase
VOICE
lounge
deep-work
# figma-talk
marie ADMIN 10:32
heads up — we're moving the auto-layout review to Thursday 3pm.
👍 4 🔥 2
daniel 10:34
works for me. #showcase looks ready too
cosmo 10:36
@jiang-shu the variants you posted are 🔥. quick question on tokens.
🚀 6
penny BOT 10:38
Reminder set for Thursday 3:00 PM — auto-layout review.
+
Message #figma-talk
Servers
DMs
Search
You
#figma-talk
9:41
lounge 4 in voice
marie
🎮 Valorant
daniel
cosmo
📝 VS Code
penny
Servers
DMs
Search
You
Voice Channel
iOS Surface Anatomy

## Three surfaces. One unmistakable Blurple.

Discord on iOS lives in a dark canvas. The server rail is the spine. Every conversation is one tap into a server, then one tap into a channel — depth in a 390pt screen.

### Servers / Channel

The 46pt server rail anchors the left edge. Active server: rounded square + 30pt white indicator. Channels tree at 96pt. Usernames render in role color: `admin = red`, `mod = green`, `bot = blurple`.

### Direct Messages

Same server rail; the DM list takes the place of the channel tree. Status dots ride the avatar's bottom-right with a 2.5pt cutout. Unread chips in red `#F23F43`.

### Voice Channel

2-column tile grid. Speaking tiles get a 2pt green outline. Activity strings ride bottom-left: `Playing Valorant`. Bottom dock = mute / deafen / video / disconnect.

Role Colors

### Usernames carry the org chart.

Discord encodes hierarchy in color. The same message becomes red when sent by an admin, green by a mod, blurple by a bot, yellow by a custom role. Roles compose — the top role wins.

Role color appears on the username, the role badge pill, and (if configured) the member list border.

`admin: #F23F43` `mod: #23A559` `bot: #5865F2` `yellow: #F0B232`
marie ADMIN
heads up — moving review to Thursday.
daniel MOD
works for me.
cosmo
the variants look great.
penny BOT
Reminder set for Thursday 3pm.
Online
Idle
Do Not Disturb
Offline
Status Ring

### A 4pt cutout that says everything.

Status sits at 11pt on small avatars, 18pt on profile cards. The dot is solid-fill — green / yellow / red / gray — and the avatar mask carries a notch underneath so the dot reads as cut-out, not overlaid.

Custom statuses replace the dot with an emoji at the same 18×18 mask. Streaming uses the purple variant.

`online: #23A559` `idle: #F0B232` `dnd: #F23F43` `offline: #80848E`
Reaction Picker

### Long-press becomes a feeling.

Long-press any message and Discord lifts a Blurple-edged picker over the chat. Frequently used emoji float to the top row. Custom server emoji appear in their own tab.

Reactions render below the message as chip pills, outlined Blurple when you've reacted, gray-outlined when you haven't.

`picker: 12px radius` `chip: 8px radius` `active: #5865F2 border`
daniel
works for me. #showcase looks ready too
👍 4 🔥 2 🚀 6
😀😂❤️👍🔥🚀
Find the perfect reaction
Design System Reference

## The whole vocabulary, in one place.

Every token Discord's iOS app reaches for — dark surface ladder, role colors, status palette, radius. Light mode exists, but dark is canonical.

View Source ↗

### Color

Four shades of near-black, one Blurple, four status dots, five role colors. That's the whole brief.

Primary Brand
Blurple
#5865F2
Blurple Hover
#4752C4
Blurple Deep
#404EED
Blurple Soft
#A9B0FF
Mention Blue
#00B0F4
Surface (dark canonical)
Rail BG
#1E1F22
Deep BG
#2B2D31
Chat BG
#313338
Surface 1
#383A40
Hover
#404249
Text
White
#ffffff
Ink Soft
#DBDEE1
Muted
#B5BAC1
Dim
#80848E
Border
#3F4147
Status & Roles
Online / Mod
#23A559
Idle
#F0B232
DND / Admin
#F23F43
Pink Role
#EB459E
Offline
#80848E

### Typography

gg sans / Ginto Nord on device — Inter as substitute. Tight tracking on display, regular weight on body. Usernames always 600. Channel names sentence-case in `#`.

Token | Sample | Size | Weight | Notes
--- | --- | --- | --- | ---
--server-name | design-zone | 18 / 1.13rem | 700 | top of tree
--channel-name | # figma-talk | 16 / 1.00rem | 600 | head bar
--username | daniel | 16 / 1.00rem | 600 | role-tinted
--message-body | works for me | 16 / 1.00rem | 400 | line 1.375
--timestamp | 10:34 AM | 12 / 0.75rem | 500 | tnum
--role-badge | ADMIN | 10 / 0.63rem | 700 | solid fill
--ct-row | general | 14 / 0.88rem | 500 | 600 if unread
--ct-cat | TEXT CHANNELS | 11 / 0.69rem | 700 | category
--mention | @jiang-shu | 16 / 1.00rem | 600 | highlights row

### Radius

Server icons morph 50% → 16px on selection. Channel rows stay at 4px. Buttons at 8px. Modals at 16px. Avatars are always perfect circles.

Minimal
2px
Row
4px
Button
8px
Server Active
10px
Card
12px
Modal
16px
Pill
9999px
Avatar
50%

### iOS Spec Strip

Anchors across iPhone 12 mini through iPhone 16 Pro Max.

Server rail
72pt
Server icons render at 48pt. Indicator pill 4pt wide.
Channel tree
240pt
Drawer width on phone; row height 32pt.
Avatar size
40pt
28pt in DM list, 64pt on profile, 11pt status dot.
Message gap
16pt
Stack between distinct authors; 4pt within author run.
Mention bg
14%
#F0B232 at 14% opacity, 2pt left border.
Tab bar
83pt
Five tabs on phone; rail BG fill #1E1F22.
Status dot
11pt
2.5pt notch cut from host avatar.
Animation
spring
0.3s easeInOut. Server-icon morph on selection.

### Components

Pills, role badges, status dots, message rows. The atom is the message row — everything else is a wrapper.

##### Buttons

Join Server Send Friend Request Cancel

##### Status & Roles

Online Idle Do Not Disturb BOT

##### Message Row

marie ADMIN 10:32
heads up — moving the review.
👍 4
View source ↗