Colors

#000000

#ffffff

#DBCFB5

#333333

#9F9F9F

#004FFF

#3875ff

#047C52

Typography

Headline

The font for headlines is ROBOTO Condensed.

Size (Px)

Line height

Sample

80px

1.2em

H1 Heading

60px

1.2em

H2 Heading

48px

1.2em

H3 Heading

40px

1.2em

H4 Heading

32px

1.2em

H5 Heading

26px

1.2em

H6 Heading

Body Copy

The font for body copy is ROBOTO.

Size (Px)

Line height

Sample

28px

1.3em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque dolor vel lectus lobortis vehicula. Duis rutrum sed dui a efficitur. Nunc lacinia ipsum a mi aliquam vulputate.

24px

1.3em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque dolor vel lectus lobortis vehicula. Duis rutrum sed dui a efficitur. Nunc lacinia ipsum a mi aliquam vulputate.

20px

1.3em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque dolor vel lectus lobortis vehicula. Duis rutrum sed dui a efficitur. Nunc lacinia ipsum a mi aliquam vulputate.

16px

1.3em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque dolor vel lectus lobortis vehicula. Duis rutrum sed dui a efficitur. Nunc lacinia ipsum a mi aliquam vulputate.

Buttons

Button Style

The font for BUTTONS is ROBOTO.

Size (Px)

Line height

Sample

24px

1.3em

24px

1.3em

20px

1.3em

20px

1.3em

20px

1.3em

20px

1.3em

All links in text that are not a button = green (also within the shop)
shop buttons = blue (shakib blue) (all buttons within woocomemece)
other button = yellowish/white lines and text in same color

LINKS in the texts

Size (Px)

Line height

Sample

28px

1.3em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque dolor vel lectus lobortis vehicula. Duis rutrum sed dui a efficitur. Nunc lacinia ipsum a mi aliquam vulputate.

24px

1.3em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque dolor vel lectus lobortis vehicula. Duis rutrum sed dui a efficitur. Nunc lacinia ipsum a mi aliquam vulputate.

20px

1.3em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque dolor vel lectus lobortis vehicula. Duis rutrum sed dui a efficitur. Nunc lacinia ipsum a mi aliquam vulputate.

16px

1.3em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque dolor vel lectus lobortis vehicula. Duis rutrum sed dui a efficitur. Nunc lacinia ipsum a mi aliquam vulputate.

Spacing system

Margins & Paddings

Size (Px)

Sample

Where to use

20px

Between the Heading and the Paragraph

40px

Between the Paragraph and the Button (Top of the buttonbuttons)

50px

Between the two columns (Vertical Space)

110px

Between the Sections (Smaller Devices)

200px

Between the Sections (DASKTOP)

Scroll to Top