W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Telegram
Telegram is the cloud-based messaging, voice-, video-, and channel- broadcast platform built by Telegram FZ-LLC / Telegram Messenger Inc., serving over 900 million monthly users with a posture oriented around speed, openness (a documented API), and optional end-to-end encryption ("Secret Chats"). The brand voice is technical, candid, and confident — "simple. private. fast." Visually, Telegram is anchored on Telegram Blue (#0088CC), the saturated sky- blue used on the paper-plane mark, primary CTAs, links across the marketing site, and the outgoing-message bubble. Telegram is dual- mode by canonical identity: the desktop and mobile clients render the blue accent on a near-white canvas (light) or a deep slate canvas #212429 (dark), with the blue serving as the consistent primary across both surfaces.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/telegram/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/telegram/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Telegram
Telegram is the cloud-based messaging, voice-, video-, and channel- broadcast platform built by Telegram FZ-LLC / Telegram Messenger Inc., serving over 900 million monthly users with a posture oriented around speed, openness (a documented API), and optional end-to-end encryption ("Secret Chats"). The brand voice is technical, candid, and confident — "simple. private. fast." Visually, Telegram is anchored on Telegram Blue (#0088CC), the saturated sky- blue used on the paper-plane mark, primary CTAs, links across the marketing site, and the outgoing-message bubble. Telegram is dual- mode by canonical identity: the desktop and mobile clients render the blue accent on a near-white canvas (light) or a deep slate canvas #212429 (dark), with the blue serving as the consistent primary across both surfaces.
Tags: telegram, messaging, blue, communications, mobile-first, cloud, open-api
Atoms
Palette
Telegram · [email protected] · Proprietary — All Rights Reserved
Telegram's brand palette is anchored on the signature Telegram Blue (#0088CC) — the saturated sky-blue used on the paper-plane mark, primary CTAs, links, and the outgoing-message bubble of the desktop and mobile clients. The supporting palette is a tonal blue scale captured from the deployed telegram.org marketing surface (light tints for hover states; deeper navy variants for dark-mode surfaces and the iOS gradient mark) plus a quiet neutral scale ranging from white-on-canvas to a deep slate (#212429) used as the dark-mode canvas across the official clients.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Roboto ([email protected]) |
Apache-2.0 | sans-serif |
body |
Roboto ([email protected]) |
Apache-2.0 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
telegram-blue |
Telegram Blue | #0088CC |
telegram-blue-dark |
Telegram Blue Dark | #006699 |
telegram-blue-100 |
Telegram Blue 100 | #E5F1FA |
telegram-blue-300 |
Telegram Blue 300 | #3CA1EB |
telegram-blue-400 |
Telegram Blue 400 | #30AAFD |
telegram-blue-500 |
Telegram Blue 500 | #2481CC |
telegram-blue-600 |
Telegram Blue 600 | #1C93E3 |
telegram-blue-700 |
Telegram Blue 700 | #1A8AD5 |
telegram-blue-800 |
Telegram Blue 800 | #1482D1 |
telegram-white |
Telegram White | #FFFFFF |
telegram-surface-light |
Telegram Surface Light | #F7F7F7 |
telegram-border-light |
Telegram Border Light | #E6E6E6 |
telegram-text-on-light |
Telegram Text on Light | #333333 |
telegram-text-secondary-light |
Telegram Text Secondary Light | #7D7F81 |
telegram-canvas-dark |
Telegram Canvas Dark | #212429 |
telegram-surface-dark |
Telegram Surface Dark | #262A2E |
telegram-surface-dark-elevated |
Telegram Surface Dark Elevated | #33373D |
telegram-text-on-dark |
Telegram Text on Dark | #FFFFFF |
telegram-text-secondary-dark |
Telegram Text Secondary Dark | #84888C |
telegram-surface-dark-deep |
Telegram Surface Dark Deep | #1E1E1E |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
telegram-white |
#FFFFFF |
surface |
telegram-surface-light |
#F7F7F7 |
surface-elevated |
telegram-white |
#FFFFFF |
text-primary |
telegram-text-on-light |
#333333 |
text-secondary |
telegram-text-secondary-light |
#7D7F81 |
text-tertiary |
telegram-text-secondary-light |
#7D7F81 |
primary |
telegram-blue |
#0088CC |
primary-hover |
telegram-blue-800 |
#1482D1 |
accent |
telegram-blue |
#0088CC |
accent-hover |
telegram-blue-700 |
#1A8AD5 |
warning |
telegram-blue-400 |
#30AAFD |
warning-hover |
telegram-blue-700 |
#1A8AD5 |
error |
telegram-blue-dark |
#006699 |
success |
telegram-blue |
#0088CC |
border |
telegram-border-light |
#E6E6E6 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
telegram-canvas-dark |
#212429 |
surface |
telegram-surface-dark |
#262A2E |
surface-elevated |
telegram-surface-dark-elevated |
#33373D |
text-primary |
telegram-text-on-dark |
#FFFFFF |
text-secondary |
telegram-text-secondary-dark |
#84888C |
text-tertiary |
telegram-text-secondary-dark |
#84888C |
primary |
telegram-blue-300 |
#3CA1EB |
primary-hover |
telegram-blue-400 |
#30AAFD |
accent |
telegram-blue-300 |
#3CA1EB |
accent-hover |
telegram-blue-400 |
#30AAFD |
warning |
telegram-blue-400 |
#30AAFD |
warning-hover |
telegram-blue-700 |
#1A8AD5 |
error |
telegram-blue-dark |
#006699 |
success |
telegram-blue-300 |
#3CA1EB |
border |
telegram-surface-dark-elevated |
#33373D |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
telegram-blue |
#0088CC |
on-identity |
telegram-white |
#FFFFFF |
background |
telegram-white |
#FFFFFF |
surface |
telegram-surface-light |
#F7F7F7 |
surface-elevated |
telegram-white |
#FFFFFF |
text-primary |
telegram-text-on-light |
#333333 |
text-secondary |
telegram-text-secondary-light |
#7D7F81 |
primary |
telegram-blue |
#0088CC |
primary-hover |
telegram-blue-800 |
#1482D1 |
accent |
telegram-blue |
#0088CC |
accent-hover |
telegram-blue-700 |
#1A8AD5 |
mark |
telegram-blue |
#0088CC |
success |
telegram-blue |
#0088CC |
warning |
telegram-blue-400 |
#30AAFD |
error |
telegram-blue-dark |
#006699 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
wordmark |
heading |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: telegram-blue, telegram-white
- forbidden: telegram-blue-100, telegram-blue-dark, telegram-canvas-dark
The Telegram paper-plane mark renders in Telegram Blue (#0088CC) on light surfaces and reverses to white on the dark canvas — the two approved color treatments documented in the press-kit assets linked from telegram.org/brand. Recoloring into a pale tint, the pressed-state dark blue, or any of the supporting surface neutrals violates the brand-mark policy.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, flattened-paper-plane, combined-with-other-logo, used-as-verb
The Telegram brand-asset policy prescribes the paper-plane mark in its approved variants only. Recoloring the mark, flattening the paper-plane silhouette, applying decorative effects, or combining the mark with a third-party logo to imply partnership violates the brand-use license linked from telegram.org/brand.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Telegram Text on Light (#333333) on the white canvas reads at roughly 12.6:1, and Text on Dark (#FFFFFF) on Canvas Dark (#212429) reads at roughly 15.4:1 — both clear AA decisively. The rule encodes the floor for any new foreground/background pairing introduced on Telegram-skinned surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Telegram Blue (#0088CC) on the white canvas must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) compromises the affordance of the primary CTA, the inline link color, and the paper-plane send button — all of which read as blue-on-white in the canonical product surface.
variantSelection → logo
- use:
mark-white - when:
backgroundColorScheme="dark"
On the canonical Telegram Canvas Dark surface (#212429) the paper-plane mark renders in white for legibility. The blue-on-dark mark variant must not be used on the dark canvas where contrast against the surface drops below the AA-large floor for interactive elements.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, sponsorship-implication, app-impersonation
Telegram's brand-asset policy prohibits use of the Telegram name, paper-plane mark, or signature blue in ways that imply official affiliation or endorsement, on unlicensed merchandise, or on a competing messaging app's surface. Encoding the policy as a context restriction lets consumers reject impermissible placements.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Telegram's global user base and the dual light/dark canvas commitment make AA contrast checks the default verification on any new role pairing introduced on Telegram-skinned surfaces.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 700
Roboto, the type family used by the Telegram Android client, ships across Thin (100) through Black (900) but Telegram's product UI sits in the Regular (400), Medium (500), and Bold (700) band — the same three weights surfaced in the Android client's typography spec. Lighter or heavier cuts drift from the brand's practical, technical voice.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Telegram's marketing display runs substantially larger than the chat / prose copy on the telegram.org marketing site. A 1.5× minimum size ratio between display and prose preserves the announcement-style hierarchy the brand voice depends on when rendered through the Roboto substitute.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: telegram-white, telegram-canvas-dark, telegram-text-on-light, telegram-surface-light
- doesNotPairWith: telegram-blue-100, telegram-blue-300
Telegram Blue reads cleanest against white, the deep slate dark canvas, or the very-dark text tone. Pairing the primary blue adjacent to the pale tint (#E5F1FA) or the mid-light blue-300 (#3CA1EB) collapses the primary-vs-secondary hierarchy and washes the brand's recognisable saturation.
Provenance
- Source: https://telegram.org/
- License:
Proprietary — All Rights Reserved - Attribution: Telegram and the Telegram paper-plane logo are trademarks of Telegram FZ-LLC / Telegram Messenger Inc. Brand-asset distribution policy and the press-kit logo files are linked from telegram.org/brand; the signature Telegram Blue (#0088CC) is documented in the simple-icons brand database (citing telegram.org) and corroborated by the deployed telegram.org marketing surface, where every anchor link resolves to rgb(0,136,204). Supporting blue/neutral tones in the brand atom were captured from the same deployed CSS.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://telegram.org/ on 2026-05-18; the published telegram.org/brand page is policy- and asset-link only (no hex codes in the visible content), so the supporting scale was captured from the deployed marketing-site stylesheet. Telegram does not ship a proprietary type family — the marketing site uses Lucida Grande / Helvetica Neue system stacks, the Android client uses Roboto, and iOS / macOS use SF Pro. This atom references Roboto@1 as the open-source rendering substitute consistent with the Android client (Telegram's most-installed surface). The brand-asset policy expressly forbids re-distribution outside the documented press-kit channels, so
assets: []is the correct posture for this catalog.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Telegram
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Telegram
A clear hierarchy in Telegram's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Telegram
[email protected]font · heading
Roboto
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Roboto
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ telegram-blue #0088CC accent-hover
→ telegram-blue-700 #1A8AD5 background
→ telegram-white #FFFFFF error
→ telegram-blue-dark #006699 identity
→ telegram-blue #0088CC mark
→ telegram-blue #0088CC on-identity
→ telegram-white #FFFFFF primary
→ telegram-blue #0088CC primary-hover
→ telegram-blue-800 #1482D1 success
→ telegram-blue #0088CC surface
→ telegram-surface-light #F7F7F7 surface-elevated
→ telegram-white #FFFFFF text-primary
→ telegram-text-on-light #333333 text-secondary
→ telegram-text-secondary-light #7D7F81 warning
→ telegram-blue-400 #30AAFD Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Roboto prose
→ body Roboto wordmark
→ heading Roboto Palette mode mappings (from telegram)
Light mode (15 roles)
accent
→ telegram-blue accent-hover
→ telegram-blue-700 background
→ telegram-white border
→ telegram-border-light error
→ telegram-blue-dark primary
→ telegram-blue primary-hover
→ telegram-blue-800 success
→ telegram-blue surface
→ telegram-surface-light surface-elevated
→ telegram-white text-primary
→ telegram-text-on-light text-secondary
→ telegram-text-secondary-light text-tertiary
→ telegram-text-secondary-light warning
→ telegram-blue-400 warning-hover
→ telegram-blue-700 Dark mode (15 roles)
accent
→ telegram-blue-300 accent-hover
→ telegram-blue-400 background
→ telegram-canvas-dark border
→ telegram-surface-dark-elevated error
→ telegram-blue-dark primary
→ telegram-blue-300 primary-hover
→ telegram-blue-400 success
→ telegram-blue-300 surface
→ telegram-surface-dark surface-elevated
→ telegram-surface-dark-elevated text-primary
→ telegram-text-on-dark text-secondary
→ telegram-text-secondary-dark text-tertiary
→ telegram-text-secondary-dark warning
→ telegram-blue-400 warning-hover
→ telegram-blue-700 Rules (10 typed constraints)
error · 7 rules
colorChoice logo.mark allowed telegram-blue, telegram-white forbidden telegram-blue-100, telegram-blue-dark, telegram-canvas-dark The Telegram paper-plane mark renders in Telegram Blue (#0088CC) on light surfaces and reverses to white on the dark canvas — the two approved color treatments documented in the press-kit assets linked from telegram.org/brand. Recoloring into a pale tint, the pressed-state dark blue, or any of the supporting surface neutrals violates the brand-mark policy.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, flattened-paper-plane, combined-with-other-logo, used-as-verb The Telegram brand-asset policy prescribes the paper-plane mark in its approved variants only. Recoloring the mark, flattening the paper-plane silhouette, applying decorative effects, or combining the mark with a third-party logo to imply partnership violates the brand-use license linked from telegram.org/brand.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Telegram Text on Light (#333333) on the white canvas reads at roughly 12.6:1, and Text on Dark (#FFFFFF) on Canvas Dark (#212429) reads at roughly 15.4:1 — both clear AA decisively. The rule encodes the floor for any new foreground/background pairing introduced on Telegram-skinned surfaces.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Telegram Blue (#0088CC) on the white canvas must remain perceptible at interactive sizes. Falling below 3:1 (AA-large) compromises the affordance of the primary CTA, the inline link color, and the paper-plane send button — all of which read as blue-on-white in the canonical product surface.
variantSelection logo use mark-white when backgroundColorScheme="dark" On the canonical Telegram Canvas Dark surface (#212429) the paper-plane mark renders in white for legibility. The blue-on-dark mark variant must not be used on the dark canvas where contrast against the surface drops below the AA-large floor for interactive elements.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, sponsorship-implication, app-impersonation Telegram's brand-asset policy prohibits use of the Telegram name, paper-plane mark, or signature blue in ways that imply official affiliation or endorsement, on unlicensed merchandise, or on a competing messaging app's surface. Encoding the policy as a context restriction lets consumers reject impermissible placements.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Telegram's global user base and the dual light/dark canvas commitment make AA contrast checks the default verification on any new role pairing introduced on Telegram-skinned surfaces.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 400, 500, 700 Roboto, the type family used by the Telegram Android client, ships across Thin (100) through Black (900) but Telegram's product UI sits in the Regular (400), Medium (500), and Bold (700) band — the same three weights surfaced in the Android client's typography spec. Lighter or heavier cuts drift from the brand's practical, technical voice.
fontPairing typography.display requires prose minSizeRatio 1.5 Telegram's marketing display runs substantially larger than the chat / prose copy on the telegram.org marketing site. A 1.5× minimum size ratio between display and prose preserves the announcement-style hierarchy the brand voice depends on when rendered through the Roboto substitute.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith telegram-white, telegram-canvas-dark, telegram-text-on-light, telegram-surface-light doesNotPairWith telegram-blue-100, telegram-blue-300 Telegram Blue reads cleanest against white, the deep slate dark canvas, or the very-dark text tone. Pairing the primary blue adjacent to the pale tint (#E5F1FA) or the mid-light blue-300 (#3CA1EB) collapses the primary-vs-secondary hierarchy and washes the brand's recognisable saturation.
Provenance
- Source
- https://telegram.org/
- License
Proprietary — All Rights Reserved- Attribution
- Telegram and the Telegram paper-plane logo are trademarks of Telegram FZ-LLC / Telegram Messenger Inc. Brand-asset distribution policy and the press-kit logo files are linked from telegram.org/brand; the signature Telegram Blue (#0088CC) is documented in the simple-icons brand database (citing telegram.org) and corroborated by the deployed telegram.org marketing surface, where every anchor link resolves to rgb(0,136,204). Supporting blue/neutral tones in the brand atom were captured from the same deployed CSS.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://telegram.org/ on 2026-05-18; the published telegram.org/brand page is policy- and asset-link only (no hex codes in the visible content), so the supporting scale was captured from the deployed marketing-site stylesheet. Telegram does not ship a proprietary type family — the marketing site uses Lucida Grande / Helvetica Neue system stacks, the Android client uses Roboto, and iOS / macOS use SF Pro. This atom references Roboto@1 as the open-source rendering substitute consistent with the Android client (Telegram's most-installed surface). The brand-asset policy expressly forbids re-distribution outside the documented press-kit channels, so `assets: []` is the correct posture for this catalog.