---
version: alpha
name: Telegram-design-analysis
description: "A fast, friendly messenger built around one cool sky blue and a very light, flat interface. Each platform keeps its own blue (iOS #0088ff, Android #2d7ed5 for outgoing bubbles, web #2481cc), light chrome with thin dividers, soft rounded message bubbles, and a fully themeable surface with day, night and tinted dark modes."
status: Draft
appVersion: "Android app 12.10.6 measured on an Android phone, 2026-10-07; source snapshot 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#2481cc"
  primary-hover: "#1a8ad5"
  accent-ios: "#0088ff"
  accent-android-text: "#238ae3"
  accent-android-fab: "#51a2e8"
  outgoing-bubble-android: "#2d7ed5"
  outgoing-bubble-android-night: "#366caf"
  incoming-bubble-android: "#f0f0f0"
  incoming-bubble-android-night: "#1f2123"
  ink: "#000000"
  ink-android: "#333333"
  ink-secondary: "#7d7f81"
  ink-secondary-android: "#808384"
  divider: "#e6e6e6"
  paper: "#ffffff"
  canvas-table-head: "#f7f7f7"
  accent-soft: "#e5f1fa"
  danger-android: "#e6555e"
  badge-ios: "#eb5545"
  on-primary: "#ffffff"
  dark-bg: "#17212b"
  dark-surface: "#232e3c"
  dark-text: "#e9edf1"
  dark-text-muted: "#828d99"
  dark-accent: "#3390ec"
  dark-accent-bright: "#5eb0f3"
  night-android-paper: "#181819"
  night-android-bar: "#232326"

typography:
  body:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  body-small:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  title:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
  display:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.2

rounded:
  xs: 2px
  sm: 4px
  md: 8px
  lg: 10px
  xl: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    height: 40px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
  incoming-bubble:
    backgroundColor: "{colors.incoming-bubble-android}"
    textColor: "{colors.ink-android}"
    rounded: "{rounded.xl}"
    padding: 8px
  table-header:
    backgroundColor: "{colors.canvas-table-head}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
  dark-card:
    backgroundColor: "{colors.dark-surface}"
    textColor: "{colors.dark-text}"
    rounded: "{rounded.lg}"
    padding: 16px
---

## Overview

Telegram looks like a light, quick, uncluttered messenger. Everything is flat, thin dividers separate rows, and a single sky blue marks the things you can act on. The product leans on theming: users can change accent colors, bubble colors and wallpapers, so the system is built around swappable color roles more than fixed colors. [Measured]

What defines the look:

1. **A family of blues, not one blue.** The brand blue is not identical across platforms. The website uses `#2481cc`, the iOS default accent is `#0088ff`, and the bundled Android day theme uses `#238ae3` for links, `#51a2e8` for the compose button and `#2d7ed5` for outgoing bubbles. [Measured]
2. **Bubbles carry the identity.** Outgoing messages are the accent color or a soft green-tinted default; incoming messages are white or a very light gray. On the Android day theme the device shows the green default, `#efffde` outgoing on `#ffffff` incoming. [Measured on a device]
3. **Light chrome, and chrome that floats.** Dividers are `#e6e6e6` on the web and bars are white. On Android the chrome has moved further: the bottom navigation floats clear of the window edges, and a conversation replaces its top and bottom bars with separate translucent capsules over a full-bleed wallpaper. [Measured on a device]
4. **Theme as a feature.** Android bundles five themes (day, night, arctic, blue bubbles, dark blue) and iOS ships day, dark and tinted-dark base themes with a user-chosen accent. [Measured]

Source for this file: the public Android and iOS repositories and the telegram.org stylesheets, read on 2026-10-06, plus the Android app captured on a real phone on 2026-10-07. The Android section is now measured on the device. iOS is still unseen. See Known Gaps.

## Core

### Colors

| Role | Value | Where |
|------|-------|-------|
| Website accent and buttons | `#2481cc`, hover `#1a8ad5` | telegram.org |
| Website dark accent | `#3390ec`, bright `#5eb0f3` | telegram.org dark mode |
| iOS default accent | `#0088ff` | iOS app |
| Android link text | `#238ae3` | Android day theme |
| Android compose button | `#51a2e8` (night `#5ea0db`) | Android |
| Outgoing bubble | `#2d7ed5` (night `#366caf`) | Android bundled themes |
| Incoming bubble | `#f0f0f0` (night `#1f2123`) | Android bundled themes |
| Text | `#000000` on the web, `#333333` on Android day | |
| Secondary text | `#7d7f81` web, `#808384` Android | |
| Divider | `#e6e6e6` (Android `#e6e6e6`, web table border `#e6e6e6`) | |
| Soft accent fill | `#e5f1fa` | website tables and callouts |
| Danger | `#e6555e` | Android red text |
| Unread badge (iOS) | `#eb5545` | iOS dark theme badge |
| Dark background and surface | `#17212b`, `#232e3c` | website dark mode |
| Dark text and muted text | `#e9edf1`, `#828d99` | website dark mode |

All values are [Measured] from source. iOS also has many values computed from the accent color at runtime (for example outgoing bubbles are a hue-shifted variant of the accent), so no single hex exists for them.

The Android app was then sampled on a device on its default day theme, and three of the rows above turn out to describe bundled themes the app does not ship as its default. These are the values the shipping app draws, and they replace the source figures for anything about the Android app:

| Role in the Android app | Day | Night |
|------|-------|-------|
| Chat list page | `#ffffff` | `#1d2733` |
| Settings page (recessed) | `#f1f1f3` | `#151e27` |
| Card and grouped surface | `#ffffff` | `#1d2733` |
| Search field fill | `#f4f4f5` | |
| Incoming bubble | `#ffffff` | `#232e3b` |
| Outgoing bubble | `#efffde` | not stock on this device, see Known Gaps |
| Chat wallpaper | a green gradient around `#90bb8a` with line doodles | near black with colored line doodles |
| Compose button | `#229af0` | |
| Wordmark and accent text | `#168bdb` | `#64b5ef` |
| Selected folder tab | fill `#e6f1f9`, label `#298acf` | |
| Selected navigation tab | fill `#e9f3f9` | |
| Body text | `#1a1d21` | `#e9eef4` |
| Secondary text | `#75787a` | `#7d8b99` |
| Reply quote fill | `#f5effb` | |
| Delivered check marks | `#5db050` | |

All [Measured on a device]. The day outgoing bubble is the classic pale green `#efffde`, not the blue `#2d7ed5` the source row names, and the day incoming bubble is plain `#ffffff`, not `#f0f0f0`. The night page is the blue-gray `#1d2733`, not the near-black `#181819`. Those three source values belong to other bundled themes, not to the one the app opens on.

### Typography

System-first. [Measured]

- **Website:** `'Roboto', sans-serif` with Helvetica Neue Light as the display face. Body text is 14 to 15px, small text 13px, and headings go up to 20 to 26px. Weights in use are 300, 400, 500 and 600, plus bold. The documentation uses `15px` with a `1.6` line height.
- **Android:** the system sans (Roboto) with medium-weight emphasis. [Inferred from the Telegram code style]
- **iOS:** the system font (San Francisco). [Inferred]

### Shape and spacing

Rounded but modest. [Measured]

- Website radii: `4px` (most common), `3px`, `10px`, `16px` and `999px` for pills.
- Message bubbles are noticeably rounder than controls, with large radii. [Inferred]
- Website spacing uses a `16px` base unit.
- Shadows are rare: the website uses `0 2px 4px rgba(0,0,0,0.1)` and an inset `0 1px 1px rgba(0,0,0,0.075)` on inputs.

### Iconography and motion

Simple outlined icons that follow the text color, with the accent color for the selected tab or action. [Inferred] Motion in the apps is expected to be smooth and spring-like, but no motion values were extracted. [Inferred]

### Themes

- **Android:** five bundled theme files: day, night, arctic, blue bubbles and dark blue. In the night theme the page is `#181819`, the action bar `#232326` and the accent text `#64b5ef`. [Measured]
- **iOS:** a default day theme, a dark theme and a tinted dark theme, all customizable by accent color and wallpaper. [Measured]
- **Web:** a light and a dark mode on telegram.org, with the dark mode on `#17212b`. [Measured]

## Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

### Back and up navigation

Expected on iOS: chevron plus previous title, swipe from the left edge.

Follows the iOS pattern with a custom navigation bar whose button color is the accent color. [Measured] Swipe-from-edge to go back is expected. [Inferred]

### Primary navigation

Expected on iOS: bottom tab bar, about five items.

A custom themed tab bar. Selected icon and label take the accent color. The tab set is the usual messenger structure (chats, contacts, calls, settings) but the exact items must be confirmed on a device. [Inferred]

### Main action

Expected on iOS: nav bar or bottom bar button.

The compose action sits in the navigation bar, not as a floating button. [Inferred]

### Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Custom themed alert and action controllers that match the active theme. [Measured] Many surfaces use translucent backgrounds, for example `rgba(255,255,255,0.7)` and `rgba(249,249,249,0.78)` in the day theme. [Measured]

### Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Uses its own control set rather than the stock iOS ones, themed per color role (switches, check marks, input fields). The input field fill is `#f2f2f7`. [Measured]

### Text sizing

Expected on iOS: Dynamic Type.

The theme settings include a font size slider, so text size is adjustable in-app. How it connects to the system Dynamic Type setting was not checked. [Measured]

### Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

### Insets and system bars

Expected on iOS: safe areas, status bar.

Standard safe-area handling with translucent bars. [Inferred]

### Icons

Expected on iOS: SF Symbols or custom.

Custom icon set, tinted by theme color. [Inferred]

### Account and sign-in rules

Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Sign-in uses the phone number, not a third-party login, so Guideline 4.8 is likely not triggered. Account deletion exists in settings. [Inferred] Checked: 2026-10-06 against source and general knowledge only.

### Platform conformance

Expected on iOS: use system components.

Telegram deliberately replaces much of the stock UI with its own components and theme engine, trading platform fidelity for a consistent, themeable look across devices. Navigation patterns still follow iOS. [Inferred]

## Platform: Android

How the Android app looks and behaves. Values marked as measured on a device come from the running app on an Android phone, on the app's default day theme with its default message text size and message corner setting. Every size is given in dp, so it is independent of the screen it was read from.

### Back and up navigation

Expected on Android: system back and gesture, up arrow in the top bar.

A back arrow sits at the left of every nested screen. On the settings screens it is a plain glyph on the page, beside the screen title. In a conversation it is not in a bar at all: it is a `45dp` translucent circle floating over the chat wallpaper, separate from the title capsule beside it. [Measured on a device]

One window hosts every screen, so back unwinds the app's own screen stack rather than a stack of system windows. Traced with the back key from the chat settings screen: chat settings, then Settings, then the Chats tab, then out to the device home screen. Back from a non-Chats tab therefore returns to Chats before it leaves the app. [Observed on a device]

### Primary navigation

Expected on Android: navigation bar, rail on tablets.

A bottom navigation bar with four tabs, in this order: Chats, Contacts, Settings, Profile. [Measured on a device] It is not a conventional edge-to-edge bar. It floats: a `55dp` tall surface with fully rounded ends, inset from both side edges and sitting about `9dp` above the bottom of the window, with the chat list scrolling underneath and showing through at the sides. The selected tab carries a `73dp` wide pill in `#e9f3f9` with its icon and label in the accent blue, and unselected items are a neutral gray. [Measured on a device]

Chat folders are a second, separate level of navigation above the list: a white pill-shaped container holding one tab per folder, each with an optional count badge, and a `28dp` selected pill filled `#e6f1f9` with a `#298acf` label. [Measured on a device]

A search field sits above the folders, `40dp` tall and fully rounded, filled `#f4f4f5` with `12dp` side margins, and scrolls away with the list rather than staying pinned. [Measured on a device]

This is a change from the older structure, where the main menu lived in a side drawer and the chat list had no bottom bar. [Observed on a device]

### Main action

Expected on Android: floating action button.

A compose floating action button sits above the bottom bar on the chat list, `48dp` across, filled `#229af0` with a white glyph. [Measured on a device] A smaller white circular button rides above it for the camera, so the main action is a pair rather than a single button. [Observed on a device]

In a conversation the floating treatment continues: a round forward button appears beside a message, and a round scroll-to-latest button with a blue unread count sits above the bottom edge. [Observed on a device]

### Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Custom sheets and dialogs rather than Material components, themed through the app's own color keys. A secondary screen can arrive as a full-height sheet with rounded top corners drawn over the screen behind it, rather than as a plain page. [Observed on a device]

Inline status messages in a conversation are drawn as banners and pills over the wallpaper rather than as snackbars: an unread marker is a full-width translucent band with centered accent text, and a date separator is a centered pill with a translucent dark fill and white text. [Observed on a device]

### Controls

Expected on Android: Material switches, pickers, chips.

Custom-drawn controls themed through the color keys, not stock Material widgets, and the device confirms it. Sliders are a blue track and a round blue thumb over a light gray remainder, with the current value shown as a blue number at the end of the row rather than in a tooltip. [Measured on a device]

Text fields are outlined rectangles with a floating label that sits in a gap in the outline. The focused field takes a blue outline and a blue label; an unfocused one has a gray outline and gray placeholder text. The primary button on a form is full width and fully rounded, filled with the accent blue with white text. [Observed on a device]

Settings rows come in two kinds, which the colors separate: a navigational row has a black label, a gray summary line beneath it and a color-filled icon, while an action row has an accent-blue label and a blue outline icon. [Observed on a device]

### Text sizing

Expected on Android: font scale.

The app does not respond to the system font scale. Two captures of the same screen, one at a system font scale of 0.8 and one at 1.3, are identical in every text size: the folder tab pill measures `28dp` in both, and the wordmark, chat titles, preview lines and timestamps are the same size pixel for pixel. [Measured on a device]

Instead the app ships its own control. A Message text size slider in Chat Settings sets the size of message text, at a default of 16, and a separate Message corners slider sets the bubble radius, at a default of 17. Both were at their defaults on the device. [Measured on a device] So people who raise the system font size for the whole phone get no larger interface here, and have to find the in-app slider, which only changes message text and not the chrome. This is a real deviation from the platform expectation and from the rest of the catalog.

### Touch and pointer targets

Expected on Android: 48dp minimum.

The floating chrome in a conversation is built from `45dp` circles and a `45dp` tall title capsule, just under the `48dp` minimum, and the floating action bar at the bottom of a channel is `43dp` tall. [Measured on a device] The bottom navigation bar is `55dp` tall and each tab takes a quarter of its width, and settings rows run the full width at well over `48dp`. [Measured on a device] So the list and settings surfaces clear the minimum comfortably while the floating conversation chrome sits a few dp under it.

### Insets and system bars

Expected on Android: edge to edge, system bars.

The app draws edge to edge and leaves the system bars transparent. In a conversation the chat wallpaper runs the full height of the window, under the status bar at the top and under the gesture area at the bottom, and the floating header and action bar sit on top of it rather than replacing it. [Measured on a device]

Measured on an Android phone using gesture navigation: the status bar inset is `29dp`, the display cutout takes the same `29dp`, and the navigation bar inset is `0dp` because gesture navigation draws no bar. A `32dp` mandatory gesture region sits along the bottom edge, and the floating bottom bar is lifted about `9dp` clear of the window edge so it does not sit under the gesture handle. The floating header starts about `5dp` below the status bar inset. [Measured on a device]

### Icons

Expected on Android: Material Symbols or custom.

A custom icon set throughout, not Material Symbols. [Observed on a device] Two weights are in use: flat outline glyphs that take the accent color on action rows and in the top bar, and small color-filled square icons that lead the rows in the main Settings list. Avatars are full circles, and an account with no photo gets a solid color circle holding one letter. [Observed on a device]

### Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

Phone number sign-in. The device was already signed in, so the sign-in flow itself was not captured and nothing about it is measured here. Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on Android: Material 3 components and roles.

The app does not follow Material Design. It draws its own widgets against its own theme system and the device confirms that at every level: the navigation bar, the folder tabs, the sliders, the sheets and the message surface are all custom. [Measured on a device]

What it has moved toward is a floating, capsule-shaped chrome rather than Material's bars. On the chat list the bottom navigation floats clear of the window edges. In a conversation the title, the back control and the overflow control are three separate translucent capsules over the wallpaper, and the bottom action is another floating pill. Nothing in a conversation is a filled bar, so the wallpaper is visible from the top edge of the window to the bottom. [Measured on a device]

It still honors the Android conventions that matter: system back and the gesture, the floating action button, edge to edge drawing and transparent system bars, and following the system night mode. The one convention it does not honor is the system font scale. [Measured on a device]

Surfaces are flat, with color and inset doing the work that elevation does elsewhere. Settings are grouped into white cards `360dp` wide with `12dp` side margins and corners of about `16dp`, on a recessed `#f1f1f3` page, with dividers inset to the text rather than running full width. [Measured on a device]


## Platform: Web

The telegram.org marketing and documentation site. The web app at web.telegram.org was not measured.

### Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back and a persistent side navigation on documentation pages, `240px` wide with `13px` text. [Measured]

### Primary navigation

Expected on Web: top nav or sidebar.

Top navigation on the marketing pages and a right-aligned side navigation on documentation pages. [Measured]

### Main action

Expected on Web: page-level button.

Download and Get Started style buttons in the accent blue. [Inferred]

### Sheets, dialogs and messages

Expected on Web: modals, toasts.

Not a feature of the marketing site. [Inferred]

### Controls

Expected on Web: native or custom.

Form controls with a soft focus glow `0 0 8px rgba(82,168,236,0.6)`. [Measured]

### Text sizing

Expected on Web: browser zoom.

Sizes are in `px`, so they do not follow the browser's default font size, only zoom. [Measured]

### Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

### Insets and system bars

Expected on Web: viewport, scrollbars.

A responsive layout. [Inferred]

### Icons

Expected on Web: any.

Mostly illustrations and raster or SVG images. [Inferred]

### Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

The marketing site has no accounts. [Inferred]

### Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms, with a documented dark mode through CSS custom properties (`--d-bg`, `--d-surface`, `--d-accent`). [Measured]

## Cross-platform consistency

Consistent across platforms: a sky blue accent, light chrome with thin dividers, round message bubbles, and a strong theming idea. [Measured]

Intentionally different: each platform has its own blue, iOS uses a navigation bar compose action while Android uses a floating button and drawer, and each app uses its own custom controls rather than the stock platform ones. [Inferred]

## Do's and Don'ts

### Do

- Use a single sky blue accent and let it change with the theme.
- Keep chrome white or very light with hairline dividers.
- Make message bubbles rounder than any other control.
- Provide light, dark and tinted dark themes, and let users change the accent.
- Keep Android on a floating compose button and drawer, and iOS on a tab bar with a nav-bar compose action.

### Don't

- Don't hard-code one blue for all platforms. Use the accent role.
- Don't add heavy shadows. Telegram is flat.
- Don't switch to stock controls on one platform only. Custom controls are part of the identity.

## Known Gaps

### Now verified on a device

- The Android section was captured on a real Android phone on 2026-10-07 against app version 12.10.6. Navigation structure, the floating chrome, bar and row heights, insets, back behavior, both themes, the day bubble colors, the settings grouping and font-scale behavior are measured rather than inferred.
- Where the device disagreed with the earlier source reading, the shipping app won. The open question about which bundled theme is the default is now settled: the app opens on the green classic day theme, so the earlier `#2d7ed5` outgoing bubble, `#f0f0f0` incoming bubble and `#181819` night page belong to other bundled themes and not to the default.
- The claim that Android has no bottom navigation bar and uses a side drawer is now wrong and has been replaced. The shipping app has a four-tab floating bottom bar, and folders are a second tab strip above the list.

### Still not verified

- iOS is entirely inferred. There was no iPhone in this capture, so every iOS topic is unseen.
- The night theme on this device is not on the default accent. The base night surfaces (`#1d2733`, `#151e27`, `#232e3b`) are the stock night values, but the outgoing bubble is a blue gradient around `#377ce1` from an accent variant this install has chosen, so no stock night outgoing bubble color is recorded here. The day theme was on the default, with the default message text size and message corner setting, so every day value is stock.
- Motion was not recorded. Transitions, bubble entry, the floating bar behavior on scroll and any gesture animation were not captured, so nothing in this file describes timing or easing.
- Only one conversation surface was opened, a public broadcast channel, so a one to one chat, a group, the composer with its attachment row and the emoji and sticker panel are all unseen. Nothing from inside any conversation is described here beyond its chrome and its bubble shapes and colors.
- Typography sizes were not converted to `sp`. The app ignores the system font scale, so text is reported as measured box heights in dp instead of as type sizes.
- iOS bubble colors are computed from the accent at runtime, so no single hex was recorded. Tab bar items and counts were not confirmed.
- The web app at web.telegram.org was not measured. Only the marketing site was.
- The website accent `#2481cc` on white measures about 4.1 to 1 and its hover `#1a8ad5` about 3.7 to 1, both below the 4.5 to 1 target for normal text. The checker reports both as warnings.
- Account deletion and store policy rules were not verified for either app.