Portfolio Design System
Color Palettes
Main Colors
Secondary Colors
Neutral Colors
Semantic Success
Semantic Warning
Semantic Error
Typography
Font Scale
XS - The quick brown fox jumps over the lazy dog.
SM - The quick brown fox jumps over the lazy dog.
Base - The quick brown fox jumps over the lazy dog.
LG - The quick brown fox jumps over the lazy dog.
XL - The quick brown fox jumps over the lazy dog.
2XL - The quick brown fox jumps over the lazy dog.
3XL - The quick brown fox jumps over the lazy dog.
4XL - The quick brown fox jumps over the lazy dog.
5XL - The quick brown fox jumps over the lazy dog.
6XL - The quick brown fox jumps over the lazy dog.
7XL - The quick brown fox jumps over the lazy dog.
Font Weights
Extra Light - The quick brown fox jumps over the lazy dog.
Extra Light Italic - The quick brown fox jumps over the lazy dog.
Light - The quick brown fox jumps over the lazy dog.
Light Italic - The quick brown fox jumps over the lazy dog.
Normal - The quick brown fox jumps over the lazy dog.
Normal Italic - The quick brown fox jumps over the lazy dog.
Medium - The quick brown fox jumps over the lazy dog.
Medium Italic - The quick brown fox jumps over the lazy dog.
Semi Bold - The quick brown fox jumps over the lazy dog.
Semi Bold Italic - The quick brown fox jumps over the lazy dog.
Bold - The quick brown fox jumps over the lazy dog.
Bold Italic - The quick brown fox jumps over the lazy dog.
Extra Bold - The quick brown fox jumps over the lazy dog.
Extra Bold Italic - The quick brown fox jumps over the lazy dog.
Line Heights
Tight
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Snug
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Normal
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Relaxed
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Loose
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Letter Spacing
Tight
The quick brown fox jumps over the lazy dog.
Normal
The quick brown fox jumps over the lazy dog.
Wide
The quick brown fox jumps over the lazy dog.
Wider
The quick brown fox jumps over the lazy dog.
Widest
The quick brown fox jumps over the lazy dog.
Spacing and Borders
Spacing Scale
px:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
Border Widths
0px
2px
4px
8px
Gradients
Main
Secondary
Components
Buttons
icon:
sm:
md:
lg:
Cards
Card Title
This is a description for the card component. It provides additional context about the card's content.
Card Title
This is a description for the card component. It provides additional context about the card's content.
Card Title
This is a description for the card component. It provides additional context about the card's content.