Breakpoints

Naam Active from Container max width PaddingX Gutter
XS (mobile portrait) 0px 100% 20px 16px
SM (mobile landscape) 568px 100% 20px 16px
MD (tablet portrait) 768px 100% 40px 16px
LG (tablet landscape) 1024px 100% 40px 16px
XL (desktop) 1330px 1600px 40px 32px

Colors

Primary colors

Deep Black #1c1c1c
Soft Black #323232
Orange Peel #f28c00
White #ffffff

Secondary colors

Dusty Grey #989898
Cool Grey #bec7cb
Metal Grey #e3e7e9
Silver Grey #f1f3f4

Validation colors

Negative Red #ed5153
Positive Green #01c383

Fonts

Aa
Proxima Nova Regular
Aa
Proxima Nova Semi-Bold
Aa
Proxima Soft Bold

Typography

Heading 1
  • font-family: Proxima Soft;
  • font-weight: Bold;

Lorem ipsum

Heading 2
  • font-family: Proxima Soft;
  • font-weight: Bold;

Lorem ipsum

Heading 3
  • font-family: Proxima Soft;
  • font-weight: Bold;

Lorem ipsum dolor sit amet, consectetur adipiscing

Heading 4
  • font-family: Proxima Soft;
  • font-weight: Bold;

Lorem ipsum dolor sit amet, consectetur adipiscing

Heading 5
  • font-family: Proxima Soft;
  • font-weight: Bold;
Lorem ipsum dolor sit amet, consectetur adipiscing
Heading 6
  • font-family: Proxima Soft;
  • font-weight: Bold;
Lorem ipsum dolor sit amet, consectetur adipiscing
Lorem ipsum dolor sit amet, consectetur adipiscing
Paragraph
  • font-family: Proxima Nova;
  • font-weight: Regular;

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.

Intro
  • font-family: Proxima Nova;
  • font-weight: Regular;

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.

Small text
  • font-family: Proxima Nova;
  • font-weight: Regular;
Lorem ipsum dolor sit amet, consectetur adipiscing
Unordered list
  • font-family: Proxima Nova;
  • font-weight: Regular;
  • List item
  • List item
  • List item
Ordered list
  • font-family: Proxima Nova;
  • font-weight: Regular;
  1. List item
  2. List item
  3. List item
Checklist
  • font-family: Proxima Nova;
  • font-weight: Regular;
  • List item
  • List item
  • List item

Icons

Badges

Default badge
Colored badge

Buttons

Primary button
Secondary button
Light button
Icon button
Icon button (light)
Icon button (dark)

Forms

Inputs
And this is why
Inputs (light)
And this is why
Textareas
Textareas (light)
Input group
Input group (light)
Checkboxes
Radio Buttons
Selects
Filters
Checkbox filter