Color

These are the colors that used throughout the H+M Website.

Gray 1

Hex:

#333

RGB:

(51,51,51)

Primarily used for body copy and headlines

HM Blue

Hex:

#0f4b7d

RGB:

(15,75,125)

Used primarily as page backgrounds and heading colors.

Gray 2

Hex:

#4f4f4f

RGB:

(79,79,79)

Used for secondary copy

HM Green

Hex:

#587e1f

RGB:

(88,126,31)

Primary CTA colors
Success messaging

Gray 3

Hex:

#828282

RGB:

(130,130,130)

Accents

Dark Green

Hex:

#456e1f

RGB:

(69,99,24)

Primary CTA colors
Success messaging

Gray 4

Hex:

#bdbdbd

RGB:

(189,189,189)

Accents

Light Green

Hex:

#8bc731

RGB:

(139,199,49)

UI Focused elements
CTA on dark backgrounds

Gray 5

Hex:

#e0e0e0

RGB:

(224,224,224)

Accents

Warning Red

Hex:

#eb5757

RGB:

(235,87,87)

Color for warning labels, validation messaging and destructive patterns

Gray 6

Hex:

#f2f2f2

RGB:

(242,242,242)

Accents

White

Hex:

#f2f2f2

RGB:

(242,242,242)

Primarily used for spacing, body copy and headlines over dark backgrounds.

White

Hex:

#fFFFFF

RGB:

(255,255,255)

Primarily used for spacing, body copy and headlines over dark backgrounds.

Textures

These are subtle design patterns used throughout the H+M website. Some elements have individual guidelines.

Plus Pattern

The Plus Pattern can be used as a standalone aesthetic throughout layouts, connect elements together, or establish new content sections.

To help maintain a cohesive visual identity, avoid using it as a primary background pattern.

Use this example

Plus Pattern used as a section identifier

Avoid this example

Plus Pattern used as a background

Typography

Typography plays a pivotal role in the H+M style. Using these typefaces correctly will create easily identifiable messaging that is consistent with the new visual direction.

Primary Typeface

The font we use for paragraphs, subtitles and other long forms of copy. IBM Plex Sans, an open source typeface created by IBM, offers a refined contrast to our bold headline typeface that can be read for extended amounts of time with less eye strain.

Example

Secondary Typeface

The font we use for eye-catching headlines. Mfred is a condensed caps-only headline face in one weight. It’s compact & rigid structure portrays confidence and evokes action.

Example

Buttons + Links

Buttons have five states that define their appearance: default, highlighted, focused, selected, and disabled.

Primary Button

The main call-to-action or cta is the main objective the page is trying to complete. There is only one objective per page so there should only be one Primary Button per page.

Secondary Button

The main call-to-action or cta is the main objective the page is trying to complete. There is only one objective per page so there should only be one Primary Button per page.

Link

The main call-to-action or cta is the main objective the page is trying to complete. There is only one objective per page so there should only be one Primary Button per page.