Theme
Chakra UI is built on top of
Icons
Colors
I've defined custom colors that are vibrant and energetic. The purple, has been defined as primary for usage clarificaiton.
The 500
value in every colorscale is the default color that should be used. Designers can use their own discrepancy when themeing components to use these colors.
Gray
white
50
100
200
300
400
500
600
700
800
900
Primary
50
100
200
300
400
500
600
700
800
900
Blue
50
100
200
300
400
500
600
700
800
900
Red
50
100
200
300
400
500
600
700
800
900
Green
50
100
200
300
400
500
600
700
800
900
Yellow
50
100
200
300
400
500
600
700
800
900
Fonts, Sizes, Weights
Font Family
For the body text and headings, I've opted for one font -
For code, I'm using the
Sizes
Font sizes are currently named for ease of use. This could be changed in the future as names are hard to add along the way like this.
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Weights
For simlicity's sake, I decided to retain the 100-900 scale for text weights as well.
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Text Placeholder
Space
I based my scale off of