What is Telegram's primary brand color?

Telegram's brand voltage is a single saturated cyan-teal — #0088cc — and it does the work of every chromatic element on the marketing surface. It carries the paper-airplane logomark, the Telegram wordmark, every heading from h3 down to small caps, every link in the body, the download-platform labels under the device mockups, and the nine product-principle labels under the cartoon ducks. The page captures 128 total uses of this single hex — 64 as text, 64 as border — versus zero declared brand secondary. Where most messaging apps reserve their brand color for a CTA pill, Telegram uses cyan as the universal voice of every interactive surface.

What typeface does Telegram use, and what should I use as a substitute?

Telegram runs the platform Lucida Grande system stack — fallback order Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, Verdana — for every body, label, heading, and nav element. There is one second-family moment on the page: the hero dek 'a new era of messaging' renders in Helvetica Neue Light at 20px / weight 300. Display headings sit at 26px / weight 400 with -1px tracking; body at 15px / weight 400; small labels at 12px / 400; bold labels at 15px / 700. The closest open-source substitute is the system font stack itself; if you need a single web font, Verdana ships everywhere and matches the Lucida proportions at body sizes. The system avoids any web-font request entirely, which is part of the privacy posture — no fonts.googleapis.com call.

Why does Telegram's site look so deliberately undesigned?

Telegram's marketing surface ships zero declared border-radius tokens, zero shadow tokens, and zero hover-state declarations on the captured page. The visual restraint is positioning: Telegram is a Dubai-based messenger that markets itself in opposition to the Meta family (WhatsApp, Messenger, Instagram DMs) on grounds of privacy, group-size limits, and refusal of the advertising business model. The plain-text wiki aesthetic is the brand promise made visible — no engagement-optimization design language, no algorithmic-feed icon vocabulary, no growth-team CTA stack. The choice survives despite every UX-modernization argument because changing it would undercut the position.

What is the 3-by-3 product-principle grid below the fold?

Telegram's below-fold composition is a nine-cell grid labeled 'Why Telegram?' with one cartoon-duck mascot per cell and one principle word underneath: Simple, Private, Synced, Fast, Powerful, Open, Secure, Social, Expressive. Every label renders in the same cyan #0088cc at 26px / weight 400 / -1px tracking — there is no visual hierarchy between principles. The mascots are part of the Telegram illustration library (the same duck appears in the in-app sticker pack) and replace the gradient icons every messaging peer leans on. The grid is the signature marketing composition; on smaller breakpoints it collapses to 2-up but the label treatment never changes.

Telegram Design System

Telegram's marketing system as a DESIGN.md file.

About Telegram DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source telegram.org

Communication & Messaging

Telegram's marketing site is the loudest argument against the past decade of brand-system inflation. The page is pure white. The paper-airplane mark sits at the top in cyan. The wordmark "Telegram" sits in cyan at 26px, the dek "a new era of messaging" in graphite below at 20px Helvetica Neue Light, and that is the entire above-fold composition — no hero illustration, no gradient, no shadow, no rounded CTA pill. Below the fold the page lists nine product principles in a 3-by-3 grid of cartoon ducks, each label rendered in the same single cyan, each sentence in the same single graphite. Where WhatsApp paints its hero in jade green and pushes a download-app CTA, where Signal leans on an indigo gradient and animated illustrations, Telegram refuses every convention of the category — there is no CTA above the fold, no app-store badge in the hero, no scroll-driven motion, no captured email field. The restraint is the position: a Dubai-based messenger that has shed Western design tropes alongside Western advertising tracking.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 5 color tokens — a single cyan voltage, four neutral inks — drawn from the seven colors the page renders at all; 7 typography tokens running the platform Lucida Grande stack (with one Helvetica Neue Light moment for the dek); zero declared border-radius tokens because the captured surface has no rounded chrome (the input field on the search overlay rounds to 0px, the news cards have no radius, the icons are circular only because they are SVGs); 8 spacing values on a 4px base; and 14 component definitions covering the cyan link, the cyan heading, the graphite body, the cartoon-duck principle tile, the news card, and the footer columns.

Feed this file to an AI coding tool and it reproduces Telegram's specific moves: a single saturated cyan instead of a hero-friendly indigo, the system Lucida Grande stack instead of Inter or Geist, zero corner-radius tokens, zero shadow tier, and a 3-by-3 product-principle grid where the labels share the same color and weight rather than tiering visually. Borrow the move only if your positioning is willing to read as anti-design — Telegram gets away with it because the brand's central promise is the absence of the chrome (no algorithmic feed, no ad inventory, no engagement-metric pressure). Most teams need at least one rounded surface to look "real" in 2026.

What makes it distinct

Single cyan voltage#0088cc covers every link, heading, brand mark, and product-principle label, never reserved for one CTA the way most SaaS systems hold accents
Lucida Grande system stackno web font, no Inter, no Helvetica Neue Display; the page renders in whatever the OS ships, which keeps page-weight near-zero
Anti-design as positioningno rounded chrome, no shadow tier, no hover states declared; the visual restraint is a privacy posture against the Meta family
26px / weight 400 / -1px tracking displayevery principle label uses the same tight setting, making the 3-by-3 mascot grid scan as one editorial unit
Cartoon-duck mascots as iconographyTelegram's signature illustration style replaces the gradient-icon convention every messaging peer leans on

Live at telegram.org

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

telegram.org

Explore Telegram

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.