Add docs for typography system

aries-site/src/components/content/DesignTokensTable.js

@@ -43,7 +43,7 @@ export const DesignTokensTable = ({ active, maxHeight, toolbar }) => {
   const currentData = data || hookData;
 
   return (
-    <Data data={currentData} pad={{ vertical: 'medium' }}>
+    <Data data={currentData}>
       {toolbar ? (
         <>
           <Toolbar

aries-site/src/data/structures/tokens.js

@@ -50,12 +50,32 @@ export const tokens = [
       'Layouts determine the positioning of components on a page.',
     sections: [],
     relatedContent: [
+      'Typography system',
       'All design tokens',
       'Using design tokens in code',
       'Using design tokens in Figma',
     ],
     tags: [],
   },
+  {
+    name: 'Typography system',
+    type: 'Getting started',
+    description:
+      'Typography is an essential part of establishing hierarchy and structure to a page, working in tandem with color and spacing.',
+    preview: {
+      component: () => <Text size="3xl">Aa</Text>,
+    },
+    seoDescription:
+      'Typography is an essential part of establishing hierarchy and structure to a page, working in tandem with color and spacing.',
+    sections: [],
+    relatedContent: [
+      'Layout and spacing',
+      'Global',
+      'Element',
+      'All design tokens',
+    ],
+    tags: [],
+  },
   {
     name: 'Global',
     type: 'Getting started',

aries-site/src/pages/design-tokens/global.mdx

@@ -23,7 +23,7 @@ The values of semantic [spacing]() and [heading]() design tokens step down in si
 
 ## fontWeight
 
-Font weight design tokens are used to define the weight of text elements. Each [text size]() has a default font weight, but this can be overridden by the `fontWeight` design tokens to add or remove emphasis based on the use case.
+Font weight design tokens are used to define the weight of text elements. Each [text size](/design-tokens/typography-system#text) has a default font weight, but this can be overridden by the `fontWeight` design tokens to add or remove emphasis based on the use case.
 
 Our system uses "bold" sparingly because it can hurt readability at smaller text sizes and instead relies on the "medium" font weight to create visual emphasis.
 

aries-site/src/pages/design-tokens/typography-system.mdx

@@ -0,0 +1,94 @@
+import { Markdown, Text } from 'grommet';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { prism } from 'grommet-theme-hpe';
+import { ContentPane, BestPracticeGroup, Example } from '../../layouts';
+import { DesignTokensTable } from '../../components';
+
+There are two categories of typography design tokens: heading and text. Each are offered in a range of t-shirt sizes. At each t-shirt size, there is a defined font-size, font-weight, and line-height.
+
+The values of each typography value were chosen to ensure readability as well as alignment with the broader [spacing system](/design-tokens/layout-and-spacing#4px-base-unit).
+
+Always use all parts of a typography t-shirt size together; do not mix and match tokens of different t-shirt sizes on a single text element.
+
+## Heading
+
+Heading design tokens should be used on HTML heading elements (h1-h6). Heading tokens are offered in 6 sizes: "xlarge"-"xxsmall".
+
+Generally, an h1 should be styled with the "xlarge" token, an h2 with "large", and so on.
+
+However, the specific use of each token may vary depending on the design needs of the page. For example, it's often desirable for card titles within dashboard cards to have a consistent sizing, regardless of the semantic level of the title. In this case, keep the correct semantic level of the heading element, but apply the desired token to style the text.
+
+<ContentPane>
+  <DesignTokensTable active="semantic.heading" toolbar />
+</ContentPane>
+
+### Heading best practices
+
+Always build a page following proper HTML structure. Use the appropriate heading element for each section of the page.
+
+<BestPracticeGroup>
+  <Example
+    height="none"
+    bestPractice={{
+      type: 'do',
+      message:
+        'Use the correct semantic heading element. Apply a heading token to achieve the desired visual style. Notice "heading-medium" applied to the h2 card title and h3 card title.',
+    }}
+    width="100%"
+  >
+    <SyntaxHighlighter
+      tabIndex="0"
+      style={prism.light}
+      wrapLongLines
+      language="javascript"
+    >
+      {`<h1 class="heading-xlarge">Page title</h1>
+<h2 class="card heading-medium">Card title</h2>
+<h2 class="heading-large">Section title</h2>
+<h3 class="card heading-medium">Another card title</h3>`}
+    </SyntaxHighlighter>
+  </Example>
+  <Example
+    height="none"
+    bestPractice={{
+      type: 'dont',
+      message: `Change the semantic level of a heading to adjust the visual styling. This can lead to accessibility issues and break the semantic structure of the page. Notice the incorrect jump from h1 to h3.`,
+    }}
+  >
+    <SyntaxHighlighter
+      tabIndex="0"
+      style={prism.light}
+      wrapLongLines
+      language="javascript"
+    >
+      {`<h1 class="heading-xlarge">Page title</h1>
+<h3 class="card heading-medium">Card title</h2>
+<h2 class="heading-large">Section title</h2>
+<h3 class="card heading-medium">Another card title</h3>`}
+    </SyntaxHighlighter>
+  </Example>
+</BestPracticeGroup>
+
+## Text
+
+Text design tokens should be used for body text. Text tokens are offered in 10 sizes: "xsmall"-"6xl".
+
+While each text t-shirt sizes comes with a default font weight, the emphasis of text can be adjusted to suit the context by using the [fontWeight](/design-tokens/global#fontweight) design tokens.
+
+<ContentPane>
+  <DesignTokensTable active="semantic.text" toolbar />
+</ContentPane>
+
+### Text best practices
+
+Use the t-shirt size `maxWidth` design token on paragraphs to limit the width of text to ensure readability.
+
+## Responsiveness
+
+The values of heading tokens automatically step down one t-shirt size at the `small` [breakpoint](/design-tokens/global#breakpoint). This ensures content scales appropriately as the screen size decreases.
+
+When utilizing the CSS files, a media query is included in the "dimension.small.css" file to adjust the token values at the `small` breakpoint.
+
+## Accessibility
+
+Typography desgin tokens use `rem` units to scale fonts according to a user's browser settings.