Colors palette

primary colors

secondary colors

Typography

Font family

Aa

Roboto Regular

Aa

Roboto Medium

Aa

Roboto Bold

Aa

Montserrat Semi-bold

Aa

Montserrat Bold

Aa

Merriweather Bold Italic

Heading 1

Font / weight:
'Montserrat Bold';
Font size:
'50px/50px/40px/32px/26px';
Line height:
'55px/55px/50px/40px/32px';
Letter spacing:
'-.25px';

The quick brown fox jumps over the lazy dog

Heading 2

Font / weight:
'Montserrat Bold';
Font size:
'38px/38px/30px/28px/22px';
Line height:
'45px/45px/35px/32px/28px';
Letter spacing:
'-.25px';

The quick brown fox jumps over the lazy dog

Heading 3

Font / weight:
'Montserrat Bold';
Font size:
'25px/25px/20px/20px/20px';
Line height:
'30px/30px/24px/24px/24px';
Letter spacing:
'-.2px';

The quick brown fox jumps over the lazy dog

Heading 4

Font / weight:
'Montserrat SemiBold';
Font size:
'18px/18px/15px/15px/15px';
Line height:
'26px/26px/20px/20px/20px';
Letter spacing:
'-.2px';

The quick brown fox jumps over the lazy dog

Heading 5

Font / weight:
'Montserrat Bold';
Font size:
'16px';
Line height:
'22px';
Letter spacing:
'-.2px';
The quick brown fox jumps over the lazy dog

Heading 6

Font / weight:
'Montserrat SemiBold';
Font size:
'14px/14px/12px/12px/12px';
Line height:
'22px/22px/20px/20px/20px';
The quick brown fox jumps over the lazy dog

Paragraph

Font / weight:
'Roboto Regular';
Font size:
'16px/16px/14px/14px/14px';
Line height:
'28px/28px/24px/24px/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.

Paragraph links

Font / weight:
'Roboto Bold';
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.

Blockquote

Font / weight:
'Merriweather Bold Italic';
Font size:
'22px/22px/18px/16px/16px';
Line height:
'36px/36px/30px/26px/26px';

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa”

Unordered list

Font / weight:
'Roboto Regular';
Font size:
'17px/16px/15px/14px/14px/14px';
Line height:
'30px/28px/27px/24px/24px/24px';
  • List item
  • List item
  • List item
  • List item

Unordered list anchors

Font / weight:
'Roboto Regular';
Font size:
'17px/16px/15px/14px/14px/14px';
Line height:
'30px/28px/27px/24px/24px/24px';

Ordered list

Font / weight:
'Roboto Regular';
Font size:
'17px/16px/15px/14px/14px/14px';
Line height:
'30px/28px/27px/24px/24px/24px';
  1. List item
  2. List item
  3. List item
  4. List item

Ordered list anchors

Font / weight:
'Roboto Regular';
Font size:
'17px/16px/15px/14px/14px/14px';
Line height:
'30px/28px/27px/24px/24px/24px';

Chips

Font / weight:
'Merriweather Bold Italic';
Font size:
'13px/13px/11px/11px/11px/11px';
Line height:
'1';

System icons

Buttons

Primary button (empty & icon)

Button text Button text Button text

Secondary button (empty & icon)

Button text Button text Button text

Outline button (empty & icon)

Button text Button text Button text

Outline secondary button (empty & icon)

Button text Button text Button text

Icon only

Social button

Inputs

Dropdown

Dropdown

Checkboxes

Active

Unactive

Disabled

Active

Unactive

Radio buttons

Active

Unactive

Disabled

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.