diff --git a/packages/core/.storybook/mayflowerTheme.js b/packages/core/.storybook/mayflowerTheme.js
index eaee1b023c..dc8751dcbe 100644
--- a/packages/core/.storybook/mayflowerTheme.js
+++ b/packages/core/.storybook/mayflowerTheme.js
@@ -3,14 +3,14 @@ import logo from './mayflower-logo.png';
 export default create({
   base: 'light',
 
-  // colorPrimary: 'hotpink',
+	colorPrimary: '#388557',
   colorSecondary: '#14558F',
 
   // UI
   appBg: '#F2F2F2',
-  // appContentBg: 'silver',
+	appContentBg: '#FFFFFF',
   appBorderColor: '#DCDCDC',
-  appBorderRadius: 6,
+  appBorderRadius: 0,
 
   // Typography
   fontBase: '"Noto Sans VF", "Noto Sans", "Helvetica", "Arial", sans-serif',
diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
index dfb8c71b78..632ab7f8ab 100644
--- a/packages/core/.storybook/preview.js
+++ b/packages/core/.storybook/preview.js
@@ -1,3 +1,5 @@
+import mayflowerTheme from './mayflowerTheme';
+
 const storyKindOrder = [
   'Get Started',
   'Design Principles',
@@ -16,5 +18,8 @@ export const parameters = {
   previewTabs: {
       canvas: { hidden: true }
   },
-  viewMode: 'docs'
+  viewMode: 'docs',
+	docs: {
+    theme: mayflowerTheme,
+  }
 }
diff --git a/packages/core/stories/about/Usage.stories.mdx b/packages/core/stories/about/Usage.stories.mdx
index c7319eaf04..129a0e72d0 100644
--- a/packages/core/stories/about/Usage.stories.mdx
+++ b/packages/core/stories/about/Usage.stories.mdx
@@ -3,9 +3,11 @@ import { Meta } from '@storybook/addon-docs/blocks';
 import generateTitle from '../util/generateTitle';
 const { STORYBOOK_CDN_PATH, STORYBOOK_CDN, STORYBOOK_PKG } = process.env;
 
+
 <Meta title={generateTitle('Usage')} />
 
 # Install Mayflower
+
 We encourage all Commonwealth web properties to implement the Mayflower Design System for a consistent look and feel. It’s important that constituents know they are on an official state government website, and the visual cues that come from using a cohesive design help convey that legitimacy.
 
 ## Mayflower assets
@@ -21,15 +23,16 @@ To enable and ensure the branding and visual cohesion, Mayflower delivers the fo
        ├── icons
        └── logos
 ```
-### Download the package
-NPM Package
-This package is named @massds/mayflower-assets and is published on NPM. If you use Node.js, you can download the whole package simply by running the following command line:
+### Download the NPM package
+
+The package @massds/mayflower-assets is published on NPM. If you use Node.js, you can install it by running:
 
 ```
 npm install @massds/mayflower-assets
 ```
 
 ### Link to the Mayflower CDN
+
 Mayflower leverages the UNPKG CDN and allows you to load any file in the @massds/mayflower-assets package directly. We highly recommend that you link to the CDN at a specific version. That way, you never have to worry about your website get impacted by any Mayflower breaking updates, and you can upgrade to a new Mayflower version whenever your team is ready.
 
 To load any file from the @massds/mayflower-assets package using a URL like:
@@ -103,13 +106,15 @@ For examples:
 </table>
 
 ## Build with Mayflower
-To import fonts and get started with basic Mayflower layout CSS, you need to import `scss/global.scss` (@use `scss/global.scss`) or link to the compiled `static/fonts/css/global.css` (a minified version is available as global.min.css).
-To implement a Mayflower branding component in your website, navigate to the documentation of the component and copy and paste the html and CSS (and JS) snippets into your code to get started. You can also link to the CDN version of CSS and JS files for the component directly in the head of your HTML.
+
+To import fonts and get started with basic Mayflower layout CSS, import `scss/global.scss` (`@use scss/global.scss`) or link to the compiled `static/fonts/css/global.css` (or the minified version, global.min.css). To use a Mayflower branding component on your site, go to the documentation of the component and copy and paste the html and link to the CDN version of CSS and JS files in the head of your HTML. You can also host the CSS and JS downloaded from mayflower assets package.
 
 ## Configure Your Theme
+
 Mayflower style guide is derived from our research, experience, and expertise, and decision making in creating Mass.gov. We recognize that not all aspects of this branding guide will make sense for every organization, and that some organizations have their own distinct branding. We provide SCSS variables and partials for organizations to configure and compile their own Mayflower stylesheets, based on individual branding needs.
 You can configure all the variables declared in scss/00-base with a !default flag, such as _variables.scss _colors.scss _color-tokens.scss _breakpoints.scss _z-index.scss
 For example to theme the Mayflower header with your own primary color:
+
 ```
 @use "00-base/configure" with (
   $assets-path: "~@massds/mayflower-assets/static”,
@@ -119,6 +124,7 @@ For example to theme the Mayflower header with your own primary color:
 ```
 
 If you use Node.js, you can install Sass using npm by running:
+
 ```$ npm install -g sass```
 
 And compile any sass files by running
diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss
index 4cb7789266..cd73d99fe2 100644
--- a/packages/core/stories/styles/index.scss
+++ b/packages/core/stories/styles/index.scss
@@ -46,6 +46,11 @@
   }
 }
 
+.sb-block.borderless {
+	margin: 3rem 0 !important;
+	padding: 0 !important;
+	border: 0 !important;
+}
 
 // Intro story
 .row.ma__row--three-up {
@@ -85,3 +90,42 @@ ul.sg-colors {
     }
   }
 }
+
+// Typography story
+.font-specimen {
+	font-size: 1.7rem !important;
+	line-height: 1.25 !important;
+	word-break: break-all;
+	font-weight: 300;
+
+	&.large {
+		font-size: 2.5rem !important;
+	}
+	& strong {
+		font-weight: 400;
+	}
+}
+
+p.font-specimen {
+	margin: 0 0 .5rem;
+}
+
+p.lang-label {
+	font-weight: 450;
+	margin: 0;
+
+	&.rtl {
+		direction: rtl;
+	}
+}
+
+p.font-specimen,
+p.lang-label {
+	padding: 0 1rem;
+}
+
+.reset-vspace * {
+	line-height: 1.5;
+	margin-block-start: 0;
+  margin-block-end: 0;
+}
diff --git a/packages/core/stories/tokens/typography/Typography.stories.mdx b/packages/core/stories/tokens/typography/Typography.stories.mdx
index 276519428c..39cf649b6c 100644
--- a/packages/core/stories/tokens/typography/Typography.stories.mdx
+++ b/packages/core/stories/tokens/typography/Typography.stories.mdx
@@ -1,7 +1,6 @@
 import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
 import DecorativeLink from '@massds/mayflower-react/dist/DecorativeLink';
 import Heading from '@massds/mayflower-react/dist/Heading';
-// import RichText from '@massds/mayflower-react/dist/RichText';
 import {
   characters,
   letters,
@@ -23,146 +22,224 @@ import generateTitle from '../../util/generateTitle';
   }}
 />
 
-# Noto Sans
-**The official typeface of Mayflower is Noto Sans.**
-It’s carefully chosen for the following reasons:
-- Accessible and easy to read
-- To enable all Commonwealth agencies to design, produce and deliver online and offline content with consistent typography, without additional costs or legal barriers.
-- To provide comprehensive language coverage for content internationalization.
-- To support the guiding principles of the Mass.gov brand identities: modern, dignified, human, helpful
+# Typography
+
+<div className="sb-block borderless">
+
+## The typeface of Mayflower is **Noto Sans**
+
+<div className="sb-block borderless font-specimen large">{letters.toUpperCase()}<br />{letters}<br />{numbers}</div>
+
+### Noto Sans was chosen because it's...
+
+- **Accessible** and easy-to-read for users with all levels of language proficiency
+- **Free** and Open-source so agencies can produce print and digital design, without barriers
+- **Multilingual** to cover the languages our constituents speak and read
+- **Modern** and consistent with the principles of the Mass.gov brand
 
 Using these fonts for your print and digital assets is a subtle but compelling way to create a voice that is cohesive and unified with the rest of the Commonwealth digital ecosystem, and to ensure the text is accessible and easy to read.
 
+</div>
+
 > Noto Sans is an open source typeface jointly designed and developed by Google and Monotype. It has the most comprehensive language coverage — including more than 800 languages and 100 written scripts. You can directly download the fonts from Google Font, or for web projects, link to the fonts via Mayflower Assets CDN
 
+<div className="sb-block borderless">
+	<h2>Characters<small>*</small></h2>
+  <div className="font-specimen large">{characters}</div>
+	<p>*Latin 1 Block, shown in light weight (350)</p>
+</div>
+
+<div className="sb-block borderless reset-vspace">
+	<h2>Styles and Usage</h2>
+	<p>Noto Sans is used for all headings and body text. If your HTML is [semantic](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) and uses tags that match the hierarchy of the content on a page, the Mayflower defaults will automatically style your headings with an appropriate amount of contrast.</p>
+  { Object.keys(headings).map((key, keyIndex) => (
+      (key === "Body text") ?
+      (<p>{key}</p>) :
+      (<Heading level={headings[key]} key={`element.key.${keyIndex}`} text={key} />)
+    )
+  )}
+</div>
+
+### CSS weight classes
+
+<p>Mayflower uses 5 custom weights of Noto Sans: <br /><strong>Lighter</strong> (250); <strong>Light</strong>, (350); <strong>Normal</strong>, (400); <strong>Bold</strong>, (550); and <strong>Bolder</strong>, (650).</p>
 
-## Characters
-<RichText className="sb-block">
-  <div className="sb-text">{letters.toUpperCase()}</div>
-  <div className="sb-text">{letters}</div>
-  <hr />
-  <div className="sb-text">{numbers}</div>
-  <div className="sb-text">{numbersReverse}</div>
-  <hr />
-  <div className="sb-text">{characters}</div>
-</RichText>
+<p>Use the following classes to style text with those weights:</p>
 
+<div className="sb-block borderless sb-grid">
+  {
+    styles.map((style, styleIndex) => {
+      const className = `ma-fonts-${slugifyStyle(style)}`;
+      return(
+        <React.Fragment key={`style.block.${styleIndex}`}>
+          <span><span>Weight: </span><span className={className}>{style}</span></span>
+					<span>
+							<span>CSS Class: </span>
+		          <span className="markdown-body">
+		            <code>{`.${className}`}</code>
+		          </span>
+					</span>
+        </React.Fragment>
+      );
+    })
+  }
+</div>
 
 ## Languages by Script
+
 The following languages are officially supported by [Mass.gov](https://www.mass.gov). If your project needs to support an addtional language, please [submit a feature request](https://github.com/massgov/mayflower/issues/new/choose) on Github.
 
-#### Arabic
-<RichText htmlTag="p" className="sb-block" lang="Arab"><b>Arabic: </b>مرحبا بكم في ماساتشوستس</RichText>
-<RichText htmlTag="p" className="sb-block" lang="fa"><b>Persian: </b>به ماساچوست خوش آمدید</RichText>
-<RichText htmlTag="p" className="sb-block" lang="ur"><b>Urdu: </b>میساچوسٹس میں آپ کا استقبال ہےد</RichText>
+<!--
+@todo look into font rendering issues below.
+The only fonts that are rendering with Noto are: Latin, Greek, Cyrillic, Khmer, Arabic and  Hebrew.
+-->
 
-#### Armenian
-<RichText htmlTag="p" className="sb-block" lang="hy">Բարի գալուստ Մասաչուսեթս</RichText>
+### Left-to-right
 
-#### Chinese
-<RichText htmlTag="p" className="sb-block" lang="zh-Hans"><b>Simplified: </b>欢迎来到马萨诸塞州</RichText>
-<RichText htmlTag="p" className="sb-block" lang="yue-Hant"><b>Tranditional: </b>歡迎來到馬薩諸塞州</RichText>
+---
 
-#### Cyrillic
-<RichText htmlTag="p" className="sb-block" lang="Cyrl"><b>Russian: </b>Добро пожаловать в Массачусетс</RichText>
-<RichText htmlTag="p" className="sb-block" lang="uk"><b>Ukrainian: </b>Ласкаво просимо до Массачусетсу</RichText>
+#### Armenian script
 
-#### Greek
-<RichText htmlTag="p" className="sb-block" lang="gr">Καλώς ήλθατε στη Μασαχουσέτη</RichText>
+<!-- @todo investigate why Note font is not rendereing here -->
+<p className="lang-label">Armenian: </p>
+<p lang="hy" className="font-specimen">Բարի գալուստ Մասաչուսեթս</p>
 
-#### Gujarati
-<RichText htmlTag="p" className="sb-block" lang="gu">મેસેચ્યુસેટ્સમાં</RichText>
+#### Chinese, simplified script
 
+<!-- @todo investigate why Note font is not rendereing here -->
+<p className="lang-label">Chinese: </p>
+<p lang="zh-Hans" className="font-specimen">欢迎来到马萨诸塞州</p>
 
-#### Hebrew
-<RichText htmlTag="p" className="sb-block" lang="Hebr">ברוך הבא למסצ'וסט.ס</RichText>
+#### Chinese, traditional script
 
-#### Hindi
-<RichText htmlTag="p" className="sb-block" lang="hi">मैसाचुसेट्स में आपका स्वागत है</RichText>
+<!-- @todo investigate why Note font is not rendereing here -->
+<p className="lang-label">Chinese: </p>
+<p lang="yue-Hant" className="font-specimen">歡迎來到馬薩諸塞州</p>
 
-#### Japanese
-<RichText htmlTag="p" className="sb-block" lang="jp">マサチューセッツへようこそ</RichText>
+#### Cyrillic script
 
-#### Khmer
-<RichText htmlTag="p" className="sb-block" lang="km">សូមស្វាគមន៍មកកាន់ម៉ាសាឈូសេត</RichText>
+<p className="lang-label">Russian: </p>
+<p lang="Cyrl" className="font-specimen">Добро пожаловать в Массачусетс</p>
 
-#### Korean
-<RichText htmlTag="p" className="sb-block" lang="ko">매사추세츠에 오신 것을 환영합니다</RichText>
+<p className="lang-label">Ukrainian: </p>
+<p lang="uk" className="font-specimen">Ласкаво просимо до Массачусетсу</p>
 
-#### Lao
-<RichText htmlTag="p" className="sb-block" lang="lo">ຍິນດີຕ້ອນຮັບສູ່ Massachusetts</RichText>
+#### Greek script
 
-#### Latin
-<RichText htmlTag="p" className="sb-block" lang="Latn"><b>English: </b>Welcome to Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="tl"><b>Filipino: </b>Maligayang pagdating sa Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="fr"><b>French: </b>Bienvenue au Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="de"><b>German: </b>Willkommen in Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="hr"><b>Haitian Creole: </b>Byenveni nan Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="tl"><b>Arabic: </b>Maligayang pagdating sa Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="it"><b>Italian: </b>Benvenuto in Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="pl"><b>Polish: </b>Witamy w Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="pt"><b>Portuguese: </b>Bem vindo a Massachusetts</RichText>
-<RichText htmlTag="p" className="sb-block" lang="es"><b>Spanish: </b>Bienvenido a massachusetts</RichText>
+<p className="lang-label">Greek: </p>
+<p lang="gr" className="font-specimen">Καλώς ήλθατε στη Μασαχουσέτη</p>
 
-#### Malayalam
-<RichText htmlTag="p" className="sb-block" lang="ml">മസാച്ചുസെറ്റ്സിലേക്ക് സ്വാഗതം</RichText>
+#### Gujarati script
 
-#### Tamil
-<RichText htmlTag="p" className="sb-block" lang="ta">மாசசூசெட்ஸுக்கு வருக</RichText>
+<!-- @todo investigate why Note font is not rendereing here -->
+<p className="lang-label">Gujarati: </p>
+<p className="font-specimen" lang="gu">મેસેચ્યુસેટ્સમાં</p>
 
-#### Telugu
-<RichText htmlTag="p" className="sb-block" lang="te">మసాచుసెట్స్‌కు స్వాగతం</RichText>
+#### Devanagari script
 
-#### Thai
-<RichText htmlTag="p" className="sb-block" lang="Thai">ยินดีต้อนรับสู่แมสซาชูเซตส์</RichText>
+<!-- @todo investigate why Noto font is not rendereing here -->
+<p className="lang-label">Hindi: </p>
+<p lang="hi" className="font-specimen">मैसाचुसेट्स में आपका स्वागत है</p>
 
-#### Vietnamese
-<RichText htmlTag="p" className="sb-block" lang="vi">Chào mừng đến với Massachusetts</RichText>
+#### Hiragana script
 
-## Styles and Usage
-Noto Sans is being used both as the display fonts and the text fonts.
-When being used as the display fonts for headings, it should be styled at large sizes and in bold, with enough visual contrast to the body text to show the content hierarchy.
+<!-- @todo investigate why Note font is not rendereing here -->
+<p className="lang-label">Japanese: </p>
+<p lang="jp" className="font-specimen">マサチューセッツへようこそ</p>
 
-<div className="sb-block">
-  { Object.keys(headings).map((key, keyIndex) => (
-      (key === "Body text") ?
-      (<p>{key}</p>) :
-      (<Heading level={headings[key]} key={`element.key.${keyIndex}`} text={key} />)
-    )
-  )}
-</div>
+#### Khmer script
 
+<p className="lang-label">Khmer: </p>
+<p lang="km" className="font-specimen">សូមស្វាគមន៍មកកាន់ម៉ាសាឈូសេត</p>
 
+#### Hangul script
 
-Mayflower uses the the following 5 font weight options of Noto Sans:
+<!-- @todo investigate why Note font is not rendereing here -->
+<p className="lang-label">Korean: </p>
+<p lang="ko" className="font-specimen">매사추세츠에 오신 것을 환영합니다</p>
 
-| Font weight | Specs |
-| :--- | :--- |
-| Lighter | 250 |
-| Light | 350 |
-| Normal | 400 |
-| Bold | 550 |
-| Bolder | 650 |
+#### Lao script
 
+<!-- @todo investigate why Note font is not rendereing here -->
+<p className="lang-label">Lao: </p>
+<p lang="lo" className="font-specimen">ຍິນດີຕ້ອນຮັບສູ່ Massachusetts</p>
 
-<div className="sb-block sb-grid">
-  {
-    styles.map((style, styleIndex) => {
-      const className = `ma-fonts-${slugifyStyle(style)}`;
-      return(
-        <React.Fragment key={`style.block.${styleIndex}`}>
-          <span className={className}>{style}</span>
-          <span className="markdown-body">
-            <code>{`.${className}`}</code>
-          </span>
-        </React.Fragment>
-      );
-    })
-  }
-</div>
+#### Latin script
+
+<p className="lang-label">English: </p>
+<p lang="Latn" className="font-specimen">Welcome to Massachusetts</p>
+
+<p className="lang-label">Filipino: </p>
+<p lang="tl" className="font-specimen">Maligayang pagdating sa Massachusetts</p>
+
+<p className="lang-label">French: </p>
+<p lang="fr" className="font-specimen">Bienvenue au Massachusetts</p>
+
+<p className="lang-label">German: </p>
+<p lang="de" className="font-specimen">Willkommen in Massachusetts</p>
+
+<p className="lang-label">Haitian Creole: </p>
+<p lang="hr" className="font-specimen">Byenveni nan Massachusetts</p>
+
+<p className="lang-label">Arabic: </p>
+<p lang="tl" className="font-specimen">Maligayang pagdating sa Massachusetts</p>
+
+<p className="lang-label">Italian: </p>
+<p lang="it" className="font-specimen">Benvenuto in Massachusetts</p>
+
+<p className="lang-label">Polish: </p>
+<p lang="pl" className="font-specimen">Witamy w Massachusetts</p>
+
+<p className="lang-label">Portuguese: </p>
+<p lang="pt" className="font-specimen">Bem vindo a Massachusetts</p>
+
+<p className="lang-label">Spanish: </p>
+<p lang="es" className="font-specimen">Bienvenido a massachusetts</p>
+
+<p className="lang-label">Vietnamese: </p>
+<p lang="vi" className="font-specimen">Chào mừng đến với Massachusetts</p>
+
+#### Malayalam script
+
+<!-- @todo investigate why Note font is not rendereing here -->
+<p className="lang-label">Malayalam: </p>
+<p lang="ml" className="font-specimen">മസാച്ചുസെറ്റ്സിലേക്ക് സ്വാഗതം</p>
+
+#### Tamil script
+
+<p className="lang-label">Tamil: </p>
+<p lang="ta" className="font-specimen">மாசசூசெட்ஸுக்கு வருக</p>
+
+#### Telugu script
+
+<p className="lang-label">Telugu: </p>
+<p lang="te" className="font-specimen">మసాచుసెట్స్‌కు స్వాగతం</p>
+
+#### Thai script
+
+<p className="lang-label">Thai: </p>
+<p lang="Thai" className="font-specimen">ยินดีต้อนรับสู่แมสซาชูเซตส์</p>
+
+### Right-to-Left
+
+---
+
+#### Arabic script
+
+<p className="lang-label rtl">Arabic: </p>
+<p lang="Arab" className="font-specimen">مرحبا بكم في ماساتشوستس</p>
+
+<p className="lang-label rtl">Persian: </p>
+<p lang="fa" className="font-specimen">به ماساچوست خوش آمدید</p>
+
+<p className="lang-label rtl">Urdu: </p>
+<p lang="ur" className="font-specimen">میساچوسٹس میں آپ کا استقبال ہےد</p>
+
+#### Hebrew script
 
+<p className="lang-label rtl">Hebrew: </p>
+<p lang="Hebr" className="font-specimen">ברוך הבא למסצ'וסט.ס</p>
 
 ## License
 
-Noto Sans is an open source font licensed under SIL Open Font License 1.1 (OFL) by the Google team. The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. For more details, refer to the [license](https://github.com/googlefonts/noto-fonts/blob/master/LICENSE).
+Noto Sans is an open source font licensed under SIL Open Font License 1.1 (OFL) by the Google team. The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. For more details, refer to the [license](https://github.com/googlefonts/noto-fonts/blob/master/LICENSE).