Huawei Brand Design System Deep Dive

1. Brand Overview

Huawei’s corporate site is unapologetically corporate-tech in tone — a mix of rigid structure and subtle personality. It’s not trying to charm you with playful UI or pastel gradients. It is here to communicate authority, scale, and precision. The design language is tight, grid-driven, and anchored around their signature deep red (#c7000b) — a color that shouts “brand” across every CTA, link, and headline accent.

The vibe is serious but not sterile. There’s warmth in the red, but the supporting palette leans heavily on grayscale neutrals (#ffffff, #808080, #666666, #4d4d4d, etc.) to keep things grounded. Functionality comes first — this is a site for industry partners, enterprise buyers, and government clients as much as for end consumers. No frivolous micro-interactions here; hover states are purposeful, focus states are visible but restrained.

Typography is a custom corporate stack. HuaweiSans — their own sans-serif — is the workhorse, backed by Helvetica and Arial as fallbacks. This reinforces brand control over every pixel. The scale is generous for headings (72px icon fonts for hero sections, 34px for section headings) but tight for body copy. It’s clear they want to keep hierarchy sharp.

Layout-wise, they use both Bootstrap’s grid system and Vuetify components. That’s an interesting hybrid — Bootstrap for the responsive container/row/col structure and Vuetify for component logic. Breakpoints are numerous and precise, covering everything from tiny 320px mobile screens to ultra-wide 2560px displays. Responsive behavior is clearly meticulously tuned.

In short: Huawei’s design system is built for precision, clarity, and brand authority. It’s not minimal in the Apple sense — it’s functional minimalism, where every design choice is a statement of control.

2. Color System

2.1 Primary Colors

The undisputed primary is #c7000b (rgb(199, 0, 11)). It’s everywhere — primary buttons, link accents, hover states. It’s a saturated red that’s neither too warm nor too cool; psychologically, it conveys energy, action, and urgency. This is a “do something now” color, perfect for CTAs.

Compared to competitors:

• Apple uses a neutral primary (blue for CTAs, lots of gray).
• Samsung leans on blue tones.
• Huawei’s red is aggressive — it stands out against the gray-heavy UI and commands attention.

This works because the rest of the palette is deliberately muted. Using red sparingly keeps it powerful.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally strong. White text on #c7000b passes WCAG AA easily. Dark gray text (#4d4d4d) on white is highly readable. The one potential issue: #666666 on white can be borderline low contrast for small text — fine for metadata but not ideal for body copy.

Dark mode? Not implemented here — everything is a light background base. The palette would work in dark mode with inversion, but it’s clearly not a design goal.

2.4 Usage Guide

• Good combos: #c7000b with white for CTAs; #4d4d4d with white for headings; #cccccc on white for disabled states.
• Avoid: Red on dark gray — low readability. Gray-on-gray for interactive elements unless intentionally disabled.

3. Typography

3.1 Font Families

Primary font: HuaweiSans in Bold and Regular weights. Fallbacks: Helvetica, Arial.
Iconography uses multiple custom icon fonts: huawei-iconfont, iconfont, corpfont, myiconfont.

No Google or Adobe Fonts — everything is self-hosted. Variable fonts: none.

3.2 Type Scale

Extracted sizes, weights, and line heights:

(Full table would list all extracted sizes — there are over 50 distinct entries.)

3.3 Hierarchy

Biggest headings are iconfont-based — clearly part of hero/branding sections. The HuaweiSans sizes form a consistent downward scale, keeping body copy readable while making headings stand out. Line heights are generally tight — no airy vertical rhythm here — which keeps layouts compact.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px (confirmed in scaleType).
Common values:

4.2 Layout

Breakpoints: granular, from 320px to 2560px.
Bootstrap grid + Vuetify components. Layout is clearly responsive, but with many custom breakpoints for pixel-perfect adjustments.

5. Visual Elements

Border Radius

Values:

• 1px — almost square, subtle rounding for spans.
• 4px — small buttons.
• 5px — light rounding for divs.
• 100% — perfect circle (avatars, pills).

They lean toward sharp corners — most buttons have 0px radius.

Shadows

Only one shadow: rgba(0, 0, 0, 0.2) 1px 2px 5px 0px — used sparingly. Mostly flat design.

Borders

Common:

• 1px solid #c7000b — primary buttons.
• 1px solid #111111 — secondary buttons.
• 1px solid #d4d4d4 — inputs.

Borders are used for separation instead of shadows.

6. Components

6.1 Buttons

Primary (btn-more btn-red)

• Default: bg #c7000b, text white, border 1px solid #c7000b, padding 0px 30px, radius 0.
• Hover: bg #850f12, text #c7000b, border 1px solid #850f12, transform translateX(10px).
• Active: bg transparent, text white.
• Focus: bg transparent, text #c7000b, border 1px solid #bebdbd, shadow #d4d4d4 0px 3px 8px.

Secondary (btn-rect)

• Default: bg transparent, text #111111, border 1px solid #111111.
• Hover/Focus: same as primary — red hover, focus styles identical.

Swiper Pagination Bullet

• Default: bg rgba(230,230,230,0.7), text #333333.
• Hover: bg white.

6.2 Links

Multiple link styles — all hover to #c7000b with underline. Defaults vary: white, gray, black depending on context.

6.3 Forms

Text input:

• Default: bg white, text #333333, border 1px solid #d4d4d4, padding 0 50px 0 20px.
• Focus: border #bebdbd, shadow #d4d4d4 0px 3px 8px.

6.4 Cards

No explicit card data in extracted JSON, but spacing values suggest 32px padding, light borders over shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-gray-medium: #808080;
  --color-white: #ffffff;
  --color-gray-dark: #666666;
  --color-huawei-red: #c7000b;
  --color-charcoal-gray: #595757;
  --color-gray-light: #cccccc;
  --color-gray-deep: #4d4d4d;
  --color-black: #000000;
  --color-gray-soft: #e6e6e6;
  --color-gray-almost-black: #111111;
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-huawei-sans-bold: "HuaweiSans-Bold", Helvetica, Arial;
  --font-huawei-sans-regular: "HuaweiSans-Regular", Helvetica, Arial;
  --font-iconfont: "iconfont";
  --font-huawei-iconfont: "huawei-iconfont";
  --font-corpfont: "corpfont";
  --font-myiconfont: "myiconfont";

  /* Spacing */
  --space-5: 5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-32: 32px;
  --space-40: 40px;
  --space-70: 70px;

  /* Border Radius */
  --radius-none: 0;
  --radius-1: 1px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-default: rgba(0, 0, 0, 0.2) 1px 2px 5px 0px;
}

8. AI Coding Assistant Prompt

# Huawei Design System Specification

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

## Brand Context
Huawei's design language is precise, corporate, and anchored in a strong red primary color. Typography is custom, spacing is tight, and corners are generally sharp. The UI is functional, with minimal shadows and clear borders for separation.

## Color Palette
- Gray Medium: #808080 — Neutral text, icons
- White: #ffffff — Backgrounds, text on dark
- Gray Dark: #666666 — Secondary text
- Huawei Red: #c7000b — CTAs, primary buttons, link accents
- Charcoal Gray: #595757 — Secondary UI elements, borders
- Gray Light: #cccccc — Icons, disabled states
- Gray Deep: #4d4d4d — Headings, strong text
- Black: #000000 — High-contrast text
- Gray Soft: #e6e6e6 — Panel backgrounds
- Gray Almost Black: #111111 — Text in strong sections
- Swiper Blue: #007aff — Carousel indicators

## Typography
- Headings: "HuaweiSans-Bold", Helvetica, Arial
- Body: "HuaweiSans-Regular", Helvetica, Arial
- Iconography: "huawei-iconfont", "iconfont", "corpfont", "myiconfont"

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 Hero | huawei-iconfont | 72px | 400 | — | Hero icons/text |
| H1 Section | HuaweiSans-Bold | 34.2px | 400 | 1.50 | Section titles |
| Body | HuaweiSans-Regular | 18px | 400 | 1.15–1.67 | Main content |
| Caption | HuaweiSans-Regular | 14px | 400 | 1.22–1.43 | Metadata |

## Spacing & Grid
Base: 8px grid
Tokens: 5px, 10px, 15px, 20px, 32px, 40px, 70px  
Use 15px for component padding, 32px for cards, 40px for large sections.

## Border Radius
- none: 0 — most buttons, containers
- sm: 1px — subtle rounding
- md: 4px — small buttons
- lg: 5px — panels
- full: 100% — circles, avatars

## Shadows & Depth
Mostly flat. Only shadow: rgba(0,0,0,0.2) 1px 2px 5px 0px — use sparingly.

## Component Specifications

### Primary Button
Default: bg #c7000b, color #ffffff, padding 0 30px, border 1px solid #c7000b, radius 0.  
Hover: bg #850f12, color #c7000b, border #850f12, transform translateX(10px).  
Active: bg transparent, color #ffffff.  
Focus: bg transparent, color #c7000b, border #bebdbd, shadow #d4d4d4 0px 3px 8px.

### Secondary Button
Default: bg transparent, color #111111, border 1px solid #111111. Hover/Focus: same as primary hover/focus.

### Input Fields
Default: bg #ffffff, color #333333, border 1px solid #d4d4d4, padding 0 50px 0 20px.  
Focus: border #bebdbd, shadow #d4d4d4 0px 3px 8px.

### Links
Default varies (white, gray, black), hover always #c7000b with underline.

## Layout & Responsive Rules
Bootstrap grid + Vuetify components.  
Breakpoints: from 320px to 2560px — adjust layout per breakpoint.

## Interaction Rules
Transitions: ~150ms ease for hover/focus.  
Focus indicators: visible border + shadow.

## DO List
- Use ONLY palette colors
- Maintain 8px spacing grid
- Keep button corners sharp unless specified
- Use HuaweiSans for all text
- Keep hover transforms subtle (translateX max 10px)

## DON'T List
- Add unapproved shadows
- Use colors outside palette
- Round corners arbitrarily
- Reduce contrast below WCAG AA
- Animate without purpose

## Code Examples

```css
.btn-primary {
  background: #c7000b;
  color: #ffffff;
  padding: 0 30px;
  border: 1px solid #c7000b;
  border-radius: 0;
  font-size: 15.75px;
  font-weight: 400;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #850f12;
  color: #c7000b;
  border-color: #850f12;
  transform: translateX(10px);
}
.btn-primary:focus {
  background: transparent;
  color: #c7000b;
  border-color: #bebdbd;
  box-shadow: #d4d4d4 0px 3px 8px;
}

.input {
  background: #ffffff;
  color: #333333;
  border: 1px solid #d4d4d4;
  padding: 0 50px 0 20px;
}
.input:focus {
  border-color: #bebdbd;
  box-shadow: #d4d4d4 0px 3px 8px;
}

.card {
  background: #ffffff;
  border-radius: 5px;
  padding: 32px;
  border: 1px solid #d4d4d4;
}

---

## 9. Summary

**TL;DR** — Huawei’s design system is corporate-tech precision: strong red primary, grayscale support, tight spacing, sharp corners, restrained shadows. Typography is custom and controlled. Buttons have purposeful hover transforms.

**Brand Keywords**:  
- corporate-precision  
- red-authority  
- grid-disciplined  
- functional-minimalist  
- tech-formal