Clarify tokens & utils

[tannerwelsh]

What does this PR do?

• Split out tokens from utils (borders > utils; spacing/shadows > tokens) Using rubric: tokens define variables, utils define classes
• Change root navigation to mimic Sage DS (tokens, colors, typography all top-level pages)
• Make new typography page and classes for headers, body text

Where should the reviewer start?

Screenshots show the new nav & page content

Any background context you want to provide?

In discussion w/ Amy today, we decided that we wanted to better clarify what a token is and what a util is, and create some examples of each.

Basically we borrowed what Sage does and modified it slightly. Also took some inspiration from Bootstrap.

Screenshots (if appropriate)

[ameseee]

I will merge and work off of this to build out a couple more components; but we are open for changes once @kat3kasper is able to review!