Ozon Brand Design System Deep Dive
1. Brand Overview
Ozon’s design language is unapologetically functional with splashes of high-energy color. This is a Russian e-commerce giant, and the site feels like it’s engineered for speed and clarity over ornamental flourishes. The personality is somewhere between a tech platform and a retail marketplace — think Amazon’s utilitarian grid, injected with bold, confident blues and hot pink accents.
They’re not chasing “minimalism” for its own sake. This is a system built to handle thousands of SKUs without visual chaos. The base aesthetic is modern, flat, and sharp, but softened with consistent rounded corners (8px, 12px, 32px) and a friendly, humanized typeface. There’s no skeuomorphism here — shadows are absent, depth comes from color contrasts and occasional borders.
The vibe: professional but approachable. The main blue (#005bff) is pure trust signal — it’s the exact hue you’d expect for an online retailer that wants to feel reliable at scale. They don’t shy away from secondary vibrants — hot pink (#f1117e), bright orange (#ffa500), aqua (#00a2ff) — but these are controlled, used for category cues and marketing blocks, not randomly scattered.
Typography is “Onest” — a geometric sans with a bit more warmth than Helvetica. It runs across headings, body, buttons, captions. It’s paired with Arial as a fallback, but the brand clearly wants that Onest look everywhere.
Spacing is an 8px grid, with occasional 4px micro-gaps. The breakpoints cover everything from small mobile (<768px) to large desktop (>1472px), showing they’ve thought about responsive scaling in fine-grained steps.
Overall: Ozon’s system is built for clarity in a high-density environment. It’s color-driven, grid-disciplined, and text is kept legible at all scales. No extraneous visual noise. They nailed the balance between corporate efficiency and retail energy.
2. Color System
2.1 Primary Colors
The main brand blue is #005bff (rgb(0, 91, 255)) — used in primary buttons, CTAs, and key interactive elements. This hue is bright enough to pop on white backgrounds but deep enough to hold its own against dark text. Blue is the trust color; Ozon uses it exactly like Amazon uses its deep navy, but with a more energetic, saturated twist. It’s the “click me” color.
Secondary energy comes from #f1117e (hot pink) — a retail “sale” signal — and #ffa500 (orange), often tied to warnings or promotional urgency.
Deep navy #001a34 anchors headers and text. White (#ffffff) is the default page background.
There’s also a teal/aqua family — #00a2ff, #00b8b8, #00c2c2 — used in “Fresh” and “Aqua” category branding.
2.2 Complete Palette
| Color Name (inferred role) | Hex | Role | Usage |
|---|---|---|---|
| Deep Navy | #001a34 | Text / Header BG | Primary text, header backgrounds |
| White | #ffffff | Background | Page and card backgrounds |
| Near Black | #070707 | Text | Body copy, high-contrast text |
| Brand Blue | #005bff | Primary | Buttons, links, CTAs |
| Slate Gray | #707f8d | Neutral Text | Secondary text, icons |
| Hot Pink | #f1117e | Accent | Apparel category, sale highlights |
| Orange | #ffa500 | Warning | Alerts, promotions |
| Gray-Blue | #99a3ae | Neutral | Subdued UI elements |
| Transparent Deep Blue | #003078 (4% opacity) | Subtle BG | Hover states, button backgrounds |
| Royal Blue | #003ead | Secondary Link | Alternate link color |
| Cobalt Blue | #0045bf | Hover/Focus | Button hovers |
| Medium Blue | #005fcc | Hover | Interactive hover states |
| Deep Cobalt | #0044bf | Hover | Link hover |
| Blue Variant | #0045c0 | Hover | Link hover |
| Bright Blue | #0063d3 | Hover | Link hover |
| Rich Blue | #0048c7 | Hover | Link hover |
| Navy Blue | #003b9d | Hover | Link hover |
| Electric Blue | #0050e0 | Hover | Link hover |
| Vivid Blue | #004acd | Hover | Link hover |
| Vivid Blue (alt) | #004acc | Hover | Link hover |
| Vivid Blue (alt2) | #004acc | Hover | Link hover |
| Bright Navy | #0048c8 | Hover | Link hover |
Plus extensive semantic tokens from CSS variables like:
--bgActiveOzonPrimary: rgba(0, 80, 224, 1)--textApparel: rgba(242, 47, 123, 1)--bgAquaPrimary: rgba(0, 162, 255, 1)--bgWarningPrimary: rgba(255, 184, 0, 1)--bgPositivePrimaryInverted: rgba(16, 196, 76, 1)- [and many more — full list in Design Tokens section]
2.3 Color Relationships
Contrast is strong. Brand blue (#005bff) on white hits WCAG AAA for normal text. The deep navy (#001a34) on white is even higher contrast. Hot pink (#f1117e) on white is AAA for large text, borderline AA for small — but Ozon uses it mostly for accents, not body copy.
Dark mode isn’t explicitly in this data, but “Inverted” tokens suggest they have a dark variant palette (primary inverted, marketing inverted, etc.).
2.4 Usage Guide
- Primary blue + white: Safe, high-contrast, brand-defining.
- Hot pink + white: Use for urgency, category branding.
- Orange + white: Warnings and promotions.
- Avoid pairing hot pink with orange — it’s too aggressive.
- Aqua tones work well on white or dark navy.
- Neutral grays (#707f8d, #99a3ae) are for text and icons, not backgrounds.
3. Typography
3.1 Font Families
Primary: Onest, fallback Arial.
No Google or Adobe Fonts detected — likely self-hosted. Onest is a modern sans-serif with geometric leanings, slightly rounded terminals, giving a friendly retail feel.
3.2 Type Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| heading-1 | Onest | 20px (1.25rem) | 700 | 1.20 |
| link | Onest | 16px (1rem) | 400 | 1.13 |
| heading-1 (alt) | Onest | 16px (1rem) | 400 | 1.50 |
| link (small) | Onest | 14px (0.88rem) | 400 | 1.29 |
| button | Onest | 14px | 400 | — |
| caption | Onest | 14px | 400 | 1.43 |
| caption (semi-bold) | Onest | 14px | 600 | 1.43 |
| button (Arial) | Arial | 14px | 400 | 0.00 |
| caption (medium) | Onest | 14px | 500 | 1.29 (spacing 0.2px) |
| caption small | Onest | 12px | 400 | 1.17 |
| button small | Onest | 12px | 400 | — |
3.3 Hierarchy
The scale is tight. Only 20px for the largest heading in this data — suggests titles are often contained in dense UI modules. They rely on weight (700 vs 400) and color contrast rather than massive size jumps. This keeps UI compact, which fits e-commerce’s need to show lots of info in small spaces.
4. Spacing & Layout
4.1 Spacing Scale
Base grid: 8px.
Common values: 1px, 2px, 4px, 8px, 10px, 12px, 16px, 24px, 40px, 60px.
| Value | Rem | Count |
|---|---|---|
| 1px | 0.06rem | 1 |
| 2px | 0.13rem | 24 |
| 4px | 0.25rem | 45 |
| 8px | 0.50rem | 19 |
| 10px | 0.63rem | 4 |
| 12px | 0.75rem | 1 |
| 16px | 1.00rem | 11 |
| 24px | 1.50rem | 3 |
| 40px | 2.50rem | 1 |
| 60px | 3.75rem | 1 |
4px is used a lot — micro-gaps, icon spacing. 8px is the main rhythm. Larger jumps (24px, 40px, 60px) are rare — probably for section padding.
4.2 Layout
Breakpoints: 767px, 768px, 1024px, 1130px, 1200px, 1280px, 1400px, 1472px.
Fine-grained, meaning responsive tweaks happen at many widths. Likely container widths align to these.
5. Visual Elements
Border Radius
Values: 0px, 2px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px.
8px and 12px are dominant — buttons, cards. 32px for larger modules. No full-pill 9999px here.
Shadows
None. Flat design. Depth via color and borders.
Borders
One notable combo: 2px solid #005bff — used in some divs, probably for selection states.
6. Components
6.1 Buttons
Primary Button
- Default: bg #005bff, text #ffffff, padding 10px 16px, radius 12px, no border.
- Hover: text changes to #009e9e (teal).
- No active/focus states in data, but hover color shift is consistent.
Secondary Button (uw_n0a class)
- Default: bg rgba(0,48,120,0.04), text rgba(0,26,52,0.6), padding 2px 4px 2px 2px, radius 2px.
- Hover: bg rgba(0,26,52,0.12), text #009e9e.
Tertiary Button (transparent)
- Default: bg rgba(255,255,255,0.48), text #001a34, padding 0, radius 8px.
- Hover: text #009e9e.
6.2 Links
Five variants:
- Blue (#005bff) → hover teal (#009e9e)
- Aqua (#00a6a6) → hover teal
- Grayish navy (rgba(0,26,52,0.6)) → hover teal
- Royal blue (#003ead) → hover teal
- Black (#070707) → hover teal
No underlines by default, none on hover — purely color change.
6.3 Forms
Text input: transparent bg, text #070707, no border. Padding-left 8px. Focus: no outline, no shadow — minimal.
6.4 Cards
No explicit card data here, but border-radius patterns (8px, 12px) and spacing suggest clean, flat blocks.
7. Design Tokens
:root {
/* Semantic Colors */
--bgActiveBestpriceSecondaryInverted: rgba(188, 235, 33, 0.28);
--bgActivePremiumPrimary: rgba(224, 227, 231, 1);
--textNegativeInverted: rgba(255, 92, 82, 1);
--bgWarningOnLight: rgba(255, 250, 232, 1);
--bgActiveOzonPrimary: rgba(0, 80, 224, 1);
--bgPrussian: rgba(10, 57, 86, 1);
--bgMarketingPrimaryInverted: rgba(91, 81, 222, 1);
--bgActiveOzonSecondary: rgba(0, 150, 255, 0.12);
--bgFreshPrimaryInverted: rgba(0, 194, 194, 1);
--bgActiveWarningPrimary: rgba(240, 168, 0, 1);
--bgGuaranteePrimary: rgba(171, 14, 255, 0.08);
--textActiveApparel: rgba(224, 36, 103, 1);
--bgExpressSecondary: rgba(255, 121, 140, 0.078);
--bgWarningPrimary: rgba(255, 184, 0, 1);
--bgNegativePrimaryInverted: rgba(245, 60, 20, 1);
--textFreshInverted: rgba(0, 211, 211, 1);
--textApparel: rgba(242, 47, 123, 1);
--bgApparelPrimary: rgba(255, 73, 144, 1);
--bgActiveNegativePrimaryInverted: rgba(247, 91, 58, 1);
--textOxford: rgba(3, 43, 68, 1);
--bgAquaPrimary: rgba(0, 162, 255, 1);
--textActiveNegative: rgba(219, 54, 18, 1);
--textPositiveOnDark: rgba(29, 237, 98, 1);
--bgActivePositivePrimary: rgba(14, 173, 67, 1);
--bgOpaqueNegativeSecondary: rgba(254, 243, 241, 1);
--bgOpaqueOzonSecondary: rgba(235, 247, 255, 1);
--textActiveBestprice: rgba(170, 215, 19, 1);
--bgActiveFreshPrimaryInverted: rgba(41, 204, 204, 1);
--textExpressOnDark: rgba(242, 58, 147, 1);
--bgPositivePrimaryInverted: rgba(16, 196, 76, 1);
--bgActiveActionPrimaryInverted: rgba(41, 117, 255, 1);
--bgInstalmentSecondary: rgba(255, 213, 64, 1);
--bgActiveFreshPrimary: rgba(0, 174, 177, 1);
--textActiveWarning: rgba(209, 138, 0, 1);
--textDiscountUnavialable: rgba(253, 183, 210, 1);
--textActiveMarketing: rgba(56, 47, 178, 1);
--textCaseUppercase: uppercase;
--bgActiveBestpricePrimaryInverted: rgba(199, 238, 69, 1);
--bgTech: rgba(58, 223, 104, 1);
--textActiveActionInverted: rgba(38, 166, 255, 1);
--textActiveAction: rgba(0, 58, 204, 1);
--bgOpaqueMarketingSecondary: rgba(242, 241, 252, 1);
--bgSelectInverted: rgba(235, 235, 235, 1);
--bgActiveWarningPrimaryInverted: rgba(255, 195, 41, 1);
--bgSelect: rgba(37, 37, 37, 1);
--bgPrimaryInverted: rgba(47, 49, 53, 1);
--bgOpaqueFreshSecondary: rgba(224, 248, 248, 1);
--textOriginalprice: rgba(217, 221, 225, 1);
--textActiveFresh: rgba(0, 158, 158, 1);
--bgDarkCerulean: rgba(19, 76, 110, 1);
--bgActivePrimary: rgba(216, 221, 226, 1);
--bgMarketingOnLight: rgba(233, 234, 248, 1);
--bgActiveAquaPrimary: rgba(6, 147, 228, 1);
--textActiveMarketingInverted: rgba(142, 134, 249, 1);
--bgOverlap: rgba(204, 214, 228, 0.4);
--bgActiveMarketingPrimary: rgba(78, 70, 191, 1);
--textApparelInverted: rgba(255, 96, 158, 1);
--textActiveExpress: rgba(167, 0, 49, 1);
--bgPositiveOnLight: rgba(228, 253, 236, 1);
--bgActiveMarketingPrimaryInverted: rgba(117, 109, 227, 1);
--textUltra: rgba(155, 240, 80, 1);
--bgOpaqueApparelSecondary: rgba(255, 240, 246, 1);
--bgActivePositivePrimaryInverted: rgba(54, 205, 105, 1);
--textFresh: rgba(0, 184, 184, 1);
--bgActivePrimaryInverted: rgba(63, 65, 69, 1);
--bgDoubtfullPrimary: rgba(128, 182, 14, 1);
--bgActiveAccentPrimary: rgba(216, 14, 111, 1);
--bgActivePremiumPrimaryInverted: rgba(14, 54, 95, 1);
--scroll-bg-color: #dfdfdf;
--bgApparelPiggy: rgba(255, 233, 242, 1);
--textCaseNone: none;
--bgSbp: rgba(27, 10, 64, 1);
--bgActionSecondarySolid: rgba(153, 189, 255, 1);
--bgAttentionPrimary: rgba(255, 140, 104, 1);
}8. AI Coding Assistant Prompt
# Ozon Design System Specification
You are an Ozon design expert. Build UIs matching their visual language exactly.
## Brand Context
Ozon is a high-density e-commerce platform. The design is functional, grid-based, and flat — depth comes from color and border radius, not shadows. Primary actions use bold saturated blue, category cues use vibrant accents, and typography stays compact for information density.
## Color Palette
- Deep Navy: #001a34 — header backgrounds, primary text
- White: #ffffff — backgrounds
- Near Black: #070707 — body text
- Brand Blue: #005bff — primary buttons, CTAs
- Slate Gray: #707f8d — secondary text
- Hot Pink: #f1117e — apparel category, sale highlights
- Orange: #ffa500 — warnings, urgency
- Gray-Blue: #99a3ae — neutral UI
- Transparent Deep Blue: #003078 — subtle hover backgrounds
- Aqua: #00a2ff — aqua category
- Fresh Teal: #00b8b8 — fresh category
- Positive Green: #10c44c — success states
- Warning Yellow: #ffb800 — warning banners
- Error Red: #f53c14 — error states
- [Include all semantic tokens from Design Tokens section]
## Typography
Font: "Onest", Arial fallback
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 20px | 700 | 1.20 | Page titles |
| H1-alt | 16px | 400 | 1.50 | Compact headings |
| Link | 16px | 400 | 1.13 | Navigation |
| Link-sm | 14px | 400 | 1.29 | Secondary links |
| Button | 14px | 400 | — | CTAs |
| Caption | 14px | 400 | 1.43 | Supporting text |
| Caption-bold | 14px | 600 | 1.43 | Emphasis captions |
| Caption-med | 14px | 500 | 1.29 | Medium emphasis |
| Caption-sm | 12px | 400 | 1.17 | Labels |
## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 4px, 8px, 10px, 12px, 16px, 24px, 40px, 60px
## Border Radius
- xs: 2px — small buttons
- sm: 6px — inputs
- md: 8px — buttons, cards
- lg: 12px — primary buttons, modals
- xl: 32px — large modules
## Shadows & Depth
Flat design. Avoid shadows. Use borders (#005bff for selection) and color contrast for depth.
## Components
### Primary Button
```css
.btn-primary {
background-color: #005bff;
color: #ffffff;
padding: 10px 16px;
border-radius: 12px;
border: none;
font-weight: 400;
font-size: 14px;
transition: color 150ms ease;
}
.btn-primary:hover {
color: #009e9e;
}Secondary Button
.btn-secondary {
background-color: rgba(0,48,120,0.04);
color: rgba(0,26,52,0.6);
padding: 2px 4px 2px 2px;
border-radius: 2px;
border: none;
font-size: 12px;
}
.btn-secondary:hover {
background-color: rgba(0,26,52,0.12);
color: #009e9e;
}Link
.link {
color: #005bff;
text-decoration: none;
}
.link:hover {
color: #009e9e;
}Input Field
.input-text {
background-color: transparent;
color: #070707;
border: none;
padding-left: 8px;
}
.input-text:focus {
outline: none;
}Layout & Responsive Rules
- Breakpoints: 767px, 768px, 1024px, 1130px, 1200px, 1280px, 1400px, 1472px
- Maintain multiples of 8px for padding/margin
- Max content width: align to breakpoints (1280px typical desktop)
Interaction Rules
- Transition timing: 150ms ease on hover/focus
- Focus indicators: color change, no outline
- No shadows on interaction
DO List
- Use only palette colors
- Maintain 8px grid
- Keep typography compact
- Use border radius consistently
- Apply hover color shift to interactive elements
- Use semantic tokens for category colors
DON'T List
- Don't introduce unapproved colors
- Don't use box-shadows
- Don't mix sharp and rounded corners in same component
- Don't add underlines to links
- Don't oversize headings beyond 20px in UI modules
Code Examples
Primary Button:
.btn-primary { background:#005bff; color:#fff; padding:10px 16px; border-radius:12px; }
.btn-primary:hover { color:#009e9e; }Secondary Button:
.btn-secondary { background:rgba(0,48,120,0.04); color:rgba(0,26,52,0.6); border-radius:2px; }
.btn-secondary:hover { background:rgba(0,26,52,0.12); color:#009e9e; }Input Field:
.input-text { background:transparent; color:#070707; padding-left:8px; border:none; }
.input-text:focus { outline:none; }
---
## 9. Summary
**TL;DR** — Ozon’s design system is high-density retail UI: bold blues, vibrant category accents, compact typography, strict 8px grid, and flat surfaces. No shadows, no fluff — just clean, functional modules.
**Brand Keywords**:
- retail-functional
- color-driven
- grid-disciplined
- flat-modern
- compact-readable