Wildberries (Wb) Design System Deep Dive

1. Brand Overview

Wildberries (Wb) is Russia’s largest online retailer, and its design system reflects exactly that scale and ambition. There’s no pretense of hyper-minimalism here — the UI is dense, colorful, and unapologetically "commerce-first." This is a design language built for a marketplace with millions of SKUs, hundreds of categories, and a customer base that spans demographics. It's functional, but it’s also brand-heavy.

The vibe: energetic, approachable, slightly playful. The palette leans hard into purples and pinks — that’s their brand signature. The typography is clean and utilitarian (the Hauss family), but not sterile. Components are rounded, shadows are soft, and spacing follows a predictable 8px grid. You get the sense that every visual choice aims to make browsing feel less like reading a spreadsheet and more like walking into a busy, colorful bazaar.

This is not a “white space luxury” brand. Wildberries wants you to see products, prices, and promotions immediately. Dark neutrals (#242424) anchor the header and key text, bright accents (like #a73afd purple) pop on buttons and icons, and functional colors (greens for success, reds for danger) are clearly defined in design tokens.

The philosophy here:

• Brand-first color saturation. Purples aren’t just accents; they’re everywhere.
• Consistent radius language. Rounded everything — from buttons (16px) to inputs to chips.
• Dense but ordered layouts. Multiple breakpoints (from 576px to 1024px) keep content flexible.
• Shadows for subtle depth. No heavy drop shadows; just enough to separate layers.

It’s a commerce UI that feels fast and familiar — think Amazon’s density but with a visual identity that’s much stronger.

2. Color System

2.1 Primary Colors

The main brand hue is purple — specifically tokens like --mo-controls-bg-purple-default: #a73afd and gradient stops from #8306f7 to #ed3cca. It’s vibrant, not muted, and it dominates CTAs, active states, and brand highlights.

Psychology: Purple conveys creativity, uniqueness, and quality. In retail, it differentiates from the sea of blue/red competitors (Ozon, AliExpress). It’s bold enough to stand out in product grids without clashing with photography.

Competitors often lean on safer palettes — Wildberries goes all-in. This works because the color is consistent across UI elements, not just in branding.

2.2 Complete Palette

Here’s the extracted palette (semantic tokens and key raw colors):

Note: The palette is huge — multiple shades for each functional color, plus alpha variants. This is a retail thing: you need flexibility for banners, badges, overlays, and accessibility tweaks.

2.3 Color Relationships

Contrast is strong where it matters: purple buttons on white backgrounds, white text on purple. The dark neutral (#242424) against pure white (#ffffff) hits AAA standards for body text.

Links (#0000ee) are the old-school browser blue — a curious choice in 2025. It’s instantly recognizable but feels dated.

Dark mode isn’t explicit here — most tokens are light-oriented — but the abundance of neutrals and alpha variants means they could flip backgrounds and keep brand colors intact.

2.4 Usage Guide

• Best combinations:

  • Brand purple (#a73afd) + white text — perfect CTA contrast.
  • Dark neutral (#242424) + brand light backgrounds (#fbf0ff) — subtle section separation.
  • Success green (#13864d) + mint light (#d8fbfd) — friendly positive states.

• Avoid:

  • Purple on blue — low contrast.
  • Danger red (#f90637) on brand purple — vibrates visually.
  • Link blue (#0000ee) on mint light — borderline contrast.

3. Typography

3.1 Font Families

Everything uses Hauss with a massive fallback stack:
Hauss, Segoe UI, -apple-system, Roboto, Helvetica Neue, Noto Sans, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

No Google or Adobe sources — likely a self-hosted custom font. Hauss is geometric, modern, and keeps UI text compact without losing legibility.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle — no ultra-bold headlines, just slight size bumps. This keeps product grids tight and reduces line breaks. Links and captions share sizes, which makes small text consistent. The odd "button 0px" entry is likely a non-text icon button.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

Breakpoints: 98px (odd), 576px, 600px, 768px, 1024px. Classic mobile-tablet-desktop scaling, with a weird micro-breakpoint (98px) likely for micro-widgets.

5. Visual Elements

Border Radius

Shadows

• rgba(0,0,0,0.15) 0px 0px 3px 0px — subtle layer separation
• rgba(0,0,0,0.1) 0px 0px 20px 0px — modal depth
• rgba(0,0,0,0.1) 0px 4px 20px 0px — card lift

Borders

Minimal — 1px solid rgba(255,255,255,0.4) on some buttons.

6. Components

6.1 Buttons

Burger Menu Button

• Default: transparent bg, black text, 16px radius, 1px semi-white border
• Focus: outline 2px solid var(--mo-brand-700), box-shadow combo

Search Button

• Default: #c8c8d1 bg, #242424 text, no radius, no border

6.2 Links

Two styles:

• Blue (#0000ee), no underline
• Semi-white (rgba(255,255,255,0.6)), no underline — footer links

6.3 Forms

Search input: white bg, #242424 text, 16px radius, padding 17px 100px 17px 20px, no border.

6.4 Cards

Not explicitly extracted, but shadows suggest light depth and 8px radius.

7. Design Tokens

:root {
  /* Core Colors */
  --neutral-dark: #242424;
  --link-blue: #0000ee;
  --white: #ffffff;
  --black: #000000;
  --brand-purple-default: #a73afd;
  --brand-light-bg: #fbf0ff;
  --success-green: #13864d;
  --danger-red: #f90637;
  --warning-orange-alpha60: #ff670099;
  --info-sky: #0daef2;
  --mint-light: #d8fbfd;

  /* Typography */
  --font-family-hauss: "Hauss", "Segoe UI", -apple-system, Roboto, "Helvetica Neue", "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-size-heading-1: 18px;
  --font-size-heading-2: 16px;
  --font-size-caption: 14px;
  --font-size-button: 13.3333px;

  /* Spacing */
  --space-1: 1px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-40: 40px;
  --space-48: 48px;
  --space-72: 72px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 16px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.15) 0px 0px 3px 0px;
  --shadow-md: rgba(0,0,0,0.1) 0px 0px 20px 0px;
  --shadow-lg: rgba(0,0,0,0.1) 0px 4px 20px 0px;
}

8. AI Coding Assistant Prompt

# Wildberries (Wb) Design System Specification

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

## Brand Context
Wildberries is a high-volume online retailer with a bold, purple-heavy identity. The design system is functional, dense, and colorful, with rounded components, an 8px spacing grid, and subtle shadows for depth.

## Color Palette
- Neutral Dark: #242424 — Headers, primary text
- Link Blue: #0000ee — Inline links
- White: #ffffff — Backgrounds, text on dark
- Black: #000000 — Text, icons
- Brand Purple Default: #a73afd — CTAs, buttons
- Brand Light BG: #fbf0ff — Section backgrounds
- Success Green: #13864d — Positive states
- Danger Red: #f90637 — Errors
- Warning Orange Alpha60: #ff670099 — Alerts
- Info Sky: #0daef2 — Informational badges
- Mint Light: #d8fbfd — Accent backgrounds

## Typography
- Font Family: Hauss, Segoe UI, -apple-system, Roboto, Helvetica Neue, Noto Sans, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 18px | 400 | 1.33 | Page titles |
| H1 alt | 16px | 400 | 1.38 | Section titles |
| Caption | 14px | 400 | 1.43 | Small labels |
| Button | 13.3333px | 400 | — | UI buttons |

## Spacing & Grid
Base: 8px
Scale: 1px, 6px, 8px, 12px, 16px, 24px, 40px, 48px, 72px

## Border Radius
- sm: 3px — Chips
- md: 8px — Cards, inputs
- lg: 12px — Large buttons
- pill: 16px — Inputs, pill buttons
- full: 100% — Circular buttons/icons

## Shadows & Depth
- sm: rgba(0,0,0,0.15) 0px 0px 3px 0px — subtle separation
- md: rgba(0,0,0,0.1) 0px 0px 20px 0px — modals
- lg: rgba(0,0,0,0.1) 0px 4px 20px 0px — cards

## Components

### Primary Button
```css
.btn-primary {
  background: #a73afd;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 16px;
  font-weight: 400;
  font-size: 13.3333px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #9715f4; }
.btn-primary:focus {
  outline: 2px solid var(--mo-brand-700);
  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: #c8c8d1;
  color: #242424;
  padding: 8px 16px;
  border-radius: 0;
  font-size: 13.3333px;
}
```

### Input Field
```css
.input-search {
  background: #ffffff;
  color: #242424;
  border: none;
  border-radius: 16px;
  padding: 17px 100px 17px 20px;
}
.input-search:focus { outline: none; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.1) 0px 4px 20px 0px;
  padding: 24px;
}
```

## Layout & Responsive Rules
- Breakpoints: 98px, 576px, 600px, 768px, 1024px
- Page padding: multiples of 8px
- Grid gap: 8px / 12px depending on density

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus indicators: 2px solid brand color
- Disabled: 50% opacity

## DO List
- Use only colors from the palette
- Maintain 8px grid spacing
- Keep corners rounded per radius tokens
- Use Hauss font for all text
- Apply shadows only from token list
- Respect breakpoints for responsive layouts

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners
- Don't use heavy shadows
- Don't alter font weights
- Don't remove focus outlines

## Code Examples
```css
/* Primary Button */
.btn-primary { ... }

/* Card */
.card { ... }

/* Search Input */
.input-search { ... }
```

9. Summary

TL;DR: Wildberries’ design system is bold, purple-heavy, and structured around an 8px grid with rounded components and soft shadows. It’s built for dense commerce layouts but keeps a consistent brand feel.

Brand Keywords: purple-dominant, commerce-dense, rounded-friendly, functional-colorful