Rutube Design System Deep Dive
1. Brand Overview
Rutube is Russia’s homegrown video platform. It’s clearly positioned as a competitor to YouTube, but with a distinct design language that feels heavier, darker, and more utilitarian than Google’s candy-colored minimalism. The vibe is “media control room meets entertainment hub.” This isn’t a pastel SaaS for productivity — it’s a content consumption machine.
The first thing that hits you is the dark mode default. Deep blues, near-black backgrounds, and bright accents. There’s no attempt here to soften the interface — Rutube embraces contrast and functional clarity. The brand color (#1c80e3) is a saturated, slightly darker blue than YouTube’s red, leaning toward a techy, reliable tone rather than urgent or playful. That’s paired with a secondary brand red (#ed143b) for highlight moments — think alerts, important markers, or branding contexts where contrast matters.
Typography sticks to Open Sans everywhere, a safe, web-native choice that trades personality for predictability and legibility. It’s a workhorse font — no quirky display type here. Everything is crisp, sans-serif, and functional. The fallback stack goes straight to Arial and Helvetica, underscoring the “always render cleanly” priority.
Buttons have clear shapes and solid fills — no ghost gradients, no glassmorphism. Rounded corners are modest (4px, 6px, 8px) except for icon buttons where they go full 50% circular. Shadows are sparse, used only for subtle depth on carousels and overlays. Most components rely on color contrast for separation.
The system feels built for scale: reusable tokens, strict spacing multiples, predictable radii. There’s an 8px grid underpinning everything. You can see it in button padding, card spacing, and section gaps. That’s a discipline you only get when the design system is codified and enforced.
Rutube’s design philosophy: functional clarity over visual play. Every choice supports content consumption — text is readable, controls are obvious, colors have semantic roles. It’s not trying to win over Dribbble with flashy micro-interactions. It’s trying to keep millions of users navigating video content without friction.
2. Color System
2.1 Primary Colors
Rutube’s primary brand color is Rutube Blue — #1c80e3. This is the anchor for primary actions, CTAs, and brand identity. Psychologically, blue reads as trustworthy, stable, and tech-oriented. Compared to YouTube’s aggressive red, Rutube’s blue feels calmer and less urgent. It’s closer to Twitch’s purple in the “entertainment but safe” spectrum.
Secondary brand color is Rutube Red — #ed143b. This is used sparingly, likely for brand marks, error states, or high-visibility accents. Red here is sharp and clear, with no orange lean.
Neutrals range from pure white (#ffffff) to deep charcoal (#1c232b). Mid-tones (#e1e5ea, #a7b4c4, #889baf) handle UI text, icons, and dividers.
Functional colors are defined semantically in CSS variables — success (#28c28a), warning (#ddb14b), error (#ff4255), info (#6fb2f6 secondary transparency).
2.2 Complete Palette
| Color Name / Token | Hex | Role | Usage |
|---|---|---|---|
| White | #ffffff | Primary semantic | Text on dark backgrounds, icons |
| Light Gray | #e1e5ea | Neutral | Secondary text, disabled states |
| Medium Gray | #a7b4c4 | Neutral | UI icons, subtle dividers |
| Link Blue | #0000ee | Link | Hyperlinks with underline |
| Muted Blue-Gray | #889baf | Neutral | Secondary UI text |
| Pale Gray | #bfc9d4 | Neutral | Background surfaces |
| Charcoal | #1c232b | Dark neutral | Headers, dark UI surfaces |
| Black | #000000 | Neutral | Pure black elements |
| Gray | #808080 | Neutral | Disabled text/icons |
| Deep Gray | #29333d | Neutral | Borders, button outlines |
| Bright Cyan | #00a1e7 | Accent | Primary buttons, interactive elements |
| Dark Blue | #005fcc | Accent hover/focus | Hover/focus states |
| Brand Premier Yellow | #fddd2d | Brand variant | Special content |
| Brand Rutube Primary Blue | #1c80e3 | Brand | Main brand color |
| Brand Rutube Secondary Red | #ed143b | Brand | Secondary brand color |
| Brand Yappy Aqua | #00e5bc | Brand variant | Partner brand |
| Success Green | #28c28a | Semantic success | Success messages |
| Warning Gold | #ddb14b | Semantic warning | Warnings |
| Error Red | #ff4255 | Semantic error | Errors |
| Info Blue Secondary | #6fb2f6 (opacity) | Semantic info | Info states |
| Rose | #d93c3f | Special | Category accent |
| Tangerine | #e79a15 | Special | Category accent |
| Electric Blue | #3f74f7 | Special | Category accent |
| Teal | #36bfc6 | Special | Category accent |
| Grape | #955ae0 | Special | Category accent |
| Orchid | #7f79ec | Special | Category accent |
| Strawberry | #d74da0 | Special | Category accent |
| Lime | #b5c829 | Special | Category accent |
| Fern | #3fb834 | Special | Category accent |
| Lilac | #b84ec9 | Special | Category accent |
| Aqua | #39afe6 | Special | Category accent |
2.3 Color Relationships
The palette is built for dark mode first. White text (#ffffff) on charcoal (#1c232b) hits a 12+ contrast ratio — perfect for WCAG AAA. Primary blue (#1c80e3) on dark backgrounds is vibrant without blowing out on OLED displays. The bright cyan (#00a1e7) used in CTAs is slightly lighter than the brand blue — it pops more.
Links use pure browser blue (#0000ee) with underline — a deliberate throwback to old-school web conventions. That’s an accessibility win: instantly recognizable as clickable.
Functional colors all have solid contrast against dark backgrounds. Success green (#28c28a) and error red (#ff4255) are bright enough to stand out without neon glare.
2.4 Usage Guide
- Use
#1c80e3for primary brand actions (sign-in, upload, subscribe). - Use
#00a1e7for high-visibility CTAs inside dark UI areas. - Keep
#ed143bfor brand marks or urgent alerts — don’t dilute it with general UI use. - Neutrals (
#e1e5ea,#a7b4c4,#889baf) handle text hierarchy — lighter for primary, darker for secondary text. - Avoid pairing pure blue links (
#0000ee) with bright cyan buttons — they compete. - Special category colors (rose, tangerine, grape, etc.) should only be used in content thumbnails or category tags.
3. Typography
3.1 Font Families
Primary font: Open Sans. Fallbacks: Arial, Helvetica. Sources: Google Fonts. No variable fonts, no alternate weights beyond 400/600/700 in use.
This is a utilitarian choice — Open Sans renders consistently across devices, has excellent legibility at small sizes, and supports Cyrillic well.
3.2 Type Scale
| Element Context | Font Family | Size | Weight | Line Height |
|---|---|---|---|---|
| heading-1 | Open Sans | 36px (2.25rem) | 600 | 1.17 |
| heading-1 | Open Sans | 20px (1.25rem) | 700 | 1.40 |
| button | Open Sans | 16px (1.00rem) | 600 | 1.50 |
| heading-1 | Open Sans | 16px (1.00rem) | 600 | 1.50 |
| link | Open Sans | 16px (1.00rem) | 600 | 1.26 |
| heading-1 | Open Sans | 16px (1.00rem) | 400 | — |
| button | Open Sans | 14px (0.88rem) | 400 | 1.43 |
| caption | Open Sans | 14px (0.88rem) | 400 | 1.43 |
| link | Open Sans | 14px (0.88rem) | 400 | 1.43 |
| link | Open Sans | 14px (0.88rem) | 600 | 1.29 |
| caption | Open Sans | 13px (0.81rem) | 400 | 1.38 |
| link | Open Sans | 13px (0.81rem) | 600 | 1.38 |
| button | Open Sans | 12px (0.75rem) | 600 | 1.50 |
| caption | Open Sans | 12px (0.75rem) | 600 | 1.50 |
| caption | Open Sans | 12px (0.75rem) | 400 | 1.50 |
| button | Open Sans | 12px (0.75rem) | 600 | 1.46 |
| button | Open Sans | 11px (0.69rem) | 600 | 1.43 |
| link | Open Sans | 11px (0.69rem) | 400 | 1.46 |
| caption | Open Sans | 11px (0.69rem) | 400 | 1.64 |
| caption | Open Sans | 11px (0.69rem) | 600 | 1.46 |
| caption | Open Sans | 10px (0.63rem) | 400 | 1.43 |
| link | Open Sans | 10px (0.63rem) | 400 | 1.43 |
3.3 Hierarchy
Rutube uses size and weight together to create hierarchy. The jump from 36px H1 to 20px subhead is steep — these are clearly different visual levels. Buttons rarely exceed 16px — smaller text keeps interactive elements tight.
Small captions (10–13px) are consistent in weight (400 or 600) depending on emphasis. No italics, no decorative letterspacing — the system stays clean.
4. Spacing & Layout
4.1 Spacing Scale
Base scale: 8px grid. Common values:
| Value | Rem | Frequency | Usage |
|---|---|---|---|
| 2px | 0.13rem | 85 | Hairline gaps, icon spacing |
| 4px | 0.25rem | 162 | Small padding, tight gaps |
| 5px | 0.31rem | 2 | Rare — niche alignment |
| 7px | 0.44rem | 16 | Icon button padding |
| 8px | 0.50rem | 92 | Input padding, small button gaps |
| 10px | 0.63rem | 50 | Button horizontal padding |
| 11px | 0.69rem | 6 | Minor adjustments |
| 12px | 0.75rem | 3 | Captions padding |
| 15px | 0.94rem | 1 | Rare spacing |
| 16px | 1.00rem | 30 | Button vertical padding, section gaps |
| 24px | 1.50rem | 2 | Larger gaps |
| 25px | 1.56rem | 3 | Larger button padding |
| 32px | 2.00rem | 2 | Card padding |
| 48px | 3.00rem | 3 | Section spacing |
| 169.406px | 10.59rem | 17 | Carousel item width |
| 186.25px | 11.64rem | 62 | Thumbnail width |
| 294.359px | 18.40rem | 1 | Large card width |
| 439.078px | 27.44rem | 12 | Hero width |
4.2 Layout
No explicit breakpoints in the data — likely handled elsewhere. But the spacing values show a rigid grid discipline. Large fixed widths (169px, 186px, 439px) suggest specific component sizing rather than fluid grids.
5. Visual Elements
Border Radius System
| Radius | Usage Elements | Count |
|---|---|---|
| 0px 6px 6px 0px | Link containers | 163 |
| 2px | Paragraphs | 11 |
| 3px | Cards | 46 |
| 4px | Divs, images, links, HR, cards | 245 |
| 6px | Buttons, forms, sections | 116 |
| 8px | Buttons, links | 40 |
| 16px | Divs (rare) | 1 |
| 50% | Circular buttons/icons | 37 |
Shadows
Sparse use:
rgba(0,0,0,0.04) 0px 0px 4px, rgba(0,0,0,0.16) 0px 4px 32px— soft depthrgba(0,0,0,0.05) 0px 4px 34px 6px— larger blurrgba(0,0,0,0.25) 0px 4px 34px— heavier overlay
Borders
Mostly 1px solids in dark neutrals (#29333d, #00a1e7 for active states). Hairline dividers in #29333d for HR.
6. Components
6.1 Buttons
Icon Round Button (50% radius):
- Default: transparent background, white text (
#ffffff), 7px padding, 1px solid#29333d, font 14px/400. - Hover: background
var(--filledWrapperBackground2)(not in data — likely semi-transparent).
Dark Solid Button:
- Default: background
#212932, text#eaedf1, padding0px 15px, radius6px, border1px solid #212932, font 12px/600. - Hover: background
var(--filledWrapperBackground2).
Cyan Solid Button:
- Default: background
#00a1e7, text#ffffff, padding11px 16px, radius6px, border1px solid #00a1e7, font 12px/600.
Carousel Button:
- Default: background
#29333d, text#ffffff, radius8px, no border, transform offset (-20px), font 14px/400.
6.2 Links
Multiple states:
- White (
#ffffff) — no underline. - Light gray (
#e1e5ea), medium gray (#a7b4c4), pale gray (#bfc9d4) — no underline. - Muted blue-gray (
#889baf) weight 600 — no underline. - Pure blue (
#0000ee) — underline. - Bright cyan (
#00a1e7) weight 600 — no underline.
No hover states listed — likely color shift or underline toggle.
6.3 Forms
Text Inputs:
- Default: transparent background, text
#eaedf1, border1px solid transparent, padding8px 16px, no radius, no shadow. - Focus:
border-color: var(--main)(not in data — probably brand blue), outline: none.
No checkbox/radio/select styles in data.
6.4 Cards
Radius 3px or 4px depending on type. Shadows used sparingly — likely same as carousel shadows.
7. Design Tokens
:root {
/* Colors */
--color-white: #ffffff;
--color-light-gray: #e1e5ea;
--color-medium-gray: #a7b4c4;
--color-link-blue: #0000ee;
--color-muted-blue-gray: #889baf;
--color-pale-gray: #bfc9d4;
--color-charcoal: #1c232b;
--color-black: #000000;
--color-gray: #808080;
--color-deep-gray: #29333d;
--color-bright-cyan: #00a1e7;
--color-dark-blue: #005fcc;
--color-brand-premier-yellow: #fddd2d;
--color-brand-rutube-primary: #1c80e3;
--color-brand-rutube-secondary: #ed143b;
--color-brand-yappy-aqua: #00e5bc;
--color-success-green: #28c28a;
--color-warning-gold: #ddb14b;
--color-error-red: #ff4255;
--color-info-blue-secondary: #6fb2f6;
--color-rose: #d93c3f;
--color-tangerine: #e79a15;
--color-electric-blue: #3f74f7;
--color-teal: #36bfc6;
--color-grape: #955ae0;
--color-orchid: #7f79ec;
--color-strawberry: #d74da0;
--color-lime: #b5c829;
--color-fern: #3fb834;
--color-lilac: #b84ec9;
--color-aqua: #39afe6;
/* Typography */
--font-primary: 'Open Sans', Arial, Helvetica;
/* Spacing */
--space-2: 2px;
--space-4: 4px;
--space-5: 5px;
--space-7: 7px;
--space-8: 8px;
--space-10: 10px;
--space-11: 11px;
--space-12: 12px;
--space-15: 15px;
--space-16: 16px;
--space-24: 24px;
--space-25: 25px;
--space-32: 32px;
--space-48: 48px;
--space-169: 169.406px;
--space-186: 186.25px;
--space-294: 294.359px;
--space-439: 439.078px;
/* Border Radius */
--radius-none: 0;
--radius-2: 2px;
--radius-3: 3px;
--radius-4: 4px;
--radius-6: 6px;
--radius-8: 8px;
--radius-16: 16px;
--radius-full: 50%;
/* Shadows */
--shadow-soft: rgba(0,0,0,0.04) 0px 0px 4px, rgba(0,0,0,0.16) 0px 4px 32px;
--shadow-medium: rgba(0,0,0,0.05) 0px 4px 34px 6px;
--shadow-strong: rgba(0,0,0,0.25) 0px 4px 34px;
}8. AI Coding Assistant Prompt
# Rutube Design System Specification
You are a Rutube design expert. Build UIs matching their visual language exactly.
## Brand Context
Rutube values functional clarity and dark-mode-first design. Typography is utilitarian, colors are high-contrast, and components are built on an 8px grid. The brand prioritizes readability and clear interaction states over decorative effects.
## Color Palette
- White: #ffffff — Primary text on dark backgrounds
- Light Gray: #e1e5ea — Secondary text
- Medium Gray: #a7b4c4 — UI icons, dividers
- Link Blue: #0000ee — Underlined hyperlinks
- Muted Blue-Gray: #889baf — Secondary UI text
- Pale Gray: #bfc9d4 — Background surfaces
- Charcoal: #1c232b — Dark UI surfaces
- Black: #000000 — Pure black elements
- Gray: #808080 — Disabled text/icons
- Deep Gray: #29333d — Borders, outlines
- Bright Cyan: #00a1e7 — Primary buttons, CTAs
- Dark Blue: #005fcc — Hover/focus states
- Brand Premier Yellow: #fddd2d — Special content
- Brand Rutube Primary Blue: #1c80e3 — Main brand color
- Brand Rutube Secondary Red: #ed143b — Secondary brand color
- Brand Yappy Aqua: #00e5bc — Partner brand
- Success Green: #28c28a — Success states
- Warning Gold: #ddb14b — Warnings
- Error Red: #ff4255 — Errors
- Info Blue Secondary: #6fb2f6 — Info states
- Rose: #d93c3f — Category accent
- Tangerine: #e79a15 — Category accent
- Electric Blue: #3f74f7 — Category accent
- Teal: #36bfc6 — Category accent
- Grape: #955ae0 — Category accent
- Orchid: #7f79ec — Category accent
- Strawberry: #d74da0 — Category accent
- Lime: #b5c829 — Category accent
- Fern: #3fb834 — Category accent
- Lilac: #b84ec9 — Category accent
- Aqua: #39afe6 — Category accent
## Typography
Font family: 'Open Sans', Arial, Helvetica
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 36px | 600 | 1.17 | Page titles |
| H2 | 20px | 700 | 1.40 | Section headings |
| Button-lg | 16px | 600 | 1.50 | Main buttons |
| Link-lg | 16px | 600 | 1.26 | Navigation links |
| Body | 16px | 400 | — | Body text |
| Button-md | 14px | 400 | 1.43 | Secondary buttons |
| Caption | 14px | 400 | 1.43 | Captions |
| Link-md | 14px | 400 | 1.43 | Links |
| Link-md-bold | 14px | 600 | 1.29 | Emphasized links |
| Caption-sm | 13px | 400 | 1.38 | Small captions |
| Link-sm-bold | 13px | 600 | 1.38 | Small bold links |
| Button-sm | 12px | 600 | 1.50 | Compact buttons |
| Caption-xs | 12px | 400 | 1.50 | Small captions |
| Button-xs | 12px | 600 | 1.46 | Compact buttons |
| Button-xxs | 11px | 600 | 1.43 | Tiny buttons |
| Link-xxs | 11px | 400 | 1.46 | Tiny links |
| Caption-xxs | 11px | 400 | 1.64 | Tiny captions |
| Caption-xxs-bold | 11px | 600 | 1.46 | Bold tiny captions |
| Caption-min | 10px | 400 | 1.43 | Minimal labels |
| Link-min | 10px | 400 | 1.43 | Minimal links |
## Spacing & Grid
Base: 8px
Scale: 2px, 4px, 5px, 7px, 8px, 10px, 11px, 12px, 15px, 16px, 24px, 25px, 32px, 48px, 169.406px, 186.25px, 294.359px, 439.078px
## Border Radius
- none: 0 — table cells
- sm: 2px — paragraphs
- md: 3px — cards
- md+: 4px — images, links
- lg: 6px — buttons, forms
- xl: 8px — large buttons
- rare: 16px — special divs
- full: 50% — icon buttons, avatars
## Shadows & Depth
- Soft: rgba(0,0,0,0.04) 0 0 4px, rgba(0,0,0,0.16) 0 4px 32px
- Medium: rgba(0,0,0,0.05) 0 4px 34px 6px
- Strong: rgba(0,0,0,0.25) 0 4px 34px
## Component Specifications
### Primary Button
Default:
```css
background: #00a1e7;
color: #ffffff;
padding: 11px 16px;
border-radius: 6px;
border: 1px solid #00a1e7;
font-weight: 600;
font-size: 12px;
```
Hover: `background: var(--filledWrapperBackground2)`
Focus: border-color: #005fcc
Disabled: opacity: 0.5
### Secondary Button
```css
background: #212932;
color: #eaedf1;
padding: 0 15px;
border-radius: 6px;
border: 1px solid #212932;
font-weight: 600;
font-size: 12px;
```
### Icon Button
```css
background: transparent;
color: #ffffff;
padding: 7px;
border-radius: 50%;
border: 1px solid #29333d;
font-size: 14px;
```
### Input Fields
```css
background: transparent;
color: #eaedf1;
border: 1px solid transparent;
padding: 8px 16px;
border-radius: 0;
```
Focus: border-color: #1c80e3; outline: none;
## Layout & Responsive Rules
- Grid gap: multiples of 8px
- Fixed card widths: 169px, 186px, 439px
## Interaction Rules
- Transition timing: 150ms ease on hover/focus
- Focus indicators: border-color shift to brand blue
- Loading states: opacity changes only
## DO List
- Use only colors from palette
- Maintain 8px spacing grid
- Use Open Sans for all text
- Keep button radii at 6px unless icon button (50%)
- Apply full contrast for text on dark backgrounds
- Use semantic colors for states (success, error, warning)
## DON'T List
- Don’t introduce new colors
- Don’t mix sharp and rounded corners in same component
- Don’t use heavy shadows beyond listed values
- Don’t alter font family
- Don’t break the spacing scale
## Code Examples
Primary Button:
```css
.btn-primary {
background: #00a1e7;
color: #fff;
padding: 11px 16px;
border-radius: 6px;
border: 1px solid #00a1e7;
font-weight: 600;
font-size: 12px;
transition: background 150ms ease;
}
.btn-primary:hover { background: var(--filledWrapperBackground2); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```
Card:
```css
.card {
background: #1c232b;
border-radius: 4px;
padding: 16px;
box-shadow: var(--shadow-soft);
}
```
Input:
```css
.input {
background: transparent;
color: #eaedf1;
border: 1px solid transparent;
padding: 8px 16px;
}
.input:focus { border-color: #1c80e3; outline: none; }
```9. Summary
TL;DR — Rutube’s design system is dark-mode-first, blue-accented, built on an 8px grid, and favors functional clarity. Typography is all Open Sans, colors are tightly controlled, and components have minimal decoration.
Brand Keywords:
- dark-functional
- grid-disciplined
- high-contrast
- utilitarian-tech
- content-first