Yandex Design System Deep Dive
1. Brand Overview
Yandex’s UI feels like it was engineered in a lab for speed and clarity. This is a search-first interface, so the design is stripped of anything that would slow you down. Minimal color, no ornamental flourishes, typography tuned for quick scanning. It’s the Russian tech giant’s equivalent of Google’s homepage — but with its own quirks.
The vibe: utilitarian with splashes of brand personality. You get the stark black-on-white base, then occasional injections of saturated orange, blue, and red from the extended palette. These accents are functional, not decorative — they signal actions, states, or category cues. There’s no “branded” background color here; the brand lives in the micro-interactions and type voice.
Philosophy-wise, this is a system built for scale. Yandex has hundreds of services, and the design tokens here clearly allow them to skin anything from a search bar to a complex e-commerce UI. The CSS variable naming (--depot-color-*, --color-g-*) hints at an internal multi-product design system: “Depot” and “Color G” are likely subsystems, each with their own semantic mapping.
If you’re designing for Yandex, think: functional clarity first, brand cues second. The typography is custom — “YS Text Home” — but with fallbacks for every major system font, so it renders consistently across environments. Spacing follows an 8px scale almost religiously, though there are odd fractional values (2.4px, 3.6px) for micro-adjustments.
Audience? Anyone using Yandex’s services — from quick searchers to deep-service users. The design system needs to be legible in Cyrillic and Latin scripts, and work in low-bandwidth contexts. That’s why most values are conservative: no huge shadows, no heavy gradients on primary surfaces, and radius values that feel friendly without being cartoonish.
It’s not flashy. It’s not trying to be an aesthetic statement. But it’s ruthlessly consistent in its token usage, and that’s where its beauty lies.
2. Color System
2.1 Primary Colors
There’s no single “brand color” plastered across the UI the way Google does with its blue. The functional primary in the live UI is black (#000000). That’s the anchor for text, icons, and outlines. White (#ffffff) is the default background. Blue (#0000ee) — the old-school link blue — is used for hyperlinks, which is a deliberate throwback to web conventions. They’re not reinventing link color.
Psychologically, this combination says: “We’re here to give you information fast.” Black text on white is maximum contrast, blue links are universal affordances. Compare that to Google’s softer link blues — Yandex’s choice is more assertive.
Beyond these, the palette is sprawling thanks to the CSS variables: oranges (#ff8f26, #ff9211), reds (#f33, #ba2528, #d00), greens (#00b341, #006933), blues (#07f, #0060d0), purples (#7a55ff, #551a8b). These aren’t random — they’re functional, each tied to a specific UI state.
2.2 Complete Palette
Here’s every color found in the extracted data:
| Color Name | Hex | Role | Usage |
|---|---|---|---|
| Black | #000000 | Base text, icons | Primary typography, outlines |
| White | #ffffff | Background | Page surfaces |
| Link Blue | #0000ee | Links | Default hyperlink text |
| Brand Background | #efebff | Brand-specific menu background | Input controls menu |
| Green | #00b341 | Positive state | Success indicators |
| Adv Label BG | #071c470d | Overlay | Images viewer adv label |
| Stroke | #0000001a | Divider | Strokes, borders |
| Disabled Button Fill | #0000000d | Disabled state | Button backgrounds |
| Fill 25 | #00000040 | Overlay | Semi-transparent fills |
| Primary Hover | #ffd633 | Hover state | Primary control hover |
| Progress Bar Value BG | #fc0 | Progress indicator | Progress bars |
| Shadow 20 | #0d234333 | Shadow | Depth tokens |
| Overlay | #0006 | Overlay | Modals |
| Link Hover | #d00 | Link hover | Hovered hyperlink text |
| Secondary Checked | #000000b3 | Control state | Checked secondary controls |
| Bg Tertiary | #fff | Background | Tertiary surfaces |
| Fill 40 Solid | #999 | Neutral fill | Solid neutral fills |
| Red Primary | #f33 | Alert | Red backgrounds |
| Overflow BG | #f3f3f2 | Background | Overflow elements |
| Text Quaternary | #00000073 | Text | Low-emphasis text |
| Primary Pressed | #d55240 | Control state | Pressed primary controls |
| Price Pay Card | #006933 | E-commerce | Payment card price |
| SBP Button Fill | #0e0737 | Button | SBP view |
| Text Tertiary | #0009 | Text | Medium emphasis text |
| Orange | #ff8f26 | Accent | CTA accents |
| Primary Active | #f2c200 | Active state | Active primary controls |
| Typo Base | #000 | Text | Default button text color |
| Text Quinary | #00000052 | Text | Very low emphasis text |
| Neuro Active BG | #00000026 | Background | Neuro active state |
| Freshness | #d9e8ff | Background | Freshness indicator |
| Fill 30 | #0000004d | Overlay | Semi-transparent fills |
| Price Old | #ba2528 | E-commerce | Old price |
| Text Blue Primary | #0060d0 | Text | Primary blue text |
| Fill 05 Solid | #f2f2f2 | Background | Neutral fills |
| Fill 65 | #000000a6 | Overlay | High-opacity fills |
| Shadow 40 | #0d234366 | Shadow | Depth tokens |
| Text Secondary | #000c | Text | Secondary emphasis text |
| Fill 6 | #0000000f | Overlay | Very light fill |
| Fill 50 | #00000080 | Overlay | Medium opacity fill |
| Raised Checked Hovered | #545454 | Button state | Raised button hovered |
| Shadow 30 | #0d23434d | Shadow | Depth tokens |
| Border Hovered | #ccc | Border | Textarea hovered border |
| Text Blue Hover | #62aafd | Text | Hovered blue text |
| Blue | #07f | Accent | Generic blue |
| Brand Text | #7a55ff | Text | Brand-specific menu text |
| Fill Disabled | #b4b8cc1f | Button | Disabled fill color |
| Green Text | #006000 | Text | Positive text |
| Text Tertiary | #000000ad | Text | Medium emphasis text |
| Neuro Gradient Progress | repeating-linear-gradient(...) | Gradient | Progress indication |
| Fill 18 | #0000002e | Overlay | Semi-transparent fills |
| Neuro Gradient Disabled | #ffffff8f | Gradient | Disabled neuro gradient |
| Border Focused | #b3b3b3 | Border | Textarea focused border |
| SBP Hovered | #3e395f | Button state | SBP view hovered |
| Fill 85 | #000000d9 | Overlay | High opacity fill |
| Text Secondary (alt) | #333 | Text | Secondary text |
| Primary Hovered Alt | #e05643 | Control hover | Cubes control hover |
| Fill 20 | #0003 | Overlay | Very light fill |
| Fill 08 | #00000014 | Overlay | Very light fill |
| Image Fill | #00000008 | Overlay | Image placeholder |
| Input Error BG | #ffe4e4 | Background | Error state |
| Link Navy | navy | Link | Default link |
| Fill 12 | #0000001f | Overlay | Semi-transparent fills |
| Shadow 05 | #0d23430d | Shadow | Depth tokens |
| Shadow 10 | #0d23431a | Shadow | Depth tokens |
| Fill 24 | #0000003d | Overlay | Semi-transparent fills |
| Neuro Gradient | linear-gradient(...) | Gradient | Neuro buttons |
| Link Visited | #551a8b | Link | Visited links |
| Shadow 50 | #0d234380 | Shadow | Depth tokens |
| Bg Tertiary Inverse | #2f2f32 | Background | Dark tertiary surfaces |
| Progress Dot Shadow | #0000 | Shadow | Progress dot |
2.3 Color Relationships
The base contrast (black text on white) hits WCAG AAA for normal text. Blue links (#0000ee) on white background are also high contrast. Some of the lighter overlay fills (#0000000d, #00000014) would fail contrast checks if used for text — but they’re not, they’re purely for backgrounds and overlays.
The system supports light and dark surfaces. There’s --depot-color-bg-tertiary-inverse (#2f2f32) for dark mode tertiary surfaces. Shadows use deep blue-ish RGBA values — they’re subtle, not heavy drop shadows.
2.4 Usage Guide
- Pair black text with white or very light fills.
- Blue (
#07for#0000ee) is for links and active states — don’t use it for large backgrounds. - Oranges and reds are attention colors; reserve them for CTAs or warnings.
- Gradients (
--depot-color-button-fill-view-neuro-gradient) are special-purpose, likely for promotional or “neuro” themed elements — don’t overuse. - Avoid pairing low-opacity overlays with medium-gray text — it will tank readability.
- For dark mode elements, use inverse tertiary background with light text.
3. Typography
3.1 Font Families
The brand font is YS Text Home. This is likely Yandex’s custom corporate typeface. Fallbacks are extensive: -apple-system, system-ui, Arial, Helvetica, Arial Unicode MS. No Google Fonts, no Adobe subscription — this is internally hosted.
3.2 Type Scale
Here’s the full extracted type scale:
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| button | YS Text Home | 42.12px (2.63rem) | 400 | — |
| heading-1 | YS Text Home | 36px (2.25rem) | 700 | 1.13 |
| heading-1 | YS Text Home | 36px (2.25rem) | 800 | 1.15 |
| heading-1 | YS Text Home | 25.2px (1.57rem) | 400 | — |
| button | YS Text Home | 24px (1.50rem) | 700 | 1.20 |
| heading-1 | YS Text Home | 24px (1.50rem) | 700 | 1.20 |
| heading-1 | YS Text Home | 21.6px (1.35rem) | 400 | 1.33 |
| heading-1 | YS Text Home | 21.6px (1.35rem) | 700 | 1.00 |
| link | YS Text Home | 19.2px (1.20rem) | 700 | 1.38 |
| heading-1 | YS Text Home | 19.2px (1.20rem) | 500 | — |
| link | YS Text Home | 18px (1.13rem) | 500 | — |
| link | YS Text Home | 16.8px (1.05rem) | 400 | 2.86 |
| heading-1 | YS Text Home | 16.8px (1.05rem) | 400 | — |
| link | YS Text Home | 16.8px (1.05rem) | 400 | — |
| heading-1 | YS Text Home | 16.8px (1.05rem) | 400 | — |
| button | YS Text Home | 15.6px (0.97rem) | 400 | — |
| link | YS Text Home | 15.6px (0.97rem) | 400 | — |
| heading-1 | YS Text Home | 14.4px (0.90rem) | 700 | 2.33 |
| heading-1 | YS Text Home | 14.4px (0.90rem) | 400 | 1.50 |
| link | YS Text Home | 13.2px (0.82rem) | 500 | 1.18 |
3.3 Hierarchy
The jumps between sizes are big at the top (36px → 25.2px) and smaller at the bottom. This makes headings stand out clearly, but UI labels and links stay compact. The generous line heights on small sizes (2.33 on 14.4px headings, 2.86 on 16.8px links) suggest these are used for vertical rhythm in dense layouts.
YS Text Home keeps letterforms neutral — the hierarchy is purely size/weight driven. Bold weights (700, 800) signal emphasis, but many headings are also 400 weight, meaning not all headings are visually heavy.
4. Spacing & Layout
4.1 Spacing Scale
Base scale is 8px — confirmed by common multiples: 4.8px, 7.2px, 12px, 14.4px, 16.8px, etc. Odd fractional values like 2.4px and 3.6px are micro-gaps, probably for icon alignment or optical balance.
| Value | Rem | Count |
|---|---|---|
| 2.4px | 0.15rem | 6 |
| 3.6px | 0.23rem | 72 |
| 4.8px | 0.30rem | 10 |
| 7.2px | 0.45rem | 9 |
| 12px | 0.75rem | 4 |
| 13px | 0.81rem | 1 |
| 14.4px | 0.90rem | 5 |
| 16.8px | 1.05rem | 1 |
| 18px | 1.13rem | 7 |
| 19.2px | 1.20rem | 5 |
| 20.916px | 1.31rem | 2 |
| 24px | 1.50rem | 3 |
| 28.8px | 1.80rem | 6 |
| 30px | 1.88rem | 3 |
| 33.6px | 2.10rem | 4 |
| 37.2px | 2.33rem | 50 |
| 38.4px | 2.40rem | 1 |
| 48px | 3.00rem | 1 |
| 60px | 3.75rem | 1 |
| 100px | 6.25rem | 49 |
4.2 Layout
Breakpoints cover a wide range — from 550px (small mobile) up to 2240px (large desktop). This suggests fluid layouts with multiple tiers:
- 550–600px: mobile portrait
- ~712px: small tablet
- 1024px: standard tablet / small laptop
- 1280px, 1366px: common desktop widths
- 1600–2240px: ultra-wide monitors
They’re not relying on a single max-width container — this is built for full-bleed responsiveness.
5. Visual Elements
Radius
They love 14.4px — it’s everywhere: cards, divs, buttons, inputs. This is their “medium” corner. Other values are situational: 60px for circular close buttons, 120px for massive pills, 50% for perfect circles (avatars, icons).
| Value | Count | Elements |
|---|---|---|
| 14.4px | 53 | card, div, button, input |
| 19.2px | 1 | div |
| 28.8px | 2 | div |
| 35.2px | 1 | div |
| 38.4px | 2 | div |
| 48px | 1 | button |
| 60px | 4 | close buttons |
| 79.2px | 2 | button |
| 120px | 3 | a, div, Найти |
| 11998.8px | 1 | button (probably a bug; extreme full pill) |
| 50% | 15 | circular elements |
Shadows
Only one explicit shadow in live elements: rgba(0,0,0,0.16) 0px 2.4px 19.2px 1.2px. Very subtle, four-layer offset. Rest are token shadows in CSS variables, used sparingly.
Borders
One found: 4px solid #f2f2f2 on a div — likely a light card border.
6. Components
6.1 Buttons
No explicit button component data here, but border radius usage and typography suggest medium-radius buttons (14.4px) with bold text for CTAs. Disabled fills use #0000000d or #b4b8cc1f.
6.2 Links
Two styles:
- Blue (
#0000ee), no underline, weight 400. Hover →var(--color-g-text-tertiary). - Gray (
rgba(0,0,0,0.45)), no underline, weight 400. Hover → same tertiary text.
6.3 Forms
Textarea default:
- BG: transparent
- Text: black
- Border: none
- Radius: 0
- Padding:
18px 0 18px 105.6px - Focus: no outline
6.4 Cards
Radius: 14.4px, possible light shadow, white background.
7. Design Tokens
:root {
/* Colors */
--color-black: #000000;
--color-white: #ffffff;
--color-link-blue: #0000ee;
--depot-color-input-controls-menu-brand-background: #efebff;
--depot-color-green: #00b341;
--depot-color-images-viewer-adv-label: #071c470d;
--depot-color-stroke: #0000001a;
--depot-color-button-fill-disabled: #0000000d;
--depot-color-fill-25: #00000040;
--depot-color-control-primary-hovered: #ffd633;
--depot-color-progress-bar-value-bg: #fc0;
--depot-color-shadow-20: #0d234333;
--depot-color-overlay: #0006;
--depot-color-link-hovered: #d00;
--depot-color-control-secondary-checked: #000000b3;
--color-g-bg-tertiary: #fff;
--depot-color-fill-40-solid: #999;
--color-g-bg-red-primary: #f33;
--color-g-bg-overflow: #f3f3f2;
--color-g-text-quaternary: #00000073;
--depot-cubes-color-control-primary-pressed: #d55240;
--depot-color-ecom-feed-price-pay-card: #006933;
--depot-color-button-fill-view-sbp: #0e0737;
--depot-color-text-tertiary: #0009;
--depot-color-orange: #ff8f26;
--depot-color-control-primary-active: #f2c200;
--button-view-default-typo-color-base: #000;
--color-g-text-quinary: #00000052;
--color-g-bg-neuro-active: #00000026;
--depot-color-freshness: #d9e8ff;
--color-g-bg-fill-30: #0000004d;
--depot-color-ecom-feed-price-old: #ba2528;
--color-g-text-blue-primary: #0060d0;
--depot-color-fill-05-solid: #f2f2f2;
--depot-color-fill-65: #000000a6;
--depot-color-shadow-40: #0d234366;
--color-g-text-secondary: #000c;
--color-g-bg-fill-6: #0000000f;
--depot-color-fill-50: #00000080;
--depot-color-button-fill-view-raised-checked-hovered: #545454;
--depot-color-shadow-30: #0d23434d;
--textarea-view-default-border-color-hovered: #ccc;
--color-g-text-blue-hover: #62aafd;
--depot-color-blue: #07f;
--depot-color-input-controls-menu-brand-text: #7a55ff;
--button-view-default-fill-color-disabled: #b4b8cc1f;
--depot-color-green-text: #006000;
--color-g-text-tertiary: #000000ad;
--color-g-bg-fill-18: #0000002e;
--textarea-view-default-border-color-focused: #b3b3b3;
--depot-color-button-fill-view-sbp-hovered: #3e395f;
--depot-color-fill-85: #000000d9;
--depot-color-text-secondary: #333;
--depot-cubes-color-control-primary-hovered: #e05643;
--depot-color-fill-20: #0003;
--depot-color-fill-08: #00000014;
--depot-color-image-fill: #00000008;
--depot-color-alice-input-error-bg: #ffe4e4;
--depot-color-link: navy;
--color-g-bg-fill-12: #0000001f;
--depot-color-shadow-05: #0d23430d;
--depot-color-shadow-10: #0d23431a;
--color-g-bg-fill-24: #0000003d;
--depot-color-link-visited: #551a8b;
--depot-color-shadow-50: #0d234380;
--depot-color-bg-tertiary-inverse: #2f2f32;
--depot-color-progress-bar-dot-shadow: #0000;
/* Typography */
--font-family-base: "YS Text Home", -apple-system, system-ui, Arial, Helvetica, Arial Unicode MS;
/* Spacing */
--space-2_4: 2.4px;
--space-3_6: 3.6px;
--space-4_8: 4.8px;
--space-7_2: 7.2px;
--space-12: 12px;
--space-13: 13px;
--space-14_4: 14.4px;
--space-16_8: 16.8px;
--space-18: 18px;
--space-19_2: 19.2px;
--space-20_916: 20.916px;
--space-24: 24px;
--space-28_8: 28.8px;
--space-30: 30px;
--space-33_6: 33.6px;
--space-37_2: 37.2px;
--space-38_4: 38.4px;
--space-48: 48px;
--space-60: 60px;
--space-100: 100px;
/* Radius */
--radius-14_4: 14.4px;
--radius-19_2: 19.2px;
--radius-28_8: 28.8px;
--radius-35_2: 35.2px;
--radius-38_4: 38.4px;
--radius-48: 48px;
--radius-60: 60px;
--radius-79_2: 79.2px;
--radius-120: 120px;
--radius-full: 50%;
/* Shadows */
--shadow-base: rgba(0, 0, 0, 0.16) 0px 2.4px 19.2px 1.2px;
}8. AI Coding Assistant Prompt
# Yandex Design System Specification
You are a Yandex design expert. Build UIs matching their visual language exactly.
## Brand Context
Yandex’s design prioritizes clarity, speed, and functional consistency. Typography is custom (YS Text Home) with system fallbacks, and color usage is minimal but deliberate. Spacing follows an 8px base grid with fractional adjustments for precise alignment.
## Color Palette
- Black: #000000 — Base text, icons
- White: #ffffff — Page backgrounds
- Link Blue: #0000ee — Default hyperlinks
- Brand Background: #efebff — Menu brand background
- Green: #00b341 — Success states
- Adv Label BG: #071c470d — Overlay labels
- Stroke: #0000001a — Dividers
- Disabled Button Fill: #0000000d — Disabled states
- Fill 25: #00000040 — Semi-transparent fill
- Primary Hover: #ffd633 — Hover state on primary controls
- Progress Bar BG: #fc0 — Progress indicators
- Overlay: #0006 — Modal overlays
- Link Hover: #d00 — Hovered link color
- Secondary Checked: #000000b3 — Checked secondary controls
- Bg Tertiary: #fff — Tertiary surfaces
- Fill 40 Solid: #999 — Neutral fills
- Red Primary: #f33 — Alerts
- Overflow BG: #f3f3f2 — Overflow containers
- Text Quaternary: #00000073 — Low emphasis text
- Primary Pressed: #d55240 — Pressed primary controls
- Price Pay Card: #006933 — E-commerce price
- SBP Button Fill: #0e0737 — SBP view buttons
- Orange: #ff8f26 — Accent CTAs
- Primary Active: #f2c200 — Active primary controls
- Freshness: #d9e8ff — Freshness indicators
- Price Old: #ba2528 — Old price label
- Text Blue Primary: #0060d0 — Blue text
- Fill Disabled: #b4b8cc1f — Disabled button fill
- Green Text: #006000 — Positive text
- Input Error BG: #ffe4e4 — Error state background
- Link Navy: navy — Alternative link color
- Link Visited: #551a8b — Visited links
- Bg Tertiary Inverse: #2f2f32 — Dark mode tertiary surfaces
## Typography
Font family: "YS Text Home", -apple-system, system-ui, Arial, Helvetica, Arial Unicode MS
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| Button Large | 42.12px | 400 | — | Hero buttons |
| H1 | 36px | 700 | 1.13 | Page titles |
| H1 Bold | 36px | 800 | 1.15 | Hero headings |
| Subheading | 25.2px | 400 | — | Section subtitles |
| Button Medium | 24px | 700 | 1.20 | Primary buttons |
| H2 | 21.6px | 400 | 1.33 | Secondary headings |
| Link Large | 19.2px | 700 | 1.38 | Prominent links |
| Link Medium | 18px | 500 | — | Navigation links |
| Body Large | 16.8px | 400 | 2.86 | Body text |
| Body Small | 15.6px | 400 | — | Labels |
| Caption | 14.4px | 400 | 1.50 | Small text |
| Caption Bold | 14.4px | 700 | 2.33 | Emphasized small text |
| Footnote | 13.2px | 500 | 1.18 | Microcopy |
## Spacing & Grid
Base: 8px grid with fractional adjustments.
Scale: 2.4px, 3.6px, 4.8px, 7.2px, 12px, 14.4px, 16.8px, 18px, 19.2px, 20.916px, 24px, 28.8px, 30px, 33.6px, 37.2px, 38.4px, 48px, 60px, 100px
## Border Radius
- md: 14.4px — Cards, buttons, inputs
- lg: 60px — Circular buttons
- xl: 120px — Pill shapes
- full: 50% — Avatars, icons
## Shadows & Depth
- Base shadow: rgba(0,0,0,0.16) 0px 2.4px 19.2px 1.2px — Use sparingly for depth
## Component Specifications
### Primary Button
```css
.btn-primary {
background: var(--depot-color-orange);
color: var(--button-view-default-typo-color-base);
padding: var(--space-12) var(--space-24);
border-radius: var(--radius-14_4);
font-weight: 700;
font-size: 24px;
border: none;
transition: background 150ms ease;
}
.btn-primary:hover { background: var(--depot-color-control-primary-hovered); }
.btn-primary:focus { outline: 2px solid var(--depot-color-blue); outline-offset: 2px; }
.btn-primary:disabled { background: var(--depot-color-button-fill-disabled); cursor: not-allowed; }
```
### Link
```css
a {
color: var(--color-link-blue);
text-decoration: none;
}
a:hover { color: var(--color-g-text-tertiary); }
```
### Input Field
```css
textarea {
background: transparent;
color: var(--color-black);
border: none;
border-radius: 0;
padding: 18px 0px 18px 105.6px;
}
textarea:focus { outline: none; }
```
## Layout & Responsive Rules
Breakpoints: 550px, 560px, 600px, 712px, 1024px, 1280px, 1366px, 1600px, 1800px, 1920px, 2000px, 2240px
## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Focus indicators: 2px solid brand blue
- Disabled states: reduce opacity or use disabled fill token
## DO List
- Use ONLY colors from palette
- Maintain 8px grid, allow fractional tokens where defined
- Use 14.4px radius for most components
- Bold weights for buttons and key links
- Respect breakpoints for responsive layouts
## DON'T List
- Don’t invent new colors
- Don’t mix sharp and rounded corners
- Don’t use heavy shadows — stick to base shadow token
- Don’t apply gradients outside defined neuro components
## Code Examples
### Primary Button
```css
.btn-primary {
background: var(--depot-color-orange);
color: var(--button-view-default-typo-color-base);
padding: var(--space-12) var(--space-24);
border-radius: var(--radius-14_4);
font-weight: 700;
font-size: 24px;
}
.btn-primary:hover { background: var(--depot-color-control-primary-hovered); }
```
### Card
```css
.card {
background: var(--color-white);
border-radius: var(--radius-14_4);
padding: var(--space-24);
box-shadow: var(--shadow-base);
}
```
### Form Input
```css
.input {
border: 1px solid var(--textarea-view-default-border-color-hovered);
border-radius: var(--radius-14_4);
padding: var(--space-12);
font-size: 16.8px;
}
.input:focus { border-color: var(--textarea-view-default-border-color-focused); }
```9. Summary
TL;DR — Yandex’s design system is minimal, fast, and consistent. Black/white base, functional color accents, custom typography, tight spacing. It’s built to scale across products, not just the search page.
Brand Keywords: utilitarian-functional, speed-first, token-driven, minimal-contrast-maximization