Jumpstart your online marketing efforts

This digital guideline document is for our fellow colleagues at Huawei, partners, and agencies. Who help us to build beautiful online experiences for our beloved customers.


The Collaboration Principle

So many products, so little time. Now, each team doesn’t have to build a website from scratch. All you need to do is to learn styles in this document and if you are a developer, follow Boostrap official documentation.

But why?

Once upon a time, there was a house with many rooms inside. Each room designed by a different person and seemed inconsistent. Nobody could tell what kind of design language this house speaks. To not let it happen with to our online experiences, we are building this documents for all of us to have a reference from and follow. But never stop yourself from being creative.

Original, Compiled Bootstrap Framework

only variables file (variables.sass) was customized according to the brand design language

  • bootstrap.css
  • bootstrap.js
Global custom elements: navigation, footer, etc.

global elements, using common styles from the framework, such as: footer, header, etc.

  • header.html
  • footer.html
  • global.css
  • global.js
Your custom page on steroids

Try to follow default guideline styles as much as possible and place custom elements in files specifically dedicated for your page.

  • your-page.html
  • your-page.css
  • your-page.js

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

Default text styles Style
desktop / mobile
Blooming Flower
Used for important and short paragraphs of text. For example, feature description on a product page.
.lead
24px / 16px
Blooming Flower
Default text style.
16px
Blooming Flower
Text style for less important or too detailed paragraphs of text.
.small
14px
Blooming Flower
Text style for small captions or legal text.
.tiny
11px
Default pages titles Style
desktop / mobile
Blooming Flower
Default page title style.
.h1
48px / 24px
Blooming Flower
Default sub-title style.
.h2
40px / 20px
Blooming Flower
Smaller sub-title style, usually used in cards.
.h3
32px / 20px
Blooming Flower
Paragraph title style.
.h4
24px / 20px
Blooming Flower
Smaller paragraph title style.
.h5
20px
Blooming Flower
Small caption, uppercase style.
.h6
14px
uppercase
letter space: 2px
Marketing-driven titles Style
desktop / mobile
Blooming Flower
Promotional page title style, not more than 1-3 words.
.display-1
96px / 48px
Blooming Flower
Promotional page title style, used in very short titles.
.display-2
80px / 40px
Blooming Flower
Promotional page title style, used in short titles.
.display-3
64px / 32px
Blooming Flower
Promotional page title style.
.display-4
56px / 24px

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
1
10px
2
15px
3
20px
4
30px
5
40px
6
60px
7
80px
8
120px
9
200px
Thank you for exploring!