Userapi (VK.com) Design System Deep Dive

1. Brand Overview

VK.com — or more specifically, the Userapi front-end interface — is Russia’s largest social network presented through a design language that’s functional, utilitarian, and engineered for scale. This isn’t a brand trying to win design awards with over-the-top gradients or quirky animations. It’s a platform that prioritises clarity, speed, and familiarity across billions of user sessions.

The vibe: clean, slightly corporate, but softened with rounded corners and a friendly blue accent. The design language is “UI-first” rather than “brand-first.” You can tell by the typography choices — system fonts like -apple-system and Arial — and by the heavy reliance on semantic CSS variables for colors. This choice makes sense for a product that has to run on everything from low-end Android devices to high-res Macs.

The philosophy here:

• Practicality over personality. The primary blue #2688eb is functional — for links, actions, CTAs — rather than decorative.
• Consistency through tokens. Hundreds of CSS variables define every possible state, hover, and active variant. This is a developer’s dream and a designer’s guardrail.
• Accessibility baked in. The palette is full of mid-tone grays and distinct state colors (reds for errors, greens for success, oranges for warnings). These aren’t just aesthetic — they’re signaling systems.
• Minimalist typography. No custom fonts, no brand-specific typeface. Just system fonts for speed and familiarity.

Who’s this for?

• For users: a UI that feels native to their device.
• For developers: a token-driven system where every variant is pre-defined.
• For designers: a sandbox with clear constraints — you work within the palette, the spacing grid, the radius values, and you avoid inventing new styles.

It’s not flashy. It’s not experimental. But it’s solid, scalable, and predictable. And on a product this size, predictability is gold.

2. Color System

2.1 Primary Colors

The main brand accent is rgb(38, 136, 235) → #2688eb. A mid-saturated blue, leaning slightly towards cyan. This works because it's bright enough to stand out against light backgrounds but not so neon that it clashes with text or imagery. Compared to Facebook’s deeper #1877F2, this blue is more energetic and feels less corporate.

Psychologically, blue signals trust, reliability, and calm — all things you want when your product handles personal messaging, payments, and social sharing.

Blue here is used for:

• Primary interactive elements (links, CTAs)
• State indicators in tabs and navigation
• Accent backgrounds for certain messages

2.2 Complete Palette

Here's the extracted palette, flattened to hex:

…and dozens more functional shades defined in --vkui variables.

2.3 Color Relationships

The palette is built for contrast on light backgrounds (--vkui--colors_scheme: light). Most colors sit well above WCAG AA contrast thresholds when paired with white or #ebedf0. The blacks and deep grays ensure readable text. Functional colors (error red, success green) are saturated enough to be unambiguous.

No dark mode tokens in the data — this is a light-theme-first system.

2.4 Usage Guide

• Blue (#2688eb) works with white text — avoid pairing with black text (contrast is fine, but it looks unbalanced).
• Error red (#ff3347) should only be used for destructive actions or error states — don’t use it for generic emphasis.
• Success green (#4bb34b) pops against #ebedf0 — avoid using it on darker backgrounds without adjusting text color.
• Grays (#868d97, #65707d) are for text hierarchy — don’t mix them randomly, keep secondary consistent.
• Warm accents (orange, peach) are attention-grabbers — use sparingly.

3. Typography

3.1 Font Families

Two stacks dominate:

• UI/system stack: -apple-system, system-ui, Helvetica Neue, Roboto — for headings, body, links.
• Legacy stack: Arial — for buttons and some captions.

No Google Fonts, no Adobe Fonts, no variable fonts. This is purely for speed and native feel.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is subtle — only one true large heading at 20px, then everything else collapses into 15px or 13px ranges. This keeps UI compact. It works for a dense social feed, but sacrifices drama — there’s no giant 48px hero type.

Readability is solid thanks to system font hinting and conservative line heights. The 13px body/link size is small but acceptable on high-res screens.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, with some deviations (1px borders, 4px micro-gaps).

4.2 Layout

Breakpoints:

• 500px — probably mobile-first adjustments.
• 767px — small tablet cutoff.

No max-widths in data, but the breakpoints suggest a responsive scale: mobile (≤500px), small tablet (≤767px), then desktop.

5. Visual Elements

Border Radius

Rounded corners everywhere:

8px is the dominant radius — applied to inputs, buttons, links. 12px and 20px are rare, maybe for modals or larger cards.

Shadows

One shadow style:

rgba(0, 0, 0, 0.12) 0px 0px 0px 1px inset — used sparingly, likely for inset borders rather than depth. This is effectively flat design with subtle dividers.

6. Components

6.1 Buttons

No explicit button data beyond typography (Arial), but radius and spacing suggest:

• Border-radius: 8px
• Font-size: 13.33px
• No text-decoration
• Likely solid fills for primary, outlined for secondary

States would use the semantic color variables for hover/active.

6.2 Links

Three link styles:

No underline by default. Hover states not defined — possibly color shifts via semantic tokens.

6.3 Forms

Search input:

• Background: transparent
• Color: black
• Border: none by default, 0.5px solid accent on focus
• Border-radius: 8px
• Padding: 0px 0px 0px 36px — space for icon

Focus state uses var(--vkui--color_stroke_accent).

6.4 Cards

No explicit card component data, but background secondary (#f5f5f5) and radius 8–12px suggest flat, rounded rectangles with inset borders.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-1: #868d97;
  --color-gray-2: #65707d;
  --color-primary-blue: #2688eb;
  --color-hover-light: #ebecee;
  --vkui--color_background: #ebedf0;
  --vkui--color_accent_raspberry_pink: #e03fab;
  --vkui--color_accent_orange_fire: #f05c44;
  --vkui--color_accent_gray: #a3adb8;
  --vkui--color_accent_secondary: #3f8ae0;
  --vkui--color_accent_red: #ff3347;
  --vkui--color_background_secondary: #f5f5f5;
  --vkui--color_background_positive: #4bb34b;
  --vkui--color_accent_cyan: #13ffd0;
  --vkui--color_accent_orange: #ffa000;
  --vkui--color_accent_orange_peach: #f9b54f;
  --vkui--color_accent_violet: #792ec0;
  --vkui--color_accent_purple: #735ce6;
  --vkui--color_accent_pink: #f45fff;
  --vkui--color_accent_lime: #aff70d;
  --vkui--color_icon_warning: #f8a01c;

  /* Typography */
  --font-system: -apple-system, system-ui, Helvetica Neue, Roboto;
  --font-arial: Arial;
  --font-size-h1: 20px;
  --font-size-h1-alt: 15px;
  --font-size-button: 13.3333px;
  --font-size-caption: 13px;
  --line-height-h1: 1.20;
  --line-height-caption: 1.15;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-36: 36px;
  --space-60: 60px;
  --space-80: 80px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-inset: rgba(0, 0, 0, 0.12) 0px 0px 0px 1px inset;
}

8. AI Coding Assistant Prompt

# Userapi (VK.com) Design System Specification

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

Brand Context:
VK.com’s UI is utilitarian, token-driven, and light-theme-first. It relies on system fonts, a functional blue accent, and rounded corners. The design prioritises clarity, accessibility, and speed, avoiding ornamental complexity.

Color Palette:
- Black: #000000 — Primary text, icons
- White: #ffffff — Background, text on blue
- Gray 1: #868d97 — Secondary text
- Gray 2: #65707d — Tertiary text
- Primary Blue: #2688eb — Links, CTAs
- Hover Light Gray: #ebecee — Hover/focus backgrounds
- Base Background: #ebedf0 — Page background
- Accent Pink: #e03fab — Special highlights
- Accent Orange Fire: #f05c44 — Alerts
- Accent Gray: #a3adb8 — Disabled states
- Accent Secondary Blue: #3f8ae0 — Secondary actions
- Accent Red: #ff3347 — Errors
- Background Secondary: #f5f5f5 — Cards
- Success Green: #4bb34b — Success states
- Accent Cyan: #13ffd0 — Decorative accents
- Accent Orange: #ffa000 — Warnings
- Accent Orange Peach: #f9b54f — Promotions
- Accent Violet: #792ec0 — Themed events
- Accent Purple: #735ce6 — Themed elements
- Accent Pink: #f45fff — Festive UI
- Accent Lime: #aff70d — Highlights
- Warning Icon Orange: #f8a01c — Warning icons

Typography:
- Headings: -apple-system, system-ui, Helvetica Neue, Roboto
- Buttons/Captions: Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 20px | 600 | 1.20 | Page titles |
| H1 alt | 15px | 400 | 1.33 | Subheadings |
| H1 alt | 15px | 500 | 1.33 | Emphasised subheadings |
| Button | 13.3333px | 400 | — | Button labels |
| Caption | 13px | 400 | 1.15 | Small text |
| Caption | 13px | 500 | 1.23 | Emphasised small text |
| Link | 13px | 400 | 1.15 | Inline links |

Spacing & Grid:
Base: 8px grid.  
Scale: 1px, 4px, 6px, 7px, 8px, 10px, 12px, 16px, 18px, 20px, 24px, 28px, 36px, 60px, 80px  
Use multiples for all padding/margins.

Border Radius:
- none: 0 — square edges
- sm: 8px — inputs, buttons
- md: 12px — cards
- lg: 20px — large panels

Shadows & Depth:
- Inset: rgba(0, 0, 0, 0.12) 0px 0px 0px 1px inset — use for subtle dividers

Component Specifications:

Primary Button:
```css
.btn-primary {
  background: #2688eb;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 400;
  font-size: 13.3333px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #3f8ae0; }
.btn-primary:focus { outline: 2px solid #3f8ae0; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #2688eb;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #2688eb;
  font-size: 13.3333px;
}
.btn-secondary:hover { background: #ebecee; }
```

Navigation Links:
```css
.nav-link {
  color: #2688eb;
  text-decoration: none;
}
.nav-link:hover { color: #3f8ae0; }
```

Input Fields:
```css
.input {
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 0 0 0 36px;
}
.input:focus {
  border: 0.5px solid var(--vkui--color_stroke_accent);
}
```

Cards:
```css
.card {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-inset);
}
```

Layout & Responsive Rules:
- Breakpoints: 500px (mobile), 767px (tablet)
- Page padding: 16px mobile, 28px desktop
- Grid gap: multiples of 8px

Interaction Rules:
- Transition: 150ms ease for state changes
- Focus indicators: solid outline with accent color
- Loading states: light gray placeholders

DO List:
- Use ONLY colors from the palette
- Maintain 8px grid spacing
- Use system font stack for headings
- Use Arial for buttons/captions
- Respect semantic color usage (red for errors, green for success)
- Keep border radius consistent per component type
- Use inset shadow for subtle depth

DON'T List:
- Invent new colors
- Mix sharp and rounded corners
- Use shadows for depth — rely on borders
- Remove focus outlines
- Change font sizes arbitrarily

Code Examples:

Primary Button:
```css
<button class="btn-primary">Submit</button>
```

Card:
```css
<div class="card">
  <h2 class="card-title">Title</h2>
  <p>Content here</p>
</div>
```

Form Input:
```css
<input type="search" class="input" placeholder="Search">
```

9. Summary

TL;DR — Userapi’s design system is a token-rich, light-theme-first UI language built for scale: system fonts, a functional blue accent, 8px grid, and consistent rounded corners. It’s practical, accessible, and predictable.

Brand Keywords:

• token-driven
• utilitarian-minimalist
• device-native
• accessibility-conscious
• light-theme-first