VK Brand Design System Deep Dive

1. Brand Overview

VK is Russia’s largest social network, but its design system shows a lot more than just “social media UI.” This is a mature, utility-first product design language. VK’s interface feels pragmatic, engineered for high-density content, but still approachable.

The vibe? Functional minimalism. Not the stripped-down monochrome minimalism of early tech startups, but a controlled, neutral palette punctuated by confident blues. This isn’t about delight through ornament—it’s about clarity in high-traffic, high-interaction contexts. The UI needs to handle chat bubbles, feeds, video players, and forms, all without feeling chaotic.

They avoid playful rounded extremes (no pill buttons with 9999px radius here) and keep radii modest—8px is the workhorse, making everything feel consistent without screaming “cute.” Shadows are minimal, often replaced by subtle separators and background tints to define layers. The design language favors flatness with tiny inset shadows for form fields.

Typography leans heavily on system fonts (-apple-system, system-ui, Helvetica Neue, Roboto) with Arial creeping into buttons and captions—probably for cross-platform rendering consistency. Sizes are conservative: 20px for main headings, 13–15px for most body and caption text. This keeps density high and readability stable across devices.

The color system is sprawling—VK exposes a huge set of semantic tokens, each tuned for specific UI contexts. The primary blue #2688eb is unmistakable, used in CTAs and links. Supporting neutrals span from #000000 to mid-grays like #868d97 and lighter tints for backgrounds. Functional colors (red for errors, green for success, orange for warnings) are present, but they stay within muted saturation ranges compared to flashy startup palettes.

This is for a user base that logs in every day and spends hours inside. The design system isn’t trying to impress on first glance—it’s trying to stay invisible while being relentlessly usable. VK’s brand design system is a masterclass in scale: how to keep thousands of UI elements visually coherent without overcomplicating the style rules.

2. Color System

VK’s color system is huge. They’ve clearly codified every possible UI state into semantic tokens. This is not a “pick a primary and a secondary” setup—it’s a full operational palette.

2.1 Primary Colors

The main brand color is #2688eb (RGB 38, 136, 235). This is a mid-bright blue that reads confidently without going neon. Psychologically, it signals trust and reliability—classic for social networks. It’s comparable to Facebook’s #1877F2 but slightly lighter and less saturated, which softens the tone. It’s used for links, actionable icons, and active state indicators.

The primary background is a light gray tint rgb(235, 237, 240) — clean, low-glare, perfect for long reading sessions. Text is predominantly #000000 with secondary text in muted grays.

2.2 Complete Palette

(This is a truncated table—full list of tokens is in section 7.)

2.3 Color Relationships

Contrast is solid across primary text (#000000) on light backgrounds. Blue #2688eb on white is readable and meets WCAG AA for large text. Many tokens define hover/active variants to maintain contrast on interaction.

There’s no visible dark mode in the extracted data—--colors_scheme is set to light. Dark variants exist for modals and inverse surfaces, but they’re used selectively.

2.4 Usage Guide

• Works well: Primary blue with white text; black text on light gray backgrounds; muted grays for secondary labels.
• Avoid: Blue text on light blue backgrounds without sufficient contrast—it gets mushy.
• Functional colors should be paired with high-contrast text (white on red, dark gray on yellow).
• Keep hover states within the same hue family—VK uses slightly darker/lighter shades rather than hue shifts.

3. Typography

3.1 Font Families

VK sticks to system fonts—safe for performance and consistent rendering:

• -apple-system, system-ui, Helvetica Neue, Roboto
• Arial for buttons and captions (legacy cross-platform reasons)
• Extended fallback stack for multi-language captions (Noto Sans variants for multiple scripts)

No Google Fonts, no Adobe Fonts—this is about speed and reliability.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is subtle. 20px headings stand out but don’t dominate. Most body and caption text sits in the 13–15px range, meaning the visual difference between heading and body is modest—perfect for dense feeds. Weight changes (400 vs 500 vs 600) are the primary emphasis tool.

Readability is high on desktop and mobile—line heights keep blocks tight without feeling cramped.

4. Spacing & Layout

4.1 Spacing Scale

VK uses an 8px base grid, but also has odd values (1px, 6px, 7px) for fine control.

4.2 Layout

Breakpoints:

• 500px
• 767px

This suggests mobile-first design with a tablet breakpoint at 767px. Containers likely scale fluidly—no fixed max width in data.

5. Visual Elements

Border Radius

Values:

• 0px 0px 6px (low confidence, maybe for dropdown corners)
• 8px — primary radius for inputs, buttons, cards
• 12px — occasional use in larger surfaces
• 20px — rare, probably for modals or highlighted cards

Shadows

One inset shadow:

• rgba(0, 0, 0, 0.12) 0px 0px 0px 1px inset — used for subtle depth in fields

Flat design dominates—no heavy drop shadows.

Borders & Dividers

Color tokens like --vkui--color_separator_primary (rgb(215, 216, 217)) define subtle dividers. Borders are used more than shadows for separation.

6. Components

6.1 Buttons

No explicit button styles extracted—likely handled via semantic tokens. Given radii and spacing, expect:

• 8px radius
• Solid fills for primary
• No shadows

6.2 Links

Three variants:

• Black (#000000) — neutral text links
• Blue (#2688eb) — actionable links
• White (#ffffff) — links on dark backgrounds

No underlines by default, hover state not defined in data (likely color change).

6.3 Forms

Search input:

• Default: transparent background, black text, no border, 8px radius, left padding 36px
• Focus: 0.5px solid var(--vkui--color_stroke_accent)

Minimal styling—relies on surrounding container.

6.4 Cards

No explicit card component in data, but backgrounds like rgb(245, 245, 245) and radii 8px suggest flat panels with padding from spacing scale.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors - semantic tokens */
  --vkui--color_background: rgb(235, 237, 240);
  --vkui--color_background_secondary: rgb(245, 245, 245);
  --vkui--color_background_modal_inverse: rgb(28, 29, 30);
  --vkui--color_background_info_tint: rgb(222, 238, 255);
  --vkui--color_background_warning: rgb(255, 242, 214);
  --vkui--color_background_negative_tint: rgb(255, 233, 233);
  --vkui--color_background_positive: rgb(75, 179, 75);
  --vkui--color_accent_secondary: rgb(63, 138, 224);
  --vkui--color_accent_red: rgb(255, 51, 71);
  --vkui--color_accent_orange: rgb(255, 160, 0);
  --vkui--color_accent_violet: rgb(121, 46, 192);
  --vkui--color_accent_cyan: rgb(19, 255, 208);
  --vkui--color_accent_purple: rgb(115, 92, 230);
  --vkui--color_accent_pink: rgb(244, 95, 255);
  --vkui--color_accent_lime: rgb(175, 247, 13);
  --vkui--color_accent_gray: rgb(163, 173, 184);
  --vkui--color_accent_raspberry_pink: rgb(224, 63, 171);
  --vkui--color_separator_primary: rgb(215, 216, 217);
  /* Typography */
  --font-family-system: -apple-system, system-ui, Helvetica Neue, Roboto;
  --font-family-arial: Arial;
  --font-size-h1: 20px;
  --font-size-body: 15px;
  --font-size-caption: 13px;
  /* 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;
  /* Border Radius */
  --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

# VK Design System Specification

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

## Brand Context
VK's design system is functional, neutral, and built for high-density social content. It uses a controlled palette, modest radii, and flat surfaces with minimal shadows. Typography is system-based for speed and consistency.

## Color Palette
- Primary Blue: #2688eb — Links, CTAs, active icons
- Black: #000000 — Primary text
- White: #ffffff — Inverse text, dark backgrounds
- Gray #868d97 — Secondary text
- Gray #65707d — Tertiary text
- Background: #ebeef0 — Page background
- Background Secondary: #f5f5f5 — Panels
- Accent Red: #ff3347 — Errors
- Accent Orange: #ffa000 — Warnings
- Accent Secondary Blue: #3f8ae0 — Secondary buttons
- Accent Raspberry Pink: #e03fab — Highlights
- Accent Violet: #792ec0 — Decorative
- Accent Cyan: #13ffd0 — Special states
- Accent Purple: #735ce6 — Badges
- Accent Pink: #f45fff — Badges
- Accent Lime: #aff70d — Success
- Background Warning: #fff2d6 — Alert BG
- Background Negative Tint: #ffe9e9 — Error BG
- Background Positive: #4bb34b — Success BG
- Separator Primary: #d7d8d9 — Dividers

## Typography
- Headings: -apple-system, system-ui, Helvetica Neue, Roboto
- Buttons/Captions: Arial
- Caption multi-language: -apple-system, system-ui, Roboto, Helvetica Neue, Geneva, Noto Sans (multi-script)

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 20px | 600 | 1.20 | Page titles |
| Body | 15px | 400 | 1.33 | Main text |
| Body Medium | 15px | 500 | 1.33 | Emphasis text |
| Caption | 13.33px | 400 | - | Buttons |
| Caption System | 13px | 400 | 1.15 | Secondary labels |
| Caption Medium | 13px | 500 | 1.23 | Emphasis captions |
| Link | 13px | 400 | 1.15 | Hyperlinks |

## Spacing & Grid
Base: 8px. Scale: 1px, 4px, 6px, 7px, 8px, 10px, 12px, 16px, 18px, 20px, 24px, 28px, 36px, 60px, 80px.
Use multiples of 8px for major layout spacing; small values for fine-tuning.

## Border Radius
- none: 0 — sharp edges
- sm: 8px — inputs, buttons, cards
- md: 12px — larger panels
- lg: 20px — modals

## Shadows & Depth
Minimal shadows. Use `rgba(0,0,0,0.12) 0px 0px 0px 1px inset` for form fields.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #2688eb;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  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: #f5f5f5;
  color: #2688eb;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 15px;
  border: 1px solid #d7d8d9;
}
.btn-secondary:hover { background: #e5ebf1; }
```

### Input Field
```css
.input-search {
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 0 0 0 36px;
}
.input-search:focus { border: 0.5px solid #3f8ae0; outline: none; }
```

### Card
```css
.card {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
}
```

## Layout & Responsive Rules
- Breakpoints: 500px (mobile), 767px (tablet)
- Mobile: full-width content, 16px padding
- Desktop: fluid containers

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus: visible outline using accent color
- Hover states: hue shift or brightness change within same color family

## DO
- Use only palette colors
- Maintain 8px grid
- Use system fonts
- Keep radii consistent at 8px for most elements
- Use separators instead of heavy shadows

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse bright accents outside intended contexts
- Remove focus styles

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #2688eb;
  color: #fff;
  border-radius: 8px;
  padding: 8px 16px;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #f5f5f5;
  color: #2688eb;
  border-radius: 8px;
  border: 1px solid #d7d8d9;
}
```

Input:
```css
.input-search {
  border-radius: 8px;
  padding-left: 36px;
}
```

9. Summary

TL;DR: VK’s design system is utilitarian and precise. It uses a massive semantic color token library, system fonts, and an 8px grid to keep thousands of UI parts coherent. Minimal shadows, consistent radii, and carefully tuned interaction states make it perfect for high-density social content.

Brand Keywords: neutral-functional, high-density, system-font, token-driven, flat-UI