Rambler Design System Deep Dive

1. Brand Overview

Rambler is one of the older names in the Russian digital space—a portal brand with a mix of services: news, search, email, entertainment. This isn’t a minimal startup aesthetic. It’s a mature, established ecosystem where the UI needs to handle a lot of content, links, and user states without feeling messy.

The vibe is utility-first, with a corporate polish on top. There’s no playful illustration style here—colors are restrained, shape language is rounded but not bubbly, typography is clean sans-serif with weight shifts rather than italics or extreme tracking. Rambler’s design has to speak to millions of daily visitors who may be coming in for radically different reasons, so clarity is the priority.

I see a strong reliance on blues—no surprise. Blue is trust, reliability, “canonical” for tech portals. Rambler’s main blue (#315efb and its lighter siblings) anchors CTAs and active states. They layer blue with muted grays (#777e98, #afb6c9) and very light backgrounds (#eff5ff, #d1e2ff) to create zones. This is not white-behind-content—nearly every surface is tinted slightly.

The shape language: pills, big-radius buttons. There are multiple radii in use (20px, 25px), so some inconsistencies. Active elements lean toward highly rounded, “chip-like” styles; content sections often use 10px or 15px radius.

Spacing is on a 4px-derived scale but not perfectly strict—notice the use of 5px values. That’s unusual if you’re trying to be on a tight grid. Looks like some legacy or fine-tuning choices for small gaps.

Typography: entire interface uses Manrope. It’s a geometric sans with rounded touches, decent for both headings and small labels. They crank up weights to 700–800 for headings and buttons, which keeps elements visible in busy layouts.

Overall philosophy: keep it familiar to long-time users, but refresh enough with modern shadows, pill buttons, and accessible blues. Rambler isn’t trying to be fashionable—they’re trying to be a reliable UI layer for a broad content portal. They keep interactive emphasis on blue, text in balanced neutral gray, backgrounds softened with light blues.

2. Color System

2.1 Primary Colors

The main brand-driving color is #315efb (rgb(49, 94, 251)). This is used in buttons, links, and highlight states. It’s bright enough to stand out on light or white backgrounds but not over-saturated like #0000ee, which you also see for default HTML links. #315efb is more modern—less “default browser blue,” more designed.

They also use #4a7dfd for buttons and interactive toggles—slightly lighter but within the same hue family.

Psychologically, blue here equals trust, stability, tech-savvy. Compared to competitors (like Mail.ru or Yandex), Rambler’s blue is cleaner, more digital-modern than the deeper blues often used for corporate branding.

2.2 Complete Palette

Also from semantic CSS variables:

2.3 Color Relationships

They stick to analog blues for brand identification, neutral grays for text, and colored backgrounds for status messaging. Blue-on-light-blue combinations sometimes have questionable contrast (#315efb on #d1e2ff) — borderline WCAG AA for text. White on #315efb is fine. Gray (#777e98) on #ffffff is over 7:1 ratio—excellent.

No dark mode tokens visible. System is light-mode oriented.

2.4 Usage Guide

Works well:

• #315efb primary on white (#ffffff) backgrounds for high contrast CTAs.
• #4a7dfd + white for secondary but still strong actions.
• Gray (#777e98) text over #eff5ff for subtle sections.
• Status backgrounds (#ffeeed, #e9f8e5, etc.) with darker text for legible alerts.

Avoid:

• Primary blue (#315efb) on #d1e2ff — too low contrast for accessibility.
• Using HTML link blue (#0000ee) alongside #315efb — looks inconsistent.
• Gray (#afb6c9) text over light blue backgrounds — can wash out.

3. Typography

3.1 Font Families

Everything runs on Manrope. There are no fallbacks specified in the extracted data, so likely "Manrope", sans-serif in CSS. No Google or Adobe Fonts source info here—it might be self-hosted.

Manrope is modern, geometric, optimized for UI legibility. Weight variations from 400 to 800 give plenty of hierarchy without italics or letter-spacing tricks.

3.2 Type Scale

3.3 Hierarchy

They rely heavily on weight change for hierarchy. 18px/800 for big links is unusual—CTA links bigger than headings. Headings are modest at 16px, sometimes even 15px. This reinforces Rambler’s content density approach: headings don’t overpower the surrounding info.

Small captions drop to 13px or 11px but keep decent line height for readability. Zero-size entries look like hidden placeholders for accessibility or layout control—shouldn’t be in visible UI.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is nominally 4px, but actual values include outliers. Common:

4.2 Layout

Breakpoints spotted:

• 98px, 359px, 360px — small mobile devices.
• 399px — micro layouts.
• 768px–769px — tablet threshold.
• 1039px — medium desktop.
• 1155px, 1199px, 1210px — variants of large tablet/small desktop.
• 1299px, 1300px — full desktop.

They clearly tune around very specific breakpoints—likely legacy from different service layouts. No single max container width in the data, but breakpoints show a responsive approach with fine-grain device targeting.

5. Visual Elements

Border Radius system:

Multiple values in play:

• 4px — rare, spans.
• 5px — textarea.
• 10px — cards/articles.
• 15px — spans/divs.
• 20px — buttons, inputs, links.
• 25px — pill-like buttons, tags.
• 1090px — extreme pill shapes in some containers (interesting—they use huge radius to get full ellipse ends).
• Asymmetrical: 20px 20px 0px 0px (rounded top only), 0px 50% 50% 0px (rounded right side), 50% 0px 0px 50% (rounded left side).
• 100% — full circle for avatars or similar.

Shadows:

Mostly inset borders via shadow:

• rgb(141, 150, 178) 0px 0px 0px 1px inset — subtle border effect.
• rgba(49, 94, 251, 0.3) 0px 5px 30px -10px — strong blue glow CTA.
• rgba(49, 94, 251, 0.4) 0px 10px 10px -10px — lighter shadow variant.
• No UI-wide drop shadows—applied selectively.

Borders:

Only two combos:

• 5px solid #c1d8ff (light blue).
• 1px solid #afb6c9 (gray).

6. Components

6.1 Buttons

Variant 1 — White pill:

• Default: bg #ffffff, color #343b4c, padding 0 10px, radius 20px, inset boxShadow #e0ebff.
• Active: bg #274bc8, color #ffffff, opacity 0.8.

Variant 2 — Blue pill:

• Default: bg #4a7dfd, color #ffffff, padding 0 10px, radius 20px.
• Active: bg #274bc8, white text.

Variant 3 — Light blue large pill:

• Default: bg #eff5ff, color #343b4c, padding 10px 15px, radius 25px.
• Active: bg #d1e2ff, color #274bc8.

Variant 4 — Blue text on light blue:

• Default: bg #e0ebff, color #4a7dfd, padding 0, radius 25px.
• Active: bg #c1d8ff, color #274bc8.

Variant 5 — Primary CTA:

• Default: bg #315efb, color #ffffff, padding 0 20px, radius 25px.
• Active: bg #c1d8ff, color #274bc8.

No hover states in extracted data—likely minimal changes or rely on active/focus.

6.2 Links

Six styles:

• Legacy HTML blue (#0000ee), weight 400.
• Neutral gray (#343b4c), weight 400.
• Branded blue (#2c54e2), weight 500.
• Primary blue (#315efb), weight 500.
• White, weight 400 — for dark backgrounds.
• Light gray (#afb6c9), weight 500.

Uniform: no underlines, hover switches to var(--rambler-blue-hover) (value not in data).

6.3 Forms

Text input:

• bg #ffffff, radius 20px, padding 0 55px 0 15px, boxShadow blue tint.
• Focus: color #afb6c9 text.

Textarea:

• bg #e0ebff, radius 5px, padding 10px 15px.
• Focus: bg #d1e2ff, text color #777e98.

6.4 Cards

No explicit card component data. But backgrounds #eff5ff or #ffffff, radius 10px or 15px, subtle inset shadows (#8d96b2 as 0px 0px 0px 1px inset).

7. Design Tokens

:root {
  /* Colors */
  --color-gray-primary: #777e98;
  --color-link-blue-legacy: #0000ee;
  --color-white: #ffffff;
  --color-primary-blue: #315efb;
  --color-blue-lightest-bg: #eff5ff;
  --color-blue-light-bg: #d1e2ff;
  --color-gray-light: #afb6c9;
  --color-accent-blue: #4a7dfd;
  --rc-selectDrum-searchIcon-done-color: #343b4c;
  --rc-select-fill-error-hover-bgColor: #ffdddc;
  --rc-select-fill-success-bgColor: #e9f8e5;
  --rc-select-fill-success-hover-bgColor: #d4f2cc;
  --rc-selectOptions-label-selected-hover-color: #2c54e2;
  --rc-selectOptions-label-active-color: #274bc8;
  --rc-selectOptions-description-color: #8d96b2;
  --rc-select-fill-error-bgColor: #ffeeed;
  --rc-select-fill-warning-bgColor: #fff8e5;
  --rc-select-fill-warning-hover-bgColor: #fff2cc;

  /* Typography */
  --font-family: "Manrope", sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 5px;
  --space-md: 10px;
  --space-lg: 15px;
  --space-xl: 20px;
  --space-xxl: 30px;
  --space-hero: 100px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-pill: 25px;
  --radius-max: 1090px;

  /* Shadows */
  --shadow-inset-gray: rgb(141, 150, 178) 0px 0px 0px 1px inset;
  --shadow-blue-lg: rgba(49, 94, 251, 0.3) 0px 5px 30px -10px;
  --shadow-blue-md: rgba(49, 94, 251, 0.4) 0px 10px 10px -10px;
}

8. AI Coding Assistant Prompt

# Rambler Design System Specification

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

## Brand Context
Rambler values clarity, trust, and utility. The design uses restrained blues, pill-shaped interactive elements, and balanced sans-serif typography. Layout density is higher than modern minimal UIs.

## Color Palette
- Neutral Gray Primary: #777e98 — Body text, icons
- Link Blue Legacy: #0000ee — Inline hyperlinks
- White: #ffffff — Background, text on primary color
- Primary Blue: #315efb — CTAs, primary buttons, active states
- Lightest Blue BG: #eff5ff — Card backgrounds, input fills
- Light Blue BG: #d1e2ff — Hover backgrounds, focus states
- Neutral Gray Light: #afb6c9 — Placeholder text
- Accent Blue: #4a7dfd — Secondary buttons
- Icon Done: #343b4c — Search icon done state
- Error Hover BG: #ffdddc — Input error hover background
- Success BG: #e9f8e5 — Success message background
- Success Hover BG: #d4f2cc — Success hover
- Selected Label Hover: #2c54e2 — Selected label hover text
- Active Label: #274bc8 — Active option labels
- Description Gray: #8d96b2 — Dropdown descriptions
- Error BG: #ffeeed — Input error background
- Warning BG: #fff8e5 — Warning surfaces
- Warning Hover BG: #fff2cc — Hover warning backgrounds

## Typography
Font family: "Manrope", sans-serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| link-lg | 18px | 800 | 1.39 | Primary links |
| heading-md | 16px | 500 | 1.25 | Section headings |
| heading-sm | 15px | 500/700 | 1.33 | Subheadings |
| link-md | 15px | 500/700 | 1.33 | Inline links |
| button-md | 15px | 500/700 | 1.33 | Buttons |
| caption-md | 14px | 400 | normal | Captions |
| caption-sm | 13px | 500/800 | 1.54 | Small captions |
| link-xs | 11px | 500 | 1.36 | Fine print links |

## Spacing & Grid
Base: 4px spacing unit. Values: 4px, 5px, 10px, 15px, 20px, 30px, 100px.
Use multiples for padding, margins, gaps.

## Border Radius
- xs: 4px — small spans
- sm: 5px — textarea
- md: 10px — cards
- lg: 15px — chips, modules
- xl: 20px — buttons, inputs
- pill: 25px — large pills
- max: 1090px — elliptical containers
- asymmetric: specified per component

## Shadows & Depth
- Inset gray: rgb(141, 150, 178) 0px 0px 0px 1px inset — border-substitute
- Blue glow large: rgba(49, 94, 251, 0.3) 0px 5px 30px -10px
- Blue glow medium: rgba(49, 94, 251, 0.4) 0px 10px 10px -10px

## Components

### Primary Button (Blue Pill)
Default: bg #315efb, color #ffffff, padding 0 20px, radius 25px, font-weight 400, font-size 14px.
Active: bg #c1d8ff, color #274bc8, opacity 0.8.

### Secondary Button (White Pill)
Default: bg #ffffff, color #343b4c, padding 0 10px, radius 20px, boxShadow inset #e0ebff.
Active: bg #274bc8, color #ffffff, opacity 0.8.

### Input Field
Default: bg #ffffff, color #343b4c, radius 20px, padding 0 55px 0 15px, boxShadow rgba(49, 94, 251, 0.15) 0px 10px 20px -5px.
Focus: text color #afb6c9.

### Textarea
Default: bg #e0ebff, color #343b4c, radius 5px, padding 10px 15px.
Focus: bg #d1e2ff, color #777e98.

## Layout & Responsive Rules
Breakpoints: 98px, 359px, 360px, 399px, 768px, 769px, 1039px, 1155px, 1199px, 1210px, 1299px, 1300px.

## Interaction Rules
- Transition: 150ms ease on background/color changes
- Active states lower opacity to 0.8
- No underline on links; hover changes color to var(--rambler-blue-hover)

## DO List
- Use only palette colors
- Maintain 4px-derived spacing
- Use Manrope at specified weights
- Apply correct radius per component
- Keep link hover color consistent

## DON'T List
- Mix legacy link blue and brand blue in same block
- Use shadows outside defined specs
- Override radius styles randomly
- Use unapproved colors

## Code Examples

Button Primary:
```css
.btn-primary {
  background: #315efb;
  color: #ffffff;
  padding: 0 20px;
  border-radius: 25px;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 14px;
  border: none;
  transition: background 150ms ease, color 150ms ease;
}
.btn-primary:active {
  background: #c1d8ff;
  color: #274bc8;
  opacity: 0.8;
}
```

Button Secondary:
```css
.btn-secondary {
  background: #ffffff;
  color: #343b4c;
  padding: 0 10px;
  border-radius: 20px;
  box-shadow: rgb(224, 235, 255) 0px 0px 0px 2px inset;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 13px;
}
.btn-secondary:active {
  background: #274bc8;
  color: #ffffff;
  opacity: 0.8;
}
```

Input:
```css
.input {
  background: #ffffff;
  color: #343b4c;
  padding: 0 55px 0 15px;
  border-radius: 20px;
  box-shadow: rgba(49,94,251,0.15) 0px 10px 20px -5px;
  border: none;
  font-family: "Manrope", sans-serif;
}
.input:focus {
  color: #afb6c9;
}
```

9. Summary

TL;DR — Rambler’s design is about high-density clarity with blue as the anchor. Heavy use of Manrope, multiple pill radii, light tints for backgrounds. This is a mature UI—functional and instantly recognizable.

Brand Keywords — trust-blue, pill-rounded, dense-portal, manrope-clean, utilitarian