МТС

Overview

МТС is Russia's largest integrated telecom and digital services ecosystem, serving millions of consumers with mobile connectivity, fintech, media, and lifestyle solutions. The design system embodies 'Accessible Dynamism'—a philosophy that marries the energy of a vibrant primary red (#ff0032) with the clarity of a clean, light interface. The brand personality is confident yet approachable, speaking to users with directness and warmth. The UI evokes trust through consistent spacing, legible typography in the proprietary MTS font family (Wide, Compact, Text), and a carefully orchestrated color hierarchy that guides attention without overwhelming. Voice: practical, optimistic, never corporate-stiff. Example: 'Зафиксируем цену тарифа' (We'll lock in your rate) conveys both certainty and customer benefit in five words.

Colors

The color system is anchored by a bold primary red (#ff0032), which dominates call-to-action buttons, links, and brand moments—it's the signature accent that makes МТС instantly recognizable. The surface stack ranges from pure white (#ffffff) at the brightest level through carefully calibrated grays (surface-dim #f2f3f7, surface-container #bbc1c7, on-surface #1d2023) that maintain 7:1+ contrast for accessibility. Secondary blue (#007cff) supports interactive states and secondary actions, while tertiary mint (#00c19b) highlights positive outcomes and success states. The greyscale palette—from #ffffff down through #f2f3f7, #e2e5eb, #bbc1c7, #969fa8, #626c77, #434a51, #2c3135, #1d2023, to #000000—provides a neutral foundation that lets the accent colors breathe. Error states use #eb4a13 (oran

Typography

The type system is built on three proprietary typefaces—MTS Wide (condensed, energetic, used for headlines and CTAs), MTS Compact (workhorse body and UI text), and MTS Text (editorial, longer-form content). Display (72px, 500 weight, MTS Wide) commands attention on hero sections; Headline-lg (36px, 500 weight) structures major sections; Body-md (16px, 400 weight, MTS Compact) serves as the default reading size with 24px line-height for comfortable scanning. Label-md (14px, 700 weight, MTS Wide, uppercase, 0.05em letter-spacing) is reserved for button text and small interactive labels, creating visual distinction through weight and case rather than size. On small labels over busy backgrounds (e.g., badges on image overlays), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibil

Layout

The page grid is a 12-column responsive system with breakpoints at 48rem (tablet), 60rem (desktop-xs), 80rem (desktop-small), 90rem (desktop-medium), 105rem (desktop-large), and 120rem (desktop-xl). Container max-width is 1280px on desktop, with symmetric margins of 40px (lg spacing) on either side. The gutter between columns is 24px (md spacing), and section separation uses lg spacing (40px) vertically to create breathing room. Hero sections span full-width with 56px horizontal padding and 56px vertical padding, establishing a generous, confident presence. Card grids typically use 3–4 columns on desktop, collapsing to 2 on tablet and 1 on mobile. White-space is treated as a first-class design element: never compress spacing below md (24px) between major sections, and use sm (12px) for int

Elevation & Depth

Visual hierarchy is conveyed through a three-tier shadow system and subtle background color shifts. Level 1 (Base): flat surfaces with no shadow, background #ffffff. Level 2 (Raised Cards): box-shadow: 0 0 6px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08), background #ffffff with 1px border #e2e5eb. Level 3 (Modals/Overlays): box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 12px 20px rgba(0, 0, 0, 0.14), background #ffffff. Hover states elevate cards to Level 3 with a smooth 200ms transition. No drop shadows exceed 20px blur radius; the aesthetic favors clarity over theatrical depth. Intera

Shapes

The shape philosophy is 'Soft-Technical Pragmatism'—rounded corners are generous enough to feel modern and approachable, yet restrained enough to maintain professional clarity. Buttons use 12px border-radius (lg), creating a friendly, clickable appearance without appearing cartoonish. Input fields use 16px border-radius (md), slightly more rounded than buttons to signal a different interaction mode. Cards and containers use 24px border-radius (xl) for a premium, spacious feel. Service tiles and icon containers use 12px (lg). The full-radius (9999px) is reserved for badges and pill-shaped eleme

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (background #ff0032, text white, 12px border-radius, 12px 24px padding, 48px height, label-md typography) is used for main CTAs like 'ПЕРЕЙТИ В МТС' (Go to МТС). On hover, the background shifts to #c51345 with a 200ms cubic-bezier(0.2, 0, 0, 1) transition—no scale or shadow change, just color. Secondary buttons use #007cff background with white text, same dimensions and radius. Ghost buttons have transparent background, 2px primary-colored border, and primary text; on hover, they fill with #ffe4e9 (primary-container) while maintaining the border. Icon buttons are 48px square, transparent background, with a 12px lg border-radius hover state (background #e2e5eb). All buttons disable at 50% opacity with curs

Do's and Don'ts

**Do**

• Do use the primary red (#ff0032) exclusively for primary CTAs, links, and brand-critical moments—never dilute it with secondary uses.
• Do maintain at least 40px (lg spacing) between major sections to create visual breathing room and reduce cognitive load.
• Do apply the label-md typography (MTS Wide, 14px, 700 weight, uppercase, 0.05em letter-spacing) to all button text for consistent, scannable action affordance.
• Do use the three-tier shadow system (none, 0 0 6px / 0 4px 16px, 0 4px 24px / 0 12px 20px) to signal depth; never invent custom shadows.
• Do pair MTS Wide (headlines, CTAs) with MTS Compact (body, UI) to create visual rhythm—never mix typefaces within a single component.

**Don't**

• Don't use primary red (#ff0032) for body text, backgrounds, or non-interactive elements—it's reserved for actions and brand moments.
• Don't apply border-radius smaller than 8px (sm) to interactive elements; it reads as unfinished or overly technical.
• Don't exceed 20px blur radius on box-shadows; the aesthetic favors subtle depth over theatrical layering.
• Don't compress vertical spacing below 24px (md) between major sections; white-space is a design feature, not wasted real estate.
• Don't mix system fonts (Arial, sans-serif) with the proprietary MTS font family in the same component—always use the full MTS stack for consistency.