Vivo Design System Deep-Dive

1. Brand Overview

Vivo’s site is unapologetically product-driven. It’s slick, tech-heavy, and aimed squarely at a modern consumer who expects polish without distraction. This isn’t a lifestyle brand telling stories in pastel; this is a precision-focused electronics maker showing off hardware. Every visual decision feels engineered to keep you looking at the product: high-contrast typography, restrained use of color, and a spacing rhythm that mirrors industrial design tolerances.

The vibe leans towards "premium tech" but without the coldness that some competitors fall into. There’s warmth in the rounded corners (22px, 23px, 24px radii dominate), and the occasional soft shadow keeps the interface approachable. It’s clearly designed for both China’s high-density mobile audience and desktop shoppers — there’s a tight breakpoint set ranging from 768px up to 1615px, showing they’ve tuned layouts for specific device widths.

Typography is all custom — vivoSansSC across headings, links, captions, buttons — with proprietary web fonts as fallbacks. The weight distribution is deliberate: 500 for most headings and links, with occasional 550 for emphasis. No thin weights here; they want clarity and impact, even at small sizes.

Color is handled with discipline. Black (#000000) is the anchor, paired with deep grays (#242933, #8a8f99) for text and UI chrome. White (#ffffff) is reserved for clean surfaces. There’s a brand blue in the CSS variables (--swiper-theme-color: #007aff) and a hover tint (rgba(65,95,255,.73)), but it’s used sparingly — mostly on interactive states.

Overall, this is a system for a brand that wants to sell devices without gimmicks. It’s functional minimalism tuned for high-resolution product imagery and precise, repeatable UI components.

2. Color System

2.1 Primary Colors

The primary brand tone is blue — specifically #007aff from the --swiper-theme-color. This is a saturated, tech-friendly blue that’s become almost a UI convention (Apple’s iOS uses #007aff for system links and CTAs). It’s a safe but effective choice: high contrast against white, instantly recognizable as interactive, and psychologically associated with trust and reliability.

They back it up with a hover color defined as rgba(65,95,255,.73). This is softer, with transparency, which reads as a subtle state change rather than a jarring shift.

2.2 Complete Palette

Here’s every color extracted:

2.3 Color Relationships

The system is high contrast: black text on white surfaces, blue for interaction. The grays are all tuned for subtlety — secondary text is #8a8f99, which has enough contrast against white to meet WCAG AA for normal text. The deep grays (#242933) are almost black, used for important chrome and text.

The brand blue (#007aff) easily meets contrast requirements against white surfaces (ratio ~4.6:1), making it safe for body-size interactive text. On dark backgrounds, they switch to white text rather than relying on blue alone.

Dark mode isn’t explicitly implemented here — colors are chosen for light surfaces — but the palette could invert easily: white becomes text, dark grays become surfaces, blue remains CTA.

2.4 Usage Guide

• Use black (#000000) for primary text in headers and fixed nav elements.
• Use #8a8f99 for secondary, less important text and inactive link states.
• Reserve #007aff for interactive elements — buttons, highlighted links.
• Hover states: shift to rgba(65,95,255,.73) for subtle feedback.
• Avoid using the navy tones (#2c3769 etc.) except for focus outlines or accessibility highlights — they’re too dark for body text but work for borders.
• Don’t use the light grays as text — they’re for borders or backgrounds in hover/focus.

3. Typography

3.1 Font Families

Everything runs through vivoSansSC — a custom typeface designed for Vivo. Fallbacks include VIVO-FONT-WEB-BOLD, VIVO-FONT-NAV-BOLD, and Microsoft YaHei for Chinese rendering. There’s no Google or Adobe font sourcing; this is proprietary.

This tight control means consistent rendering across devices. The lack of variable fonts suggests they’re optimizing for predictable weight rendering rather than dynamic axes.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is clear: large headings (40px down to 26px) for product names and key sections, 20px for subheads, 16px for body links. Captions and microcopy drop to 12px or 14px, often with exaggerated line heights (3.14, 6.14) for nav or footer links — probably to vertically center in tall containers.

Boldness is restrained — 500 weight is the norm, with 550 only for emphasis. No ultra-light weights, which keeps text legible on all screens.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px, but they also use 4px and 6px increments for fine-tuning.

4.2 Layout

Breakpoints are numerous: 768, 769, 899, 900, 950, 951, 999, 1000, 1080, 1199, 1200, 1440, 1441, 1599, 1600, 1601, 1615px. This suggests they’re tuning for exact device classes (common Chinese Android resolutions, plus global desktop widths).

5. Visual Elements

Border Radius System:

• 0px (square corners) for some divs, data tables.
• 4px for small spans.
• 8px for containers.
• 16px for icons (<i> tags).
• 22px — most common rounded corner for images/divs.
• 23px — pill-like buttons/spans.
• 24px — very common for li/div/image/picture/a.
• 24px top-only for picture elements.
• 28px — rare, special modules.

Shadows:

• rgba(0, 0, 0, 0.09) 0px 15px 40px 0px — large, soft drop shadow for modals/cards.
• rgba(0, 0, 0, 0.05) 0px 5px 8px 0px — subtle shadow for floating buttons.

Borders:

• 3px solid #242933 — used on icons.
• 1px solid #45474d — top border for separators.
• Bottom borders in #242933 for some links.

6. Components

6.1 Buttons

Variant 1 (vp-head-product-prev vp-head-product-btn-disabled):

• Default: bg #f7f8fa, text #000000, radius 23px, no border/shadow, font-weight 500, font-size 0px (icon-only).
• Hover: text color var(--brandColor), scaleX(1.04).

Variant 2 (questionUrl-btn-icon):

• Default: bg #ffffff, text #0000ee, radius 24px, shadow rgba(0, 0, 0, 0.05) 0px 5px 8px, font-weight 400, font-size 12px.

6.2 Links

Three styles:

• Gray (#8a8f99) — muted link, weight 500. Hover to var(--brandColor).
• Blue (#0000ee) — standard link, hover to var(--brandColor).
• Dark gray (#242933) — strong link, hover to var(--brandColor).

No underlines. State change is color only.

6.3 Forms

Text inputs:

• Default: transparent bg, text #242933, no border, padding right 30px.
• No focus styles defined in extracted data — likely handled via JS or CSS variable.

6.4 Cards

No explicit card component in data, but shadows and radii suggest:

• bg white, radius 22–24px, padding 20–24px, shadow rgba(0,0,0,0.09).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-gray-medium: #8a8f99;
  --color-gray-dark: #242933;
  --color-white: #ffffff;
  --color-gray-light-1: #c6c8cd;
  --color-gray-light-2: #c3c6cb;
  --color-gray-light-3: #cdcfd3;
  --color-gray-light-4: #c5c7cc;
  --color-gray-light-5: #ccced3;
  --color-gray-light-6: #ccced2;
  --color-navy-1: #2c3769;
  --color-navy-2: #2b3662;
  --color-navy-3: #2b3562;
  --color-navy-4: #2a3560;
  --color-brand-blue: #007aff;
  --color-brand-hover-blue: rgba(65,95,255,.73);

  /* Typography */
  --font-vivoSansSC: "vivoSansSC", "VIVO-FONT-WEB-BOLD", "VIVO-FONT-NAV-BOLD", "微软雅黑";
  --font-vivoSansSC-noCN: "vivoSansSC", "VIVO-FONT-WEB-BOLD", "VIVO-FONT-NAV-BOLD";
  --font-vivoWeb: "VIVO-FONT-WEB", "VIVO-FONT-NAV";

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-32: 32px;
  --space-36: 36px;
  --space-39: 39px;
  --space-40: 40px;
  --space-44: 44px;
  --space-60: 60px;
  --space-68: 68px;
  --space-80: 80px;
  --space-126: 126px;

  /* Radius */
  --radius-none: 0px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-22: 22px;
  --radius-23: 23px;
  --radius-24: 24px;
  --radius-28: 28px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.09) 0px 15px 40px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.05) 0px 5px 8px 0px;
}

8. AI Coding Assistant Prompt

# Vivo Design System Specification

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

## Brand Context
Vivo’s design language is precise, product-focused, and minimal. It uses high-contrast typography, controlled color usage, and rounded corners to balance premium tech with approachability. Interaction cues are subtle but clear.

## Color Palette
- Black: #000000 — Primary text, header/nav
- Gray Medium: #8a8f99 — Secondary text, inactive links
- Gray Dark: #242933 — Text, borders, chrome
- White: #ffffff — Background surfaces, cards
- Gray Light 1: #c6c8cd — Hover/focus bg tint
- Gray Light 2: #c3c6cb — Hover/focus bg tint
- Gray Light 3: #cdcfd3 — Hover/focus bg tint
- Gray Light 4: #c5c7cc — Hover/focus bg tint
- Gray Light 5: #ccced3 — Hover/focus bg tint
- Gray Light 6: #ccced2 — Hover/focus bg tint
- Navy 1: #2c3769 — Focus outline
- Navy 2: #2b3662 — Focus outline
- Navy 3: #2b3562 — Focus outline
- Navy 4: #2a3560 — Focus outline
- Brand Blue: #007aff — CTA, primary actions
- Brand Hover Blue: rgba(65,95,255,.73) — Hover states

## Typography
- Headings/Body: vivoSansSC, fallback "VIVO-FONT-WEB-BOLD", "VIVO-FONT-NAV-BOLD", "微软雅黑"
- Alternate: "VIVO-FONT-WEB", "VIVO-FONT-NAV"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 40px | 500 | 1.00 | Page titles |
| H1 | 34px | 500 | 1.30 | Hero titles |
| H1 | 28px | 500 | 1.07 | Section headings |
| H1 | 26px | 500 | 1.08 | Subheadings |
| H1 | 26px | 550 | 1.17 | Emphasized subheadings |
| H1 | 24px | 500 | 1.17 | Smaller headings |
| Link | 24px | 500 | — | Nav links |
| H1 | 20px | 500 | 1.30 | Minor headings |
| Link | 16px | 500 | 1.13 | Body links |
| Link | 14px | 400 | 3.14 | Footer links |
| Caption | 14px | 400 | 1.43 | Captions |
| Button | 12px | 500 | 1.00 | Button text |

## Spacing & Grid
Base: 8px. Scale: 4px, 6px, 8px, 10px, 12px, 16px, 17px, 18px, 20px, 24px, 25px, 32px, 36px, 39px, 40px, 44px, 60px, 68px, 80px, 126px.

## Border Radius
- none: 0px — square containers
- sm: 4px — small spans
- md: 8px — cards
- lg: 16px — icons
- xl: 22px — images/divs
- pill: 23px — buttons
- xl+: 24px — various elements
- special: 28px — rare modules

## Shadows & Depth
- Large: rgba(0, 0, 0, 0.09) 0px 15px 40px — modals/cards
- Small: rgba(0, 0, 0, 0.05) 0px 5px 8px — floating buttons

## Component Specifications

### Primary Button
Default: bg #f7f8fa, text #000000, radius 23px, no border/shadow, font-weight 500, icon-only.  
Hover: text color var(--brandColor), transform scaleX(1.04).  
Disabled: opacity 1 (no dim), maintain bg.

```css
.btn-primary {
  background-color: #f7f8fa;
  color: #000;
  border-radius: 23px;
  border: none;
  font-weight: 500;
  padding: 0;
  transition: transform 150ms ease, color 150ms ease;
}
.btn-primary:hover {
  color: var(--brandColor);
  transform: scaleX(1.04);
}

Secondary Button

Default: bg #fff, text #0000ee, radius 24px, shadow var(--shadow-sm), font-weight 400, font-size 12px.

.btn-secondary {
  background-color: #fff;
  color: #0000ee;
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  font-weight: 400;
  font-size: 12px;
  border: none;
}

Navigation Links

Default: color #8a8f99 / #0000ee / #242933 depending on context, no underline.
Hover: color var(--brandColor).

Input Fields

Default: transparent bg, text #242933, no border, padding-right 30px.

.input-text {
  background: transparent;
  color: #242933;
  border: none;
  padding: 0 30px 0 0;
}

Cards

bg #fff, radius 22–24px, padding 20–24px, shadow var(--shadow-lg).

Layout & Responsive Rules

Breakpoints: 768, 769, 899, 900, 950, 951, 999, 1000, 1080, 1199, 1200, 1440, 1441, 1599, 1600, 1601, 1615px.
Page padding: multiples of spacing scale.

Interaction Rules

• Transition: 150ms ease for hover/focus changes.
• Hover: color change or subtle transform.
• Focus: navy tone outline.

DO List

• Use only palette colors.
• Maintain 8px grid.
• Use vivoSansSC for all headings and UI.
• Apply correct border radius per component.
• Keep shadows subtle — use provided values.

DON'T List

• Invent new colors.
• Mix sharp and rounded corners.
• Overuse blue — reserve for interactive.
• Add heavy shadows.

Code Examples

Primary Button

.btn-primary {
  background-color: #f7f8fa;
  color: #000;
  border-radius: 23px;
  border: none;
  font-weight: 500;
  padding: 0;
  transition: transform 150ms ease, color 150ms ease;
}
.btn-primary:hover {
  color: var(--brandColor);
  transform: scaleX(1.04);
}

Card

.card {
  background-color: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  padding: var(--space-24);
}

Input

.input-text {
  background: transparent;
  color: #242933;
  border: none;
  padding: 0 30px 0 0;
}

---

## 9. Summary

**TL;DR** — Vivo’s design system is tight, minimal, and product-first. Blue is the accent, black and gray handle the heavy lifting. Rounded corners (22–24px) and soft shadows keep it human. Everything rides on a strict spacing scale and custom type.

**Brand Keywords**:
- premium-tech
- minimal-functional
- rounded-precision
- restrained-color
- product-focused