Huawei Web-Guidelines V4

Collaboration Principle

This digital guideline document is for our colleagues at Huawei, partners, and agencies who help us build online experiences.


Design
Requirements:

  • Layouts file format: Sketch or Adobe XD;
  • Graphics file format: Adobe Photoshop;
  • Follow grid rules;
  • Screen resolutions:
    • Wide desktop (LG);
    • Tablet (MD) — optional;
    • Small Tablet (SM) — optional;
    • Smartphone (XS);
  • Image density:
    • Desktop: @1x and @2x;
    • Mobile: @2x or higher;
  • Apply styles described in this document and provided in the Sketch template below.

Development
Requirements:

  • Be based on Twitter Bootstrap v4.1:
    • Use package provided below, which contains:
      • Modified variables.scss file (according to Huawei brand style);
      • Global custom elements, such as font-size drow-down on mobile;
      • Custom styles of product-page components;
    • Apply Bootstrap html coding style;
    • Use default styles and variables;
    • Apply very unique names for your css styles and javascripts (in order to avoid any conflicts);
  • Provide files:
    • Plain html page file;
    • Compiled css file (don't include default Bootstrap files);
    • Compressed visual assets (according to rules in components section);
    • Custom javascript files — optional;
  • Follow components structure.

Typography

Generally, we use default letter space. Default line-height for titles is 1.2 of font-size, means if font-size is 40px, line height is 48px. Line-height for paragraphs of text is 1.5 of font-size, means if font-size 16px, line height is 24px.

default Call to action Reversed color
Specs Click me Specs Click me

Fonts

Country Font Example
Latin
Akkurat Light
Akkurat Regular
Akkurat Bold
Huawei Blooming Flower
Huawei Blooming Flower
Huawei Blooming Flower
China
  • Windows: Microsoft JhengHei, Microsoft YaHei
  • Mac/iOS: PingFang SC
  • Android: Source Han Sans SC
Huawei盛开的花
Huawei盛开的花
Huawei盛开的花

Text styles

Purpose Example Desktop
PX
Mobile
PX
ID Remark Line height Font Weight
titles
Big Slogan Ae 80 48 .display-1 Only flagship product pages. 120% Bold
Slogan Ae 64 40 .display-2 Only flagship product pages.
Page Ae 48 32 .h1
Section Ae 40 24 .h2
Category Ae 32 20 .h3
Paragraph Ae 24 20 .h4
Smaller Paragraph Ae 20 16 .h5
Caption Ae 14 .h6 letter-spacing: .125rem
text-transform: uppercase
text
Big text Ae 24 16 .lead 150% Regular
Text Ae 16
Small text Ae 14 .small
Legal text Ae 11 .tiny

Buttons

Small Default Large Disabled
Height 32px 42px 54px Inherit
Purchase button
Primary action button
Regular action button
Primary action button
on dark backgrounds
Regular action button
on dark backgrounds
Transparent button
adds space around regular link

Special Conditions

Long button Button with an icon

Icons

Huawei style primarily uses outline icon style. Line thickness should match text thickness and icon height. For perfect alignment with the text, icon box height should be equal to 1.5x of block font-size. Means, if font-size is 16px, icon box should be 24px.

Small icon
14px font-size
21x21px icon box size
Stroke width: 1px
Sign-in Sign-up
Regular icon
16px font-size
24x24px icon box size
Stroke width: 1px
Reload
Cart
Play
User
Search Share
Large icon
24px font-size
36x36px icon box size
Stroke width: 2px or 1.5px

Reload

On mobile icons inside "lead" text styles scales down to 24x24px
Extra Large icon
No text on the same line
60x60px icon box size
Stroke width: 2px

Colors

The web guidelines color palette is based on official Huawei brand identity guidelines. It comes with our primary red color, the 15% darker variations of it, and gray shades with a slight hint of red.

Primary Logo, "buy now" buttons, contextual hyperlinks and other most important elements. #D20A2C
100 #F5F3F3
200 #EBE9E9
300 #D6D4D4
400 Muted text, “tiny” text style. #C2C0C0
500 #A3A1A2
600 Global navigation link color. #858383
700 #5C5A5B
800 #323232
900 Regular text color, icons and buttons stroke color, content blocks. #1E1E1E
Secondary 15% lighter brand color for dark backgrounds. #f53354

Color Distribution

Light Theme
Dark Theme

Generally, we use just a bit of red color, about 35% of high contrast to current color theme colors, 45% of low contrast colors (such as background for content blocks).

Grid

This is mainly for our fellow developers. If you use official Sketch template, you should have all grid settings already set up.

Specifications Extra small
<576px
Small
576px
Medium
774px
Large
1008px
Extra Large
>1680px
Max container width None (auto) None (auto) 726px 978px 978px, 1920px
Gutter width 30px (15px on each side of a column)

Spaces

You can contribute to making development time faster if you follow these space guideline. Which means, our front-end developers won’t have to write a special rule for each space every single time.

# Example Size Dropdown on mobile
Only for padding-top and
padding-bottom values
1
10px
2
15px
3
20px 15px
4
30px 20px
5
40px 30px
6
60px 40px
7
80px 50px
8
120px 60px
9
200px 80px

Images

On a legacy display, one point is equal to one pixel. High-resolution screens have a higher pixel density. Because there are more pixels in the same amount of physical space, there are more pixels per point. As a result, high-resolution displays require images with more pixels.

Pixel Density @1x @2x
Resolution 40px x 40px 80px x 80px
Physical Resolution 40 x 40
density-independent pixels
Format JPG PNG JPG PNG JPG + SVG Mask
Display
File-size 2 kb 4 kb 4 kb 12 kb 4 kb
Not good on modern DHP screens. Good on none-transparent background. File size might be too big. Good.
Image Requirements:
  • Exported in 2 pixel densities: @1x and @2x;
  • Provide an additional image for mobile displays if needed;
  • Well optimised for sharp and vivid display;
  • Efficiently compressed for fast loading and good page performance.

As you see from above, PNG images don't perform very well for pixel graphics. A big and well-compressed PNG picture of a phone on a transparent background might exceed 3 Mb.

Please consider exporting big images with transparent background as JPG with separate SVG or PNG mask.

Thank you for learning.

: