Styleguide

Typography

Headlines

H1

H2

H3

H4

Base Text

Text XL

Bold Text XL

Text LG

Bold Text LG

Text MD - Default font size

Bold Text MD

Text SM

Bold Text SM

Text XS

Bold Text XS

Text XXS

Bold Text XXS

Breakpoints

S
>=375px
MD
>=640px
LG
>=1024px
XL
>=1400px

Spacing

XXS (4px)
XS (8px)
SM (12px)
MD (16px)
LG (20px)
XL (24px)
2XL (32px)
3XL (48px)
4XL (64px)
5XL (96px)
6XL (128px)

Colors

Primary Colors

Schleich Red

#ED1B2f

--hh-color-brand-primary

Navigation Elements

Grey

#646464

--hh-color-brand-secondary

Default Texts

Light Grey

#C6C6C6

--hh-color-subdued

Dividers / disabled fields

Off White

#F3F5F5

--hh-color-light

Default Background

Lighter Grey

#FAFAFA

--hh-color-neutral

Dividers / disabled fields

White

#FFFFFF

--hh-color-day

Texts over dark backgrounds and shapes in layouts.

Egg Shell

#FFFAF5

--hh-color-brand-tertiary

Footer and informative backgrounds.

Buttons

Size

Primary

Primary Inverted

Secondary

Secondary Inverted

Size L

Used for important actions, or actions affecting a complete feature E.g.: “Send”, “Add to basket”.

  • Font size: 14px
  • Height: 45px
  • Left-right padding: 32px
  • Border-radius: 30px
Button Button Button Button
Button Button Button Button
Button Button Button Button
Button Button Button Button

Size M

Used for actions affecting parts of a feature or supporting actions. E.g.: “Edit”.

  • Font size: 12px
  • Height: 38px
  • Left-right padding: 24px
  • Border-radius: 30px
Button Button Button Button
Button Button Button Button
Button Button Button Button
Button Button Button Button

Size S

Used for tertiary actions, or secondary when there is a limited space.

  • Font size: 10px
  • Height: 28px
  • Left-right padding: 16px
  • Border-radius: 30px
Button Button Button Button
Button Button Button Button
Button Button Button Button
Button Button Button Button

Others

With Special Color

Primary Secondary
Inverse?
Primary Inverse Secondary Inverse
Button Button

Thinking button / With spinning wheel

Button

Icon Button

Link (tertiary button)

Shop Now
Terms & Policies

Form objects

Text field

Please, include the prefix Please, check the phone number format. Please, check the email format. Please, include the prefix

Text area

Select Menu

Country With Hint Select your country of residence. With Error Please, choose a country. Country Country

Radio Buttons

Checkboxes

Switch

Label Label Label Label Label Label Label Label

Global Components

Some general components

Product card (1)

  • Petit guépard Petit guépard
    Petit guépard
    14747
    $5.99
    $4.79

Core Components

Accordion

It all began the day before Hannah’s 12th birthday. Hannah was in the barn with her friends Sofia, Lisa and Sarah. While practising lassoing, the girls discovered a mysterious chest with the letters ….H ..C… on the lid. It all began the day before Hannah’s 12th birthday. Hannah was in the barn with her friends Sofia, Lisa and Sarah. While practising lassoing, the girls discovered a mysterious chest with the letters ….H ..C… on the lid. It all began the day before Hannah’s 12th birthday. Hannah was in the barn with her friends Sofia, Lisa and Sarah. While practising lassoing, the girls discovered a mysterious chest with the letters ….H ..C… on the lid.