OK.ru Brand Design System Deep Dive

1. Brand Overview

OK.ru (Odnoklassniki) is one of Russia’s largest social networks, and their current visual language tells you immediately: this is a product for mass use, cross‑demographic, with a clear identity built on warmth and familiarity. The primary orange (rgb(255, 119, 0)) is unavoidable — it’s in the logo, it’s in CTAs, it’s in your face in the best way. It’s high‑energy and social without being neon‑aggressive. This isn’t corporate blue or minimalist black‑and‑white; it’s friendly, a bit nostalgic, and distinctly branded.

The rest of the system sits in a pragmatic, UI‑first space. They aren’t chasing trendy gradients or brutalist layouts. This is a functional, component‑driven design system tuned for fast recognition, legibility, and high click‑through rates. The typography stack blends system fonts (-apple-system, system-ui, Roboto) with a custom humanist sans (Onest) for a slightly softer, friendlier look. You can see the care in small things: button radii are rounded but not childish, shadows are used sparingly, spacing sits comfortably on an 8px grid.

Their audience is broad — older users included — so the contrast is strong, touch targets are generous, and elements don’t hide behind hover‑only states. The palette includes a lot of semantic variables for status colors (positive, negative, info, warning), which tells me they’ve built this to scale with complex interactions: chats, notifications, commerce, games.

The design philosophy here feels like:

• Own the orange — make it the brand’s heartbeat.
• Keep it readable — no thin grays on white.
• Build for touch and desktop — same components, responsive breakpoints at 600px and 1274px.
• Be consistent — the same radius, shadow, and spacing logic repeats everywhere.

It’s not flashy. It’s not minimal for minimalism’s sake. It’s pragmatic UI with a clear brand signal.

2. Color System

2.1 Primary Colors

The primary brand color is Orange: rgb(255, 119, 0) / #ff7700. It’s warm, saturated, and stands out against the primarily neutral UI. Psychologically, orange is energetic, social, and friendly. It’s less formal than red or blue, but still grabs attention. In a social network, it says “join in” instead of “proceed with caution.”

The secondary semantic color is a very light transparent black: rgba(0, 0, 0, 0.04) — used for subtle button backgrounds and neutral elements. This keeps the design from feeling flat when orange isn’t appropriate.

Compared to competitors:

• Facebook — blue for trust, corporate.
• VK — blue for familiarity in the Russian market.
• OK.ru — orange for warmth and differentiation.

2.2 Complete Palette

All unique colors from extracted data:

(Note: The CSS variables list contains many more status shades, hover/active states, and tints. They’re all part of a semantic token system, not just raw color swatches.)

2.3 Color Relationships

There’s a clear semantic mapping:

• Orange for primary actions.
• Red for negative/destructive.
• Green for positive/success.
• Blue for informational.
• Yellow for warnings.
• Neutral grays for text tiers.

Hover/active variants are systematically darker or lighter versions of the base color (--vkui--color_accent_orange_fire--hover, etc.). This is good practice — keeps contrast consistent.

Accessibility: Orange on white passes for large text/buttons (contrast ratio ~3:1). For small text, they use white on orange, which passes easily. Secondary grays (#99a2ad) on white are borderline for small text — they’re used for captions, so acceptable within WCAG’s guidelines for non‑essential info.

2.4 Usage Guide

Do:

• Use #ff7700 only for primary clickable elements.
• On orange backgrounds, use white text.
• Use semantic tints for states (hover, active, disabled).

Don’t:

• Put orange next to bright red — they clash.
• Use medium gray #99a2ad for primary text — too low contrast.
• Invent new accent colors — stick to the token set.

3. Typography

3.1 Font Families

Two main stacks:

1. Onest, Arial, Helvetica Neue, Helvetica — friendly, geometric sans, used for links, buttons, captions.
2. System fonts: -apple-system, system-ui, Helvetica Neue, Roboto — used for headings, captions, buttons.

No Google Fonts or Adobe Fonts — all are system or custom loaded.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle — sizes don’t jump dramatically. They rely more on weight and line height to distinguish headings from body. This keeps UI compact, but still legible. The tallest line heights are on buttons and links (2.29) — likely for vertical centering in touch targets.

The use of Onest for interactive text gives CTAs a softer feel, contrasting the system font’s utilitarian look for headings.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

4.2 Layout

Breakpoints:

• 600px — mobile to tablet.
• 1274px — tablet to desktop.

No fixed container widths in the data, but the breakpoints suggest a two‑tier responsive approach: mobile layouts under 600px, expanded desktop above 1274px, with a fluid middle.

5. Visual Elements

Border Radius

Pill inputs with 100px radius stand out — very soft, friendly.

Shadows

Shadows are used for depth in modals/popovers, not on every card.

Borders

Minimal — mostly 1px solid in light grays or transparent tints.

6. Components

6.1 Buttons

Solid White Button (button-pro __solid-white):

• Default: white bg, dark text #2e2f33, 16px radius, padding: 0 16px.
• Focus: double box shadow for focus ring.
• No hover/active defined in data.

Primary Orange Button (vkuiButton__host):

• Default: orange bg #ff7700, white text, 8px radius, no padding (inner content likely handles spacing).
• Focus: same focus ring shadow.

Secondary Neutral Button:

• Default: rgba(0,0,0,0.04) bg, black text, 8px radius.
• Focus: same as above.

6.2 Links

Two styles:

1. Neutral link: rgba(46,47,51,0.64), no underline.
2. White link: white text, underline.

No hover styles in data — possibly handled globally.

6.3 Forms

Text inputs:

1. Pill input: #f7f4f2 bg, 100px radius, padding: 0 36px 0 12px, no border.
2. Minimal input: transparent bg, 0px radius, padding: 0 12px.

No focus states in data — probably default browser or JS‑applied.

7. Design Tokens

:root {
  /* Colors - semantic */
  --color-primary: #ff7700;
  --color-secondary-bg: rgba(0,0,0,0.04);
  --color-dark-gray: #2e2f33;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light-beige: #fbe7cd;
  --color-medium-gray: #99a2ad;
  --color-overlay-dark: rgba(46,47,51,0.48);
  --color-bright-blue: #0099ff;
  --color-accent-red: #ff3347;
  --color-accent-green: #4bb34b;
  --color-accent-yellow: #ffb313;
  --color-accent-violet: #792ec0;
  --color-accent-pink: #f45fff;
  --color-accent-cyan: #13ffd0;
  --color-accent-lime: #aff70d;
  --color-accent-azure: #07f;

  /* Typography */
  --font-primary: "Onest", Arial, "Helvetica Neue", Helvetica;
  --font-system: -apple-system, system-ui, "Helvetica Neue", Roboto;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-56: 56px;
  --space-260: 260px;

  /* Border Radius */
  --radius-4-top: 4px 4px 0 0;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.16) 0px 12px 24px 0px;
  --shadow-sm: rgba(0,0,0,0.08) 0px 1px 2px 0px;
  --shadow-inset: rgba(0,0,0,0.12) 0px 0px 0px 1px inset;
  --shadow-lg-dark: rgba(46,47,51,0.12) 0px 12px 24px 0px;
}

8. AI Coding Assistant Prompt

# OK.ru Design System Specification

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

## Brand Context
OK.ru is a social network with a warm, approachable design language. It balances high-contrast, brand-forward orange with a pragmatic neutral UI. Components are touch-friendly, consistent, and built on an 8px grid.

## Color Palette
- Primary Orange: #ff7700 — Primary buttons, CTAs, brand accents
- Secondary Neutral: rgba(0,0,0,0.04) — Secondary buttons, neutral surfaces
- Dark Gray: #2e2f33 — Primary text, borders
- Black: #000000 — Body text, icons
- White: #ffffff — Backgrounds, reversed text
- Light Beige: #fbe7cd — Background accents
- Medium Gray: #99a2ad — Secondary text
- Overlay Dark: rgba(46,47,51,0.48) — Hover overlays
- Bright Blue: #0099ff — Links, info accents
- Accent Red: #ff3347 — Errors, destructive actions
- Accent Green: #4bb34b — Success states
- Accent Yellow: #ffb313 — Warnings
- Accent Violet: #792ec0 — Decorative accents
- Accent Pink: #f45fff — Decorative accents
- Accent Cyan: #13ffd0 — Decorative accents
- Accent Lime: #aff70d — Decorative accents
- Accent Azure: #07f — Links, accents

## Typography
- Headings/System UI: -apple-system, system-ui, "Helvetica Neue", Roboto
- Interactive/Body: "Onest", Arial, "Helvetica Neue", Helvetica

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | -apple-system | 16px | 400 | 1.25 | Page titles |
| H1 var | -apple-system | 15px | 500 | 1.33 | Section headings |
| Link | Onest | 15px | 400 | 1.07 | Inline links |
| Button | Onest | 14px | 400 | 2.29 | Primary/Secondary buttons |
| Caption | Onest | 13px | 400 | 1.23 | Metadata text |
| Caption | -apple-system | 13px | 500 | 1.23 | Emphasized metadata |
| Button small | Onest | 12px | 400 | — | Compact buttons |
| Caption small | Onest | 12px | 400/600 | — | Small labels |

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 56px, 260px.
Use multiples of 8px for layout. 10px and 12px used for compact paddings. Section gaps: 24px+. Large hero spacing: 56px.

## Border Radius
- top-4: 4px 4px 0 0 — Tabs, panels
- sm: 8px — Cards, small buttons
- md: 12px — Images, modals
- lg: 16px — Large buttons
- xl: 20px/24px — Special containers
- pill: 100px — Search bars, pill buttons
- full: 50% — Avatars, circular buttons

## Shadows & Depth
- Large: rgba(0,0,0,0.16) 0px 12px 24px
- Small: rgba(0,0,0,0.08) 0px 1px 2px
- Inset: rgba(0,0,0,0.12) 0px 0px 0px 1px inset
- Large Dark: rgba(46,47,51,0.12) 0px 12px 24px

## Components

### Primary Button
```css
.btn-primary {
  background: #ff7700;
  color: #ffffff;
  border-radius: 8px;
  padding: 0;
  font-family: "Onest", Arial, "Helvetica Neue", Helvetica;
  font-size: 12px;
  font-weight: 400;
  border: none;
}
.btn-primary:focus {
  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px,
              rgba(0,0,0,0.2) 0px 0px 0px 2px;
}
```

### Secondary Button
```css
.btn-secondary {
  background: rgba(0,0,0,0.04);
  color: #000000;
  border-radius: 8px;
  padding: 0;
  font-size: 12px;
}
```

### Solid White Button
```css
.btn-white {
  background: #ffffff;
  color: #2e2f33;
  border-radius: 16px;
  padding: 0 16px;
  font-size: 14px;
}
```

### Input Field - Pill
```css
.input-pill {
  background: #f7f4f2;
  color: rgba(46,47,51,0.64);
  border-radius: 100px;
  padding: 0 36px 0 12px;
  border: none;
}
```

## Layout & Responsive Rules
- Breakpoints: 600px, 1274px
- Mobile: full-width containers, 8-16px padding
- Desktop: center-aligned content, generous spacing

## Interaction Rules
- State changes: 150ms ease
- Focus: box-shadow rings as defined
- Hover: use semantic hover tokens

## DO List
- Use only defined palette colors
- Maintain 8px spacing grid
- Keep radius consistent per component type
- Use Onest for interactive elements, system font for headings
- Apply semantic hover/active variants

## DON'T List
- Invent new accent colors
- Mix sharp and rounded corners
- Use low-contrast gray for primary text
- Overuse shadows

## Code Examples

Primary Button:
```css
.btn-primary { background: #ff7700; color: #fff; border-radius: 8px; font-size: 12px; }
```

Card:
```css
.card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: var(--shadow-lg); }
```

Input:
```css
.input { background: #f7f4f2; border-radius: 100px; padding: 0 36px 0 12px; }
```

9. Summary

TL;DR — OK.ru’s design system is a warm, orange‑driven UI built for clarity and consistency. Strong semantic color tokens, an 8px grid, and restrained shadows make it predictable and easy to scale. The brand orange is the heartbeat — everything else is calm, functional, and readable.

Brand Keywords — orange-forward, touch-friendly, pragmatic-consistent, warm-social, UI-first