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

100

200

300

400

500

600

700

800

900

Primary

100

200

300

400

500

600

700

800

900

Blue

100

200

300

400

500

600

700

800

900

Red

100

200

300

400

500

600

700

800

900

Green

100

200

300

400

500

600

700

800

900

Yellow

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 -

Inter UI

. Its a fantastic modern font made by Figma.

For code, I'm using the

Fira Code

, 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

<Stack>
  <Text fontSize="xs">Text Placeholder</Text>
  <Text fontSize="sm">Text Placeholder</Text>
  <Text fontSize="md">Text Placeholder</Text>
  <Text fontSize="lg">Text Placeholder</Text>
  <Text fontSize="xl">Text Placeholder</Text>
  <Text fontSize="2xl">Text Placeholder</Text>
  <Text fontSize="3xl">Text Placeholder</Text>
  <Text fontSize="4xl">Text Placeholder</Text>
  <Text fontSize="5xl">Text Placeholder</Text>
</Stack>

<Stack>
  <Text fontSize="xs">Text Placeholder</Text>
  <Text fontSize="sm">Text Placeholder</Text>
  <Text fontSize="md">Text Placeholder</Text>
  <Text fontSize="lg">Text Placeholder</Text>
  <Text fontSize="xl">Text Placeholder</Text>
  <Text fontSize="2xl">Text Placeholder</Text>
  <Text fontSize="3xl">Text Placeholder</Text>
  <Text fontSize="4xl">Text Placeholder</Text>
  <Text fontSize="5xl">Text Placeholder</Text>
</Stack>

Editable Example

Weights

For simlicity's sake, I decided to retain the 100-900 scale for text weights as well.