Theme

Chakra UI is built on top of

. The theme is a traditional JSON object, here are my theme defaults.

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 -

. Its a fantastic modern font made by Figma.

For code, I'm using the

, a google font.

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

Editable Example

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

Editable Example

Space

I based my scale off of

which uses geometric progression. They have a 12px outlier, however I didn't feel it was needed.