Youku Design System Deep Dive

1. Brand Overview

Youku is one of China’s premier video streaming platforms, a direct competitor to Tencent Video, iQIYI, and Bilibili. From the design system of its homepage, it’s clear Youku is playing in the entertainment-tech space but with a distinctly “premium night mode” aesthetic. The interface is built around a dark background, muted low-opacity UI elements, and elevated typographic structure — telling us they value cinematic presentation over playful vibrancy.

The site's color system is deliberate: dominant black and deep neutral grays keep the backdrop subdued, allowing promotional posters, show thumbnails, and interactive elements to stand out. The palette contains occasional punches of gold-like warmth (#ffdd9a) and brand-aligned blues (#0080ff and #00a9f5), hinting at their branding roots (Youku’s historic red/blue motif) but adapted for a modern streaming experience. White plays multiple roles here — pure white for text, 60% opacity white for secondary info — reinforcing depth without physical shadow clutter.

Typography choices align the brand with clean, contemporary Chinese UI standards. PingFang SC anchors almost all textual elements; it’s readable, well-kerned, and works equally well in both lightweight and heavy weights. For numeric and iconographic display, custom icon fonts (iconfonttotal) and digital fonts (QY_Digital-Regular) inject utility when handling playback times or UI icons.

Spacing and layout are heavily informed by an 8px grid, showing discipline across paddings, margins, and container widths. The consistent modular scaling makes responsive adaptations straightforward — we’re likely seeing Tailwind-style utility classes used in production (top-[117px] is a dead giveaway).

Component-wise, Youku’s buttons are styled more for subtlety than high-impact call-to-action. Rounded corners vary — from soft 4px/8px tokens for badges and containers, to exaggerated 30px pills for VIP purchase buttons. Hover states favor color inversion or subtle border shifts over heavy drop shadows.

Vibe in short: Premium, cinematic, restrained. Heavy use of muted backgrounds, subtle accent colors, and measured typography. This is less about flashy “fun” UI and more about letting the content be the star while the interface whispers politely around it.

2. Color System

2.1 Primary Colors

The Youku color system’s working “primary” in UI terms is actually two-fold: a muted gold (#ffdd9a) representing premium/VIP actions, and a clear bright blue (#00a9f5 or semi-translucent #0080ff) for active links or accents. The primary brand voice here is less flamboyant — colors are deferred to contextual usage: gold for exclusivity, blue for interactivity. Compared to Netflix (full red) or Disney+ (deep blue), Youku’s palette reads softer, less aggressive.

Gold in UI creates a subtle luxury cue — users see it mostly on pay buttons or special features. Blue is a global interactive cue in digital products — here, it helps draw the eye without clashing against the dark mode base.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid between pure white #ffffff on black #000000 — ratio is effectively infinite for WCAG compliance. Gold (#ffdd9a) on black holds good readability (contrast ratio over 8:1). The translucent whites (rgba(255, 255, 255, 0.6)) on black give a softer hierarchy without hurting legibility in typical desktop lighting, although they could underperform for low-vision users.

Dark mode is central here — all palettes are tuned for dark backgrounds, with light elements used sparingly to break monotony.

2.4 Usage Guide

• Workhorse combination: Pure white text over black surface — the backbone for titles and readable content.
• Accents: Blue for links/buttons where action is expected. Gold for premium-tier actions.
• Separators: Light neutral gray #eaeaea plays nicely against both black and deep charcoal.
• Avoid: Using gold as body text — loses its luxury punch. Also avoid placing translucent white on deep charcoal without bumping opacity to maintain accessibility.

3. Typography

3.1 Font Families

Youku is anchored in PingFang SC — a default modern sans-serif for Simplified Chinese, with fallbacks to Microsoft YaHei, 微软雅黑, and standard western sans-serif fonts (helvetica, arial, verdana, tahoma). Custom fonts: iconfonttotal for icons and glyphs, and QY_Digital-Regular/QY_Digital-SemiBold for numeric/digital displays.

No Google or Adobe hosted fonts. All appear to be locally served or bundled.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is clearly structured: Big 42px bold for main title, mid-tier headings in the high-20s, and body text sits in 16–18px comfortable range. This scale reinforces cinematic framing — titles are large, but not cartoonishly huge like gamer UIs. The smaller captions (14px and 12px) keep UI elements informative without clutter.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px. Frequencies tell us usage density — 8px is most common (76 counts), plus micro adjustments (1px, 2px, 3px) for precision alignment. Here’s the scale:

4.2 Layout

Clear reliance on Tailwind CSS class architecture — direct pixel/rem values applied as utility classes. Large containers hit ~960px widths for major content zones, aligning with modern desktop breakpoints.

5. Visual Elements

Border Radius: Ranges from subtle (2px, 4px) to soft (8px, 10px) to pill shapes (21px, 30px, 100px). Buttons often use 30px or 21px radius for pill shapes, while badges are flatly 4px. Interesting: asymmetrical radii like 8px 0px 0px and 8px 0px 0px 8px on scroll buttons — hints at sliding panels/buttons hugging one edge.

Shadow System: One shadow: rgb(0, 0, 0) 0px 10px 70px 0px — deep and wide, possibly for modal or overlay layering. Otherwise, shadow usage is minimal — they rely on opacity and background color for layering.

Borders & Dividers: Mostly ultra-low-opacity white borders (rgba(255, 255, 255, 0.02) or 0.04). Not for separation so much as subtle component framing in dark mode. No strong strokes — keeps it “premium” and unobtrusive.

6. Components

6.1 Buttons

VIP Pay Button (youku_vip_pay_btn):

• Default:
  • Background: rgba(255, 255, 255, 0.08)
  • Color: rgb(255, 222, 156)
  • Border-radius: 30px (pill)
  • Border: 1px solid rgba(255, 255, 255, 0.02)
  • Padding: 0px 12px
  • Font-size: 12px, weight: 400
• Hover:
  • Color: rgb(13, 155, 255)
  • Border: 1px solid rgb(107, 54, 20)
  • Background: rgb(251, 230, 209)
• Active/Focus:
  • Outline: none

This nails the premium signal with gold text, flips to blue on hover — interesting brand hybrid.

Preview Mute Button:

• Background: rgba(0, 0, 0, 0.3)
• Color: rgb(0, 0, 0)
• Border-radius: 21px
• Padding: 0
• Functional, not decorative.

Scroll Button (Right):

• Background: rgba(21, 22, 23, 0.85)
• Color: #ffffff
• Border-radius: 8px 0px 0px 8px — only left side rounded.
• Padding: 0
• Edge-hugging button for horizontal scroll.

6.2 Links

Four color setups:

• Gold: #ffdd9a — no underline default, underline on hover.
• Translucent white: rgba(255, 255, 255, 0.6) — subtle links.
• Black: #000000 — likely in light-themed panels.
• Blue: #00a9f5 — active/interactive emphasis.

All share hover underline, default none.

6.3 Forms

No text inputs styled prominently in data capture — suggests search bars and field components are not primary here (likely hidden behind interactive icons).

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-vip-gold: #ffdd9a;
  --color-light-gray: #eaeaea;
  --color-charcoal: #1d1e20;
  --color-blue-accent-opacity: rgba(0, 128, 255, 0.15);
  --color-link-blue: #00a9f5;

  /* Typography */
  --font-pingfang-sc: "PingFang SC", "Microsoft YaHei", "微软雅黑", helvetica, arial, verdana, tahoma;
  --font-iconfonttotal: "iconfonttotal";
  --font-digital-regular: "QY_Digital-Regular";
  --font-digital-semibold: "QY_Digital-SemiBold";

  /* Spacing Scale (px) */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-36: 36px;
  --space-40: 40px;
  --space-50_21: 50.21px;
  --space-260_656: 260.656px;
  --space-964_031: 964.031px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-8-left-only: 8px 0px 0px;
  --radius-8-left-right: 8px 0px 0px 8px;
  --radius-10: 10px;
  --radius-18: 18px;
  --radius-21: 21px;
  --radius-30: 30px;
  --radius-100: 100px;
  --radius-half: 50%;
  --radius-full: 100%;

  /* Shadows */
  --shadow-deep: 0px 10px 70px 0px rgb(0, 0, 0);
}

8. AI Coding Assistant Prompt

# Youku Design System Specification

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

## Brand Context
Youku's design language is premium, cinematic, and restrained. Dark mode is the base; content takes priority, UI elements are supportive accents. Colors and typography deliver hierarchy without visual noise — components are rounded and soft, with gold and blue as interactive cues.

## Color Palette
- Black: #000000 — Base background, header, content frame
- White (100%): #ffffff — Titles, body text on dark background
- White (60% opacity): rgba(255,255,255,0.6) — Secondary text, icons
- VIP Gold: #ffdd9a — Premium actions, VIP buttons
- Light Gray: #eaeaea — Divider lines, subtle separators
- Deep Charcoal: #1d1e20 — Panels, overlays
- Accent Blue translucent: rgba(0,128,255,0.15) — Background highlights
- Link Blue: #00a9f5 — Interactive text links

## Typography
- Headings: "PingFang SC", "Microsoft YaHei", "微软雅黑", helvetica, arial, verdana, tahoma
- Icons: "iconfonttotal"
- Numerics: "QY_Digital-Regular", "QY_Digital-SemiBold"

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 | 42px | 700 | 1.43 | Hero titles |
| H2/icon | 24px | 400–500 | 0.83–2.25 | Icons, subhead |
| H3 | 22px | 400–500 | 0.91–1.41 | Smaller headings |
| H4 | 20px | 500 | 2.70 | Section headers |
| Body | 18px | 500 | 2.67 | Links, body text |
| Body-sm | 16px | 400 | 3.00 | Paragraph text |
| Caption | 14px | 400 | 1.57–2.57 | Small text blocks |
| Caption-sm | 12px | 400 | 1.67–3.00 | UI labels |
| Tiny | 10px | 400 | 1.00 | Micro info |

## Spacing & Grid
Base unit: 8px
Scale includes: 1px, 2px, 3px, 4px, 8px, 12px, 16px, 18px, 20px, 22px, 24px, 28px, 30px, 36px, 40px, 50.21px, 260.656px, 964.031px

## Border Radius
- 2px: small imgs
- 4px: badges
- 6px: div elements
- 8px: buttons, divs
- 8px left-only: scroll buttons
- 8px left-right: edge buttons
- 10px: divs
- 18px: images
- 21px: buttons
- 30px: VIP pills
- 100px: inputs
- 50%: rounded divs
- 100%: full round shapes

## Shadows & Depth
- Deep shadow: 0px 10px 70px rgb(0,0,0) — overlays/modals
Generally flat UI. Use opacity and borders for layering.

## Component Specifications

### Primary VIP Button
Default: 
  background: rgba(255,255,255,0.08);
  color: #ffdd9a;
  padding: 0px 12px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.02);
  font-size: 12px; font-weight: 400;

Hover: 
  color: rgb(13,155,255);
  border: 1px solid rgb(107,54,20);
  background: rgb(251,230,209);

Focus/Active:
  outline: none;

### Secondary Scroll Button
Default:
  background: rgba(21,22,23,0.85);
  color: #ffffff;
  border-radius: 8px 0px 0px 8px;
  font-size: 12px;

### Navigation Links
Gold link: text-decoration: none default, underline on hover.  
Blue link: same hover behavior.

## Layout & Responsive Rules
Max content width: ~964px for large blocks.  
Page padding scales: multiples of 8px.  
Container width: 260.656px for cards/content modules.

## Interaction Rules
Transitions: 150ms ease for hovers/focus.  
Focus indicators: color shift, no heavy outlines.

## DO List
- Use only colors from the palette
- Maintain multiples of 8px spacing
- Use PingFang SC for text, iconfonttotal for icons
- Keep corners consistent with designated radii
- Observe hover underline rules for links

## DON'T List
- Introduce shadows beyond the deep modal shadow
- Mix sharp and rounded corners
- Use custom colors outside palette
- Overuse VIP gold

## Code Examples

### VIP Button
```css
.btn-vip {
  background: rgba(255,255,255,0.08);
  color: #ffdd9a;
  padding: 0 12px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.02);
  font-size: 12px;
  font-weight: 400;
  transition: all 150ms ease;
}
.btn-vip:hover {
  color: rgb(13,155,255);
  border: 1px solid rgb(107,54,20);
  background: rgb(251,230,209);
}
```

### Scroll Button
```css
.btn-scroll {
  background: rgba(21,22,23,0.85);
  color: #ffffff;
  border-radius: 8px 0 0 8px;
  font-size: 12px;
}
```

### Link
```css
.link-gold {
  color: #ffdd9a;
  text-decoration: none;
}
.link-gold:hover {
  text-decoration: underline;
}
```

9. Summary

TL;DR: Youku’s design system is premium dark mode with gold and blue accents. PingFang SC keeps typography clean, and spacing follows a disciplined 8px grid. Buttons are rounded and understated; links are color-coded for function.

Brand Keywords:

• premium-darkmode
• gold-accented
• blue-interactive
• content-first
• typographic-discipline