A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
1radius steps
8pxspacing base
Telegram, in one page
Telegram's iOS app is a messenger that lets the user's taste dominate the chrome. Out of the box it ships a confident Sky Blue (#0088CC) accent over a true-white or pure-black canvas, but the entire color system is a "themeable surface" — users can pick any hex code as an accent, apply custom chat backgrounds, even import community themes with rainbow gradients. That theming flexibility is the brand. A Telegram install in 2026 can look like anything from a corporate blue client to a neon-purple night-theme maximalist setup, and all of it is *still* unmistakably Telegram because the UI rhythm — bubble shape, nav structure, type scale, gesture language — holds steady no matter what color is poured in.
The default light experience is a clean white canvas with Sky Blue (#0088CC / #40A7E3) accents on the send button, the active tab, and the link color. The default dark experience is a crushed near-black (#212121 or even #000000 on OLED mode) that maximizes battery life and readability. Where WhatsApp chose a warm cream wallpaper, Telegram chose *emptiness*: chat canvas is a flat color by default. The mood is Russian-tech-maximalist — lots of white space, lots of speed, lots of customization hooks; think Durov-aesthetic where every screen feels engineered rather than designed.
Typography is SF Pro on iOS, rendered with Telegram's very particular attention to size hierarchy. Chat bubbles default to 17pt regular; contact names 17pt semibold; timestamps 11pt. But Telegram's real typographic signature is how it renders *expressive content*: animated emoji (Lottie-level vector animations on message-sent triggers), custom sticker packs that auto-scale, syntax-highlighted code blocks in monospace, and message formatting (bold, italic, spoiler, quote, code) applied inline. A Telegram chat is a typographic playground in a way WhatsApp's intentionally is not.
Key Characteristics:
- Sky Blue (
#0088CC/#40A7E3) default accent — but every color is themeable, including custom user-picked hex - True white canvas (
#FFFFFF) light / crushed black (#212121or#000000OLED) dark - Outgoing bubble (
#2B86FDblue, default theme) — bubble color is themeable; some themes use gradients - Custom chat backgrounds per-chat (gradients, patterns, photos, solid colors)
- Swipe-from-edge to reply — full-screen iOS-native pan gesture, not a right-swipe on the row
- Floating mini-player for voice messages and music — pinned across chat navigation
- Animated emoji + sticker packs (Lottie-style vector animations) that play on send
- Silent message send (long-press the send button) — a signature Telegram gesture
- Secret chats with self-destruct timers — visually distinct with a lock icon on the chat header
- Channel vs Group distinction — broadcast-only channels have "Subscribers" (no reply affordance)
- Custom Telegram-style outlined icons — NOT SF Symbols everywhere, a proprietary icon vocabulary
- Up to 2GB file sharing, shown inline as a progress card
- OLED dark mode (
#000000) as a toggle option separate from standard dark
Do's and don'ts
Do
- Use
#0088CC(Telegram Blue) as the default accent — but build the system so accent is a single variable that users can change - Use
#2B86FDfor outgoing bubbles in default blue theme; support accent-tinted outgoing bubbles - Respect user-selected chat backgrounds (solid, gradient, tile, photo)
- Use SF Pro + Telegram's proprietary outlined icon vocabulary (NOT SF Symbols alone)
- Offer OLED dark mode (
#000000) as a distinct option from default dark - Support inline Markdown-ish formatting (bold, italic, spoiler, code, pre)
- Animate single-emoji messages with Lottie playback
- Include the silent-send and scheduled-send long-press gesture on the send button
- Use the floating voice mini-player when audio is playing — pin it across chats
- Use swipe-from-edge (not swipe-from-row) to trigger reply
Don't
- Don't hardcode accent color — theme it; the accent variable should cascade
- Don't use WhatsApp's asymmetric tail — Telegram bubble tails are SUBTLY notched (6pt), not pointed
- Don't use warm cream chat backgrounds; Telegram defaults to cool white/soft-blue or pure dark
- Don't use SF Symbols for everything — Telegram's tab bar uses outlined custom glyphs
- Don't dim the whole screen on long-press — only the backdrop around the context menu blurs
- Don't use shadows on chat bubbles — they're flat
- Don't hide the read-receipt timestamp — Telegram shows time + ticks consistently
- Don't auto-delete messages without the secret-chat UI indicating it
- Don't use green for read receipts (that's WhatsApp) — use accent-colored check-check
- Don't skip the scheduled-send option — it's a core differentiator
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Telegram design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Telegram Blue: #0088cc
- Sky Blue: #40a7e3
- Bubble Blue (Outgoing): #2b86fd
- Deep Blue (Pressed): #0071b0
- Canvas: #ffffff
- Surface 1: #f7f7f7
- Surface 2: #efeff4
- Divider: #c7c7cc
- Canvas (Dark): #212121
- Surface 1 (Dark): #1c1c1c
Type:
- families: SF Pro Text, SF Pro Display, Fallback Stack, SF Mono
- scale: 10, 11, 12, 13, 14, 15, 16, 17, 34
- weights: 400, 500, 600, 700
Shape:
- radius: 17
- elevation: Background: `#FFFFFF` light / `#1C1C1C` dark, with subtle shadow
Spacing: 8
Rules:
- Use `#0088CC` (Telegram Blue) as the default accent — but build the system so accent is a single variable that users can change
- Use `#2B86FD` for outgoing bubbles in default blue theme; support accent-tinted outgoing bubbles
- Respect user-selected chat backgrounds (solid, gradient, tile, photo)
- Use SF Pro + Telegram's proprietary outlined icon vocabulary (NOT SF Symbols alone)
- Offer OLED dark mode (`#000000`) as a distinct option from default dark
- Support inline Markdown-ish formatting (bold, italic, spoiler, code, pre)
Avoid:
- Don't hardcode accent color — theme it; the accent variable should cascade
- Don't use WhatsApp's asymmetric tail — Telegram bubble tails are SUBTLY notched (6pt), not pointed
- Don't use warm cream chat backgrounds; Telegram defaults to cool white/soft-blue or pure dark
- Don't use SF Symbols for everything — Telegram's tab bar uses outlined custom glyphs
- Don't dim the whole screen on long-press — only the backdrop around the context menu blurs
- Don't use shadows on chat bubbles — they're flat
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Default Blue Theme)
- Telegram Blue (
#0088CC): Classic accent — nav bar tint, text links, active tab icon. - Sky Blue (
#40A7E3): Lighter accent — selection highlights, toggles ON. - Bubble Blue (Outgoing) (
#2B86FD): Outgoing chat bubble fill in the default blue theme. - Deep Blue (Pressed) (
#0071B0): Pressed state for primary blue buttons.
Accent Variants (User-Selectable)
Telegram lets the user pick any accent color. The UI adapts — every blue surface re-paints to the chosen hex. Common accent palette Telegram offers:
- Green Mint (
#3FC1B0), Rose (#FF5C77), Orange (#FB8C4A), Purple (#6F7BF7), Raspberry (#C9426B), Cyan (#2AAFBA), Yellow (#FFAC45).
Canvas & Surfaces (Light Theme)
- Canvas (
#FFFFFF): Chat list, settings, chat canvas when no wallpaper set. - Chat Background (Default Blue Wallpaper) (
#DBE7F4): Default soft-blue chat wallpaper (though user can set any). - Surface 1 (
#F7F7F7): Section group background, settings list tint. - Surface 2 (
#EFEFF4): iOS grouped list background. - Divider (
#C7C7CC): Hairline separator (iOS default tint).
Canvas & Surfaces (Dark Theme — Default)
- Canvas (Dark) (
#212121): Standard dark canvas — a crushed near-black. - Surface 1 (Dark) (
#1C1C1C): Card background, elevated surface. - Surface 2 (Dark) (
#2C2C2E): Bottom-sheet, modal, context-menu background. - Divider (Dark) (
#383838): Dark-mode hairline separator.
Canvas & Surfaces (OLED Dark — Optional)
- OLED Canvas (
#000000): Pure black for OLED battery savings. - OLED Surface (
#0A0A0A): Subtle elevation over pure black.
Chat Bubbles
- Outgoing Bubble (Light) (
#2B86FD): Default blue theme — bubble background. - Outgoing Bubble Gradient: Some themes use
#2B86FD → #61B3FFvertical gradient. - Outgoing Text (
#FFFFFF): White text on blue bubble. - Incoming Bubble (Light) (
#FFFFFF): White fill with 1pt#E5E5E5border. - Incoming Bubble (Dark) (
#2A2A2A): Dark-mode incoming fill. - Secret Chat Outgoing (
#4EA53Cgreen tint): Secret chat messages are subtly different.
Text
- Text Primary (Light) (
#000000): Bubble text, contact names, titles. - Text Secondary (Light) (
#707579): Message preview, timestamps, metadata. - Text Tertiary (Light) (
#A0A6AD): Placeholder, disabled. - Text Primary (Dark) (
#FFFFFF): Dark-mode primary. - Text Secondary (Dark) (
#8D8E93): Dark-mode metadata.
Semantic
- Read Receipt Blue (
#0088CC): Double check = seen. Color matches accent. - Sent Gray (
#B1B1B1): Single check = sent. - Error Red (
#E53935): Destructive actions, failed send. - Destructive Red (
#E35561): Delete chat, block user, kick member. - Online Green (
#4DD364): "Online now" status under contact name. - Verified Blue (
#0088CCwith check): Verified channels / users. - Premium Purple (
#AE6FFD → #CE6BFFgradient): Telegram Premium badge, stars, and special reactions.
Sender Colors (Group Chats)
Telegram assigns each sender a color from a 7-color palette for their name in group chats — for scannability. Typical palette:
#FC5C51(red),#FA790F(orange),#895DD5(purple),#0FB297(green),#00C1A6(teal),#3CA5EC(blue),#FF5274(pink).
Message States
- Unread Divider (
#B1B1B1text +#E5E5E5line or#0088CCaccent): Horizontal "Unread messages" line dividing old and new messages in a chat.
Type scaleRead the full spec
Font Family
- Primary:
SF Pro Text(body) andSF Pro Display(titles) — iOS native. Telegram ships no proprietary font in its mobile app. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Monospace:
SF Mono— used in code blocks (triple-backtick Markdown), pre-formatted text. - Emoji: Apple Color Emoji — Telegram also supports custom emoji packs that render as animated Lottie files inline.
- Non-Latin: Full iOS font substitution; Telegram is heavily used in Cyrillic, Arabic, Persian, CJK.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Large Title | SF Pro Display | 34pt | 700 | 1.12 | 0.37pt | "Chats", "Settings" large titles |
| Screen Title | SF Pro Display | 17pt | 600 | 1.18 | -0.4pt | Nav bar title collapsed state |
| Contact Name | SF Pro Text | 17pt | 600 | 1.23 | -0.4pt | Chat list, profile titles |
| Bubble Body | SF Pro Text | 17pt | 400 | 1.29 | -0.4pt | Chat bubble text |
| Bubble Sender (Group) | SF Pro Text | 14pt | 600 | 1.23 | -0.2pt | Sender name inside bubble (tinted color) |
| Message Preview | SF Pro Text | 15pt | 400 | 1.33 | -0.2pt | Chat list last message preview |
| Timestamp (List) | SF Pro Text | 13pt | 400 | 1.2 | 0pt | Chat list time |
| Timestamp (Bubble) | SF Pro Text | 11pt | 400 | 1.0 | 0pt | In-bubble timestamp |
| Section Header | SF Pro Text | 13pt | 400 | 1.2 | 0pt | iOS grouped list section labels |
| Body | SF Pro Text | 17pt | 400 | 1.4 | -0.4pt | Body text, Settings rows |
| Callout | SF Pro Text | 16pt | 400 | 1.3 | -0.3pt | Link previews, attachments |
| Footnote | SF Pro Text | 13pt | 400 | 1.3 | -0.1pt | Sub-copy, hints |
| Caption | SF Pro Text | 12pt | 400 | 1.3 | 0pt | Metadata, file sizes |
| Tab Label | SF Pro Text | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Button (Primary) | SF Pro Text | 17pt | 600 | 1.0 | -0.4pt | iOS native button type |
| Code (Monospace) | SF Mono | 15pt | 400 | 1.4 | 0pt | Inline code & code blocks |
| Blockquote | SF Pro Text | 17pt | 400 italic | 1.3 | -0.4pt | Quoted-reply block text |
Principles
- Defer to iOS: Like WhatsApp, Telegram's iOS app adheres to Apple HIG type sizes closely.
- Dynamic Type supported: Bubble text, contact names, message previews all scale.
- Inline formatting: Telegram renders bold, italic, underline, strikethrough, spoiler, code, pre, link as inline styling inside bubbles using Markdown-ish syntax (bold via
**, italic via__, spoiler via||). - Theme-coupled color: Link color and sender-name tints inherit from the user's chosen accent color.
- Animated emoji replace static: When a recipient sends a single emoji, Telegram often plays a fullscreen Lottie animation — type escapes its frame.
Components and layoutRead the full spec
Buttons
Primary Send Button (In Compose Bar)
- Shape: Tappable text/icon button, no container
- Icon: Custom Telegram paper-plane glyph (NOT SF Symbol) — 26pt
- Color:
#0088CC(accent) when text present; same as inactive when empty (showsmic/cameraicons instead) - Long-press: Opens silent-send / schedule-send menu
- Haptic: soft impact on send
Primary Button (Sheet / Onboarding CTA)
- Shape: Full-width rectangle, 10pt corner radius
- Height: 50pt
- Background:
#0088CC(accent) - Text: white, SF Pro Text 17pt weight 600
- Pressed:
#0071B0+ scale 0.98 - Used for: "Continue", "Log In", "Create Account", "Join"
Secondary Text Button
- Background: transparent
- Text:
#0088CC(accent) or#E53935(destructive) - Font: SF Pro Text 17pt weight 400
- No fill, no border — pure iOS link style
Floating Send in Compose (with morph)
- When text is empty: show mic + attach + camera icons (24pt each, gray
#707579) - When text is present: send paper-plane icon (
#0088CC) replaces the cluster - Crossfade morph on keystroke change
Floating Action Menu (Compose Attach)
- Triggered by + attach icon
- Bottom sheet with labeled grid: Photo/Video, File, Location, Contact, Poll, Music
- Each tile: 64pt circular blue icon + 13pt label beneath
Cards & Containers
Chat List Row
- Height: 76pt
- Structure: 54pt circular avatar (leading, 16pt inset) → 12pt gap → stacked (name + preview + verified check if applicable) → trailing (time + unread pill + muted icon + pinned icon)
- Background:
#FFFFFFlight /#212121dark - Pressed:
#F2F2F7light /#2C2C2Edark - Swipe-left: Mute, Delete, More
- Swipe-right: Read/Unread, Pin, Archive
- Pinned row: slightly shaded background
#F7F7F7and pin glyph trailing
Chat Bubble (Outgoing — Default Blue Theme)
- Max width: 80% of chat canvas
- Background:
#2B86FD(or gradient#2B86FD → #61B3FFin gradient themes) - Text color: white
- Padding: 8pt vertical, 12pt horizontal
- Corner radius: 17pt on all corners EXCEPT bottom-trailing which is 6pt (soft tail, not a full point)
- Trailing: 11pt white timestamp + double check read-tick (white)
- Tap-and-hold: reveals reactions + context menu (copy, reply, forward, edit, delete, pin)
Chat Bubble (Incoming)
- Max width: 80%
- Background:
#FFFFFFlight /#2A2A2Adark - Text color:
#000000light /#FFFFFFdark - 1pt border:
#E5E5E5light only (visible on plain-white wallpapers) - Corner radius: 17pt all corners EXCEPT bottom-leading which is 6pt
- Trailing: 11pt
#707579timestamp
Quote Block (Inline Reply Preview)
- Nested at TOP of bubble that's replying
- 3pt vertical accent bar on leading edge in sender's group color (or accent
#0088CC) - Background: 10% tint over bubble bg
- Sender name 13pt weight 600 in accent
- Quoted text 13pt regular, 2-line clamp
File Attachment Card (inside bubble)
- Horizontal card inside a bubble
- Leading 40pt circular icon (file type colored — PDF red, ZIP gray, music blue)
- File name 15pt weight 600 + size 13pt
#707579 - Tap to download; shows circular progress ring overlay on icon
Link Preview Card (inside bubble)
- Image (if available) at top, full-width of bubble (16pt corner radius inherited, no rounding inside bubble)
- Source name 13pt weight 600 accent color
- Title 15pt weight 600
- Description 13pt
#707579 - Appears above the message text, not below
Navigation
Bottom Tab Bar
- Height: 49pt + safe area
- Background:
.regularMaterialblur over#FFFFFF(light) /#1C1C1C(dark) at 92% opacity - Tabs: Contacts, Calls, Chats, Settings (iOS default; may vary per user preference)
- Icon: 28pt (Telegram custom outlined icons, NOT SF Symbols)
- Active color:
#0088CC(user accent) - Inactive:
#8D8E93 - Labels: SF Pro 10pt weight 500, always shown
- Badge: red circle with white count, top-right
Top Nav (Chat Screen)
- Height: 44pt + safe area
- Leading: back chevron + avatar (32pt) + contact name + typing/last-seen status (13pt gray)
- Trailing: video-call icon + phone-call icon + more-ellipsis (for secret chats: lock-icon replaces phone)
- Background: same blur treatment as tab bar
- Secret chat: small lock emoji next to the name — slight green-tint background
Top Nav (Chat List)
- Large-title "Chats" scroll-collapsing
- Leading: "Edit" text button
- Trailing: New chat icon (Telegram pencil-with-circle custom glyph)
- Search bar: pulls down on overscroll, 36pt pill
Input Fields
Compose Bar
- Height: ~44pt single-line, grows to 120pt multiline
- Structure: leading attach + icon → multiline text field → trailing emoji face → sticker icon → voice-mic OR send
- Background:
#FFFFFFlight /#1C1C1Cdark (elevated over chat canvas) - Input field: inline, no pill container (different from WhatsApp) — just a text field
- Placeholder: "Message", 16pt
#A0A6AD - Bottom 1pt
#E5E5E5divider from chat canvas
Search Bar
- Native iOS search bar (
.searchablein SwiftUI) - Background:
#F2F2F7light /#1C1C1Cdark - Height: 36pt
- Cancel button text: accent color
#0088CC
Distinctive Components
Animated Emoji / Sticker Playback Telegram's crown jewel. When a message contains exactly one emoji (or certain large emoji), it renders at a much bigger size and plays a Lottie animation on receipt/send.
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Bubble max 78%; avatar 50pt in chat list |
| iPhone 13/14/15 | 390pt | Standard 54pt avatar, 80% bubble |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in voice mini-player |
| iPhone 15/16 Pro Max | 430pt | Avatar grows to 56pt |
| iPad | 768pt+ | Split view: chat list left, conversation right; bubbles constrained to 60% of right pane |
Dynamic Type
- Bubble body, contact name, message preview: full scale
- Inline timestamp: fixed 11pt
- Tab labels: fixed 10pt
- Large title: scales to 40pt max
- Lottie emoji: scales with text size up to 96pt
Orientation
- Chat list / Settings: portrait-locked on iPhone
- Calls: rotate to landscape
- Media viewer: rotate to landscape
- iPad: all orientations supported
Touch Targets
- Send icon: 44pt effective hit
- Chat list row: 76pt
- Reactions palette emojis: 36pt glyph, 48pt hit
- Tab bar icons: 28pt glyph, 44pt hit
- Bubble swipe-to-reply threshold: 60pt drag
Safe Area Handling
- Top: safe area honored
- Voice mini-player: sits just below nav bar, above chat content
- Bottom: compose bar hugs safe area
- Keyboard: native iOS push
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-telegram {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #007ab8;
--link-hover-color: #005885;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #0088cc;
--button-text-color: #000000;
--button-hover-bg: #006699;
--button-border: none;
--button-border-radius: 17px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 17px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 82.6%
- life360 78.7%
- grammarly 77.5%
- nubank 77.4%
- plst 76.0%
Where this came from
- Source document
ios/design-md/messaging/telegram/DESIGN.md· 26.7 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.