Discord Mobile — design system & UI screens

Communication · 3 screens · discord.com

This is a chat application for messaging with custom emoji, GIFs, and sticker support. The screen shows a #general channel conversation thread with user messages and a tabbed input panel below—emoji, GIFs, and stickers are selectable via tabs, with a search field and frequently-used emoji displayed for quick access.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/discord-mobile.

Decoded design system

Discord Mobile's decoded design system: background #1C1D23, text #FFFFFF, accent #5865F2, link #5865F2, primary #5865F2; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #5865F2 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#1C1D23`
surface	`#292A30`
border	`#3E3E44`
text	`#FFFFFF`
text_muted	`#A8A9AB`
primary	`#5865F2`
accent	`#5865F2`
link	`#5865F2`
button_bg	`#5865F2`
button_text	`#1C1D23`

Using these colors

Action color #5865F2 — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #5865F2 — one role, not several (the action color).
accent #5865F2 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

h1: 34px
h2: 22px
body: 17px

Spacing

base unit: 4px
scale: 4px, 10px, 12px, 16px, 20px, 24px, 28px, 35px, 40px, 42px

Radii

base: 12px
button: 12px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 300ms (dominant) with ease.

durations: 300ms · 250ms · 400ms
easings: ease · ease-in-out
animated properties: font-variation-settings, transform, opacity, background-color

Native design tokens

Token	Value
`--not-quite-black`	`#23272a`
`--blurple`	`#5865f2`
`--black`	`#000`
`--white`	`#fff`
`--dark-charcoal`	`#2c2f33`
`--dark-button-hover`	`#3b3b3b`
`--button-hover`	`#8891f2`
`--greyple`	`#99aab5`
`--spring-green`	`#57f287`
`--dim-grey`	`#50555f`

…and 110 more measured on the page.

Button states (measured)

primary hover: box-shadow rgba(0, 0, 0, 0.2) 0px 8px 15px 0px · background #C7C8CE

Layout (measured)

container max-width: 1240px
nav: 80px absolute

Motion choreography (measured)

Scroll reveal: 3 elements rest at translateY(-100px).

Responsive (measured)

breakpoints: 450px · 550px · 595px · 768px · 834px · 1024px
mobile (390px): hero 44px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →