HONOR WEBSITE GUIDELINE

The following guidelines illustrate the general design principles to follow when developing and designing for HONOR on the web (desktop and mobile).

Exceptions should be avoided as much as possible, in order to keep the overall experience consistent and crossplatform.

Text Styles
H1 Moving colours Avenir Next Bold - 56pt
H2 Moving colours Avenir Next Bold - 45pt
H3 Moving colours Avenir Next Bold - 36pt
H4 Moving colours Avenir Next Bold - 30pt
H5 Moving colours Avenir Next Demi Bold - 24pt
Lead Text Moving colours Avenir Next Regular - 20pt
Body Bold Moving colours Avenir Next Bold - 16pt
Body Regular Moving Colours Avenir Next Regular - 16pt
Body Small Moving Colours Avenir Next Regular - 14pt
Body X-Small Moving Colours Avenir Next Regular - 11pt
Big button label Moving Colours Avenir Next Regular - 26pt
Regular button label Moving Colours Avenir Next Regular - 16pt
Text-only button Moving Colours Avenir Next Regular - 20pt
Links Moving Colours Avenir Next Regular - #00B1FF
Colors
Grids

Desktop > 1366 x 768

Desktop < 1366 x 768

Mobile

Spacing

Narrow spacing is used between elements of the same section

Wide spacing is used between different sections

Buttons

Big Size

Standard Size

Button Color Options

Buttons dimensions

The length depends on the text label inside plus the margins as indicated by the scheme on the right.

Transparent buttons

In some occasions, a more subtle call-to-action is necessary. Buttons without container are underlined with the brand gradient. the gradient is animated on mouse-over (pink moved to the right, blue appear on the left)

Icons

Icons are always drawn only by stroke lines.

Max dimension (width or height) is 18px, contained in a 24x24px square.


Stroke thickness: 1px


Notification: 6x6px, color #FF00D0

Images

Images that are not full width can have a “gradient shadow” behind.

If the image links to another page (for example on the featured products) the shadow appears when the mouse is over.

If the image does not contain any link, the shadow appears when scrolling down the page.


Shadow offset: 16px right, 16px bottom

Forms

Input stroke: 1px, color #000000

Placeholder text: style Lead Text, color #9B9B9B

Error message

Error messages are displayed under the input field where the error occured. The stroke of the field change color.

Font style Small, color #FF00D0

Confirmation

Confirmation status is represented by the Submit button becoming round and changing color to #00B1FF with a checkmark icon in.



Thanks for checking this out!

Go to hihonor.com

TOP