The semantic type set is the primary type set:

size xxl
m: 30px / t: 60px
size xl
m: 21px / t: 42px
size l
m: 17px / t: 24px
size m
m: 14px / t: 20px
size s
m: 12px / t: 14px
size xs
m: 10px / t: 12px

Line height is 150% on all screens.

Also numberic type set are created to provide more flexible font size variants on desktop and mobile. For example, .m-size-16.t-size-18 gives m: 16px / t: 18px



Base class is .btn. There are two classes for styles .btn-primary, .btn-secondary

To provide different color themes, available classes are .btn-white, .btn-orange, .btn-red, .btn-disabled

[Optional] To provide different (padding) sizes, available classes are .btn-l, .btn-m, .btn-s

[Optional] To control the font size in the button, directly applying type classes, like .size-m

Usage example: .btn.btn-primary.btn-l.size-l

Button styles

primary buttons

btn white
btn orange
btn red

secondary buttons

btn white
btn orange
btn red

Button sizes

  • btn-l
    padding: m: 10px 20px / t: 15px 20px;
  • btn-m
    padding: undefined
  • btn-s
    padding: undefined

Button with hover effect

Add .btn-with-animation-v class and add .animation to the icon and text in the button



Input field:

error states: