Avito Brand Design System Deep Dive

1. Brand Overview

Avito is Russia’s largest classifieds platform — a place where you can buy, sell, rent, and find just about anything, from apartments to job offers. The design language reflects this utilitarian role: it’s not trying to be aspirational like a luxury e-commerce site, nor overly whimsical like some second-hand marketplaces. It’s functional with just enough color to feel approachable.

The vibe is clean, straightforward, and slightly corporate. That’s not a bad thing — for a platform that hosts millions of listings and users, clarity and trust are more important than a playful personality. The typography stack is pure system fonts (Arial with Helvetica fallbacks), which instantly signals speed and compatibility over custom branding. That choice says: “We load fast, we work everywhere, and we don’t break.”

The palette is minimal: white dominates, paired with black for primary actions, a deep blue for hover states, and a warm red-pink accent (#ff6163) sprinkled in. There’s no elaborate gradient work here — colors are flat, direct, functional.

Buttons are chunky, with generous padding and rounded corners (8px) — friendly without being overly playful. Borders are thin and neutral grey, shadows are rare and subtle. Depth comes more from spacing than from layers.

The entire system leans on a 4px spacing scale, which keeps layouts tight but consistent. Breakpoints kick in at 700px — a relatively narrow threshold that suggests mobile-first thinking.

Overall, Avito’s design philosophy is:

• Prioritize clarity over decoration.
• Stick to system-safe elements.
• Keep interactions obvious.
• Use color sparingly for meaning.

I love how restrained the palette is. I’m less excited about the font choice — Arial isn’t exactly inspiring — but it’s pragmatic. This is a “get the job done” design system.

2. Color System

2.1 Primary Colors

The primary action color isn’t a bright brand hue — it’s black (#000000) for buttons. This is unusual in modern UI design, where primary actions often use a saturated brand color. Here, black gives weight and contrast against the white background, making calls-to-action unmissable. On hover, it shifts to a softer dark grey (#333333), which keeps the interaction visible without being jarring.

The accent roles are handled by:

• #005fcc — a strong blue, used in hover/focus states for certain elements. This is likely tied to links or secondary emphasis.
• #ff6163 — a warm pink-red, possibly for alerts, highlights, or promotional elements.

Competitor comparison: OLX uses a saturated purple-blue for branding; Craigslist is pure black/blue text with no brand color. Avito sits in between — neutral core, with selective color pops.

2.2 Complete Palette

2.3 Color Relationships

• Contrast: Black on white is a 21:1 contrast ratio — perfect for WCAG AAA compliance. The hover dark grey (#333333) on white is still well above AAA requirements.
• Blue #005fcc on white is ~8.6:1 — also AAA compliant.
• Accent #ff6163 on white is ~3.5:1 — passes AA for large text, borderline for small text. Likely used for non-critical UI or decoration.

There is no dark mode palette here — everything is built for light backgrounds.

2.4 Usage Guide

Works well:

• Black buttons with white text — strong, clear.
• Blue hover states for links — intuitive, matches browser defaults.
• Red/pink accents for emphasis — draws the eye without overpowering.

Avoid:

• Using accent red/pink for body text — contrast is too low for accessibility.
• Mixing black and blue for CTAs — it’ll muddy the hierarchy.
• Applying shadows with these colors — the palette is flat; depth should come from spacing or borders.

3. Typography

3.1 Font Families

Avito uses Arial across contexts, with fallbacks to Helvetica Neue and Helvetica. No Google Fonts, no Adobe Fonts, no variable fonts — pure web-safe stack.

That means:

• Fast load times.
• Consistency across devices.
• No brand-specific typographic personality.

This is a deliberate “function over form” choice. It’s boring, but bulletproof.

3.2 Type Scale

3.3 Hierarchy

The type scale is tight — only 24px, 16px, 14px, and 13px sizes are in use. That keeps things compact and consistent. The jump from 24px headings to 16px body/buttons is enough to create hierarchy without dominating the page.

Captions at 13–14px are used heavily — likely for metadata, listing details, and small UI labels. Bold captions at 13px help call out key bits of info.

Readability is fine on desktop. On mobile, the small captions could be borderline for older eyes.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 4px. Everything is a multiple or near-multiple of 4.

4.2 Layout

Breakpoints: 700px — mobile-first approach. Likely switches to a stacked layout below this width.

No explicit container widths in the extracted data, but spacing suggests modest max widths and tight content grouping.

5. Visual Elements

Border Radius

Rounded corners are used sparingly — small radii for form fields, medium for buttons, full circles for avatars or icons.

Shadows

Two shadows found:

• rgba(142, 142, 142, 0.2) 0px 1px 1px 0px inset — subtle inset shadow, likely for inputs.
• rgba(0, 0, 0, 0.1) 0px 0px 4px 0px — soft outer shadow, rare.

Shadows are minimal — flat design dominates.

Borders

Thin 1px solids in neutral greys:

• rgb(214, 214, 214) — inputs, dividers.
• rgb(118, 118, 118) — textarea.
• rgb(215, 215, 215) — dividers.

6. Components

6.1 Buttons

Primary Button (Default):

• Background: #000000
• Text: #ffffff
• Padding: 10px 20px
• Border radius: 8px
• Border: none
• Font: Arial 16px, weight 400

Hover:

• Background: #333333

No active/focus states defined in the data — likely default browser focus.

This works because it’s high contrast and obvious. I love the padding — big enough to feel clickable.

6.2 Links

Default:

• Color: rgb(0, 0, 238) (browser default blue)
• Text-decoration: underline

Hover: no change (unusual — most brands tweak link hover color).

This is pure default HTML link styling — functional, but not branded.

6.3 Forms

Inputs: 2px radius, 1px grey borders, subtle inset shadow. No focus styling extracted — likely minimal default.

6.4 Cards

No explicit card component in extracted data, but divs use 4px radius and thin borders. Shadows are rare — expect flat panels.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark-grey: #333333;
  --color-blue-hover: #005fcc;
  --color-accent-red: #ff6163;
  --color-border-light: #d6d6d6;
  --color-border-medium: #767676;
  --color-border-alt: #d7d7d7;
  --color-link-default: rgb(0, 0, 238);

  /* Typography */
  --font-family-primary: Arial, "Helvetica Neue", Helvetica;
  --font-size-h1: 24px;
  --font-size-button: 16px;
  --font-size-caption-lg: 14px;
  --font-size-caption-sm: 13px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --line-height-h1: 1.17;
  --line-height-caption-lg: 1.50;
  --line-height-caption-sm: 1.38;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-10: 10px;
  --space-13: 13px;
  --space-14: 14px;
  --space-19-92: 19.92px;
  --space-30: 30px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-inset-light: rgba(142, 142, 142, 0.2) 0px 1px 1px 0px inset;
  --shadow-soft: rgba(0, 0, 0, 0.1) 0px 0px 4px 0px;
}

8. AI Coding Assistant Prompt

# Avito Design System Specification

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

## Brand Context
Avito’s design is functional, minimal, and pragmatic. It uses system fonts for speed and consistency, a restrained color palette, and clear, high-contrast buttons. Rounded corners are used sparingly, shadows are minimal, and spacing follows a 4px base grid.

## Color Palette
- Background White: #ffffff — page background, button text
- Primary Black: #000000 — primary buttons, main actions
- Hover Dark Grey: #333333 — button hover background
- Interaction Blue: #005fcc — hover/focus states for interactive elements
- Accent Red/Pink: #ff6163 — alerts, highlights
- Border Light Grey: #d6d6d6 — input borders
- Border Medium Grey: #767676 — textarea borders
- Border Alt Grey: #d7d7d7 — dividers
- Link Blue: rgb(0, 0, 238) — default link color

## Typography
Font family: Arial, "Helvetica Neue", Helvetica

| Element       | Size   | Weight | Line Height | Use |
|---------------|--------|--------|-------------|-----|
| Heading-1     | 24px   | 400    | 1.17        | Page titles |
| Button        | 16px   | 400    | —           | CTAs |
| Caption LG    | 14px   | 400    | 1.50        | Metadata |
| Caption SM    | 13px   | 400    | 1.38        | Small labels |
| Caption SM Bold | 13px | 700    | 1.50        | Emphasis labels |
| Link          | 13px   | 400    | 1.50        | Hyperlinks |

## Spacing & Grid
Base: 4px scale
Values: 2px, 4px, 10px, 13px, 14px, 19.92px, 30px
Use: Button padding (10px vertical), card spacing (13–14px), section gaps (30px)

## Border Radius
- sm: 2px — inputs
- md: 4px — small containers
- lg: 8px — buttons
- full: 50% — circular elements

## Shadows & Depth
- Inset light: rgba(142, 142, 142, 0.2) 0px 1px 1px 0px inset — inputs
- Soft outer: rgba(0, 0, 0, 0.1) 0px 0px 4px 0px — rare containers

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background: #000000;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-family: Arial, "Helvetica Neue", Helvetica;
  font-size: 16px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #333333; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Link
```css
a {
  color: rgb(0, 0, 238);
  text-decoration: underline;
}
```

### Input Field
```css
.input {
  border: 1px solid #d6d6d6;
  border-radius: 2px;
  font-family: Arial, "Helvetica Neue", Helvetica;
  box-shadow: rgba(142, 142, 142, 0.2) 0px 1px 1px 0px inset;
}
```

## Layout & Responsive Rules
- Breakpoint: 700px — stack content below this width
- Maintain 4px grid for spacing
- Section padding: 30px desktop, reduce on mobile

## Interaction Rules
- Transition timing: 150ms ease for hover state changes
- Focus indicators: default browser outlines
- Loading states: opacity changes or text placeholders

## DO
- Use only palette colors
- Keep spacing to multiples of 4px
- Use Arial stack consistently
- Maintain high contrast for text
- Use minimal shadows

## DON'T
- Invent new colors
- Mix large and small corner radii inconsistently
- Overuse shadows
- Reduce button padding below 10px vertical

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #000000;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
}
.btn-primary:hover { background: #333333; }
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  padding: 14px;
}
```

9. Summary

TL;DR — Avito’s design system is pure function: minimal palette, system fonts, tight spacing, and high-contrast CTAs. If you build with this spec, you’ll match their clean, utilitarian style exactly.

Brand Keywords:

• utilitarian-minimalist
• mobile-first-functional
• high-contrast-pragmatic
• flat-interface