Drom Brand Design System Analysis

1. Brand Overview

Drom is a Russian automotive marketplace. Think classifieds meets editorial meets community—cars, motorcycles, trucks, everything. The brand’s visual language is functional first, with just enough polish to feel trustworthy without sliding into luxury territory. It’s not trying to seduce you with glossy gradients or cinematic hero shots; it’s designed to get you from search to sale without friction.

The vibe is pragmatic. Arial everywhere. No custom typefaces, no typographic flourish. That’s deliberate—this is a utilitarian brand serving a mass audience, and Arial is the “default” type choice that works across old browsers, low-spec devices, and high-res screens.

The main color story: a strong, saturated blue #1a76cb for primary actions, supported by a secondary yellow-orange for promotions, and occasional deep red for urgency (e.g., superpromo deals). These are “signal” colors—blue for safe interaction, orange for attention, red for urgency.

Layout is tight, grid-based, with an 8px core spacing system. Borders and radii are modest—6px and 16px most of the time—giving rounded corners without going full pill. Shadows are almost nonexistent (flat design), replaced by solid borders or background color changes for separation.

The site’s design system is clearly built to scale across a huge content footprint: classifieds, forums, editorial, dealer pages. That means the style guide leans heavily on reusable tokens and simple CSS classes. No complicated component theming—it’s color, type, spacing, and a couple of button/link styles, repeated everywhere.

This is a system built for speed and reliability. It trades visual drama for clarity. If you’re designing for Drom, you’re working in a world where legibility and consistency matter more than brand “voice.” The voice is in the functionality.

2. Color System

2.1 Primary Colors

Primary brand color: Blue #1a76cb (RGB 26, 118, 203). This is the main CTA and link color. It’s bright enough to stand out against white and light backgrounds but not so saturated that it strains the eye. Blue in automotive is a safe, corporate signal—trust, technology, reliability.

Secondary: Orange-yellow #feaf25 (RGB 254, 175, 37) used for special offers and promo buttons. Warm, attention-grabbing, without veering into hazard-yellow.

Accent/urgent: Deep red #db001a (RGB 219, 0, 26) for “superpromo” deals. This is sparingly used, which keeps its urgency intact.

Neutrals: White #ffffff dominates surfaces, with mid-gray #8a8c93 for secondary text/icons.

Functional blues: Legacy link blue #0000ee appears in some link styles—probably older templates or unrefined components.

2.2 Complete Palette

2.3 Color Relationships

Blue #1a76cb on white has a contrast ratio over 4.5:1—passes WCAG AA for normal text. Red #db001a on white is high contrast, safe for small text. Gray #8a8c93 on white is borderline for small text (contrast ~4.3:1)—safe for labels but not great for microcopy in low-light.

The palette is light-mode first. No dark-mode equivalents in the data.

2.4 Usage Guide

• Primary combos: White text on blue buttons is clean and high-contrast. Use blue for interaction, not decoration.
• Promo combos: Orange on white is fine for headings; on dark backgrounds, test contrast.
• Urgency: Red reserved for urgent deals—don’t dilute by using it elsewhere.
• Avoid: Blue on gray backgrounds—contrast drops.
• Hover states: Colors shift subtly; opacity changes are common in promo buttons.

3. Typography

3.1 Font Families

Everything is Arial with a massive fallback stack: system-ui, Segoe UI, Roboto, Helvetica Neue, -apple-system. No Google Fonts, no Adobe Fonts. This is a pragmatic choice—Arial is ubiquitous, predictable, and renders consistently across devices.

3.2 Type Scale

3.3 Hierarchy

Titles: 30px bold for top-level, stepping down to 24px and 20px for subsections. Body text sits at 15–16px, generous line height for readability. Buttons lean on 14px bold for CTAs. This keeps hierarchy clean and functional—nothing decorative, just size and weight differences.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but with fractional values for micro-adjustments.

4.2 Layout

Breakpoints: 374px (mobile), 1279px (desktop). No mid-tier tablet breakpoint in the data—probably handled with fluid layouts. Tight container widths, fixed paddings per breakpoint.

5. Visual Elements

Border radius:

• 6px — small buttons, inputs
• 16px — cards, larger blocks
• 50% — circular images/icons

Shadows: Almost none. One odd shadow with giant offsets used for background extension—functional, not aesthetic.

Borders:

• 1px solid lines in muted colors (rgba(17, 40, 75, 0.1), rgb(226, 231, 238))
• Common pattern: bottom border only (0px 0px 1px solid), often blue #1a76cb for underlines.

6. Components

6.1 Buttons

Primary CTA:

• Default: bg #1a76cb, color #ffffff, padding 0 20px, radius 6px, no shadow.
• Hover/Active: color stays white.
• Font: 14px, bold.

Promo Button:

• Default: bg #feaf25, color white, padding 0, radius 6px, opacity 0.4.
• Hover/Active: opacity 0.8.

6.2 Links

Multiple link styles:

• White 70% opacity for dark backgrounds.
• Black for body text.
• Blue (#1a76cb) for primary interaction.
• Legacy link blue (#0000ee) in older templates.
• Red bold (#db001a) for urgent links.

No underlines by default.

6.3 Forms

Minimal input styles: 1px solid border, muted rgba black. No elaborate focus states in data.

6.4 Cards

Likely use 16px radius, white bg, padding 15–20px. No shadows—separation via background color or borders.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --white: #ffffff;
  --link-blue-legacy: #0000ee;
  --primary-blue: #1a76cb;
  --neutral-gray: #8a8c93;
  --urgent-red: #db001a;
  --text-secondary: rgba(0,0,0,.4);
  --offer-button-bg: #41b8be;
  --purple-button-bg: #a589ae;
  --up-bg-hover-color: #e4fcd4;
  --premium-hover-color: #e08e00;
  --premium-bg-hover-color: #fff7cc;
  --superpromo-button-color-hover: #ffd1d6;
  --up-hover-color: #74a037;
  --up-bg-color: #eafddd;
  --checked-mark-on-dark-bg: #89d322;
  --superpromo-color: #990012;
  --bull-package-bg: #fff6eb;
  --superpromo-button-bg-gradient-hover-start: #ff4524;
  --superpromo-button-bg-gradient-hover-end: #bd0016;
  --sticky-bg-color: #f0f9ff;
  --superpromo-button-bg-gradient-start: #ff5f42;
  --premium-color: #ffa200;
  --superpromo-button-color: #fff0f1;
  --superpromo-bg-gradient-hover-end: #c00713;
  --gray-button-bg: #f5f5f5;
  --sticky-hover-color: #1766b0;
  --offer-button-bg-hover: #3ba5ab;
  --light-blue-button-bg: #d6ecff;
  --green-button-bg: #84b63e;
  --sticky-bg-hover-color: #e6f5ff;
  --premium-bg-color: #fff9d6;
  --offer-button-bg-disabled: #d0e6e7;
  --bull-package-hover-bg: #ffefdb;

  /* Typography */
  --font-family-base: Arial, system-ui, Segoe UI, Roboto, Helvetica Neue, -apple-system;
  --font-size-h1: 30px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-body: 15px;
  --font-size-caption: 14px;
  --font-size-button: 14px;
  --font-weight-bold: 700;
  --font-weight-normal: 400;

  /* Spacing */
  --space-1: 1px;
  --space-2-5: 2.5px;
  --space-3: 3px;
  --space-5: 5px;
  --space-9: 9px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-40: 40px;
  --space-60: 60px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-none: none;
}

8. AI Coding Assistant Prompt

# Drom Design System Specification

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

## Brand Context
Drom’s design is functional, utilitarian, and accessible. It uses a minimal palette of strong signal colors, Arial typography, and an 8px-based spacing system. No decorative flourishes—clarity and consistency win.

## Color Palette
- Primary Blue: #1a76cb — Main CTAs, key nav links
- Promo Orange: #feaf25 — Promotional buttons, offer highlights
- Urgent Red: #db001a — Urgent deals, superpromo text
- Neutral Gray: #8a8c93 — Secondary text/icons
- White: #ffffff — Backgrounds, text on dark
- Link Blue Legacy: #0000ee — Older link styles
- text-secondary: rgba(0,0,0,.4) — Captions, placeholders
- offer-button-bg: #41b8be — Offer CTAs
- purple-button-bg: #a589ae — Alternate promo buttons
- ... [include all from token list above]

## Typography
Font Family: Arial, system-ui, Segoe UI, Roboto, Helvetica Neue, -apple-system

| Level       | Size   | Weight | Line Height | Use For       |
|-------------|--------|--------|-------------|---------------|
| H1          | 30px   | 700    | 1.30        | Page titles   |
| H2          | 24px   | 700    | 1.30        | Section heads |
| H3          | 20px   | 700    | 1.30        | Subheads      |
| Body        | 15px   | 400    | 1.55        | Body copy     |
| Caption     | 14px   | 400    | 1.55        | Labels        |
| Button      | 14px   | 700    | 1.43        | CTAs          |

## Spacing & Grid
Base: 8px grid. Values: 1px, 2.5px, 3px, 5px, 9px, 10px, 15px, 20px, 40px, 60px.

## Border Radius
- sm: 6px — Buttons, inputs
- md: 16px — Cards, modals
- full: 50% — Circular images/icons

## Shadows & Depth
Flat design—no decorative shadows. Use borders and background colors for separation.

## Components

### Primary Button
Default:  
```css
background: #1a76cb;
color: #ffffff;
padding: 0 20px;
border-radius: 6px;
font-weight: 700;
font-size: 14px;
border: none;

Hover/Active: color stays white.
Disabled: reduce opacity.

Secondary/Promo Button

Default: bg #feaf25, color white, padding 0, radius 6px, opacity 0.4.
Hover/Active: opacity 0.8.

Links

No underline. Colors vary by context:

• White 70% opacity on dark
• Black in body
• Blue #1a76cb for primary
• Red #db001a bold for urgent

Input Fields

Border: 1px solid rgba(17, 40, 75, 0.1), radius 6px.

Cards

Background: white, radius 16px, padding 15–20px.

Layout & Responsive Rules

Breakpoints: 374px (mobile), 1279px (desktop).
Section gaps: multiples of 8px.

Interaction Rules

Transitions: ~150ms ease for state changes.
Focus: visible outline or border color change.

DO

• Use only defined colors
• Maintain 8px spacing multiples
• Use Arial everywhere
• Reserve red for urgent deals
• Keep buttons radius consistent at 6px

DON'T

• Add shadows
• Use colors outside palette
• Mix sharp and rounded corners
• Underline links unless needed for accessibility

Code Examples

Primary Button:

.btn-primary {
  background: #1a76cb;
  color: #ffffff;
  padding: 0 20px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  border: none;
}
.btn-primary:hover,
.btn-primary:active { color: #ffffff; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

Promo Button:

.btn-promo {
  background: #feaf25;
  color: #ffffff;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  opacity: 0.4;
}
.btn-promo:hover,
.btn-promo:active { opacity: 0.8; }

Card:

.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(17, 40, 75, 0.1);
}

---

## 9. Summary

**TL;DR**: Drom’s design system is lean: Arial, strong blue primary, orange promo, red urgency, 8px spacing grid, flat design. Built for speed, clarity, and scale.

**Brand Keywords**: utilitarian-functional, signal-color-driven, flat-interface, mass-accessible