Colours
Colours Element
Primary color 1
479ec1
Primary color 2
ff6e68
Primary color 3
00b9bf
Text Colours
Title text color
2c2c2c
Body text color
707070
Box text color
9a9a9a
Typography Elements
Body text1: Jost / Font size: 18px / Line height: 30px / Colour: 707070 / Letter spacing: 10px / Font weight: 400
Body text1: Jost / Font size: 16px / Line height: 28px / Colour: 707070 / Letter spacing: 10px / Font weight: 400
Heading 1
(Heading 1: Jost / Font size: 36px / colour: 2c2c2c / Letter spacing: 0px / Font weight: 400 / Line height: 40px /
Distance from title to description: 34px)
Distance from title to description: 34px)
Heading 2
(Heading 2: Jost / Font size: 32px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: 400 / Line height: 36px /
Distance from title to description: 34px)
Distance from title to description: 34px)
Heading 3
(Heading 3: Jost / Font size: 28px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: 400 / Line height: 34px /
Distance from title to description: 34px)
Distance from title to description: 34px)
Heading 4
(Heading 4: Iost / Font size: 24px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: Medium / Line height: 30px /
Distance from title to description: 30px)
Distance from title to description: 30px)
Heading 5
(Heading 5: Jost / Font size: 22px / Colour: 2c2c2c / Letter spacing: 0px / Font weight: 400 / Line height: 30px /
Distance from title to description: 30px)
Distance from title to description: 30px)
Heading 6
(Heading 6: Jost / Font size: 20px / Colour: 2c2c2c / Letter spacing: 10px / Font weight: 400 / Line height: 28px /
Distance from title to description: 30px)
Distance from title to description: 30px)
Filter & Tab Elements
Alerts
Paginations
Tooltip
Table
Employee | Salary | |
---|---|---|
John Doe | $100 | Because that’s all Steve Jobs needed for a salary. |
John Doe | $100 | Because that’s all Steve Jobs needed for a salary. |
John Doe | $100 | Because that’s all Steve Jobs needed for a salary. |
Checkbox & Radio Button
Input & Dropdown
Image Size
Image 1
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-2.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-3.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-4.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-5.jpg?v=1626857105)
Image 2
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-6.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-7.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-8.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-9.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-10.jpg?v=1626857105)
Image 3
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-11.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-12.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-13.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-14.jpg?v=1626857105)
![](https://cdn.shopify.com/s/files/1/0582/4131/9071/files/placeholder-15.jpg?v=1626857105)