Desing System

Colors

brand-1

brand-2

light-1

light-2

light-3

dark-1

dark-2

dark-3

Header XXL

4.5 REM Desktop
3 REM Mobile
1 EM Line-height
0 – .025 EM Lette-spacing

Header XL

3.25 REM Desktop
2.652 REM Mobile
1 EM Line-height
0 – .025 EM Lette-spacing

Header L

2.25 REM Desktop
2.2 REM Mobile
1 – 1.1 EM Line-height
0 – .025 EM Lette-spacing

Header M

1.5 REM Desktop
1.5 REM Mobile
1.1 – 1.2 EM Line-height
0 – .025 EM Lette-spacing

Header S

1.25 REM Desktop
1.25 REM Mobile
1.2 EM Line-height
0 – .025 EM Lette-spacing

Header Sub

0.75rem REM Desktop
0.75rem Mobile
1.2 EM Line-height
0 – .025 EM Lette-spacing

Text XL

1.5 REM Desktop
1.25 – 1.5 REM Mobile
1.25 – 1.5 EM Line-height
0 – .025 EM Lette-spacing

Text L

1.25 REM Desktop
1.25 – 1.5 REM Mobile
1.5 EM Line-height
0 – .025 EM Lette-spacing

Text M

1 – 1.125 REM Desktop
1 – 1.125 REM Mobile
1.75 EM Line-height
0 – .025 EM Lette-spacing

Text S

0.875 – 0.938 REM Desktop
0.875 – 0.938 REM Mobile
1.5 EM Line-height
0 – .025 EM Lette-spacing

Text XS

0.75 – 0.813 REM Desktop
0.75 – 0.813 REM Mobile
1.5 EM Line-height
.025 – .05 EM Letter-spacing

Button L

1.125 REM Desktop
1.125 REM Mobile
1.5 EM Line-height
0 – .025 EM Letter-spacing

Button M

1 REM Desktop
1 REM Mobile
1.5 EM Line-height
0 – .025 EM Letter-spacing

Button S

0.875 REM Desktop
0.875 REM Mobile
1.5 EM Line-height
0 – .025 EM Letter-spacing

Button XS

0.75 REM Desktop
0.75 REM Mobile
1.5 EM Line-height
.025 – .05 EM Letter-spacing

dark-1

Elements

Buttons

Icons

Subtitel

Cards

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.