diff --git a/www/src/components/TableCells.tsx b/www/src/components/TableCells.tsx
new file mode 100644
index 0000000000..2dd00c84a2
--- /dev/null
+++ b/www/src/components/TableCells.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import MeasuredItem from './MeasuredItem';
+import measuredTypeProps from './typography-page/measuredTypeProps';
+
+export type CodeCellType = {
+  value: string | number | undefined,
+};
+
+export type DataTableRowType = {
+  row: {
+    original: {
+      name?: string,
+      size?: string,
+      className?: string,
+      text?: string,
+    }
+  },
+};
+
+export function ClassNameCell({ value }: CodeCellType) {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <code className="fs-16">
+      .{value}
+    </code>
+  );
+}
+
+export function TextCell({ value }: CodeCellType) {
+  return (
+    <p className="m-0 fs-16">
+      {value}
+    </p>
+  );
+}
+
+export function CodeCell({ value }: CodeCellType) {
+  return (
+    <code className="fs-16">
+      {value}
+    </code>
+  );
+}
+
+export function DesktopMeasuredCell({ row } : DataTableRowType) {
+  return (
+    <MeasuredItem {...measuredTypeProps}>
+      <p className={`m-0 ${row.original.className}`}>
+        {row.original.text}
+      </p>
+    </MeasuredItem>
+  );
+}
+
+export function MobileMeasuredCell({ row } : DataTableRowType) {
+  return (
+    <div className="mobile-type">
+      <MeasuredItem {...measuredTypeProps}>
+        <p className={`m-0 ${row.original.className}`}>
+          {row.original.text}
+        </p>
+      </MeasuredItem>
+    </div>
+  );
+}
+
+export function StyleCell({ row } : DataTableRowType) {
+  return (
+    <p className={`fs-16 ${row.original.className}`}>
+      {row.original.text}
+    </p>
+  );
+}
diff --git a/www/src/components/typography-page/Alignment.tsx b/www/src/components/typography-page/Alignment.tsx
new file mode 100644
index 0000000000..bc70f9698d
--- /dev/null
+++ b/www/src/components/typography-page/Alignment.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+import { ClassNameCell, StyleCell } from '../TableCells';
+
+const alignmentClassesAndDescriptions = [
+  { className: 'text-left', text: 'left text.' },
+  { className: 'text-right', text: 'right text.' },
+  { className: 'text-center', text: 'center text.' },
+  {
+    className: 'text-justify',
+    text: 'The text-justify class specifies the justification method of text. '
+        + 'This text-justify class spreads the words into the complete line with equal spaces.',
+  },
+  {
+    className: 'text-wrap',
+    text: 'Use text-wrap to cause text to wrap normally within an element. Newlines and spaces will be collapsed.',
+  },
+  {
+    className: 'text-nowrap',
+    text: 'Use text-nowrap to prevent text from wrapping within an element. Newlines and spaces will be collapsed. '
+        + 'You can prevent line breaks and text wrapping for specific elements',
+  },
+];
+
+export default function Alignment() {
+  return (
+    <>
+      <h2 className="mb-4">Alignment</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={6}
+          data={alignmentClassesAndDescriptions}
+          columns={[
+            {
+              Header: 'Style',
+              Cell: StyleCell,
+            },
+            {
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}
diff --git a/www/src/components/typography-page/Body.tsx b/www/src/components/typography-page/Body.tsx
new file mode 100644
index 0000000000..89e33d113b
--- /dev/null
+++ b/www/src/components/typography-page/Body.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import MeasuredItem from '../MeasuredItem';
+import measuredTypeProps from './measuredTypeProps';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+
+import { DesktopMeasuredCell, ClassNameCell } from '../TableCells';
+
+const bodyClassesAndDescriptions = [
+  { className: 'lead', text: 'Large Body' },
+  { className: '', text: 'Body' },
+  { className: 'small', text: 'Small Body' },
+  { className: 'x-small', text: 'Extra Small Body' },
+  { className: 'micro', text: 'Micro Body' },
+];
+
+export default function Body() {
+  return (
+    <>
+      <h2 className="mb-2">Body</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={5}
+          data={bodyClassesAndDescriptions}
+          columns={[
+            {
+              Header: 'Desktop & Mobile',
+              Cell: DesktopMeasuredCell,
+            },
+            {
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}
diff --git a/www/src/components/typography-page/DecorationAndEmphasis.tsx b/www/src/components/typography-page/DecorationAndEmphasis.tsx
new file mode 100644
index 0000000000..b1bea15ef2
--- /dev/null
+++ b/www/src/components/typography-page/DecorationAndEmphasis.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+import { ClassNameCell, StyleCell } from '../TableCells';
+
+const decorationAndEmphasisClassesAndDescriptions = [
+  { className: 'text-lowercase', text: 'Lowercase text.' },
+  { className: 'text-uppercase', text: 'uppercase text.' },
+  { className: 'text-capitalize', text: 'capitalize text.' },
+  { className: 'text-decoration-none', text: 'No decorations.' },
+  { className: 'font-italic', text: 'Italic text.' },
+  { className: 'font-weight-bold', text: 'Bold text.' },
+  { className: 'font-weight-normal', text: 'Regular text.' },
+];
+
+export default function DecorationAndEmphasis() {
+  return (
+    <>
+      <h2 className="mb-2">Decoration and Emphasis</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={7}
+          data={decorationAndEmphasisClassesAndDescriptions}
+          columns={[
+            {
+              Header: 'Style',
+              Cell: StyleCell,
+            },
+            {
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}
diff --git a/www/src/components/typography-page/Display.tsx b/www/src/components/typography-page/Display.tsx
new file mode 100644
index 0000000000..9fc3a6bfe1
--- /dev/null
+++ b/www/src/components/typography-page/Display.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+
+import { ClassNameCell, DesktopMeasuredCell, MobileMeasuredCell } from '../TableCells';
+
+const displaySizes = [1, 2, 3, 4];
+
+export default function Display() {
+  return (
+    <>
+      <h2 className="mb-2">Display</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={4}
+          data={displaySizes.map((size) => ({ text: `Display ${size}`, className: `display-${size}` }))}
+          columns={[
+            {
+              Header: 'Desktop',
+              Cell: DesktopMeasuredCell,
+            },
+            {
+              Header: 'Mobile',
+              Cell: MobileMeasuredCell,
+            },
+            {
+              id: 'css-class',
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}
diff --git a/www/src/components/typography-page/Headings.tsx b/www/src/components/typography-page/Headings.tsx
new file mode 100644
index 0000000000..4b2e11b94c
--- /dev/null
+++ b/www/src/components/typography-page/Headings.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+
+import { MobileMeasuredCell, ClassNameCell, DesktopMeasuredCell } from '../TableCells';
+
+const headingSizes = [1, 2, 3, 4, 5, 6];
+
+export default function Headings() {
+  return (
+    <>
+      <h2 className="mb-2">Headings</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={6}
+          data={headingSizes.map((size) => ({ text: `Heading ${size}`, className: `h${size}` }))}
+          columns={[
+            {
+              Header: 'Desktop',
+              Cell: DesktopMeasuredCell,
+            },
+            {
+              Header: 'Mobile',
+              Cell: MobileMeasuredCell,
+            },
+            {
+              Header: 'CSS Class',
+              accessor: 'className',
+              Cell: ClassNameCell,
+            },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}
diff --git a/www/src/components/typography-page/Links.tsx b/www/src/components/typography-page/Links.tsx
new file mode 100644
index 0000000000..3adc083b64
--- /dev/null
+++ b/www/src/components/typography-page/Links.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+// @ts-ignore
+import { DataTable } from '~paragon-react';
+import { TextCell } from '../TableCells';
+
+const linksClassesAndDescriptions = [
+  {
+    example: <a href="/#">Standalone Link</a>,
+    description: <span>The default style for <code>a</code> tags that don`t appear in a <code>p</code> tag.</span>,
+  },
+  {
+    example: <span>An <a className="inline-link" href="/foundations/typography/">inline link</a> in a sentence.</span>,
+    description: <span>For links inside a <code>p</code> or with the <code>.inline-link</code> class name.</span>,
+  },
+  {
+    example: <a className="muted-link" href="/#">Muted, Standalone Link</a>,
+    description: <span><code>.muted-link</code> not in a <code>p</code> tag.</span>,
+  },
+  {
+    example: (
+      <span>
+        An <a className="muted-link inline-link" href="/foundations/typography/">muted, inline link</a> in a sentence.
+      </span>
+    ),
+    description: (
+      <span>
+        For <code>.muted-link</code> links inside a <code>p</code> or with the <code>.inline-link</code> class name.
+      </span>
+    ),
+  },
+];
+
+export default function Links() {
+  return (
+    <>
+      <h2 className="mb-2">Links</h2>
+      <div className="mb-4">
+        <DataTable
+          itemCount={4}
+          data={linksClassesAndDescriptions}
+          columns={[
+            { Header: 'Example', accessor: 'example', Cell: TextCell },
+            { Header: 'Description', accessor: 'description', Cell: TextCell },
+          ]}
+        >
+          <DataTable.Table />
+        </DataTable>
+      </div>
+    </>
+  );
+}
diff --git a/www/src/components/typography-page/index.tsx b/www/src/components/typography-page/index.tsx
new file mode 100644
index 0000000000..4ce784ed33
--- /dev/null
+++ b/www/src/components/typography-page/index.tsx
@@ -0,0 +1,6 @@
+export { default as AlignmentTable } from './Alignment';
+export { default as BodyTable } from './Body';
+export { default as DecorationAndEmphasisTable } from './DecorationAndEmphasis';
+export { default as DisplayTable } from './Display';
+export { default as HeadingsTable } from './Headings';
+export { default as LinksTable } from './Links';
diff --git a/www/src/components/typography-page/measuredTypeProps.tsx b/www/src/components/typography-page/measuredTypeProps.tsx
new file mode 100644
index 0000000000..82e5075cd7
--- /dev/null
+++ b/www/src/components/typography-page/measuredTypeProps.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const weightLabels: Record<string, string> = {
+  200: 'Light',
+  300: 'Light',
+  400: 'Regular',
+  500: 'Medium',
+  600: 'Medium',
+  700: 'Bold',
+  800: 'Black',
+};
+
+const measuredTypeProps = {
+  properties: ['font-size', 'line-height', 'font-family', 'font-weight'],
+  renderAfter: (measurements: { [x: string]: string; }) => {
+    const fontFamily = measurements['font-family']
+      ? measurements['font-family'].split(',')[0]
+      : null;
+    const weight = weightLabels[measurements['font-weight']];
+    // only one significant digit if needed
+    const fontSize = Math.round(Number.parseFloat(measurements['font-size']) * 10) / 10;
+    const lineHeight = Math.round(Number.parseFloat(measurements['line-height']) * 10) / 10;
+
+    return (
+      <p className="m-0 text-muted">
+        <span className="mr-2">
+          {fontFamily} {weight}
+        </span>
+        {fontSize}px / {lineHeight}px
+      </p>
+    );
+  },
+};
+
+export default measuredTypeProps;
diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
index dcb15659a8..61c584ba77 100644
--- a/www/src/pages/foundations/colors.tsx
+++ b/www/src/pages/foundations/colors.tsx
@@ -2,11 +2,14 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Container } from '~paragon-react';
+// @ts-ignore
 import Color from 'color';
 import SEO from '../../components/SEO';
 import MeasuredItem from '../../components/MeasuredItem';
 import Layout from '../../components/PageLayout';
+import { Container, DataTable } from '~paragon-react';
+
+import { CodeCell } from '../../components/TableCells';
 
 const utilityClasses = {
   bg: (color: string, level: number) => (level ? `bg-${color}-${level}` : `bg-${color}`),
@@ -34,11 +37,7 @@ const colors: IColors[] = [
 
 const levels = [100, 200, 300, 400, 500, 600, 700, 800, 900];
 
-export type ParseColorTypes = {
-  [key: string]: string | null;
-};
-
-const selectorColors: ParseColorTypes = {};
+const selectorColors: Record<string, string | null> = {};
 
 function parseColors(cssSelectors: { selector: string; declarations: string; }[]) {
   const colorsAreParsed = Object.keys(selectorColors).length !== 0;
@@ -181,29 +180,33 @@ export default function ColorsPage({ data }: IColorsPage) {
           for theming and attempt to eliminate mixins from the public api.
         </p>
 
-        <table className="table pgn-doc__table">
+        <table className="pgn-doc__table mb-2">
           <tbody>
             <tr>
-              <td>
+              <td className="p-3">
                 <strong>Color Name</strong>
                 <br />A theme color
               </td>
-              <td>
+              <td className="p-3 align-baseline">
                 {colors.map(({ themeName }) => (
-                  <code key={themeName} className="mr-2">{themeName}</code>
+                  <code key={themeName} className="mr-2">
+                    {themeName}
+                  </code>
                 ))}
               </td>
             </tr>
             <tr>
-              <td>
+              <td className="p-3 align-baseline">
                 <strong>Variant</strong>
                 <br />
                 <p>A number level or element type</p>
               </td>
-              <td>
+              <td className="p-3">
                 <strong className="d-block">Levels </strong>
-                {levels.map(level => (
-                  <code key={level} className="mr-2">{level}</code>
+                {levels.map((level) => (
+                  <code key={level} className="mr-2">
+                    {level}
+                  </code>
                 ))}
                 <br />
                 <strong className="d-block">Element types </strong>
@@ -221,8 +224,10 @@ export default function ColorsPage({ data }: IColorsPage) {
                   'text',
                   'active',
                   'dark-text',
-                ].map(element => (
-                  <code key={element} className="mr-2">{element}</code>
+                ].map((element) => (
+                  <code key={element} className="mr-2">
+                    {element}
+                  </code>
                 ))}
               </td>
             </tr>
@@ -245,7 +250,7 @@ export default function ColorsPage({ data }: IColorsPage) {
           <strong>theme-color(&ldquo;gray&rdquo;, 300)</strong>;
         </code>
 
-        <h3>CSS Class Utilties</h3>
+        <h3>CSS Class Utilities</h3>
         <p>
           Utility classes for backgrounds, borders, and text colors follow the
           format below:
@@ -253,37 +258,23 @@ export default function ColorsPage({ data }: IColorsPage) {
         <p>
           <code>{'.{use}-{color}-{level}'}</code>
         </p>
-        <table className="table w-50">
-          <thead>
-            <tr>
-              <th>Use</th>
-              <th>Color</th>
-              <th>Level</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td className="align-top pr-4">
-                <code>bg-</code>
-                <br />
-                <code>border-</code>
-                <br />
-                <code>text-</code>
-                <br />
-              </td>
-              <td className="align-top pr-4">
-                {colors.map(({ themeName }) => (
-                  <code key={themeName} className="d-block">{themeName}-</code>
-                ))}
-              </td>
-              <td className="align-top pr-4">
-                {levels.map(level => (
-                  <code key={level} className="d-block">{level}</code>
-                ))}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div className="w-sm-50 mb-4">
+          <DataTable
+            itemCount={3}
+            data={colors.map(({ themeName }, index) => ({
+              use: Object.keys(utilityClasses)[index],
+              color: themeName,
+              level: levels[index],
+            }))}
+            columns={[
+              { Header: 'Use', accessor: 'use', Cell: CodeCell },
+              { Header: 'Color', accessor: 'color', Cell: CodeCell },
+              { Header: 'Level', accessor: 'level', Cell: CodeCell },
+            ]}
+          >
+            <DataTable.Table />
+          </DataTable>
+        </div>
 
         <h3>Background Fills</h3>
         <div className="d-flex flex-wrap">
diff --git a/www/src/pages/foundations/elevation.jsx b/www/src/pages/foundations/elevation.tsx
similarity index 90%
rename from www/src/pages/foundations/elevation.jsx
rename to www/src/pages/foundations/elevation.tsx
index ec138987ee..3d03d56f28 100644
--- a/www/src/pages/foundations/elevation.jsx
+++ b/www/src/pages/foundations/elevation.tsx
@@ -23,7 +23,7 @@ const controlsProps = [
 function BoxShadowNode() {
   const [showToast, setShowToast] = useState(false);
 
-  const isBoxShadowCopied = (level, side) => {
+  const isBoxShadowCopied = (level: number, side: string) => {
     navigator.clipboard.writeText(`@include pgn-box-shadow(${level}, "${side}");`);
     setShowToast(true);
   };
@@ -61,6 +61,25 @@ function BoxShadowNode() {
   );
 }
 
+export interface IBoxShadowToolkit {
+  id: number,
+  updateBoxShadow: (shadow: IBoxShadowModel, id: number) => void,
+  removeBoxShadowLayer: (id: number) => void,
+  disableBoxShadowLayer: (id: number) => void,
+  enableBoxShadowLayer: (id: number) => void,
+  isDisabled: boolean,
+  canDelete: boolean,
+}
+
+export interface IBoxShadowModel {
+  x: number,
+  y: number,
+  blur: number,
+  spread: number,
+  color: string,
+  inset: boolean,
+}
+
 function BoxShadowToolkit({
   id,
   updateBoxShadow,
@@ -69,8 +88,8 @@ function BoxShadowToolkit({
   enableBoxShadowLayer,
   isDisabled,
   canDelete,
-}) {
-  const [boxShadowModel, setBoxShadowModel] = useState({
+}: IBoxShadowToolkit) {
+  const [boxShadowModel, setBoxShadowModel] = useState<IBoxShadowModel>({
     x: 0,
     y: 0,
     blur: 0,
@@ -79,7 +98,7 @@ function BoxShadowToolkit({
     inset: false,
   });
 
-  const updateBoxShadowModel = (property, value) => {
+  const updateBoxShadowModel = (property: string, value: boolean | string) => {
     global.analytics.track('openedx.paragon.docs.elevation.generator.updated', { property, value });
 
     const newBoxShadowModel = {
@@ -107,7 +126,7 @@ function BoxShadowToolkit({
             max="100"
             type={key === 'color' ? 'color' : 'range'}
             defaultValue="0"
-            onChange={(e) => updateBoxShadowModel(key, e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateBoxShadowModel(key, e.target.value)}
             disabled={isDisabled}
           />
         </Form.Group>
@@ -175,7 +194,7 @@ BoxShadowToolkit.propTypes = {
 function BoxShadowGenerator() {
   const [boxShadows, setBoxShadows] = useState([{ id: 1, enabled: true, style: DEFAULT_BOX_SHADOW }]);
 
-  const updateBoxShadow = (shadow, id) => {
+  const updateBoxShadow = (shadow: IBoxShadowModel, id: number) => {
     setBoxShadows(boxShadows.map(item => {
       if (id === item.id) {
         return {
@@ -197,12 +216,12 @@ function BoxShadowGenerator() {
     ]);
   };
 
-  const removeBoxShadowLayer = (toolkitId) => {
+  const removeBoxShadowLayer = (toolkitId: number) => {
     global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.removed');
     setBoxShadows(boxShadows.filter((shadow) => shadow.id !== toolkitId));
   };
 
-  const disableBoxShadowLayer = (toolkitId) => {
+  const disableBoxShadowLayer = (toolkitId: number) => {
     global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.disabled');
     const updatedBoxShadows = boxShadows
       .map((shadow) => {
@@ -214,7 +233,7 @@ function BoxShadowGenerator() {
     setBoxShadows(updatedBoxShadows);
   };
 
-  const enableBoxShadowLayer = (toolkitId) => {
+  const enableBoxShadowLayer = (toolkitId: string | number) => {
     global.analytics.track('openedx.paragon.elevation.shadow-generator.layer.enabled');
     const updatedBoxShadows = boxShadows
       .map((shadow) => {
@@ -305,28 +324,29 @@ export default function ElevationPage() {
 
         <h4>Mixin</h4>
         <code className="d-block mb-4 lead bg-gray-100 p-3">
-          pgn-box-shadow($level, $side)
+          pgn-box-shadow($level, $direction)
         </code>
+
         <div className="pgn-doc__box-shadow--table-wrapper">
-          <table className="pgn-doc__table table">
+          <table className="pgn-doc__table mb-2 w-100">
             <tbody>
               <tr>
-                <td>
+                <td className="p-3">
                   <strong>Direction name</strong>
                 </td>
-                <td>
+                <td className="p-3">
                   {boxShadowSides.map(side => (
                     <code key={side} className="mr-2">{side}</code>
                   ))}
                 </td>
               </tr>
               <tr>
-                <td>
+                <td className="p-3">
                   <strong>Levels</strong>
                   <br />
                   <p>Box-shadows elevation levels</p>
                 </td>
-                <td>
+                <td className="p-3 align-baseline">
                   {boxShadowLevels.map(level => (
                     <code key={level} className="mr-2">{level}</code>
                   ))}
diff --git a/www/src/pages/foundations/typography.tsx b/www/src/pages/foundations/typography.tsx
index 06c6e09966..8e9cb1f2b6 100644
--- a/www/src/pages/foundations/typography.tsx
+++ b/www/src/pages/foundations/typography.tsx
@@ -1,45 +1,15 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
-import { Container } from '~paragon-react';
-import SEO from '../../components/SEO';
-import MeasuredItem from '../../components/MeasuredItem';
 import Layout from '../../components/PageLayout';
-
-export type WeightLabelsTypes = {
-  [key: string]: string,
-};
-
-const weightLabels: WeightLabelsTypes = {
-  200: 'Light',
-  300: 'Light',
-  400: 'Regular',
-  500: 'Medium',
-  600: 'Medium',
-  700: 'Bold',
-  800: 'Black',
-};
-
-const measuredTypeProps = {
-  properties: ['font-size', 'line-height', 'font-family', 'font-weight'],
-  renderAfter: (measurements: { [x: string]: string; }) => {
-    const fontFamily = measurements['font-family']
-      ? measurements['font-family'].split(',')[0]
-      : null;
-    const weight = weightLabels[measurements['font-weight']];
-    // only one significant digit if needed
-    const fontSize = Math.round(Number.parseFloat(measurements['font-size']) * 10) / 10;
-    const lineHeight = Math.round(Number.parseFloat(measurements['line-height']) * 10) / 10;
-
-    return (
-      <p className="m-0 text-muted">
-        <span className="mr-2">
-          {fontFamily} {weight}
-        </span>
-        {fontSize}px / {lineHeight}px
-      </p>
-    );
-  },
-};
+import SEO from '../../components/SEO';
+import { Container } from '~paragon-react';
+import {
+  HeadingsTable,
+  BodyTable,
+  DisplayTable,
+  DecorationAndEmphasisTable,
+  LinksTable,
+  AlignmentTable,
+} from '../../components/typography-page';
 
 export default function TypographyPage() {
   return (
@@ -48,349 +18,13 @@ export default function TypographyPage() {
         {/* eslint-disable-next-line react/jsx-pascal-case */}
         <SEO title="Typography" />
         <h1>Typography</h1>
-        <table className="w-100 table pgn-doc__status-table">
-          <tbody>
-            <tr>
-              <th colSpan={3}>
-                <h2 className="mt-3">Headings</h2>
-              </th>
-            </tr>
-            <tr>
-              <th>Desktop</th>
-              <th>Mobile</th>
-              <th>CSS Class</th>
-            </tr>
-            {[1, 2, 3, 4, 5, 6].map(headingSize => (
-              <tr key={headingSize}>
-                <td>
-                  <MeasuredItem {...measuredTypeProps}>
-                    <p className={`m-0 h${headingSize}`}>
-                      Heading {headingSize}
-                    </p>
-                  </MeasuredItem>
-                </td>
-                <td className="mobile-type">
-                  <MeasuredItem {...measuredTypeProps}>
-                    <p className={`m-0 h${headingSize}`}>
-                      Heading {headingSize}
-                    </p>
-                  </MeasuredItem>
-                </td>
-                <td>
-                  <code>.h{headingSize}</code>
-                </td>
-              </tr>
-            ))}
-            <tr>
-              <td colSpan={2}>
-                <MeasuredItem {...measuredTypeProps}>
-                  <p className="heading-label">Heading Label</p>
-                </MeasuredItem>
-                A heading label is usually paired with and proceeds a Heading.
-              </td>
-              <td>
-                <code>.heading-label</code>
-              </td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <th colSpan={3}>
-                <h2 className="mt-3">Body</h2>
-              </th>
-            </tr>
-            <tr>
-              <th colSpan={2}>Desktop & Mobile</th>
-              <th>CSS Class</th>
-            </tr>
-            <tr>
-              <td colSpan={2}>
-                <MeasuredItem {...measuredTypeProps}>
-                  <p className="lead m-0">Large Body</p>
-                </MeasuredItem>
-              </td>
-              <td>
-                <code>.lead</code>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={3}>
-                <MeasuredItem {...measuredTypeProps}>
-                  <p className="m-0">Body</p>
-                </MeasuredItem>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={2}>
-                <MeasuredItem {...measuredTypeProps}>
-                  <p className="small m-0">Small Body</p>
-                </MeasuredItem>
-              </td>
-              <td>
-                <code>.small</code>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={2}>
-                <MeasuredItem {...measuredTypeProps}>
-                  <p className="x-small m-0">Extra Small Body</p>
-                </MeasuredItem>
-              </td>
-              <td>
-                <code>.x-small</code>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={2}>
-                <MeasuredItem {...measuredTypeProps}>
-                  <p className="micro m-0">Micro Body</p>
-                </MeasuredItem>
-              </td>
-              <td>
-                <code>.micro</code>
-              </td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <th colSpan={3}>
-                <h2 className="mt-3">Display</h2>
-              </th>
-            </tr>
-            <tr>
-              <th>Desktop</th>
-              <th>Mobile</th>
-              <th>CSS Class</th>
-            </tr>
-            {[1, 2, 3, 4].map(displaySize => (
-              <tr key={displaySize}>
-                <td>
-                  <MeasuredItem {...measuredTypeProps}>
-                    <p className={`m-0 display-${displaySize}`}>
-                      Display {displaySize}
-                    </p>
-                  </MeasuredItem>
-                </td>
-                <td className="mobile-type">
-                  <MeasuredItem {...measuredTypeProps}>
-                    <p className={`m-0 display-${displaySize}`}>
-                      Display {displaySize}
-                    </p>
-                  </MeasuredItem>
-                </td>
-                <td>
-                  <code>.display-{displaySize}</code>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-          <tbody>
-            <tr>
-              <th colSpan={3}>
-                <h2 className="mt-3">Links</h2>
-              </th>
-            </tr>
-            <tr>
-              <td colSpan={2}>
-                <a href="#">Standalone Link</a>
-              </td>
-              <td>
-                <small>
-                  The default style for <code>a</code> tags that don&apos;t appear in
-                  a <code>p</code> tag.
-                </small>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={2}>
-                <p>
-                  An{' '}
-                  <a className="inline-link" href="#">
-                    inline link
-                  </a>{' '}
-                  in a sentence.
-                </p>
-              </td>
-              <td>
-                <small>
-                  For links inside a <code>p</code> or with the{' '}
-                  <code>.inline-link</code> class name.
-                </small>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={2}>
-                <a className="muted-link" href="#">
-                  Muted, Standalone Link
-                </a>
-              </td>
-              <td>
-                <small>
-                  <code>.muted-link</code> not in a <code>p</code> tag.
-                </small>
-              </td>
-            </tr>
-            <tr>
-              <td colSpan={2}>
-                <p>
-                  An{' '}
-                  <a className="muted-link inline-link" href="#">
-                    muted, inline link
-                  </a>{' '}
-                  in a sentence.
-                </p>
-              </td>
-              <td>
-                <small>
-                  For <code>.muted-link</code> links inside a <code>p</code> or
-                  with the <code>.inline-link</code> class name.
-                </small>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <table className="w-100 table pgn-doc__status-table">
-          <tbody>
-            <tr>
-              <th colSpan={2}>
-                <h2>Decoration and Emphasis</h2>
-              </th>
-            </tr>
-            <tr>
-              <th>Style</th>
-              <th>CSS Class</th>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-lowercase">Lowercase text.</p>
-              </td>
-              <td>
-                <code>.text-lowercase</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-uppercase">uppercase text.</p>
-              </td>
-              <td>
-                <code>.text-uppercase</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-capitalize">capitalize text.</p>
-              </td>
-              <td>
-                <code>.text-capitalize</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-decoration-none">No decorations.</p>
-              </td>
-              <td>
-                <code>.text-decoration-none</code>
-              </td>
-            </tr>
-
-            <tr>
-              <td>
-                <p className="text-italic">Italic text.</p>
-              </td>
-              <td>
-                <code>.text-italic</code>
-              </td>
-            </tr>
-
-            <tr>
-              <td>
-                <p className="font-weight-bold">Bold text.</p>
-              </td>
-              <td>
-                <code>.font-weight-bold</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="font-weight-normal">Regular text.</p>
-              </td>
-              <td>
-                <code>.font-weight-normal</code>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <table className="w-100 table pgn-doc__status-table">
-          <tbody>
-            <tr>
-              <th colSpan={2}>
-                <h2>Alignment</h2>
-              </th>
-            </tr>
-            <tr>
-              <th>Style</th>
-              <th>CSS Class</th>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-left">left text.</p>
-              </td>
-              <td>
-                <code>.text-left</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-right">right text.</p>
-              </td>
-              <td>
-                <code>.text-right</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-center">center text.</p>
-              </td>
-              <td>
-                <code>.text-center</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-justify">justify text.</p>
-                <p
-                  className="text-justify text-muted small"
-                  style={{ maxWidth: '20rem' }}
-                >
-                  At the edge of forever tendrils of gossamer clouds corpus
-                  callosum culture Vangelis dispassionate extraterrestrial
-                  observer.
-                </p>
-              </td>
-              <td>
-                <code>.text-justify</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-wrap">wrap text.</p>
-              </td>
-              <td>
-                <code>.text-wrap</code>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <p className="text-nowrap">nowrap text.</p>
-              </td>
-              <td>
-                <code>.text-nowrap</code>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <hr />
+        <HeadingsTable />
+        <BodyTable />
+        <DisplayTable />
+        <LinksTable />
+        <DecorationAndEmphasisTable />
+        <AlignmentTable />
       </Container>
     </Layout>
   );
diff --git a/www/src/scss/base.scss b/www/src/scss/base.scss
index b7ee26249c..85e385a2ab 100644
--- a/www/src/scss/base.scss
+++ b/www/src/scss/base.scss
@@ -25,3 +25,7 @@ body {
 .container-fluid {
   max-width: none;
 }
+
+.fs-16 {
+  font-size: 16px;
+}