Design system
-
Font
- Family: Muli
- Size:
12px - Size:
14px - Size:
16px - Size:
18px - Size:
22px - Light: 300
- Regular: 400
- Medium: 500
- Bold: 700
- Weight: Regular (400)
- Line height:
1.5em - Letter spacing:
0.00938em
-
Titles
-
Title
- Size:
22px - Weight: bold
- Color: #36344F
- Size:
-
Subtitle
- Size:
18 - Weight: bold
- Color: #828191
- Size:
-
-
Buttons
- Weight: Bold (500)
- Size:
14px - Line height:
1.75 - Letter Spacing:
0.02857em - Text Transform: Uppercase
-
Primary
-
#E9E4FC -
#9988CF -
#643FEA -
#4424A6
-
-
Secondary
-
#D3D3D9 -
#ADACB7 -
#828191 -
#5D5C71 -
#36344F
-
-
complementary
-
#FEEDED -
#F75C63 -
#DAF6EF -
#2DCCA7
-
-
Booleans
- Error:
#F75C63 - Error Text:
#ffffff - Warning:
#ff9800 - Warning Text:
#111111 - Success:
#2DCCA7 - Success Text:
#111111
- Error:
-
Backgrounds
- Default:
#fafafa
- Default:
Space Unit: 4px
Border Radius: 4px
The margins and paddings of the components will be represented with the space unit.
Example:
1 unit: 4px
2 unit: 8px
3 units: 16px
4 units: 24px
Feather Icons are a good option.
You can watch an example of the icons here
- Size:
1.5em - Stroke width:
2px
Animate.css is a good option of reference we could use.
- xs:
0px - sm:
576px - md:
768px - lg:
992px - xl:
1200px