Alright — let's rip this apart like I’m reviewing a colleague’s repo and giving them the unvarnished truth. Everything below is based only on the provided data, nothing guessed, nothing "probably".

OLX Brand Design System — Reverse Engineered

1. Brand Overview

OLX, at least in its Brazilian execution (olx.com.br), is brutally utilitarian. The core product is classifieds — people finding, buying, selling. That reality bleeds directly into the design philosophy: strip away ornament until only commerce remains. The site does not waste pixels on elaborate gradients or ornamental shadows; instead, it leans hard into clarity, legibility, and tappable cues.

The vibe? Pragmatic. The palette is mostly blues and warm oranges — bold enough to signpost interactivity, friendly enough to avoid feeling like a banking app. Warm tones are strategically placed — hover states, accents — to inject life when you interact. Outside of core actions, the color space collapses into neutrals: solid black #000000 and a muted gray #595959. This is not aesthetic minimalism in the Apple sense — it's functional minimalism aimed at conversion and discoverability.

Typography follows the web-standard -apple-system stack — no custom font. This says two things: first, they value speed and OS-native feel; second, they don’t want to burden the user’s device with font downloads. The result feels familiar, regardless of platform.

The spacing scale is locked to an 8px logic, but you’ll see some quirks — 7.5px and 5px values sneak in, which I suspect are micro-alignment hacks rather than official tokens. Borders are sparse, radius is almost non-existent (2px, occasional 5px on cards), shadows are absent. You feel the cosmetic flatness.

Everything here points to a brand that says: "Deliver the listing fast, make the action buttons pop, stay out of the user's way." This site isn’t here to impress your Behance followers — it’s here to sell your second-hand couch.

2. Color System

2.1 Primary Colors

From the data, the strongest consistent color is #0051c3 — a deep, saturated blue. It’s used for links (cf-footer-ip-reveal-btn shows it) and interactive elements in their default state. There’s also a hover/active orange range (#dd7117, #ee730a, #e3872c) — warm, vivid, and intentionally high contrast from the blue. The interplay of blue/orange delivers both trust (blue) and excitement/action (orange).

Blue as primary is common in marketplaces — think LinkedIn, Facebook Marketplace — because it signals reliability. The orange contrast is the differentiator; OLX’s specific hue set is deeper and slightly earthy compared to the acid-orange of some ecommerce brands.

2.2 Complete Palette

2.3 Color Relationships

Blue vs orange — pure complementary relationship (blue/orange on the color wheel). High accessibility contrast when placed on white backgrounds. Black and gray keep text easily legible under WCAG AA, assuming white backgrounds (contrast ratio is excellent: black-on-white is 21:1).

For hover states, switching from blue (#0051c3) to orange (#dd7117) ensures visual feedback even for users with reduced color perception. The gap between default and hover tones is enough to be noticeable without animation.

Dark mode? No evidence in the extract — everything references light backgrounds.

2.4 Usage Guide

Do:

• Use #0051c3 as the default link/button color.
• Use orange tones (#dd7117, #ee730a, #e3872c) for hover/focus states to signal interactivity.
• Keep text black (#000000) or gray (#595959) for body and secondary text.

Avoid:

• Mixing blue and orange arbitrarily; reserve orange for state change.
• Introducing new accent colors — will break the system.
• Using orange for body text — reduces readability.

3. Typography

3.1 Font Families

Single system stack:
-apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial

No Google Fonts, no Adobe kit. Everything is device-resident, meaning your Mac renders SF Pro, your Windows renders Segoe UI, Android devices render Roboto. This keeps the UI feeling native to the user's OS.

3.2 Type Scale

3.3 Hierarchy

They flatten hierarchy — multiple "Heading 1" entries at smaller sizes suggest they reuse that style name for different contexts. The real hierarchy is “big title” → “medium title” → “small text”. The largest size, 60px weight 300, is the hero headline — not heavy, designed to be airy. Body-level UI text sits in 13–15px range, making for dense info presentation without wasting scroll space.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px logic, but irregularities exist.

4.2 Layout

No breakpoints in extract — guess: fully fluid layout with spacing scale applied. The absence of breakpoints in data means responsive code is handled separately. Expect mobile-first with stack collapse and spacing downscaling.

5. Visual Elements

• Border Radius: 2px minimal (base), and a 5px 5px 0px 0px for card/header combos. The aesthetic is almost flat — no pill buttons here.
• Shadow System: None. They’re living the flat life.
• Borders: 1px solid borders for separators (rgb(82, 16, 16) — odd, dark reddish tone likely a debug or rare element), and light gray (rgb(235, 235, 235)) for dividers.

This confirms they prefer to create structure with lines and spacing rather than depth.

6. Components

6.1 Buttons

Extract says no button-specific data. Given link behavior, we can infer: primary buttons likely use the blue with hover to orange, radius 2px, no shadows, text in white or black depending on background.

6.2 Links

One link spec:

Default:
Color: #0051c3
No underline (text-decoration: none)
Weight: 400

Hover:
Color changes to #f68b1f (derived from RGB: 246, 139, 31).

They nailed the "state change noticeable" rule — absolute hue shift.

6.3 Forms

No explicit input styles in data — likely barebones system styling with OS-defaults.

6.4 Cards

No shadows. Borders radius 5px on top, squared bottom — maybe to match image header cropping.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-neutral-gray: #595959;
  --color-primary-blue: #0051c3;
  --color-accent-orange: #dd7117;
  --color-deep-blue: #005fcc;
  --color-bright-orange: #ee730a;
  --color-warm-orange: #e3872c;
  --color-link-hover: #f68b1f;

  /* Typography */
  --font-family-system: -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial;
  --font-size-h1: 3.75rem;
  --font-size-h1-medium: 1.88rem;
  --font-size-h1-small: 0.94rem;
  --font-size-caption: 0.81rem;
  --font-size-button: 0.81rem;
  --font-size-link: 0.81rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;

  /* Spacing */
  --space-5: 5px;
  --space-7-5: 7.5px;
  --space-15: 15px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-53: 53px;
  --space-60: 60px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-card-top: 5px 5px 0px 0px;

  /* Borders */
  --border-strong: 1px solid rgb(82, 16, 16);
  --border-light-top: 1px solid rgb(235, 235, 235);
}

8. AI Coding Assistant Prompt

# OLX Design System Specification

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

## Brand Context
OLX's Brazilian site is functional and direct. Minimal decoration, flat design, clear typography. Actions are highlighted with a bold blue and transitioned to warm oranges for state change. System fonts keep the UI feeling OS-native and fast.

## Color Palette
- Black: #000000 — Body text, icons
- Neutral Gray: #595959 — Secondary text, captions
- Primary Blue: #0051c3 — Links default, primary interactive elements
- Accent Orange: #dd7117 — Hover states, warm calls to action
- Deep Blue: #005fcc — Hover/Focus alternate for interactive elements
- Bright Orange: #ee730a — Hover/Focus accents
- Warm Orange: #e3872c — Hover/Focus, alternate accent
- Link Hover Orange: #f68b1f — Link hover specifically

## Typography
Font family: -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 3.75rem (60px) | 300 | 1.20 | Hero titles |
| H1 Medium | 1.88rem (30px) | 300 | 1.30 | Section headings |
| H1 Medium Bold | 1.88rem (30px) | 400 | 1.30 | Subsection headings |
| H1 Small | 0.94rem (15px) | 400 | 1.50 | Small headings |
| Caption | 0.81rem (13px) | 400 | 1.50 | Captions, fine print |
| Button | 0.81rem (13px) | 400 | 1.50 | Button labels |
| Link | 0.81rem (13px) | 400 | 1.50 | Inline links |

## Spacing & Grid
Base unit: 8px  
Scale: 5px, 7.5px, 15px, 30px, 35px, 40px, 53px, 60px  
Use:  
- 5px: micro-gaps inside components  
- 7.5px: icon/text alignment padding  
- 15px: small padding on items  
- 30px: section spacing  
- 35px: special case component gaps  
- 40px: large section breaks  
- 53px: hero vertical padding  
- 60px: full-page section headers

## Border Radius
- sm: 2px — buttons, small elements
- card-top: 5px 5px 0px 0px — cards with top-rounded corners

## Shadows & Depth
Flat design — use borders instead.

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background-color: #0051c3;
  color: #ffffff;
  padding: 0.81rem 1.88rem;
  border-radius: 2px;
  font-family: var(--font-family-system);
  font-size: 0.81rem;
  font-weight: 400;
  border: none;
  transition: background-color 150ms ease;
}
.btn-primary:hover { background-color: #dd7117; }
.btn-primary:focus { outline: 2px solid #005fcc; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Links
Default: color #0051c3, no underline  
Hover: color #f68b1f

### Input Fields
```css
.input {
  border: 1px solid rgb(235, 235, 235);
  border-radius: 2px;
  padding: 0.81rem;
  font-size: 0.81rem;
}
.input:focus { border-color: #005fcc; outline: none; }
```

### Card
```css
.card {
  border-radius: 5px 5px 0px 0px;
  border: 1px solid rgb(235, 235, 235);
  padding: 1.88rem;
}
```

## Layout & Responsive Rules
No breakpoints in data — use fluid layouts.
Max content width: determine based on viewport.
Section padding: 30px standard, larger for hero sections.

## Interaction Rules
- State changes in 150ms ease.
- Hover shifts blue to orange for interactive items.
- Focus rings in deep blue.

## DO List
- Use ONLY palette colors
- Maintain 8px grid or extracted spacing values
- Use system font stack
- Keep border radius minimal (2px)
- Signal interaction with color shifts — no animations

## DON'T List
- Add shadows
- Mix rounded and sharp in same component
- Invent new font sizes
- Add new colors

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0051c3;
  color: #fff;
  border-radius: 2px;
  padding: 13px 30px;
}
.btn-primary:hover { background: #dd7117; }
```

Card:
```css
.card {
  border-radius: 5px 5px 0px 0px;
  border: 1px solid rgb(235, 235, 235);
}
```

Form Input:
```css
.input { border: 1px solid rgb(235, 235, 235); border-radius: 2px; }
.input:focus { border-color: #005fcc; }
```

9. Summary

TL;DR: OLX Brazil's design is flat, functional, and direct. Primary blue drives interaction; warm oranges punctuate hover states. System fonts, minimal radius, no shadows — it’s a “get the job done” aesthetic.

Brand Keywords: utilitarian-marketplace, blue-orange-complementary, flat-no-shadows, OS-native-typography