The Discord iOS app, dissected. A dark canvas built around the server rail. Blurple is the only system color. Role tints, role tints everywhere.
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.
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.
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.
2-column tile grid. Speaking tiles get a 2pt green outline. Activity strings ride bottom-left: Playing Valorant. Bottom dock = mute / deafen / video / disconnect.
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
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
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
Every token Discord's iOS app reaches for — dark surface ladder, role colors, status palette, radius. Light mode exists, but dark is canonical.
Four shades of near-black, one Blurple, four status dots, five role colors. That's the whole brief.
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 |
Server icons morph 50% → 16px on selection. Channel rows stay at 4px. Buttons at 8px. Modals at 16px. Avatars are always perfect circles.
Anchors across iPhone 12 mini through iPhone 16 Pro Max.
Pills, role badges, status dots, message rows. The atom is the message row — everything else is a wrapper.