MTS Brand Design System Deep Dive

1. Brand Overview

MTS’s Moscow personal website is a corporate UI done with precision. It’s a telco brand, but the visual language here leans harder into tech-modern than telco-bubbly. Gone is the overuse of gradients or skeuomorphic gloss—this is flat, functional, and disciplined.

The vibe: high-contrast, bold typography, clean blocks of color, and consistent rounded geometry. The primary brand red is aggressive (literally #ff0032) but it’s deployed with restraint—mostly for CTAs, focus states, and hover accents. The base UI lives in deep neutral gray (#1d2023), white (#ffffff), and a solid secondary blue (#0070e5). This combination keeps the experience anchored yet lively.

The audience is clear: urban, mobile-first users who expect clarity and speed. The typography choices—custom “MTS Wide” and “MTS Compact”—are very branded. These aren’t generic web fonts; they have a condensed, slightly geometric feel that makes the interface feel proprietary. This creates instant brand recall.

The design philosophy: grid discipline (8px base), consistent corner radii, minimal shadows, and a semantic color system that spans functional states (positive, negative, warning) without breaking visual harmony. MTS’s approach here is not minimalism for minimalism’s sake—it’s brand minimalism, where every rounded corner and every color token is deliberate.

They’ve nailed the “own the red” principle, but also know when to back off. Red is not a background color here—it’s an action color. That’s a smart move for accessibility and perception. The rest of the palette stays muted so that red can do its job.

2. Color System

2.1 Primary Colors

The main brand color is #ff0032 (rgb(255,0,50))—high energy, high contrast. This red screams action. In UI terms, it’s used for primary buttons, hover/focus states, and active tab indicators (--color-control-active-tabbar). Psychologically, it signals urgency and importance—perfect for a telco that wants you to act (buy, pay, subscribe).

Secondary “brand” color is #0070e5 (rgb(0,112,229))—a cooler blue used for links, secondary actions, and certain category cards. Blue balances the red—keeping the overall brand from feeling too aggressive.

The primary neutral is #1d2023 (rgb(29,32,35)), a near-black used for text and headers. This is the anchor tone.

Compared to competitors like Beeline (yellow-black) or Megafon (green-white), MTS’s red-black-blue triad feels more tech and less playful.

2.2 Complete Palette

2.3 Color Relationships

The primary red (#ff0032) on white passes WCAG AA easily for normal text. Red on dark neutral also pops, but red on blue? Avoid—it’s low contrast and visually noisy.

The palette has functional groupings: “positive” greens, “negative” oranges/reds, “warning” yellows, “info” blues. This makes for predictable UI feedback.

Dark mode isn’t explicitly defined, but the base neutral #1d2023 could invert into lighter grays while keeping red/blue accents.

2.4 Usage Guide

• Use #ff0032 only for interactive elements (buttons, links, focus outlines).
• Base text: #1d2023 or #3e3e3e.
• Secondary actions: #0070e5.
• Background surfaces: #f2f3f7 or #ffffff.
• Avoid mixing multiple accent colors in one view—stick to one functional family per context.

3. Typography

3.1 Font Families

• MTS Wide — custom, bold, condensed. Used for headings, buttons.
• MTS Compact — custom, slightly narrower. Used for links, captions, body.
• MTS Wide Embed — variant for embedded contexts. Fallbacks: Arial where defined. No Google or Adobe fonts—these are custom brand assets.

3.2 Type Scale

3.3 Hierarchy

Biggest size is 44px for hero headings/buttons—huge for web UI, but fits a telco splash. The scale steps down in tight increments—no huge jumps, which keeps hierarchy smooth. Uppercase at smaller sizes signals UI labels and navigation.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints are dense—lots of fine-grain adjustments: from 360px up to 1920px. This suggests they tune layouts per device class, not just mobile/tablet/desktop.

5. Visual Elements

Border Radius

Consistent radii: 8px, 16px, 24px, 32px, 40px. 24px is most frequent—cards, divs, sections. Buttons often 16px. Some pill-like 60px or full 50%.

Shadows

Mostly subtle: rgba(0,0,0,0.08) 0px 0px 16px—light depth. No heavy drop shadows except rare cases.

Borders

Thin (1px) rgba(188,195,208,0.5) for dividers and inputs. Solid white borders for emphasis on dark backgrounds.

6. Components

6.1 Buttons

mm-web-action-button (dark)

Default: bg #1d2023, text #fafafa, padding 5px 7px, radius 12px. Hover: bg #ff0032. Active/Focus: bg #ff0032, scale 0.98.

mm-web-action-button (light)

Default: bg #f2f3f7, text #1d2023, same padding/radius. Hover/Active/Focus: same red highlight.

prp-button-link

Default: bg #ff0032, text white, padding 0 18px, radius 16px. Hover: red + multi-layer drop shadow, opacity 0.8. Active: subtle shadow, stays red. Focus: inset fill.

mm-web-action-button (white)

Default: bg white, text #1d2023, padding 13px, radius 16px.

Slider pagination

Default: bg rgba(255,255,255,0.2), radius 8px, font-size 36px.

Media widget button

Default: bg rgba(188,195,208,0.5), radius 60px.

6.2 Links

No underline. Color changes per context:

• Brand red (#ff0032)
• Gray mid (#969fa8)
• Blue (#0070e5)
• White (#ffffff)
• Gray dark (#626c77)
• Neutral dark (#1d2023)
• Light white (#fafafa)

Hover states change color via CSS vars.

6.3 Forms

Inputs: white bg, border 1px rgba(188,195,208,0.5), radius 12px or 16px. Focus: border-color var(--color-accent-active), inset fill.

6.4 Cards

Radius 24px or 32px. Shadows subtle. No card hover animations in data.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary-neutral: #1d2023;
  --color-secondary-blue: #0070e5;
  --color-white: #ffffff;
  --color-gray-medium: #626c77;
  --color-black: #000000;
  --color-gray-light: #f2f3f7;
  --color-gray-mid: #969fa8;
  --color-brand-red: #ff0032;
  --color-accent-blue: #007cff;
  --color-text-visited-link: #883888;
  /* ... all other color tokens from data ... */

  /* Typography */
  --font-mts-wide: "MTS Wide", Arial;
  --font-mts-compact: "MTS Compact", Arial;
  --font-mts-wide-embed: "MTS Wide Embed", "MTS Wide", "MTS Compact", Arial;
  --font-size-h1: 44px;
  /* ... all sizes ... */

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  /* ... all spacing values ... */

  /* Radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-60: 60px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.08) 0px 0px 16px 0px, rgba(0,0,0,0.08) 0px 4px 16px 0px;
}

8. AI Coding Assistant Prompt

# MTS Design System Specification

You are an MTS design expert. Build UIs matching their visual language exactly.

## Brand Context
MTS uses a bold, tech-modern visual language. The brand red (#ff0032) is reserved for actions and accents. Typography is custom (MTS Wide, MTS Compact). Layout follows an 8px grid with consistent corner radii.

## Colors
- Primary Neutral: #1d2023 — Base text, headers
- Secondary Blue: #0070e5 — Links, secondary actions
- White: #ffffff — Backgrounds, text on dark
- Gray Medium: #626c77 — Secondary text
- Gray Light: #f2f3f7 — Surface backgrounds
- Brand Red: #ff0032 — Primary CTAs, hover/focus
- Accent Blue: #007cff — Hover/focus accents
- Positive Green: #26cd58 — Success accents
- Negative Orange: #f95721 — Error accents
- Warning Yellow: #fac031 — Alerts
- ...include all remaining tokens

## Typography
Fonts:
- Headings: "MTS Wide", Arial
- Body: "MTS Compact", Arial
Sizes:
| Element | Size | Weight | Line Height |
| h1 | 44px | 500 | 1.00 |
| Button Large | 44px | 500 | 1.00 |
| Link Large | 36px | 500 | 1.11 |
| Caption | 14px | 400-500 | 1.43 |

## Spacing & Grid
Base: 8px
Scale: 2,4,5,6,7,8,9,11,12,13,16,20,24,25,27.8281,32,40,52,56,80px

## Border Radius
- sm: 8px — small buttons
- md: 16px — buttons, inputs
- lg: 24px — cards, sections
- xl: 32px — modals
- full: 50% — round buttons

## Shadows & Depth
- Soft: rgba(0,0,0,0.08) 0 0 16px, 0 4px 16px

## Components

### Primary Button
Default: bg #ff0032, color #fff, radius 16px, padding 0 18px
Hover: bg #ff0032, opacity 0.8, shadow
Active: shadow rgba(0,0,0,0.1) 0 10px 25px
Focus: inset fill, no outline

### Secondary Button
Default: bg #f2f3f7, color #1d2023, radius 12px, padding 5px 7px
Hover/Active: bg #ff0032

### Input Field
Default: bg #fff, border 1px rgba(188,195,208,0.5), radius 12px, padding 0 12px
Focus: border-color var(--color-accent-active), inset fill

### Card
bg #fff, radius 24px, soft shadow

## Layout & Responsive Rules
- Breakpoints: 360px, 768px, 1024px, 1280px, 1440px, 1920px
- Max content width: 1920px
- Page padding: multiples of 8px

## Interaction Rules
- Transition: 150ms ease
- Focus: background change + border-color
- Active: scale 0.98 for buttons

## DO List
- Use only palette colors
- Maintain 8px grid
- Use MTS Wide for headings, MTS Compact for body
- Keep radii consistent per component type
- Reserve red for actions

## DON'T List
- Don't use custom colors
- Don't mix sharp and rounded corners
- Don't apply heavy shadows
- Don't underline links

## Code Examples

.btn-primary {
  background: #ff0032;
  color: #fff;
  padding: 0 18px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 12px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { opacity: 0.8; }
.btn-primary:focus { box-shadow: 0 0 0 100px var(--background-secondary-autofill) inset; }

.input {
  border: 1px solid rgba(188,195,208,0.5);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
}
.input:focus { border-color: var(--color-accent-active); }

9. Summary

TL;DR — MTS’s design system is bold, disciplined, and brand-driven. The red is sacred, the grid is tight, and typography is proprietary. It’s a tech-modern UI with a telco soul.

Brand Keywords:

• action-red
• grid-disciplined
• tech-modern
• proprietary-type
• functional-color