iOS Design Spec

# Fast, light, and flying
at the speed of a paper plane.

The Telegram iOS app, dissected. White canvas. One unmistakable blue. Bubbles at 13px. The brand is built around motion — and motion lives in restraint.

View Design Tokens Explore Surfaces
9:41
Search
All Chats Personal Channels Bots
DT
Durov's Channel
14:32
Pavel: A new update for stickers...
128
LM
Linh Mei
13:11
See you tomorrow at the cafe ✨
CB
Crypto Bot
12:47
/balance — BTC 0.024
JS
Jiang Shu
11:02
Voice message · 0:42
3
RX
React Devs
10:30
Dan: v19 just dropped 🚀
14
MS
Mom
Yesterday
call me when you wake up
SG
Savings Group
Mon
Anna: 📎 invoice_april.pdf
PG
Premium Gifts
Sun
A free month for you 🎁
Contacts
Calls
Chats
Settings
Chats
9:41
‹
LM
Linh Mei
last seen recently
Today
hey are you up for coffee tmrw morning?
10:32
yes! same place as last time?
10:33
Linh Mei
same place as last time?
yes, the one with the bookshelf
10:35
0:14
10:36
🐱
Message
Chat
9:41
‹
DT
Durov's Channel
894,521 subscribers
Pinned message
Telegram Premium is here. Tap to learn more.
Durov
A new generation of animated stickers is rolling out today. Expect smoother motion, smaller files, and full TGS support across all clients.
👍 12.4K 🔥 8.1K 🎉 3.2K
894K edited · 14:32
Durov
Quote replies now carry a colored vertical bar matching the original sender. Small, but it changes how threads feel.
👍 7.2K ❤️ 4.4K
412K 13:01
Contacts
Calls
Chats
Settings
Channel
iOS Surface Anatomy

## Three surfaces. One unmistakable blue.

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.

### Chats List

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.

### Chat Thread

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

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.

Animated Stickers

### Vector emotion at 60fps.

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`
😎
🐳
💖
🌱
🦄
🔥
Linh Mei
same place as last time?
yes, the one with the bookshelf 📚
perfect. 9am works?
Quote Reply

### A 2px bar carries the whole context.

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`
Telegram Premium

### A gold gradient that earns its keep.

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`
Telegram Premium
Premium Stickers
Exclusive animated packs
4 GB Uploads
Send 4 GB media files
2× Faster Downloads
No speed limits, anywhere
Design System Reference

## The whole vocabulary, in one place.

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.

View Source ↗

### Color

A single brand blue, a single bubble tint, and a four-step gray ladder. Premium adds gold. Everything else is white or near-white.

Primary Brand
Brand Blue
#229ED9
Legacy Blue
#0088CC
Light Blue
#5EC3F5
Bubble Out
#E1F0FA
Mark Gradient
light → deep
Surface & Border
Canvas
#ffffff
Surface Soft
#F7F7F8
Surface
#F4F4F5
Surface 2
#EBEDF0
Border
#E1E3E6
Text
Ink
#000000
Ink Soft
#1f1f1f
Muted
#707579
Dim
#a8a8ad
Tick Blue
#3E8EE0
Semantic / Premium
Online / Success
#54CB68
Negative
#E53935
Warning
#F0B400
Premium Gold
gradient
Avatar 1
peach

### Typography

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

### Radius

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%.

Minimal
2px
Tail
4px
Image
8px
Button
10px
Bubble
13px
Sticker
18px
Pill
500px
Avatar
50%

### iOS Spec Strip

The constants that anchor the iOS implementation across iPhone 12 mini through iPhone 16 Pro Max.

Tab bar height
83pt
Including 34pt home indicator safe area.
Chat avatar
44pt
Drops to 32pt in thread header, 30pt in pinned strip.
Bubble radius
13pt
Tail corner collapses to 4pt on incoming + outgoing.
Bubble padding
7×10pt
Compact vertical, generous horizontal. 2pt meta gap.
Read tick
13×11pt
Double check in #3E8EE0. Single check = delivered.
Search bar
36pt
Surface fill #F4F4F5. 10pt radius. 12pt side padding.
Unread badge
18pt
Min width 18, padding 0×6, accent blue or muted gray.
Animation
spring
0.35s, damping 0.7. Bubble entry from below + fade.

### Components

The tactile vocabulary — bubbles, ticks, badges, filter pills, premium gold. Composed of the same five primitives, recombined.

##### Buttons

Send Message Mute Channel Subscribe Open Bot

##### Inputs & Tags

128 @mention Premium

##### Bubbles

hey are you up for coffee?
yes! 9am works.
10:33
View source ↗