Ya Brand Design System Deep Dive

1. Brand Overview

Ya.ru is the streamlined, ultra-minimalist front door to Yandex’s search ecosystem. If Google has google.com, Yandex has ya.ru — and the design language here is brutally pared down. This is not a marketing-heavy homepage. It’s a functional search interface, with a few contextual links, and the UI is designed to get out of your way.

The vibe is utilitarian with microbursts of personality. Most of the interface is monochrome: black text, white backgrounds, minimal borders. Color is functional — blues for links, reds for warnings, greens for success. They keep gradients tucked away in brand-specific places (look at --depot-color-button-fill-view-neuro-gradient for their playful multi-stop gradient), but on the surface, it’s clean, flat, and almost clinical.

The design philosophy here is: strip away anything that slows the user down. The typography is their own “YS Text Home” — legible, neutral, high x-height. Spacing follows a rigid 8px-based scale, so nothing looks out of place. Components are rounded, but not cartoonishly so — the dominant corner radius is 14.4px, giving buttons and inputs a soft, approachable feel without going full pill. When they do use pill shapes, it's intentional (50% radius for avatars or specific buttons).

This site is for people who already know what they want — a search, a link, a quick action. It’s not trying to sell you on the brand. It’s the brand as a utility. And that makes the design system lean towards clarity, speed, and predictability.

2. Color System

2.1 Primary Colors

Ya’s primary functional color is blue — specifically #0000ee from the extracted palette. This is the default link color, straight out of the web’s early days, which they’ve kept. It’s an interesting choice: modern web products often move to custom blues, but Ya sticks with this "browser-default" look. It signals trust and familiarity, especially for a product that is essentially a search bar.

The other key color is black (#000000) for text and icons. White (#ffffff) is the background canvas. These three form the backbone of the UI.

From the CSS variables, you can see functional accents:

• --depot-color-blue: #07f is a brighter, modern blue for components (CTAs, icons).
• --color-g-bg-red-primary: #f33 for error or urgent states.
• --depot-color-green: #00b341 for success.
• --depot-color-orange: #ff8f26 for warnings or highlights.

2.2 Complete Palette

2.3 Color Relationships

Black-on-white is the default high-contrast combo — accessible under WCAG AA even at small sizes. Link blue (#0000ee) on white is fine for readability but can be tricky for low-vision users; they mitigate this with bold weights in some link contexts.

Functional colors are saturated, ensuring they stand out against the neutral backdrop. Gradients are decorative in some brand-specific buttons, but not part of core accessibility-critical UI.

Dark mode isn’t explicitly visible in the data, but --depot-color-bg-tertiary-inverse suggests there’s a dark variant.

2.4 Usage Guide

• Use #000000 for text, #ffffff for backgrounds — don’t invert unless in dark mode.
• Links: default #0000ee, hover to #d00 or #62aafd depending on context.
• Status: green for success (#00b341), red for errors (#f33 or #ba2528), orange for warnings (#ff8f26).
• Avoid mixing gradients with flat UI unless in dedicated brand components.
• Maintain contrast ratio >4.5:1 for body text.

3. Typography

3.1 Font Families

The brand uses YS Text Home, a custom Yandex font. Fallbacks: -apple-system, system-ui, Arial, Helvetica, Arial Unicode MS. No Google Fonts, no Adobe Fonts. It’s a custom asset.

3.2 Type Scale

3.3 Hierarchy

The jump from 42px button text to 36px headings is unusual — it suggests prominent call-to-action buttons (search input triggers, etc.). Sizes then step down in logical increments, with line heights tuned per context.

4. Spacing & Layout

4.1 Spacing Scale

8px-based scale. Common values:

4.2 Layout

Breakpoints: 550, 560, 600, 712, 1024, 1280, 1366, 1600, 1800, 1920, 2000, 2240px. This suggests fine-grained responsive tuning, not just mobile/tablet/desktop.

5. Visual Elements

Border Radius: Dominant is 14.4px (53 uses) — buttons, inputs, cards. 50% for circular avatars/buttons. Occasional large radii (120px for pills, 79.2px for large buttons).

Shadows: Minimal use — one notable shadow: rgba(0, 0, 0, 0.16) 0px 2.4px 19.2px 1.2px. Mostly uses overlay fills instead of shadows for depth.

Borders: Rare — 1px solid rgba(0,0,0,0.12) and 4px solid #f2f2f2 in specific contexts.

6. Components

6.1 Buttons

No explicit button styles extracted beyond typography and radius. Primary buttons likely reuse 14.4px radius, bold weight, and palette colors.

6.2 Links

Two variants:

• Blue links: #0000ee default, hover changes to var(--color-g-text-tertiary).
• Gray links: rgba(0,0,0,0.45) default, hover to var(--color-g-text-tertiary).

No underline by default.

6.3 Forms

Textareas:

• Default: transparent background, black text, no border, no radius, padding 18px 0 18px 105.6px.
• Focus: no outline.

6.4 Cards

Likely use the 14.4px radius, white backgrounds, minimal shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-green: #00b341;
  --color-orange: #ff8f26;
  --color-red: #f33;
  --color-text-secondary: #333;
  /* ...include all CSS variables from data... */

  /* Typography */
  --font-primary: "YS Text Home", -apple-system, system-ui, Arial, Helvetica, Arial Unicode MS;
  --font-size-button-lg: 42.12px;
  --font-size-h1: 36px;
  /* ... */

  /* Spacing */
  --space-1: 1px;
  --space-2_4: 2.4px;
  --space-3_6: 3.6px;
  /* ... */

  /* Radius */
  --radius-md: 14.4px;
  --radius-full: 50%;
  /* ... */

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.16) 0px 2.4px 19.2px 1.2px;
}

8. AI Coding Assistant Prompt

# Ya Design System Specification

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

## Brand Context
Ya.ru is minimal, functional, and fast. It uses a monochrome base with functional color accents. Components are rounded but not overly stylized.

## Color Palette
- Black: #000000 — Primary text, icons
- White: #ffffff — Backgrounds
- Link Blue: #0000ee — Default links
- Green: #00b341 — Success
- Orange: #ff8f26 — Warnings
- Red: #f33 — Errors
- Text Secondary: #333 — Secondary text
- ...include all extracted colors...

## Typography
Font: "YS Text Home", -apple-system, system-ui, Arial, Helvetica, Arial Unicode MS

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| Button LG | 42.12px | 400 | — | Hero CTA |
| H1 | 36px | 700 | 1.13 | Page titles |
| H1 Strong | 36px | 800 | 1.15 | Emphasis |
| Link | 19.2px | 700 | 1.38 | Nav links |
| Body | 16.8px | 400 | 1.20 | Paragraph text |

## Spacing & Grid
Base: 8px scale. Values: 1px, 2.4px, 3.6px, 4.8px, 7.2px, 9.6px, 12px, 14.4px, 18px, 19.2px, 24px, 28.8px, 30px, 33.6px, 37.2px, 60px, 100px.

## Border Radius
- md: 14.4px — buttons, inputs
- full: 50% — avatars
- lg: 120px — pill buttons

## Shadows & Depth
Minimal shadows. Use rgba(0,0,0,0.16) 0px 2.4px 19.2px 1.2px sparingly.

## Components

### Primary Button
```css
.btn-primary {
  background: var(--depot-color-blue);
  color: var(--color-white);
  padding: var(--space-18) var(--space-24);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--font-size-button);
  border: none;
}
.btn-primary:hover { background: var(--depot-color-control-primary-hovered); }
.btn-primary:focus { outline: 2px solid var(--depot-color-blue); }
.btn-primary:disabled { background: var(--depot-color-button-fill-disabled); }

Link

a {
  color: #0000ee;
  text-decoration: none;
}
a:hover { color: var(--color-g-text-tertiary); }

Input

textarea {
  background: transparent;
  color: #000;
  border: none;
  padding: 18px 0 18px 105.6px;
}
textarea:focus { outline: none; }

Layout & Responsive Rules

Breakpoints: 550, 560, 600, 712, 1024, 1280, 1366, 1600, 1800, 1920, 2000, 2240px.

Interaction Rules

• Transitions: 150ms ease for hover/focus.
• Focus: 2px solid outline with brand color.

DO

• Use only palette colors.
• Maintain 8px spacing multiples.
• Use YS Text Home consistently.
• Respect radius tokens.

DON'T

• Add shadows where not specified.
• Mix sharp and rounded corners.
• Use non-palette colors.

Code Examples

Primary Button:

.btn-primary {
  background: #07f;
  color: #fff;
  padding: 18px 24px;
  border-radius: 14.4px;
}

Card:

.card {
  background: #fff;
  border-radius: 14.4px;
  padding: 24px;
}

---

## 9. Summary

**TL;DR** — Ya’s design system is minimal, fast, and functional. Black, white, and default link blue form the core, with saturated functional accents. Typography is custom, spacing is strict, and components are soft-edged but flat.

**Brand Keywords**:
- utilitarian-minimalist
- functional-color
- strict-grid
- flat-ui
- search-first