Implement Design Tokens

[mantuok]

This is blocked till we get the design

Context

Design tokens like colors, typography, and spacing need to be defined globally and integrated into ChakraUI's theming system. This ensures consistency across all pages and components.

Definition of Done

1. Colors, typography, and spacing from the design system are defined as ChakraUI design tokens.
2. Tokens are applied globally and available across all components.
3. Pertinent design paradigms are added to the project documentation.

Engineering Details

In theme.ts define tokens for color palettes, fonts, sizes, and other spacing values using extendTheme function.

[mackcooper1408]

this looks great, we're blocked by design, but once we get the green light there we can mark this as ready to implement.

Let's also add to the definition of done that we should add pertinent design paradigms (basically just how a new developer is meant to utilize the design system) to the "docs" (currently we don't have a centralized "docs"... but I plan to put up an issue to setup some kind of wiki... so for now, as long as this is documented somewhere, we'll be good)