Wildberries Design System Deep Dive

1. Brand Overview

Wildberries is Russia’s largest online retailer, and its design system reflects that scale. The brand’s visual language is unapologetically bold and functional. This is not a restrained Scandinavian aesthetic—it’s color-heavy, gradient-rich, and unapologetically vibrant. You can tell they’ve built a UI for high-volume browsing and fast conversions rather than boutique storytelling.

The vibe is retail-first: bright purples, pinks, and oranges dominate, backed by a deep neutral base (#242424) for headers and structural elements. The palette is huge—dozens of brand, success, warning, danger, and accent shades—suggesting a mature tokenized approach rather than ad hoc color picks. This is the kind of system that can support thousands of SKUs, seasonal campaigns, and multiple UI contexts without breaking.

Typography is anchored in the "Hauss" typeface, a sans-serif with clean proportions that’s easy to scan. The fallback stack (Segoe UI, -apple-system, Roboto, Helvetica Neue, Noto Sans, Arial, ...) ensures platform-native feel across devices. Sizes range from 13px for buttons to 18px for headings—tight, functional, optimized for dense layouts.

Spacing is driven by an 8px base grid, with deviations down to 1px and up to 72px for big layout gaps. This gives them micro-control over component fit while keeping macro layout consistent.

Wildberries’ design philosophy is modular and token-driven. Every color, radius, and shadow is abstracted into a variable (--mo-*), which screams "enterprise scale." They’ve clearly built for reusability: hover, pressed, and disabled states are all tokenized, meaning designers and developers can iterate without hardcoding.

Audience-wise, this is for mass-market retail shoppers. The UI prioritizes speed over elegance, clarity over artistry. Buttons are functional, links are underlined only when necessary, inputs are roomy, and shadows are subtle—used just enough to separate layers.

2. Color System

2.1 Primary Colors

Wildberries’ primary identity color in the UI is purple (#a73afd for --mo-controls-bg-purple-default, plus a gradient set from #ed3cca through #7c1af8). This is their brand anchor. In retail, purple conveys creativity, luxury, and a touch of playfulness. Competitors like Ozon lean blue for trust; Wildberries leans purple to stand out in a crowded Russian e-commerce space.

Their deep neutral (#242424) is the workhorse. It handles text, headers, and icons. White (#ffffff) provides contrast for text on dark backgrounds. They also use bright accent blues (#0098fe) for links, vivid oranges (#ff6700) for ratings/warnings, and greens (#1ab266) for success states.

2.2 Complete Palette

Here’s every color token from the extracted data:

That’s a monster palette—clear sign of a scaled token system.

2.3 Color Relationships

They use high-contrast combinations: white on purple, dark neutral on light backgrounds, bright accent colors for interactive states. Accessibility-wise, #ffffff on #a73afd passes WCAG AA easily. The danger palette is saturated, so error states pop. Semi-transparent variants help layer subtle states without breaking consistency.

Dark mode? The neutral 950 (#efeff5) and deep 250 (#3b3b44) suggest light/dark adaptability, but the data doesn’t confirm a dedicated dark theme—it’s more about contextual contrast.

2.4 Usage Guide

• Pair purple (#a73afd) with white for primary CTAs.
• Use deep neutral (#242424) for text-heavy areas.
• Reserve bright blues (#0098fe) for links and secondary actions.
• Avoid mixing more than one saturated accent in the same component—it gets noisy.
• Semi-transparent variants are for overlays, pressed states, and disabled.

3. Typography

3.1 Font Families

All typography uses Hauss with a robust 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 font loading—likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

They keep heading sizes small—max 18px. This is unusual but makes sense for dense catalog layouts. Body and link sizes hover around 14–16px, maintaining legibility. Weight rarely exceeds 450—no heavy bolds. Line heights are tight (1.33–1.43), giving a compact feel. Captions and buttons are smaller but still clear.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

4.2 Layout

Breakpoints: 98px, 576px, 600px, 768px, 1024px. Odd to see 98px—likely a specific micro-layout trigger (icon collapse). Standard mobile/tablet/desktop progression otherwise. Vuetify detected—grid system probably leverages its flexbox utilities.

5. Visual Elements

Border Radius

Values:

• 3px — spans
• 4px 10px — anchors
• 8px — divs, labels
• 12px — ul, buttons
• 16px — inputs, nav
• 50% — svg (circles)
• 100% — buttons (full pill)

They mix fixed and full radii—functional, not dogmatic.

Shadows

• rgba(0,0,0,0.15) 0px 0px 3px — subtle layer separation
• rgba(0,0,0,0.08) 0px 2px 16px — card/modals
• rgba(0,0,0,0.1) 0px 0px 20px — soft depth
• rgba(0,0,0,0.1) 0px 4px 20px — heavier depth

No brutal shadows—retail sites tend to avoid heavy depth.

Borders

Only notable: 1px solid rgba(255,255,255,0.4) on a burger button.

6. Components

6.1 Buttons

Burger Button (nav-element__burger...):

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

Search Button:

• Default: rgb(200,200,209) bg, #242424 text, no radius, no border.

6.2 Links

Two types:

• White (#ffffff) — nav links on dark backgrounds.
• Blue (#0000ee) — inline hyperlinks.

No underline by default.

6.3 Forms

Search input:

• White bg, dark text, no border, 16px radius.
• Padding: 17px 100px 17px 20px — roomy.

6.4 Cards

Not explicitly extracted, but shadows (0px 2px 16px) suggest card use.

7. Design Tokens

/* Colors */
:root {
  --neutral-dark: #242424;
  --neutral-white: #ffffff;
  --link-blue: #0000ee;
  --black: #000000;
  --purple-default: #a73afd;
  /* ... include all colors from 2.2 above ... */
}

/* Typography */
:root {
  --font-family-primary: "Hauss", "Segoe UI", -apple-system, Roboto, "Helvetica Neue", "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-1-size: 18px;
  --heading-1-line-height: 1.33;
  --heading-1-weight: 400;
  /* ... all type tokens ... */
}

/* Spacing */
:root {
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-17: 17px;
  --space-24: 24px;
  --space-40: 40px;
  --space-48: 48px;
  --space-72: 72px;
}

/* Border Radius */
:root {
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 50%;
  --radius-full: 100%;
}

/* Shadows */
:root {
  --shadow-sm: rgba(0,0,0,0.15) 0px 0px 3px 0px;
  --shadow-md: rgba(0,0,0,0.08) 0px 2px 16px 0px;
  --shadow-lg: rgba(0,0,0,0.1) 0px 0px 20px 0px;
  --shadow-xl: rgba(0,0,0,0.1) 0px 4px 20px 0px;
}

8. AI Coding Assistant Prompt

# Wildberries Design System Specification

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

## Brand Context
Wildberries is a high-volume e-commerce platform. The design is bold, vibrant, and functional, optimized for retail browsing. The system is tokenized for scale, with a huge accent palette and compact typography.

## Color Palette
- Neutral Dark: #242424 — Headers, body text
- Neutral White: #ffffff — Text on dark, backgrounds
- Purple Default: #a73afd — Primary buttons, brand accents
- Purple Hovered: #9715f4 — Hover states
- Link Blue: #0000ee — Inline hyperlinks
- Success Default: #1ab266 — Success icons
- Danger Default: #fa1f4b — Error states
- Warning Default: #ff8533 — Alerts
- ... (include all colors from section 2.2)

## 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 |
|-------|------|--------|-------------|-----|
| heading-1 | 18px | 400 | 1.33 | Page titles |
| heading-1 | 16px | 400 | 1.38 | Section headings |
| link | 16px | 400 | — | Navigation |
| link | 15px | 450 | 1.33 | Emphasis links |
| caption | 14px | 400 | 1.43 | Secondary text |
| button | 13.33px | 400 | — | UI buttons |

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

## Border Radius
- sm: 3px — small spans
- md: 8px — cards, labels
- lg: 12px — buttons, lists
- xl: 16px — inputs
- round: 50% — icons
- full: 100% — pill buttons

## Shadows & Depth
- sm: rgba(0,0,0,0.15) 0px 0px 3px
- md: rgba(0,0,0,0.08) 0px 2px 16px
- lg: rgba(0,0,0,0.1) 0px 0px 20px
- xl: rgba(0,0,0,0.1) 0px 4px 20px

## Components

### Primary Button
Default:
```css
background: var(--purple-default);
color: #ffffff;
padding: 8px 16px;
border-radius: 16px;
font-weight: 400;
font-size: 13.33px;
border: none;
transition: background 150ms ease;
```
Hover: `background: var(--purple-hovered);`
Focus: `outline: 2px solid var(--purple-hovered);`
Disabled: `opacity: 0.5; cursor: not-allowed;`

### Secondary Button
Default:
```css
background: rgba(0,0,0,0);
color: #000;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.4);
```
Focus: `outline: 2px solid var(--purple-hovered);`

### Navigation Links
Default: white text, no underline
Hover: underline

### Input Fields
Default:
```css
background: #ffffff;
color: #242424;
border-radius: 16px;
padding: 17px 100px 17px 20px;
border: none;
```
Focus: outline with brand color

## Layout & Responsive Rules
Breakpoints: 98px, 576px, 600px, 768px, 1024px
Mobile padding: 16px
Desktop padding: 24px

## Interaction Rules
- 150ms ease transitions
- Focus indicators are outlines with brand color
- Disabled = 50% opacity

## DO
- Use only colors from the palette
- Maintain 8px grid
- Use Hauss for all text
- Keep headings ≤ 18px
- Tokenize hover/pressed states

## DON'T
- Invent new colors
- Mix unrelated accents
- Use heavy shadows
- Override border radius without reason

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #a73afd;
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 13.33px;
}
.btn-primary:hover { background: #9715f4; }
```

Card:
```css
.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.08) 0px 2px 16px;
}
```

Form Input:
```css
.input-search {
  background: #fff;
  color: #242424;
  border-radius: 16px;
  padding: 17px 100px 17px 20px;
}
```

9. Summary

TL;DR — Wildberries’ design system is a tokenized retail machine: purple-heavy, compact typography, 8px grid, and a massive functional palette. It’s built for speed and scale, not minimalism.

Brand Keywords — bold-retail, token-driven, purple-forward, functional-compact, scale-ready