Mail.ru Design System Deep Dive

1. Brand Overview

Mail.ru has been around long enough to cement its place in the Russian internet ecosystem. Their current design system feels like a product of maturity rather than trend-chasing. This is not a “let’s reinvent everything” style—it's a practical, functional interface that prioritizes clarity over decoration.

The first impression: clean, blue-heavy, UI-focused. The blue is that classic tech-platform hue—RGB(0, 112, 240) and its siblings—instantly aligning with trust, reliability, and clickable CTAs. White backgrounds dominate, which gives breathing room for content and keeps things feeling light. Shadows are used sparingly, mainly for cards and modals, and they’re soft and low-opacity.

Typography is confident but not flashy. VKSansDisplay leads, with MailSans and safe fallbacks like Helvetica and Arial. The type is consistent—weights and sizes are tightly controlled, no wild deviations. This is a UI system optimized for speed and legibility, not editorial flourish.

Spacing is disciplined—8px scale, with occasional oddballs like 2px and 6px for micro-adjustments. Border radii are generous (8px, 12px, 20px) but stop short of full pills except for avatars. This keeps UI elements approachable without going full “friendly bubble.”

Overall vibe: pragmatic tech platform with a touch of friendliness. This system is designed for high-traffic, multi-service environments—email, news, weather, games—so clarity and repeatability matter more than expressive branding. If you’re designing for them, expect to stick to the grid, respect the palette, and avoid over-styling.

2. Color System

2.1 Primary Colors

Primary is RGB(0, 112, 240) (#0070f0). This is the anchor for clickable actions: links, primary buttons, and key interactive elements. It’s not the deepest blue—it has a touch of vibrancy that keeps it from feeling corporate-stiff. Compared to Gmail’s red or Outlook’s darker blue, Mail.ru’s blue is brighter and more inviting.

They don’t rely on just one shade. There’s a family of related blues (#0077ff, #0073f7, #005ff9) for different states—hover, focus, accents. This is smart: using multiple blues for states makes interactions feel responsive without introducing new hues.

White (#ffffff) is the other major player, used for backgrounds, button text, and surface elements.

2.2 Complete Palette

2.3 Color Relationships

They keep contrast strong—primary blue on white, white on blue, dark gray on white. WCAG-wise, #0070f0 on #ffffff hits AAA easily. The grays are less contrasty; #a5a7ad on white is fine for secondary text but wouldn’t meet AAA for body copy—used intentionally for de-emphasis.

Dark mode? There’s a dark background token (#19191A) and modal inverse color (rgba(48,48,48,1)), but the extracted data suggests light mode is dominant.

2.4 Usage Guide

Works well:

• Primary blue (#0070f0) with white text for CTAs
• Dark gray (#2c2d2e) for headings on white
• Soft backgrounds (#F0F1F3, #d9e6ff) behind content blocks

Avoid:

• Mixing multiple accent colors in the same UI block (e.g., purple and orange in one card—it dilutes hierarchy)
• Using secondary gray (#a5a7ad) for primary content—it will hurt readability

3. Typography

3.1 Font Families

Primary: VKSansDisplay, MailSans, Helvetica, Arial
Fallbacks are safe web fonts—Helvetica and Arial keep it consistent across OSs. No Google or Adobe Fonts—likely self-hosted custom fonts.

Secondary contexts sometimes drop to plain Helvetica/Arial—probably for legacy components.

3.2 Type Scale

3.3 Hierarchy

They use size jumps to create hierarchy: 28 → 24 → 20 for major headings. Body/link text sits in the 15–17px range. Captions drop to 14px or 13px. The 11px caption is microtext—probably footer or legal disclaimers.

Weight changes reinforce hierarchy. Headings lean heavier (500–700), body stays at 400, buttons and links are mostly 500 for emphasis.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, with micro-adjustments.

4.2 Layout

Breakpoints:

• 767px (mobile/tablet border)
• 1100px (desktop)

Likely fluid widths between breakpoints. Container max widths aren’t explicit but spacing tokens suggest comfortable padding even at large screen sizes.

5. Visual Elements

Border Radius

They like rounded corners. 8px and 12px dominate—friendly but still sharp enough for a tech product. 20px is used for larger, softer elements.

Shadows

• rgba(0, 16, 61, 0.06) 0px 6px 20px 0px — soft, low-depth
• rgba(18, 25, 43, 0.12) 0px 4px 12px 0px — slightly stronger
• rgba(0, 16, 61, 0.28) 0px 16px 48px 0px — deep modal/card

Shadows are functional, never flashy.

Borders

Mostly 1px solid blues for buttons, occasional 2px for dividers. Inset dark borders for iframes.

6. Components

6.1 Buttons

Primary (ph-login)
Default: bg #0077ff, text #ffffff, padding 0 20px, radius 8px, no border.
Hover: backgroundColor initial (odd—maybe state handled via class).
Font: 15px, weight 500.

Outlined (resplash-btn_outlined-themed)
Default: transparent bg, text #0070f0, padding 8px 16px, radius 8px, border 1px solid #0077ff.
Hover: bg rgba(39,43,55,0.3), text #005bd1.
Active: bg rgba(0,16,61,0.06).
Font: 15px, weight 500.

Banner Button (dtd-b-banner__button)
Default: bg rgba(0,16,61,0.06), text #2c2d2e, padding 6px 14px, radius 8px.
Hover: background initial.

Dark Primary (resplash-btn_dark-primary)
Default: bg #ffffff, text #2c2d2e, padding 8px 16px, radius 8px.

6.2 Links

Variants:

• Dark Gray (#2c2d2e), weight 400
• Primary Blue (#0070f0), weight 500
• White (#ffffff), weight 500
• Medium Gray (#87898f), weight 400
• Light Gray (#a5a7ad), weight 400
  No underline by default.

6.3 Forms

No explicit inputs extracted—likely styled with same radius and border logic.

6.4 Cards

Shadows suggest: bg white, radius 8–12px, padding from spacing scale, shadow rgba(0,16,61,0.06) 0 6px 20px.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-blue: #0070f0;
  --color-primary-blue-strong: #0077ff;
  --color-focus-blue: #0073f7;
  --color-hover-blue: #005ff9;
  --color-black: #000000;
  --color-dark-gray: #2c2d2e;
  --color-medium-gray: #87898f;
  --color-light-gray: #a5a7ad;
  --color-green-accent: #0dc268;
  --color-deep-teal: #087c6d;
  --color-white: #ffffff;
  --color-lime: #97e946;
  --color-purple: #73519F;
  --color-violet: #8C64FF;
  --color-sweet-purple: #F2E8FF;
  --color-salmon: #FFEAEA;
  --color-orange: #FF9E00;
  --color-yellow-tint: #FFF9E5;
  --color-mint: #96e9cd;
  --color-sky-bg: #CCE4FF;
  --color-negative-red: #ED330a;
  --color-negative-hover: #E4320C;
  --color-negative-bg: #FEEFEB;

  /* Typography */
  --font-primary: "VKSansDisplay", "MailSans", Helvetica, Arial;
  --font-secondary: Helvetica, Arial;
  --font-size-h1-lg: 28px;
  --font-size-h1-md: 24px;
  --font-size-h1-sm: 20px;
  --font-size-button-lg: 17px;
  --font-size-body: 15px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 13px;
  --font-size-caption-xs: 11px;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-sm: rgba(0, 16, 61, 0.06) 0px 6px 20px 0px;
  --shadow-md: rgba(18, 25, 43, 0.12) 0px 4px 12px 0px;
  --shadow-lg: rgba(0, 16, 61, 0.28) 0px 16px 48px 0px;
}

8. AI Coding Assistant Prompt

# Mail.ru Design System Specification

You are a Mail.ru design expert. Build UIs matching their visual language exactly.

## Brand Context
Mail.ru’s design system is functional, high-traffic, and trust-oriented. Blue-driven palette, clean white surfaces, disciplined 8px grid, rounded corners, soft shadows. Typography is confident but utilitarian—VKSansDisplay leads.

## Colors
- Primary Blue: #0070f0 — Links, primary CTAs
- Strong Blue: #0077ff — Primary button fills
- Focus Blue: #0073f7 — Hover/focus states
- Hover Blue Tint: #005ff9 — Light hover/focus overlays
- Black: #000000 — Rare high-contrast text
- Dark Gray: #2c2d2e — Primary text
- Medium Gray: #87898f — Secondary text
- Light Gray: #a5a7ad — Disabled text
- Green Accent: #0dc268 — Success states
- Deep Teal: #087c6d — Rare accent
- White: #ffffff — Backgrounds, text on blue
- Lime: #97e946 — Widget highlights
- Purple Accent: #73519F — Themed text
- Violet Accent: #8C64FF — Highlights
- Sweet Purple: #F2E8FF — Background tint
- Salmon Tint: #FFEAEA — Alert backgrounds
- Orange Accent: #FF9E00 — Warnings
- Yellow Tint: #FFF9E5 — Info cards
- Mint Event: #96e9cd — Calendar events
- Sky Background: #CCE4FF — Light sections
- Negative Red: #ED330a — Error text
- Negative Hover Red: #E4320C — Error hover
- Negative Background: #FEEFEB — Validation backgrounds

## Typography
Font Families:
- Primary: "VKSansDisplay", "MailSans", Helvetica, Arial
- Secondary: Helvetica, Arial

Type Scale:
| Level | Size | Weight | Line Height | Use |
| H1 Large | 28px | 500 | 1.29 | Page titles |
| H1 Medium | 24px | 700 | 1.17 | Section headings |
| H1 Small | 20px | 500 | 1.30 | Subsections |
| Button Large | 17px | 500 | — | Primary buttons |
| Body | 15px | 400 | 1.33 | Paragraphs |
| Caption | 14px | 400 | 1.29 | Metadata |
| Small Caption | 13px | 400 | 1.38 | Secondary info |
| Micro | 11px | 400 | 1.27 | Legal/disclaimer |

## Spacing & Grid
Base: 8px grid.
Scale: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 70.5px.
Use multiples for all padding/margins.

## Border Radius
- sm: 6px — small divs
- md: 8px — buttons, cards
- lg: 12px — modals, larger elements
- xl: 20px — large cards
- round: 50% — avatars

## Shadows & Depth
- sm: rgba(0,16,61,0.06) 0 6px 20px
- md: rgba(18,25,43,0.12) 0 4px 12px
- lg: rgba(0,16,61,0.28) 0 16px 48px

## Component Specifications

### Primary Button
Default:
- background: #0077ff
- color: #ffffff
- padding: 0px 20px
- border-radius: 8px
- border: none
- font: 15px/500
Hover:
- background: initial (state handled via class)
Focus:
- outline: none
Active:
- same as default

### Outlined Button
Default:
- background: transparent
- color: #0070f0
- padding: 8px 16px
- border-radius: 8px
- border: 1px solid #0077ff
Hover:
- background: rgba(39,43,55,0.3)
- color: #005bd1
Active:
- background: rgba(0,16,61,0.06)

### Link
- No underline
- Colors: dark gray (#2c2d2e), primary blue (#0070f0), white (#ffffff), medium gray (#87898f), light gray (#a5a7ad)
- Weight: 400 or 500

### Card
- background: #ffffff
- border-radius: 8px–12px
- shadow: var(--shadow-sm)

## Layout & Responsive Rules
Breakpoints:
- Mobile: < 767px
- Tablet: 767px–1100px
- Desktop: > 1100px

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus indicator: outline or background tint
- Disabled: opacity 0.5

## DO
- Use only palette colors
- Maintain 8px grid
- Apply correct radius per component type
- Keep text weights consistent per hierarchy
- Use shadows sparingly

## DON'T
- Invent new blues or grays
- Mix sharp and rounded corners
- Overuse accent colors
- Remove hover/focus states

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0077ff;
  color: #ffffff;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: initial;
}
```

### Outlined Button
```css
.btn-outlined {
  background: transparent;
  color: #0070f0;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #0077ff;
}
.btn-outlined:hover {
  background: rgba(39,43,55,0.3);
  color: #005bd1;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: rgba(0, 16, 61, 0.06) 0px 6px 20px;
  padding: 16px;
}
```

9. Summary

TL;DR — Mail.ru’s design system is blue-forward, grid-disciplined, and clear. Rounded corners, soft shadows, and a tight type scale make it approachable without losing tech credibility.

Brand Keywords:

• blue-trust
• grid-disciplined
• tech-functional
• rounded-friendly