Typography

The semantic type set is the primary type set:

size xxl	`.size-xxl`	m: 30px / t: 60px
size xl	`.size-xl`	m: 21px / t: 42px
size l	`.size-l`	m: 17px / t: 24px
size m	`.size-m`	m: 14px / t: 20px
size s	`.size-s`	m: 12px / t: 14px
size xs	`.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

Colors

Buttons

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

btn white

btn orange

btn red

secondary buttons

btn

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

Form

Input field:

error states:

用户登录

注册申请者账号