#
Message #general
Discord
Bug triage in #general
Discord's row-based layout with coloured usernames and inline timestamps — a reproduction, diagnosis and green test run in four lines.
Open the Discord generator →Discord examples
Discord chat screenshot examples
Discord mockups follow different rules from phone chats: a channel header instead of a contact, row-based messages, and coloured usernames that carry a role. The examples here are rendered by our Discord chat generator, from #general triage and an announcements-style scene to a hobby server past midnight.
#
Message #announcements
Discord
Community event announcement
A creator pinning an event in #announcements with coloured roles and quick member reactions — Discord's community rhythm in one screen.
Open the Discord generator →#
Message #producers
Discord
Late-night music server
A hobby Discord server past midnight: coloured usernames, grouped messages with inline timestamps, and the dark surface that is the app's native tone.
Open the Discord generator →Why these compositions work
Discord has rows, not bubbles
The first thing to unlearn about Discord is the bubble. Messages are full-width rows against a flat surface, and nobody — including you — gets a right-aligned capsule. In the general-channel triage scene your own patch note sits on the left exactly like the others; you know it is yours from the username and avatar, not because it shifted sides. This is why a Discord mockup built from WhatsApp parts is obvious to anyone who uses the app: the left-right split, the rounded blue bubble, the tail — none of them exist here. When you compose a scene, think in lines rather than boxes. The layout is denser than a phone chat, so a little text goes a long way and the column itself is the only container.
Avatar, name and time appear once
Discord groups a person's consecutive messages under one header: a 40px avatar, the coloured username, and an inline timestamp like Today at 9:32, all on a single line. Any further message from that person is indented underneath with just the text — no repeat of the avatar, name or time. That is the opposite of phone chats, where each bubble is its own unit. It also changes what you write: a burst of three lines reads as one thought, so short continuation lines feel natural and clean. The timestamp marks the rhythm of the channel, and because it appears once per group you get far fewer of them than in a bubble app. Getting that grouping right is most of what makes a Discord screenshot believable.
Dark is the native Discord tone
Discord's default surface is a dark grey, not a black, and that specific value — #313338 — is the app's identity. Text runs a soft off-white (#dbdee1) rather than pure white, secondary text and timestamps drop to a muted grey (#949ba4), and the accent that shows up on links and role names is blurple (#5865f2). A light render exists, but it is the exception, so our examples lean dark and let the coloured usernames carry the contrast. Notice what dark mode is not: it is not the light theme inverted. The greys are lifted deliberately so long reading sessions stay comfortable, and the message input sits a shade above the channel background. Repaint the whole thing pure black and it stops looking like Discord.
Design details we reproduce
- Row-based message layout with compact avatars and inline timestamps
- Per-member username colours that read like role colours
- Channel-style header with a subtitle instead of a presence line
- Dark mode as the native tone, with a light render available too
Where these scenes shine
Bug triage and community event threads are the two Discord staples — one shows the tool as a workspace, the other as a creator's community hub.
Make your Discord mockup →Discord mockup questions
Can I change the channel name?
Yes — the Title field is the channel name and the Subtitle field sits under it, so you can set #general, #announcements or your own community's naming.
Do usernames keep their colours?
Each participant can have their own colour, applied to their username on every message — the same way role colours colourise Discord member names.
Is there a dark mode version?
One example is already dark, and the generator's Appearance toggle flips the entire mockup — bubbles, header and background — in one click.