Telegram Design System

Overview

Telegram's marketing site is the loudest argument against the past decade of brand-system inflation. Anti-design as posture. 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. Where WhatsApp paints its hero in jade green and pushes a download-app CTA above the fold, and where Signal leans on an indigo gradient with animated illustrations, Telegram refuses every convention of the messaging-app category. There is no captured email field, no scroll-driven motion, no app-store badge in the hero band.

The system's chromatic restraint is the central move. There is exactly one brand color — cyan ({colors.primary} — #0088cc) — and it does the work of every chromatic element on the page. 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 versus zero declared brand secondary. This is the inverse of the held-in-reserve discipline at Airbnb (Rausch red used only on CTAs) or Cloudflare (Kumo orange used only as the hero canvas) — Telegram uses cyan as the universal voice of every interactive surface, including text links inside body copy. The neutral tier is a four-step graphite ladder ({colors.ink} graphite, {colors.ink-soft} near-black, {colors.ink-muted} mid-gray, {colors.ink-faint} light-gray) on a pure-white {colors.canvas} floor.

Typography is the platform Lucida Grande system stack for everything — no web font, no fonts.googleapis.com call, no fallback gymnastics. The one second-family moment on the page is the hero dek "a new era of messaging" in Helvetica Neue Light at 20px / weight 300; every other text element on the page resolves to Lucida Grande on macOS, Lucida Sans Unicode on Windows, or Arial as the universal fallback. Display headings sit at 26px / weight 400 with -1px tracking; body at 15px / weight 400; small captions at 12px / 400. There is no display tier above 26px on the captured page — even the "Why Telegram?" section heading sits at 23px.

Key Characteristics:

• Pure white canvas ({colors.canvas} — #ffffff), no off-white, no cream variant.
• Single cyan voltage ({colors.primary} — #0088cc) carrying every chromatic surface: logo, headings, links, principle labels, platform tags.
• Lucida Grande system stack for every text element — zero web font requests.
• Display headings at 26px / weight 400 with -1px tracking — the system's loudest typographic moment.
• Zero declared corner-radius tokens — buttons, inputs, news cards, and platform tags all sit at 0px rounding.
• Zero shadow tier — no drop shadow, no inner shadow, no soft-blur elevation anywhere on the page.
• 3-by-3 "Why Telegram?" principle grid (Simple / Private / Synced / Fast / Powerful / Open / Secure / Social / Expressive) with cartoon-duck mascots replacing gradient icons.
• News-card pair below the hero — two horizontal cards with full-bleed photos, cyan headlines, and graphite dek text; no border, no shadow, no hover state.

Colors

Brand

• Telegram Cyan ({colors.primary} — #0088cc): frequency 128. Used as text (64) and border (64), never as background fill. The single chromatic voice of the system — logo, wordmark, every heading, every link, every principle label, every platform tag. The frequency split tells the story: Telegram does not use the cyan to fill buttons, it uses it to letterform-tint every interactive surface.

Text

• Ink ({colors.ink} — #333333): frequency 238. Used as text (120) and border (118). The default body color and the dominant border tone for hairline rules. Pure black would feel harsh against the white canvas; this mid-graphite softens without sliding toward the warmer charcoal grays peers use.
• Ink Soft ({colors.ink-soft} — #222222): frequency 4. Used as text (2) and border (2). Reserved for slightly emphasized labels.
• Ink Muted ({colors.ink-muted} — #888888): frequency 6 — used on the hero dek "a new era of messaging" and on secondary labels under news cards. The extraction merges two near-identical grays into this single token.
• Ink Faint ({colors.ink-faint} — #a2a2a2): frequency 18. Used on the timestamp captions in the Recent News rail and on metadata labels.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 2 as background. The entire page floor. No cream variant, no off-white surface tier, no charcoal-near-white dark mode declared.

Hairline / Shadow

• Shadow ({colors.shadow} — #000000): frequency 8 — used as text (4) and border (4). Reserved for the absolute-black footer labels and a small set of hairline borders where the graphite would be too soft.

Typography

Font Family

The system runs the platform Lucida Grande system stack for every text element — fallback order "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif. On macOS the resolved face is Lucida Grande; on Windows it is Lucida Sans Unicode; on Linux it falls through to Arial. There is no web-font request — no fonts.googleapis.com, no self-hosted .woff2 — which keeps the page-weight near-zero and avoids the third-party-tracking surface that Google Fonts introduces.

One second-family moment exists on the captured page: the hero dek "a new era of messaging" renders in Helvetica Neue Light at 20px / weight 300. It is the only HelveticaNeue-Light declaration in the entire system; every other surface resolves to Lucida Grande.

Hierarchy

Principles

Display weight tops out at 500, used only on the "Why Telegram?" section heading. The dominant display token sits at weight 400 — the same weight as body text — and gets its prominence from size (26px) and tracking (-1px), not from boldness. There is no 700-tier moment for a hero h1 because there is no hero h1; the wordmark "Telegram" is the loudest typographic moment in the system at 26px / 400. Bold weight 700 is reserved for download platform labels, date stamps, and news-card headlines — small-format emphasis only.

Note on Font Substitutes

Lucida Grande is a system font on macOS; Lucida Sans Unicode is its Windows equivalent. There is no open-source substitute that matches exactly, but the system stack already handles the fallback gracefully — Arial at the same weights reads close at body sizes. If you want a single web font for cross-platform parity, Verdana ships everywhere and matches the Lucida proportions at the 12-15px tier; Tahoma is the closest Windows-native equivalent. Avoid Inter or Helvetica Neue as substitutes — both feel too clearly "designed" against the deliberately-undesigned Lucida vibe.

Layout

Spacing System

• Base unit: 1px (with 3px as a common module).
• Tokens: {spacing.xs} 2px · {spacing.sm} 6px · {spacing.md} 9px · {spacing.base} 10px · {spacing.lg} 15px · {spacing.xl} 17px · {spacing.2xl} 20px · {spacing.3xl} 40px.
• Section padding (vertical): 20px above and 9px below most section headings — a tight rhythm that keeps the page scannable as a single editorial column.
• Hero padding: 160px above the wordmark on desktop — the only generous vertical breathing room in the system, used to push the centered Telegram mark into a visual safe zone.
• Footer padding: 40px outer, 15px gutter between the four column groups.

Grid & Container

• Max content width: ~620px on the main editorial column — narrower than nearly every peer marketing site, which keeps the single-column reading rhythm intact.
• Hero: centered single-column with the paper-airplane mark, wordmark, dek, and download links stacked vertically.
• Device-mockup band: two-up grid showing iOS and Android device screenshots, with the "Telegram for Android" and "Telegram for iPhone / iPad" labels rendered in the platform-tag bold treatment.
• Recent News rail: two-card horizontal grid with full-bleed photos above cyan headlines and graphite dek.
• "Why Telegram?" grid: 3-by-3 desktop, collapsing to 2-up on tablet, with cartoon-duck mascots above each cyan principle label.
• Footer: four-column grid (About / Mobile Apps / Desktop Apps / Platform) of plain-text link lists, no visual separation between columns.

Rhythm

The page reads as a vertical scroll of editorial bands separated by the same {spacing.3xl} (40px) gap. There is no atmospheric color shift between bands, no background variation, no parallax — every section terminates on the same pure-white canvas. Section transitions are marked only by a heading change from cyan body-tier to cyan display-tier.

Elevation

The system has no shadow tier. Zero. The captured page declares no drop-shadow, no inner-shadow, no soft-blur elevation on any surface. News cards, principle tiles, and device mockups all sit flush on the white canvas; the only thing distinguishing one band from another is the heading color shift.

• Flat (no shadow): every surface on the page — 100% of the captured chrome.
• Hairline rules: thin 1px {colors.ink} rules separate the footer columns and the Recent News date headers from their content. No drop-shadow ever stands in for the rule.
• Device mockups: the iOS and Android phone screenshots include their own rendered drop-shadow as part of the image asset, not as a CSS shadow declaration. The shadow is photography, not chrome.

Shapes

The system has essentially no corner-radius tier. The captured page renders almost every surface at 0px rounding:

• {rounded.none} 0px — buttons (which are inline text links, not pill chrome), news cards, principle tiles, footer columns, the hero device mockup container.
• {rounded.sm} 2px — declared as a fallback for any input that needs the slightest softening; rarely rendered.
• {rounded.md} 6px — declared as a fallback for download-link buttons on certain breakpoints; not present in the captured hero.
• {rounded.lg} 9px — declared as a fallback for the platform-tag pill on the device-mockup band; not present in the captured hero.

There is no pill tier, no full-circle radius, no large-card 16-24px rounding. The icons in the principle grid are circular because they are SVG illustrations of round-bodied cartoon ducks, not because any corner-radius is applied. The absence of a rounding scale is the position — the system reads as plain document chrome by design.

Components

button-primary — There is no signature CTA pill. The closest analog is the cyan-on-white inline link, rendered in {typography.body-md} at {colors.primary} with a 1px {colors.primary} bottom border on hover (the border is not captured at rest). No padding, no rounded radius, no fill.

button-secondary — Identical to the primary in the captured surface: cyan text link with no fill and no rounded chrome. The system does not distinguish primary and secondary action by visual weight; the distinction is positional (download links sit in the hero, navigation links sit in the top bar).

top-nav — Plain white surface with cyan inline-text links (Home, FAQ, Apps, API, Wallpapers) and a right-aligned cyan EN-language toggle. No background fill, no border, no shadow. 15.5px vertical padding, 15px horizontal padding.

nav-link — Cyan text on transparent, {typography.body-sm} (14px / 400), 0px 15px padding. No hover background visible in the captured surface; the link likely picks up an underline on hover but it is not declared in the resting state.

hero-heading — The "Telegram" wordmark, cyan {colors.primary} text at {typography.display-md} (26px / 400 / -1px tracking). 20px top / 9px bottom padding. The 26px size is identical to every other display heading on the page — there is no separate hero-h1 tier.

hero-dek — "a new era of messaging" in {colors.ink-muted} graphite at {typography.hero-dek} (20px / 300 Helvetica Neue Light). The only Helvetica Neue Light moment on the page; every other text element resolves to Lucida Grande.

section-heading — Cyan {colors.primary} text at {typography.display-sm} (23px / 500) for "Why Telegram?", "Recent News". 20px top / 9px bottom padding.

principle-label — The nine cyan labels under the cartoon ducks: Simple / Private / Synced / Fast / Powerful / Open / Secure / Social / Expressive. Each renders in {typography.display-md} (26px / 400 / -1px tracking) — identical to the wordmark treatment. The repetition is the editorial move: every principle gets the same typographic weight, so the reader is not pre-sorted toward any single virtue.

body-paragraph — Default ink-graphite text at {typography.body-md} (15px / 400). The principle descriptions ("Telegram lets you access your chats from multiple devices.") and the news-card dek.

body-paragraph-muted — {colors.ink-muted} text at {typography.body-md} for the news-card date stamp and the secondary labels under download links.

link-cyan — Inline cyan link inside body copy, {typography.body-md} color {colors.primary}. The dominant interactive element on the page — every clickable text element inherits this treatment.

news-card — White canvas, no border, no shadow, no rounded radius. Full-bleed photo at the top, cyan headline at {typography.body-md-bold} (15px / 700) below, graphite dek at {typography.body-md}, gray date stamp at the bottom in {typography.caption}. The lack of visual containment is the point — news cards sit in the editorial flow like wiki entries.

text-input — White fill, ink-graphite text, {rounded.none} 0px radius, 6px padding, 1px {colors.ink-faint} border. Appears on the FAQ search overlay; not visible in the captured marketing surface.

footer — Pure white canvas, ink-graphite labels at {typography.caption} (12px / 400), with 12px / 700 column headers. Four columns (About / Mobile Apps / Desktop Apps / Platform). 40px outer padding, 15px gutter. No surface contrast against the page floor.

Do's and Don'ts

Do treat the brand voltage as the universal voice of every interactive surface. The system uses one cyan for the logo, every heading, every link, and every principle label — there is no "primary" / "secondary" / "tertiary" hierarchy split by color. Multiplying the palette into a second brand accent would destroy the single-voice discipline.

Do ship the system Lucida Grande stack and skip the web font entirely. The page-weight benefit is real, but the bigger move is what it signals — no Google Fonts request means no third-party tracking surface, which aligns with the privacy posture.

Do keep display weight at 500 max, and use the 26px / weight 400 / -1px tracking treatment as the dominant display moment. Bumping the wordmark to 700 would turn it into a generic SaaS shout and undercut the deliberately-undesigned vibe.

Do render the nine "Why Telegram?" principle labels at identical typographic weight. The visual flatness across Simple / Private / Synced / Fast / Powerful / Open / Secure / Social / Expressive is the editorial move — no principle is pre-ranked above the others.

Don't introduce a rounded-pill CTA in the hero. The hero has no CTA at all in the captured surface — adding a fully-rounded download button (the WhatsApp move) would import the engagement-design language Telegram defines itself against.

Don't apply a drop-shadow to the news cards or principle tiles. The system has zero shadow tier — softening the cards with even a 2-4px shadow would push the page toward Material-style elevation and away from the wiki-document aesthetic.

Don't swap Lucida Grande for Inter or Helvetica Neue as a "type-update" pass. Both fonts read as clearly-designed type choices; Lucida reads as a system default. The "didn't choose a font" affect is part of the position.

Don't rework the principle grid into a card stack with backgrounds and rounded corners (the post-2018 SaaS feature-grid convention). The flat 3-by-3 mascot grid with no card containment is Telegram's signature marketing composition — adding containment would make it look like every other startup feature section.

Known Gaps

• Hover and focus states: the captured page declares no hover background, no focus ring, no underline-on-hover state for the cyan links. The product app uses an underline; the marketing site does not.
• Mobile breakpoint behavior: captured at desktop only. The 3-by-3 principle grid collapses to 2-up on tablet and 1-up on phone, but the breakpoint values are not exposed in the marketing CSS.
• Dark mode: no dark variant on the captured marketing surface. The product app ships dark, but the website is light-only.
• Motion: the page has zero captured animation — no scroll-driven motion, no entrance fade, no hover transition. The product app uses Lottie animations for the duck mascots, but the marketing site renders them as static SVGs.
• Search overlay: the FAQ search lives behind a click and is not exposed in the captured first-paint surface.
• Product surfaces: this DESIGN.md captures the telegram.org marketing site only. The Telegram Web app (web.telegram.org) and the desktop / mobile clients carry a much richer token system — chat bubbles, sticker-pack chrome, in-app sidebar, voice-call surface — that is not represented here.
• Cyan brand variants: the system declares no hover-cyan or pressed-cyan token. The single #0088cc is used at all states; any state variation lives in opacity or underline rather than a separate color value.