Style
Colours
Full palette
100
200
300
400
500
600
700
800
900
perido
levigo
main
complementary
grey
danger
warning
success
info
transparent
| transparent |
black
| black |
white
| white |
perido
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
levigo
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
main
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
complementary
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
grey
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
danger
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
warning
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
success
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
info
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Typography
sans (.font-sans)
Sizes
| xs | Lorem ipsum dolar sit amet |
| sm | Lorem ipsum dolar sit amet |
| base | Lorem ipsum dolar sit amet |
| lg | Lorem ipsum dolar sit amet |
| xl | Lorem ipsum dolar sit amet |
| 2xl | Lorem ipsum dolar sit amet |
| 3xl | Lorem ipsum dolar sit amet |
| 4xl | Lorem ipsum dolar sit amet |
| 5xl | Lorem ipsum dolar sit amet |
| 6xl | Lorem ipsum dolar sit amet |
Weights
| A | A | A | A | A | A | A | A | A |
| black | extrabold | bold | semibold | medium | normal | light | thin | hairline |
serif (.font-serif)
Sizes
| xs | Lorem ipsum dolar sit amet |
| sm | Lorem ipsum dolar sit amet |
| base | Lorem ipsum dolar sit amet |
| lg | Lorem ipsum dolar sit amet |
| xl | Lorem ipsum dolar sit amet |
| 2xl | Lorem ipsum dolar sit amet |
| 3xl | Lorem ipsum dolar sit amet |
| 4xl | Lorem ipsum dolar sit amet |
| 5xl | Lorem ipsum dolar sit amet |
| 6xl | Lorem ipsum dolar sit amet |
Weights
| A | A | A | A | A | A | A | A | A |
| black | extrabold | bold | semibold | medium | normal | light | thin | hairline |
mono (.font-mono)
Sizes
| xs | Lorem ipsum dolar sit amet |
| sm | Lorem ipsum dolar sit amet |
| base | Lorem ipsum dolar sit amet |
| lg | Lorem ipsum dolar sit amet |
| xl | Lorem ipsum dolar sit amet |
| 2xl | Lorem ipsum dolar sit amet |
| 3xl | Lorem ipsum dolar sit amet |
| 4xl | Lorem ipsum dolar sit amet |
| 5xl | Lorem ipsum dolar sit amet |
| 6xl | Lorem ipsum dolar sit amet |
Weights
| A | A | A | A | A | A | A | A | A |
| black | extrabold | bold | semibold | medium | normal | light | thin | hairline |
Padding
| 0 (0) | |
| 1 (0.25rem) | |
| 2 (0.5rem) | |
| 3 (0.75rem) | |
| 4 (1rem) | |
| 5 (1.25rem) | |
| 6 (1.5rem) | |
| 8 (2rem) | |
| 10 (2.5rem) | |
| 12 (3rem) | |
| 16 (4rem) | |
| 20 (5rem) | |
| 24 (6rem) | |
| 32 (8rem) | |
| 40 (10rem) | |
| 48 (12rem) | |
| 56 (14rem) | |
| 64 (16rem) | |
| 128 (32rem) | |
| 160 (40rem) | |
| px (1px) |
Opacity
Layout
Breakpoints
| sm | md | lg | xl |
| 640px | 768px | 1024px | 1280px |