OLX

Overview

OLX is a trusted global marketplace that connects buyers and sellers through a clean, accessible digital platform. The design system embodies 'Geometric Clarity'—a movement that combines bold primary colors with precise, sharp geometric forms to create an interface that feels both trustworthy and modern. The brand serves millions of users across emerging markets, prioritizing clarity over decoration and accessibility over aesthetic complexity. The UI evokes confidence and straightforwardness: users should feel they can navigate transactions with ease.

The voice is direct, helpful, and unpretentious. OLX speaks in clear, actionable language without jargon—it's the friend who explains things plainly. Tone examples: 'Войти' (Log in), 'Забыли пароль?' (Forgot your password?), 'Продолжить через Facebook' (Continue with Facebook). The vocabulary avoids corporate flourish; every word serves a functional purpose. The brand personality is pragmatic, inclusive, and focused on enabling commerce for everyday people.

Colors

The OLX color system is built on three pillars: a vibrant primary blue (#3A77FF) that signals interactivity and trust, a deep teal-black secondary (#02282C) that anchors the interface and conveys stability, and a soft light gray surface (#FFFFFF, #F2F4F5) that provides breathing room. Primary (#3A77FF) is reserved exclusively for interactive elements—focus states, hover overlays, and accent highlights. It appears sparingly but decisively, drawing attention to calls-to-action and form validation. Secondary (#02282C) dominates text, buttons, and structural elements; it is the workhorse color, applied to primary buttons (backgroundColor: #02282C, textColor: #FFFFFF), headlines (color: #02282C, fontSize: 40px), and borders. The surface stack progresses from pure white (#FFFFFF) for cards and m

Typography

The type system uses Geomanist as the primary typeface—a geometric sans-serif that reinforces the brand's precision and modernity. The hierarchy spans from display (60px, 700 weight) for hero moments down to label-sm (12px, 500 weight) for tertiary information. Headlines use 700 weight (headline-lg: 40px, 42px line-height, 0.5px letter-spacing) to command attention with density and weight. Body text (16px, 400 weight, 24px line-height) maintains readability at standard viewing distance; inputs and form labels use the same 16px base to ensure consistency. Labels and buttons employ 600–700 weight at 14px to signal interactivity. Letter-spacing is minimal (0–0.5px) except in display contexts, preserving the geometric tightness. On small labels over busy backgrounds or light surfaces, apply te

Layout

The layout uses a 12-column grid with a fixed max-width of 1280px, centered on desktop. Mobile layouts collapse to single-column with 16px horizontal padding (gutter: 16px). The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for component internal spacing, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. Container max-width is 1280px; on tablet (768px+), the background shifts to #EBF1FF to provide visual depth. White-space is used conservatively—the design favors compact, scannable layouts over airy breathing room. Form fields stack vertically with md (24px) spacing between groups. Cards use md (24px) internal padding. The hero section on desktop features a 150px border circle in #CEDDFF (primary-container) w

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and subtle containers, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hovered cards and secondary surfaces, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays. Modals use a semi-transparent dark overlay (rgba(0, 0, 0, 0.32)) with backdrop-filter: blur(4px) to separate them from the page. Buttons do not use shadows; instead, they employ a pseudo-element (::after) with a 200ms transition to apply hover/active backg

Shapes

The design philosophy is 'Geometric Precision'—sharp, clean corners that convey professionalism and clarity. Border-radius follows a strict scale: sm (2px) for subtle rounding on tertiary buttons and small elements, DEFAULT (4px) for primary buttons, inputs, and cards, md (6px) for secondary buttons, lg (8px) for larger containers, xl (12px) for modals and elevated surfaces, and full (9999px) for circular elements (badges, icon buttons). The 2px and 4px radii dominate, creating a technical, no-nonsense aesthetic that contrasts with the soft, rounded trends in contemporary design. This sharpnes

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses backgroundColor: #02282C, textColor: #FFFFFF, padding: 12px 32px, height: 48px, border-radius: 4px, font-weight: 700. On hover, the background shifts to #1D3C81 (secondary-container) with a 200ms ease-in transition. On active, the background darkens to #07141E with an opacity overlay (rgba(0, 0, 0, 0.24)) applied via a pseudo-element. Focus states use outline: 3px solid #3A77FF with outline-offset: 1px. Secondary buttons are outlined: backgroundColor: transparent, borderWidth: 2px, borderColor: #02282C, textColor: #02282C, padding: 10px 24px, height: 40px. On hover, the outline expands to 3px with outline-offset: -3px. Tertiary buttons are minimal: backgroundColor: transparent, textColor: #02282C, pa

Do's and Don'ts

**Do**

• Do use primary blue (#3A77FF) exclusively for focus rings, hover overlays, and accent highlights—never for body text or large backgrounds.
• Do maintain 16px minimum font size for body text and inputs to ensure readability on mobile devices.
• Do apply 24px (md spacing) between form field groups and 40px (lg spacing) between major sections.
• Do use 4px border-radius as the default for buttons, inputs, and cards to maintain geometric precision.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, active, focus) for smooth, predictable feedback.
• Do use Geomanist font exclusively; never fall back to system fonts or serif typefaces.
• Do layer elevation using subtle shadows (sm: 0 1px 2px, md: 0 4px 12px) rather than bold drop-shadows.

**Don't**

• Don't use primary blue (#3A77FF) for large backgrounds or primary buttons—reserve it for accents and focus states only.
• Don't apply border-radius greater than 12px (xl) on standard components; the brand uses sharp, geometric forms.
• Don't mix Geomanist with other typefaces; maintain typographic consistency across all surfaces.
• Don't use shadows greater than 0 16px 40px rgba(0, 0, 0, 0.12); excessive depth contradicts the clean, precise aesthetic.
• Don't disable buttons by reducing opacity; use the designated disabled color (#D8DFE0 background, #7F9799 text) instead.
• Don't apply animations longer than 1.6s or timing functions other than ease-in-out; keep interactions snappy and predictable.
• Don't use color overlays or gradients on the primary surface (#FFFFFF); maintain a clean, uncluttered canvas.