The visual approach
Telegram's design system runs on a narrow palette and strict timing constraints. The primary blue (#0088CC) anchors nearly every interactive element—links, buttons, navigation—while a lighter variant (#2AABEE) handles logo and accent work. Text uses just two grays: #222222 for primary content and #707579 for secondary labels. Backgrounds stay pure white (#FFFFFF) with borders at #DADCE0. There are no gradients, no depth tricks, no color transitions beyond straightforward hover darkening.
Typography leans entirely on system fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. The scale runs from 40px display weight down to 13px captions, all set in regular (400) or semibold (600). Spacing follows a clean power-of-two progression—4px, 8px, 16px, 24px, 32px—that makes layout math trivial. Border radii range from 4px on small UI elements to 12px on cards, with the occasional 9999px for pill buttons.
The motion system prizes speed over spectacle. Page transitions clock in at 250–300ms with simple opacity and vertical offset. Content blocks fade in with a 50–80ms stagger per item as they enter the viewport. Hover states transition in 200ms; buttons darken backgrounds in 150ms. The one expressive flourish appears in chat message animations: a slide-in from the sender side with a slight bounce, timed at 300ms using cubic-bezier(.34,1.56,.64,1). Even there, the playfulness is calibrated—readable, not distracting.
The stack mirrors the aesthetic. No React, no Vue, no component framework. The site appears to be static-generated (possibly Jekyll) with vanilla CSS and minimal JavaScript. Images are responsively served, assets are optimized, and the whole thing likely runs on Telegram's own infrastructure with a CDN. The technical choices echo the visual ones: proven, fast, unsurprising.
What works
The restraint compounds into credibility. Telegram markets itself on speed and security; a bloated, animation-heavy site would contradict that promise before a visitor reads a word. By keeping transitions brief and the palette narrow, the design reinforces the product's core value. Every 250ms page fade and every system-font paragraph is a small proof point that the team prioritizes performance.
The limited color palette also sharpens hierarchy. With only two text grays and one brand blue, there is no ambiguity about what matters. Primary actions are blue, secondary text recedes to #707579, and everything else is black on white. The lack of options forces clarity. Cards use a single shadow (0 4px 12px rgba(0,0,0,0.1)) and a consistent 12px border radius, so the eye learns the pattern instantly.
The typography scale strikes a practical balance. The 15px body size is large enough for comfortable reading without feeling inflated, and the 24px/32px heading sizes create clear section breaks without dominating the page. Semibold headings (600 weight) provide just enough contrast against regular body text. The system font stack ensures zero layout shift from web font loading and instant text rendering on every platform.
Motion timing also earns trust. The 50–80ms stagger on card reveals is perceptible but not showy—content appears progressively without waiting for a grand entrance. The 200ms hover transitions on links feel immediate rather than laggy. The chat message bounce is the only moment of personality, and it is contained to a context (messaging UI previews) where expressiveness is expected.
What a builder can borrow
Start with a two-color interaction model: one brand color for all interactive elements, one neutral for everything else. Telegram's single-blue system is easier to maintain than a five-color palette and forces you to solve hierarchy through size, weight, and spacing rather than hue.
Cap motion at 300ms and default to 200ms. Telegram's page transitions (250–300ms) and hover states (150–200ms) feel snappy because they are. Longer timings read as sluggish, especially on fast connections. If an animation feels too abrupt at 200ms, the problem is usually the easing curve, not the duration.
Use staggered reveals sparingly and keep the offset tight. Telegram's 50–80ms per-item stagger is just enough to create flow without holding up content. Anything over 100ms starts to feel like forced choreography.
Consider vanilla CSS for marketing sites. If the page is content-forward and the interaction model is simple, a component framework adds weight without commensurate value. Telegram's stack—static generation, custom CSS, minimal JavaScript—is faster to load and easier to audit than most framework-based equivalents.
Finally, let one expressive detail carry personality. Telegram saves its playfulness for chat message animations, the one place where a bounce curve (cubic-bezier(.34,1.56,.64,1)) makes narrative sense. Everywhere else, the design is neutral. That contrast makes the personality land harder.