Megafon Design System Deep Dive

1. Brand Overview

Megafon sits in that space between legacy telecom and modern digital service brand. It’s a Russian mobile and internet provider, but the UI feels like it wants to be more than “utility”. The green is aggressive but refined, pushing “trust + tech-forward” without being a bank-green.

This is a UI for scale. You can see it in the 8px grid. Everything slots neatly. The type is Graphik, giving it a corporate but friendly voice—clear letters, enough sass to keep it from being bland. Buttons are slightly over-designed for a telecom site: pill shapes, high-contrast hover states, performance shadows. They tip toward consumer tech aesthetics rather than dull enterprise portals.

The vibe: clean, almost clinical, but with splashes of personality. The purple accent is rare but adds brand distinction—it’s not just a green + white monotone. That purple says “we have products beyond SIM cards”.

They’re clearly designing for cross-device parity. Breakpoints are granular (25+ values, from 359px up to 1921px). This isn’t just mobile/desktop—they’re covering kiosks, smart TVs, maybe POS terminals. The Vuetify framework detection confirms a component-first approach—they’ve got Vue-based components locked into a token-driven system.

Architecturally, you’re looking at a design that’s meant to scale across marketing splash pages and transactional flows. This isn’t minimal for minimal’s sake. It’s minimal so performance is predictable. Colors are functional, radii are consistent with pill metaphors, and shadows are used sparingly to draw attention.

Philosophy distilled:

• Predictable grid → 8px base unit for rhythm.
• Strong primary brand green → visible at distance, works on devices outdoors.
• Micro-interaction detail → hover shadows, subtle focus states, small transforms.
• Corporate-friendly type → Graphik is approachable, still professional.
• Consistency across breakpoints → no surprise layouts.

2. Color System

2.1 Primary Colors

Primary brand color: rgb(0, 185, 86) (#00b956). This is a saturated green that leans slightly cool. It’s bold, highly visible, and aligns with the telecom promise of "connection" and "go" signals. In a market where competitors lean on blues (MTS uses red, Tele2 uses black), green clearly differentiates.

Green here is not earthy—it’s tech green. It pairs well with white and doesn’t clash with the blue accent (#34aaf2). This works because you can make green the action color and reserve blue for navigational cues or secondary CTAs.

2.2 Complete Palette

These values come from both the palette usage counts and CSS variable definitions. Interesting that purple has its own light/dark variants in tokens, even though it’s secondary.

2.3 Color Relationships

The main contrast pair: #00b956 (green) on #ffffff (white). Strong contrast—passes WCAG AAA for normal text. Secondary pair: #333333 text on #ffffff background—solid, neutral, high legibility.

Accent blue (#34aaf2) usually sits on white and does pass AA even for small text. It’s vibrant enough without overpowering green. Purple accents are rarer—they sit on white or as backgrounds.

Dark mode? Not evident here—colors are tuned for light backgrounds. Some rgba hover overlays (#f6f6f6 at different opacities) show they're thinking in surface layers, not reversing the scheme.

2.4 Usage Guide

• Green (#00b956): Only for interactive primaries and brand lockups. Avoid using it for long-form backgrounds—it’s fatiguing.
• Pair green with white text only. Grey text on green fails contrast.
• Blue (#34aaf2): Use for hyperlinks and secondary points, but not CTAs. Otherwise it competes with green.
• Purple: Rare—use sparingly for themed actions. Works on white.
• Light grey (#f6f6f6 rgba variants): Use as hover film behind cards, never for text.
• Avoid green + purple side-by-side—they vibrate together. Anchor with white or grey between.

3. Typography

3.1 Font Families

Graphik is the workhorse. Always with a fallback of Arial. No Google Fonts or Adobe Fonts detected—they’re serving something proprietary or locally hosted. This choice keeps everything tightly controlled—no unexpected kerning shifts.

No variable fonts—weights are discrete: 400, 500, 600, 700. The heavier ones (700) appear on major headings.

3.2 Type Scale

3.3 Hierarchy

Sizes are tight—largest heading is 32px, smallest caption is 12px. This keeps the visual system feeling compact. No massive hero headings—they rely more on weight (600–700) than oversized type.

Readability is solid. Body text stays in mid-weight 400–500, with generous line heights for smaller sizes (1.60). Captions at 12px are common—grey #999999 is used here to soften them against white.

4. Spacing & Layout

4.1 Spacing Scale

8px is the base. You see values at 4px, 8px, 12px, 16px, 24px, 32px. Rare numbers like 7px or 38px appear, but main rhythm is 8px multiples.

Common values:

• 1px: borders, hairline separators.
• 2px: micro-gaps, icon spacing.
• 8px: button padding (vertical rhythm).
• 16px, 24px: component padding.
• 30px, 32px: large button paddings or section margins.

ALL values:

4.2 Layout

Breakpoints:

• Mobile micro breakpoints: 359px, 479px, 572px.
• Tablet: 729px, 767px, 768px.
• Mid desktop: 1023px, 1024px, 1279px, 1280px.
• Large desktop: 1439px, 1440px, 1599px, 1600px.
• Wide screen: 1921px.

Granular—each is tuned for pixel-perfect responsive shifts.

5. Visual Elements

Border Radius System

Radii form a clear hierarchy:

• Sharp: 0px on sections (0px top, 0px right) with bottom 12px corners.
• Small: 6px, 8px for certain badges/cards.
• Medium: 12px, used heavily on divs, links.
• Large: 24px, 25px for cards and inputs.
• Pill scale: 30px for buttons.
• Tabs: 39px.
• Full circle: 50% for avatars/icons.

No mixing of angular + round on the same element—consistency is tight.

Shadows

Shadow tokens:

• Soft drop: rgba(0,0,0,0.1) 0px 2px 12px
• Deep drop: rgba(0,0,0,0.1) 0px 8px 28px
• Rare deep: rgba(0,0,0,0.2) 0px 0px 16px
• Focus depth: even rarer (rgba(34, 34, 34, 0.2) 0px 8px 50px)

They use shadows for interaction feedback, not ambient depth.

Borders & Dividers

Hairlines at 1px in greys, black, or brand blue. Blue borders on some hovers or accents.

6. Components

6.1 Buttons

Primary (Green)
Default:

• Background: #00b956
• Color: #ffffff
• Padding: 0px 16px
• Radius: 30px
• Border: none
  Font: 500 weight, 12px.
  Hover: transparent background, 1px solid var(--spbSky2) (brand blue), shadow: 0px 8px 28px rgba(0,0,0,0.1).
  Active: background: var(--stcBlack20), border same blue, box-shadow lighter.
  Focus: color changes to hover green token.

Purple nav arrow
Circle: 50% radius
Background: #731982, opacity 0.3
Font: 400 weight, 15px.
Hover/Active adopt same border/shadow pattern.

Outline Button
Default: #ffffff opacity 0.3 background, border white, radius 30px.
Hover: dark background, translateY(-6px).
Active: rotate 90°, brand dark overlay.
Focus: scale down, recolor.

Service Tab
Blue background (#1e64aa), 39px radius, white text. Hover changes background to green (#33c778) with box-shadow.

Chat Close Button
White background, 50% radius circle, grey text (#333333), soft shadow.

6.2 Links

Four main link colors: blue accent, black, white, green. All share:
Default: no underline.
Hover: underline, sometimes color shift (white to var(--stcWhite)).

6.3 Forms

No input styles provided—text, checkbox, radio, select arrays empty in extract. Likely handled by Vuetify defaults.

6.4 Cards

Radii: 24px or 25px
Shadows: soft drop (rgba(0,0,0,0.1) 0px 2px 12px)
Hover overlays: #f6f6f6 variants.

7. Design Tokens

:root {
  /* Colors */
  --brand-primary-green: #00b956;
  --brand-black-ui: #333333;
  --accent-blue: #34aaf2;
  --white: #ffffff;
  --neutral-mid-grey: #999999;
  --hover-green: #09d066;
  --surface-light-grey: #f6f6f6;
  --brandGreen20: #ddffec;
  --brandGreenDarken10: #00863e;
  --brandPurple: #731982;
  --brandGreen80: #0cdc78;
  --brandPurple20: #f2e5ff;
  --brandPurple80: #a367c1;

  /* Typography */
  --font-primary: 'Graphik', Arial, sans-serif;
  --font-size-h1-lg: 32px;
  --font-size-h1-md: 30px;
  --font-size-h1-sm: 22px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 18px;
  --font-size-body-sm: 15px;
  --font-size-caption: 12px;
  --line-height-tight: 1.20;
  --line-height-normal: 1.33;
  --line-height-loose: 1.60;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-38: 38px;
  --space-41: 41px;
  --space-44: 44px;
  --space-48: 48px;
  --space-62: 62px;
  --space-82: 82px;
  --space-96: 96px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-card: 24px;
  --radius-pill: 30px;
  --radius-tab: 39px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.1) 0px 2px 12px;
  --shadow-md: rgba(0,0,0,0.1) 0px 8px 28px;
  --shadow-lg: rgba(0,0,0,0.2) 0px 0px 16px;

}

8. AI Coding Assistant Prompt

# Megafon Design System Specification

System Prompt:
You are a Megafon design expert. Build UIs matching their visual language exactly.

Brand Context:
Megafon’s UI is built for scalability across telecom services—tight 8px grids, bold brand green, and corporate-friendly Graphik typography. Interaction details (shadows, hover transforms, border colors) reinforce a tech-forward but trustworthy image.

Color Palette:
- Brand Primary Green: #00b956 — CTAs, primary buttons, brand accents
- Black UI: #333333 — Headings and body text
- Accent Blue: #34aaf2 — Links, tiles, secondary accents
- White: #ffffff — Background, text on green
- Neutral Mid Grey: #999999 — Captions, secondary text
- Hover Green: #09d066 — Hover/focus states for green buttons
- Surface Light Grey: #f6f6f6 — Hover overlays, card surfaces
- BrandGreen20: #ddffec — Background tints
- BrandGreenDarken10: #00863e — Button hover darken
- BrandPurple: #731982 — Themed accent buttons
- BrandGreen80: #0cdc78 — Secondary green highlights
- BrandPurple20: #f2e5ff — Purple background tints
- BrandPurple80: #a367c1 — Subtle purple accents

Typography:
Font Family: 'Graphik', Arial, sans-serif

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 LG | 32px | 600 | 1.25 | Page titles |
| H1 MD | 30px | 700 | 1.20 | Section headers |
| H1 SM | 22px | 600 | 1.27 | Subsections |
| Body LG | 20px | 500 | 1.40 | Intro text |
| Body MD | 18px | 500 | 1.33 | Paragraphs |
| Body SM | 15px | 400–500 | 1.60 | Smaller UI text |
| Caption | 12px | 400–500 | 1.17–1.50 | Labels, meta info |

Spacing & Grid:
Base: 8px. Scale includes 1px, 2px, 4px, 8px, 12px, 16px, 20px, 24px, 30px, 32px, 36px, 38px, 44px, 48px, 62px, 82px, 96px.

Border Radius:
- none: 0 — Section blocks
- sm: 6px — Badges
- md: 8px — Cards
- lg: 12px — Divs, containers
- xl: 16px — Small modals
- xxl: 20px — Larger modules
- card: 24px — Cards, inputs
- pill: 30px — Buttons
- tab: 39px — Tab items
- full: 50% — Circles, avatars

Shadows & Depth:
- sm: rgba(0,0,0,0.1) 0px 2px 12px — card default
- md: rgba(0,0,0,0.1) 0px 8px 28px — hover states
- lg: rgba(0,0,0,0.2) 0px 0px 16px — rare emphasis

Component Specifications:

Primary Button:
Default: background #00b956; color #ffffff; padding 0 16px; radius 30px; border none; font-weight 500; font-size 12px.
Hover: background transparent; border 1px solid #34aaf2; shadow var(--shadow-md).
Active: background #stcBlack20; border 1px solid #34aaf2; shadow softened.
Focus: color changes to #09d066.

Secondary (Purple Nav Arrow):
Circle bg #731982, opacity 0.3; radius 50%; font-weight 400, font-size 15px; hover gets border & shadow pattern from primary.

Outline Button:
Bg rgba(255,255,255,0.3); border 1px solid #fff; radius 30px; hover darkens bg, translateY(-6px); active rotates 90deg; focus scales down.

Service Tab Button:
Bg #1e64aa; radius 39px; white text; hover changes bg to #33c778 with shadow.

Navigation Links:
Colors: blue, black, white, green. Hover: underline, optional color change.

Input Fields:
(No explicit data—use Vuetify defaults adjusted to Megafon palette)

Cards:
Bg white; radius 24–25px; shadow var(--shadow-sm); hover overlays in rgba(246, 246, 246, x).

Layout & Responsive Rules:
Breakpoints: 359, 479, 572, 729, 767, 768, 1023, 1024, 1279, 1280, 1439, 1440, 1599, 1600, 1921.
Containers align to multiples of 8px grid.

Interaction Rules:
Transitions 150–200ms ease for state changes; focus indicates with color change; hover adds shadow, sometimes transform.

DO List:
- Use only palette colors.
- Maintain 8px grid spacing.
- Keep button radii at 30px pill style.
- Use Graphik for all text.
- Limit shadows to specified tokens.
- Use purple only for special components.
- Keep hover underlines on links.

DON'T List:
- Invent new greens or blues.
- Mix sharp corners with pill buttons.
- Use shadows heavier than var(--shadow-lg).
- Apply brand green to long text blocks.
- Underline links by default.

Code Examples:

Primary Button:
```css
.btn-primary {
  background: #00b956;
  color: #ffffff;
  padding: 0 16px;
  border-radius: 30px;
  border: none;
  font-weight: 500;
  font-size: 12px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: transparent;
  border: 1px solid #34aaf2;
  box-shadow: rgba(0,0,0,0.1) 0px 8px 28px;
}
.btn-primary:focus { color: #09d066; }
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: rgba(0,0,0,0.1) 0px 2px 12px;
  padding: 24px;
}
.card:hover {
  background-color: rgba(246,246,246,0.44);
}
```

Link:
```css
.link {
  color: #34aaf2;
  text-decoration: none;
  font-weight: 500;
}
.link:hover {
  text-decoration: underline;
}
```

9. Summary

TL;DR
Megafon’s design system is built tight: 8px grid, bold brand green, Graphik type. Buttons are pill-shaped with precise hover shadows. Palette is mostly green/white/grey with blue and purple accents. Every breakpoint is considered.

Brand Keywords

• green-driven-tech
• grid-disciplined
• corporate-friendly
• accent-surgical
• hover-polished