Colors

Primary

Grayscale

Typography

Aa

Poppins Regular

Aa

Poppins Medium

Aa

Poppins Bold

Heading 1

Font-family:
Poppins
Font weight:
Bold
Font size:
70px/62px/62px/48px/38px
Line height:
70px/62px/62px/48px/38px

Lorem ipsum

Heading 2

Font-family:
Poppins
Font weight:
Bold
Font size:
40px/32px/32px/28px/28px
Line height:
56px/45px/45px/39px/39px

Lorem ipsum dolor sit

Heading 3

Font-family:
Poppins
Font weight:
Bold
Font size:
30px/26px/26px/24px/24px
Line height:
40px/36px/36px/33px/33px

Lorem ipsum dolor sit

Heading 4

Font-family:
Poppins
Font weight:
Bold
Font size:
26px/24px/24px/20px/18px
Line height:
36px/33px/33px/28px/25px

Lorem ipsum dolor sit

Heading 5
Font-family:
Poppins
Font weight:
Bold
Font size:
20px/16px/16px/16px/14px
Line height:
28px/23px/23px23px/19px
Lorem ipsum dolor sit

Subhead

Font-family
Poppins
Font-weight
Medium
Font size:
30px/26px/26px/22px/18px;
Line height:
43px/36px/36px/31px/25px;
Lorem ipsum dolor sit

Header text

Font-family
Poppins
Font-weight
Bold
Font size:
20px/20px/20px/18px/16px;
Line height:
20px/20px/20px/18px/16px;
Lorem ipsum dolor sit

Body intro

Font-family:
Poppins
Font-weight:
medium
Font size:
'20px/20px/20px/18px/18px';
Line height:
'36px/36px/36px/32px/30px';

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Body

Font-family:
Poppins
Font-weight:
medium
Font size:
16px/16px/16px/16px/14px
Line height:
32px/32px/32px/32px/24px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Body small

Font-family:
Poppins
Font-weight:
regular
Font size:
14px/13px/13px/12px/12px
Line height:
22px/21px/21px/19px/19px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Body links

Font / weight:
Poppins
Text decoration
'underline';

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque.

Unordered list

Font / weight:
Poppins
Font size:
16px/16px/16px/16px/14px/14px
Line height:
32px/32px/32px/32px/24px
  • List item
  • List item
  • List item
  • List item

Unordered list anchors

Font / weight:
Poppins
Font size:
16px/16px/16px/16px/14px/14px
Line height:
32px/32px/32px/32px/24px

Ordered list

Font / weight:
Poppins
Font size:
16px/16px/16px/16px/14px/14px
Line height:
32px/32px/32px/32px/24px
  1. List item
  2. List item
  3. List item
  4. List item

Ordered list anchors

Font / weight:
Poppins
Font size:
16px/16px/16px/16px/14px/14px
Line height:
32px/32px/32px/32px/24px

System icons

Buttons

Primary button

Button text

Outline button

Button text

Social button

Forms & input

Forms

Input

Dropdown

Dropdown

Checkboxes

Active

Unactive

Disabled

Active

Unactive

small checkbox

Radio buttons

Active

Unactive

Disabled

Active

Unactive

Accordion

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Buttons

Do you need more advice?

Do you need more advice?