Ivi Brand Design System Analysis

1. Brand Overview

Ivi is Russia’s leading online streaming service, and their design language feels like it’s been engineered for binge-watchers who want zero friction. The vibe is cinematic but stripped down — think dark theatre interiors with flashes of neon. The experience is built to keep you inside the platform, not wandering off. Every decision in the UI reinforces that: heavy use of deep blacks, high-contrast text, and a single shocking accent color that screams “click me.”

The philosophy here is content-first, chrome-second. The brand identity avoids ornamental flourishes. No gradients bleeding across the viewport. No whimsical animations. Instead, the interface focuses on clarity and contrast. Typography is clean and sans-serif, custom-built around iviSansBase — a font that feels like a hybrid between system UI and editorial headline type. It’s not trying to be friendly in the way Netflix’s rounded typography is; it’s more neutral, almost news-like.

The audience is broad — everyone from casual movie watchers to hardcore series binge-ers — but the design system is tuned for dark environments. The background colors are nearly pure black (#000000) with subtle variations like #1b1923 and #24222f for depth. This not only makes the video thumbnails pop but also keeps the visual noise to a minimum.

The primary accent color (#f30745) is a bold, saturated pink-red. It’s not the classic “danger red” you’d expect in an error state; it’s a brand statement. This color is applied sparingly — mostly for CTAs, subscription badges, and a few borders. That scarcity makes it feel special.

Overall: Ivi’s design system is functional minimalism with cinematic contrast. It’s a dark-mode-first brand that’s disciplined about color use and typography hierarchy. It’s meant to disappear when content is on screen, but still provide sharp, confident UI signals when you interact.

2. Color System

2.1 Primary Colors

Primary: rgb(255, 255, 255) / #ffffff — The semantic primary here is actually white. That’s unusual. It means the brand’s “primary” in design token terms isn’t the accent color, but the color of primary text and iconography. This works because in a dark UI, white is the dominant visual element — every headline, every navigation link is white. The brand accent (#f30745) is secondary from a semantic perspective but primary from a marketing perspective.

Psychology: White against black gives maximum legibility, zero ambiguity. It’s the opposite of playful — it’s direct. The accent (#f30745) brings energy and urgency. It’s bright enough to catch attention without feeling like a stop sign.

Compared to competitors:

• Netflix: deep red (#E50914) is the core brand color; white is secondary.
• Hulu: green accent for brand; white is text.
• Ivi: white text is king, pink-red accent is a pop.

2.2 Complete Palette

2.3 Color Relationships

Contrast ratios:

• White (#ffffff) on black (#000000): Infinite contrast, WCAG AAA compliant.
• Accent (#f30745) on black: Strong contrast, passes AAA for large text.
• Light gray (#d9d7e0) on black: Ratio ~5.5:1, passes AA for normal text.

Accessibility: Dark mode is the default. The palette is small but effective. Because white is “primary,” they avoid using accent colors for text (except in badges) — that keeps legibility strong.

No true light-mode variant is present. This is a dark-mode-only identity.

2.4 Usage Guide

Works well:

• White text on black backgrounds for main navigation.
• Accent pink-red on black for CTAs — immediate attention grab.
• Light gray for secondary metadata to avoid stealing focus from titles.

Avoid:

• Accent text on accent background — poor contrast.
• Mixing #1b1923 with #24222f without enough separation — both are dark and subtle.

3. Typography

3.1 Font Families

Primary: iviSansBase, Arial, Helvetica, Helvetica Neue, FreeSans — custom sans-serif with broad fallback stack. No Google Fonts, no Adobe Fonts. This is a proprietary font tuned for the brand. Fallbacks are safe and system-native.

3.2 Type Scale

3.3 Hierarchy

They use a tight range — 24px max for top-level headings/links, 10px min for uppercase captions. This keeps the UI compact, important in a streaming service with dense thumbnail grids. The 15px–16px sizes are common for body and link text, with heavier weights for emphasis. Captions drop down to 13px or even 10px, but remain legible thanks to high contrast.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px — confirmed by values like 4px, 8px, 12px, 16px, 24px, 32px.

All values with frequency:

4.2 Layout

No explicit breakpoints in data — implies fluid scaling or server-driven layout. The frequent use of 24px and 32px spacing suggests consistent guttering between content blocks.

5. Visual Elements

Border Radius Values

Dominant: 16px radius — applied across most elements. It’s the “brand curve.”

Shadows

Mostly flat, but a few accents:

• Accent shadow: rgba(243, 7, 69, 0.4) 0px 4px 12px 0px
• White glow: rgba(255, 255, 255, 0.48) 0px 2px 0px 0px
• Deep black drop: rgb(18, 16, 27) 0px 20px 96px 0px
• Purple glow: rgb(168, 105, 240) 0px 0px 104px 0px
• Heavy black: rgba(0, 0, 0, 0.64) 0px 20px 64px 0px

Shadows are rare — mostly for emphasis on modals or highlights.

Borders

• 0.869565px solid #f30745 — buttons
• 1.73913px solid #1b1923 — dividers
• 0.869565px solid #1b1923 — buttons

6. Components

6.1 Buttons

Variant 1 — Transparent

• Default: bg rgba(27, 25, 35, 0), color #ffffff, padding 10px 0, radius 0px, no border
• Used for icon-only or text links in dark areas.

Variant 2 — Accent

• Default: bg #f30745, color #000000, padding 7px 11px, radius 8px, border 0.869565px solid #f30745
• Strong CTA.

Variant 3 — Dark Solid

• Default: bg #1b1923, color #000000, padding 9px 12px 9px 4px, radius 12px, border 0.869565px solid #1b1923
• Likely for icon-mode buttons.

Variant 4 — Icon Button

• Default: bg #282534, color #ffffff, padding 8px, radius 6px, no border
• Compact, for toolbars.

No hover/active/focus styles in data — possibly handled in JS or CSS transitions.

6.2 Links

White link:

• Default: color #ffffff, no underline, weight 700

Black link:

• Default: color #000000, no underline, weight 400

No hover data — likely subtle color change or underline.

6.3 Forms

No inputs in data — minimal form UI on homepage.

6.4 Cards

No explicit card data, but border-radius 16px and shadows suggest usage.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-light: #d9d7e0;
  --color-accent: #f30745;
  --color-dark-transparent: #1b1923;
  --color-dark-gray: #24222f;

  /* Typography */
  --font-primary: "iviSansBase", Arial, Helvetica, "Helvetica Neue", FreeSans;
  --font-size-xxl: 24px;
  --font-size-xl: 20px;
  --font-size-lg: 17px;
  --font-size-md: 16px;
  --font-size-sm: 15px;
  --font-size-xs: 14px;
  --font-size-xxs: 13px;
  --font-size-caption-sm: 10px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-23: 23.5598px;
  --space-24: 24px;
  --space-27: 27.4592px;
  --space-32: 32px;
  --space-48: 48px;
  --space-108: 107.935px;
  --space-211: 211.073px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-xxxl: 24px;
  --radius-img-sm: 0px 0px 8px 8px;
  --radius-img-lg: 0px 0px 26px 26px;
  --radius-custom: 0px 40px 40px 0px;

  /* Shadows */
  --shadow-accent: rgba(243, 7, 69, 0.4) 0px 4px 12px 0px;
  --shadow-white-glow: rgba(255, 255, 255, 0.48) 0px 2px 0px 0px, rgba(255, 255, 255, 0.48) 0px 0px 0px 0px inset;
  --shadow-deep-black: rgb(18, 16, 27) 0px 20px 96px 0px;
  --shadow-purple: rgb(168, 105, 240) 0px 0px 104px 0px;
  --shadow-heavy-black: rgba(0, 0, 0, 0.64) 0px 20px 64px 0px;
}

8. AI Coding Assistant Prompt

# Ivi Design System Specification

You are an Ivi design expert. Build UIs matching their visual language exactly.

## Brand Context
Ivi’s design is cinematic, dark-mode-first, and content-focused. It uses high contrast white text, a single bold accent color (#f30745), and a disciplined typography scale. The UI is minimal, with rounded corners and sparse shadows.

## Color Palette
- Black: #000000 — Page backgrounds, header, overlays
- White: #ffffff — Primary text, icons
- Light Gray: #d9d7e0 — Secondary text, metadata
- Accent Pink-Red: #f30745 — CTAs, subscription badges, borders
- Transparent Dark: #1b1923 — Button backgrounds (transparent), overlays
- Dark Gray: #24222f — Hover/focus states

## Typography
Font family: "iviSansBase", Arial, Helvetica, "Helvetica Neue", FreeSans

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| Link / H1 | 24px | 700 | 1.17 | Top nav, hero titles |
| H1 alt | 20px | 700 | 1.20 | Section titles |
| H1 small | 17px | 500 | 1.29 | Subheadings |
| Body / Link | 16px | 400 | 1.00 | Standard body text |
| Body small | 15px | 400 | 1.47 | Metadata |
| Body semi | 15px | 500 | 1.47 | Emphasized metadata |
| Body bold | 15px | 700 | 1.33 | Labels |
| Caption | 14px | 400 | 1.43 | Small UI text |
| Caption bold | 13px | 700 | 1.23 | Badges |
| Caption uppercase | 10px | 700 | 1.20 | Labels, tags |

## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 4px, 7px, 8px, 9px, 10px, 12px, 16px, 20px, 23.56px, 24px, 27.46px, 32px, 48px, 107.94px, 211.07px
Use: Button padding (7–12px), card gutters (24px), section gaps (32px)

## Border Radius
- none: 0px — data tables
- sm: 6px — icon buttons
- md: 8px — small CTAs
- lg: 12px — medium buttons
- xl: 16px — cards, images
- xxl: 20px — large containers
- xxxl: 24px — hero blocks
- img-sm: 0px 0px 8px 8px — thumbnails
- img-lg: 0px 0px 26px 26px — large images
- custom: 0px 40px 40px 0px — special banners

## Shadows & Depth
- Accent shadow: rgba(243, 7, 69, 0.4) 0px 4px 12px 0px
- White glow: rgba(255, 255, 255, 0.48) 0px 2px 0px 0px
- Deep black: rgb(18, 16, 27) 0px 20px 96px 0px
- Purple glow: rgb(168, 105, 240) 0px 0px 104px 0px
- Heavy black: rgba(0, 0, 0, 0.64) 0px 20px 64px 0px

## Components

### Primary Button
Default:
```css
.btn-primary {
  background: #f30745;
  color: #000000;
  padding: 7px 11px;
  border-radius: 8px;
  border: 0.869565px solid #f30745;
  font-family: var(--font-primary);
  font-weight: 400;
  transition: background 150ms ease;
}
```

### Secondary Button
```css
.btn-secondary {
  background: rgba(27, 25, 35, 0);
  color: #ffffff;
  padding: 10px 0px;
  border-radius: 0px;
  border: none;
}
```

### Icon Button
```css
.btn-icon {
  background: #282534;
  color: #ffffff;
  padding: 8px;
  border-radius: 6px;
}
```

### Navigation Links
White link:
```css
.nav-link {
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}
```

## Layout & Responsive Rules
- Max content width: fluid
- Page padding: 24px desktop, 16px mobile
- Grid gap: multiples of 8px

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators: outline with white or accent color
- No hover underline for nav links

## DO List
- Use only palette colors
- Maintain 8px spacing grid
- Use 16px radius for most containers
- Keep text weights consistent per level
- Apply accent color only for interactive elements

## DON'T List
- Don’t invent new colors
- Don’t mix sharp and rounded corners
- Don’t apply shadows to every element
- Don’t use accent color for body text

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #f30745;
  color: #000000;
  padding: 7px 11px;
  border-radius: 8px;
  border: 0.869565px solid #f30745;
}
```

Card:
```css
.card {
  background: #000000;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-deep-black);
}
```

Form Input:
```css
.input {
  border: 1px solid #1b1923;
  border-radius: 12px;
  padding: 12px;
  font-size: 16px;
  background: #000000;
}
.input:focus {
  border-color: #f30745;
}
```

9. Summary

TL;DR — Ivi is a dark-mode-first streaming brand with a minimal palette, custom sans-serif typography, and disciplined use of a single accent color. Spacing is on an 8px grid, corners are mostly 16px radius, and shadows are rare but purposeful.

Brand Keywords:

• dark-mode-minimalist
• cinematic-contrast
• accent-disciplined
• content-first