Brand Guidelines

Colors

main-blue

Spacings

space

8px

class margin

sp-8-margin

class padding

sp-8-padding

class margin top bottom

sp-8-margin-tb

class padding top bottom

sp-8-padding-tb

space

16px

class margin

sp-16-margin

class padding

sp-16-padding

class margin top bottom

sp-16-margin-tb

class padding top bottom

sp-16-padding-tb

space

32px

class margin

sp-32-margin

class padding

sp-32-padding

class margin top bottom

sp-32-margin-tb

class padding top bottom

sp-32-padding-tb

space

64px

class margin

sp-64-margin

class padding

sp-64-padding

class margin top bottom

sp-64-margin-tb

class padding top bottom

sp-64-padding-tb

space

128px

class margin

sp-128-margin

class padding

sp-128-padding

class margin top bottom

sp-128-margin-tb

class padding top bottom

sp-128-padding-tb

space

256px

class margin

sp-256-margin

class padding

sp-256-padding

class margin top bottom

sp-256-margin-tb

class padding top bottom

sp-256-padding-tb

Spacing Margin

space

8px

class margin

sp-8-margin

class margin top bottom

sp-8-margin-tb

space

16px

class margin

sp-16-margin

class margin top bottom

sp-16-margin-tb

space

32px

class margin

sp-32-margin

class margin top bottom

sp-32-margin-tb

space

64px

class margin

sp-64-margin

class margin top bottom

sp-64-margin-tb

space

128px

class margin

sp-128-margin

class margin top bottom

sp-128-margin-tb

space

256px

class margin

sp-256-margin

class margin top bottom

sp-256-margin-tb

Spacing Paddings

space

8px

class padding

sp-8-padding

class padding top bottom

sp-8-padding-tb

space

16px

class padding

sp-16-padding

class padding top bottom

sp-16-padding-tb

space

32px

class padding

sp-32-padding

class padding top bottom

sp-32-padding-tb

space

64px

class padding

sp-64-padding

class padding top bottom

sp-64-padding-tb

space

128px

class padding

sp-128-padding

class padding top bottom

sp-128-padding-tb

space

256px

class padding

sp-256-padding

class padding top bottom

sp-256-padding-tb

Typography

Headings Noto Sans

Text Roboto

Dark Fonts

H1- 50 px, weight 600

H2 - 40 px, weight 600

H3 - 32 px, weight 600

H4 - 24 px, weight 600

H5 - 20 px, weight 600

H6 - 18 px, weight 600

Text font - Roboto 16px - weight: 400

White Fonts

H1- 50 px, weight 600

H2 - 40 px, weight 600

H3 - 32 px, weight 600

H4 - 24 px, weight 600

H5 - 20 px, weight 600

H6 - 18 px, weight 600

Text font - Roboto 16px - weight: 400

Box Shadow and Border Radius

.boxshadow

.roundedcorners