The Telegram iOS app, dissected. White canvas. One unmistakable blue. Bubbles at 13px. The brand is built around motion — and motion lives in restraint.
Telegram on iOS is white-canvas, glass-blurred, and unhurried. Every screen earns its place through the same rules — generous spacing, 13px bubbles, and a single accent that does all the heavy lifting.
Pinned chats float above. Filter pills run across the top — All Chats · Personal · Channels · Bots. Unread counts come in blue #229ED9; muted chats fall back to gray.
Incoming bubbles are white with a 1px hairline. Outgoing bubbles sit on #E1F0FA — soft sky blue, never saturated. Tail-corner radius drops from 13px to 4px.
Channel posts get full-width cards on a faint gray canvas. Reactions chip-row docks below. View counts ride on tabular figures — every post is read by hundreds of thousands.
Telegram pioneered TGS — vector animated stickers compressed under 30KB. Premium adds a sister format with fuller motion, particle effects, and synced sound. The sticker drawer is a first-class surface, never a footnote.
Stickers obey their own radius: 18px on cells, no padding on the bubble — they break the bubble grammar on purpose.
cell: 80×80
radius: 18px
format: .tgs
maxSize: 30KB
Reply to any message and Telegram inlines a quote — sender name in their personal accent, preview text below, then your reply. The vertical bar borrows the sender's color, so threads stay legible without expanding the bubble.
Quote bars use 2px width, 2px radius, sit 6px from the left edge of the bubble padding.
bar: 2px
radius: 13px
inset: 6px 8px
Premium is the one place Telegram allows itself a non-blue accent. A linear gold #F6BE3B → #E89A1A appears on the subscription badge, the star icon next to premium usernames, and on the upsell sheet — and nowhere else.
The gold is paired with the same radius vocabulary as the rest of the app, so it reads as a feature flag, not a brand reset.
#F6BE3B → #E89A1A
shadow: 24/30%
star-icon: 14×14
Every token Telegram's iOS app reaches for — color, type, radius, components. Light-mode canonical; dark mode is a free inversion. The blue is the only accent you don't get to negotiate.
A single brand blue, a single bubble tint, and a four-step gray ladder. Premium adds gold. Everything else is white or near-white.
SF Pro on device — substituted here with Inter. Three weights only: 400 / 500 / 600. Tabular figures on times, view counts, and unread badges so numbers never jitter.
| Token | Sample | Size | Weight | Notes |
|---|---|---|---|---|
| --nav-title | Chats | 17 / 1.06rem | 600 | centered |
| --chat-name | Linh Mei | 17 / 1.06rem | 600 | list rows |
| --bubble-body | see you tomorrow at the cafe ✨ | 15 / 0.94rem | 400 | line 1.35 |
| --preview | Pavel: A new update for stickers... | 15 / 0.94rem | 400 | muted |
| --time | 14:32 | 13 / 0.81rem | 400 (tnum) | right-align |
| --meta-time | 10:33 | 11 / 0.69rem | 400 (tnum) | in-bubble |
| --button | Edit | 15 / 0.94rem | 600 | accent blue |
| --badge-count | 128 | 13 / 0.81rem | 600 (tnum) | pill 9px |
| --date-sep | Today | 11 / 0.69rem | 500 | pill on gray |
Bubbles land at 13px — Telegram's signature corner — collapsing to 4px on the tail. Buttons at 10px. Search bar at 10px. Avatars and channel icons always 50%.
The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.
The tactile vocabulary — bubbles, ticks, badges, filter pills, premium gold. Composed of the same five primitives, recombined.