diff --git a/README.md b/README.md
index 57b3ed065..f14a7fc31 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 # [Decanter](https://github.com/SU-SWS/decanter)
-##### Version: 7.0.0-dev
+##### Version: 7
 
 Changelog: [CHANGELOG.md](CHANGELOG.md)
 
@@ -19,8 +19,11 @@ For Decanter v7, instead of using SASS/SCSS with the BEM naming convention, we u
 We have removed all assets from the repo in Decanter v7. Instead, we are using remote third party resources for our fonts and icons.
 
 ### Fonts
-- For Source Sans Pro, Source Serif Pro, Roboto Slab, Roboto Mono - we include them using the `@import` method from [Google Fonts](https://fonts.google.com/).
-- For the Stanford ligature font that we use for the logo, we link them from the [University Communications media CDN](https://www-media.stanford.edu/assets/fonts/stanford.woff).
+- We do not include any font assets with Decanter v7. If you want to use the Decanter fonts in your own projects, it is recommended that you use the font loading method that is optimized for your framework and only import the fonts that you need.
+- We provided two font css files that you can import into your own project so you get the latest update from us. `font.css` includes all the fonts that are referenced in the Decanter design system (sans-serif, serif, slab, monospace, Stanford ligature font for the logo). `font-basic.css` includes only the essential sans-serif, serif and Stanford ligature fonts.
+- For Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono - we include them using the `@import` method from [Google Fonts](https://fonts.google.com/).
+- The Stanford ligature font that we use for the logo is linked from the [University Communications media CDN](https://www-media.stanford.edu/assets/fonts/stanford.woff).
+
 
 ### Icons
 - We have removed FontAwesome (dependency and asset) completely from Decanter v7. For those who would like to continue using FontAwesome, please feel free to do so and include them using methods that are suitable for your own projects.
diff --git a/fonts-basic.css b/fonts-basic.css
new file mode 100644
index 000000000..99d93c0f7
--- /dev/null
+++ b/fonts-basic.css
@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+/** Source Sans 3, Source Serif 4 from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
+@font-face {
+  font-family: "Stanford";
+  src: url("https://www-media.stanford.edu/assets/fonts/stanford.woff") format("woff"), url("https://www-media.stanford.edu/assets/fonts/stanford.ttf") format("truetype");
+  font-weight: 300;
+  font-display: swap;
+}
diff --git a/fonts.css b/fonts.css
index ea3954146..6f3e46ffa 100644
--- a/fonts.css
+++ b/fonts.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-/** Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono (regular only) */
+/** Source Sans 3, Source Serif 4, Roboto Slab, Roboto Mono (regular only) from Google Font */
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:wght@300;400;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
 @font-face {
   font-family: "Stanford";
diff --git a/src/plugins/components/form/buttons.js b/src/plugins/components/form/buttons.js
index 42316287f..b31f8a5d1 100644
--- a/src/plugins/components/form/buttons.js
+++ b/src/plugins/components/form/buttons.js
@@ -10,7 +10,7 @@ module.exports = function () {
         cursor: 'pointer',
         display: 'inline-block',
         border: 'none',
-        fontWeight: config('theme.fontWeight.regular'),
+        fontWeight: config('theme.fontWeight.normal'),
         lineHeight: '1',
         textAlign: 'center',
         textDecoration: 'none',
diff --git a/src/plugins/components/form/form-elements.js b/src/plugins/components/form/form-elements.js
index 3eff2bd07..65cec7756 100644
--- a/src/plugins/components/form/form-elements.js
+++ b/src/plugins/components/form/form-elements.js
@@ -33,7 +33,7 @@ module.exports = function () {
       '.textarea': {
         height: '16rem',
         display: 'block',
-        borderColor: theme('color.foggy-dark'),
+        borderColor: theme('colors.black.20'),
         color: theme('colors.black.DEFAULT'),
         fontSize: theme('decanter.base.inputFontSize'),
         lineHeight: theme('lineHeight.snug'),
@@ -41,11 +41,11 @@ module.exports = function () {
 
       '.select': {
         display: 'block',
-        borderColor: theme('color.foggy-dark'),
+        borderColor: theme('colors.black.20'),
         color: theme('colors.black.DEFAULT'),
         fontSize: theme('decanter.base.inputFontSize'),
         lineHeight: theme('lineHeight.snug'),
-        backgroundColor: theme('color.white'),
+        backgroundColor: theme('colors.white'),
       },
     };
 
diff --git a/src/plugins/components/form/input.js b/src/plugins/components/form/input.js
index 4535c8ad2..143022c79 100644
--- a/src/plugins/components/form/input.js
+++ b/src/plugins/components/form/input.js
@@ -6,7 +6,7 @@ module.exports = function () {
     const components = {
       '.input': {
         display: 'block',
-        borderColor: theme('color.foggy-dark'),
+        borderColor: theme('colors.black.20'),
         color: theme('colors.black.DEFAULT'),
         fontSize: theme('decanter.base.inputFontSize'),
         lineHeight: theme('lineHeight.snug'),
diff --git a/src/plugins/components/layout/centered-container.js b/src/plugins/components/layout/centered-container.js
index 0ff5066d5..9ce462201 100644
--- a/src/plugins/components/layout/centered-container.js
+++ b/src/plugins/components/layout/centered-container.js
@@ -29,6 +29,10 @@ module.exports = function () {
           paddingLeft: 'calc((100% - 1500px)/2)',
           paddingRight: 'calc((100% - 1500px)/2)',
         },
+        '.centered-container, .cc': {
+          paddingLeft: 0,
+          paddingRight: 0,
+        },
       },
     };
 
diff --git a/src/plugins/components/logo/logo.js b/src/plugins/components/logo/logo.js
index d7ff40a19..23dfea845 100644
--- a/src/plugins/components/logo/logo.js
+++ b/src/plugins/components/logo/logo.js
@@ -10,7 +10,7 @@ module.exports = function () {
       '.logo': {
         display: 'inline-block',
         fontFamily: stanford,
-        fontWeight: theme('fontWeight.regular'),
+        fontWeight: theme('fontWeight.normal'),
         lineHeight: '0.75',
         textDecoration: 'none',
         textTransform: 'none',
diff --git a/src/plugins/components/typography/wysiwyg.js b/src/plugins/components/typography/wysiwyg.js
index 097e756cb..19cc5d582 100644
--- a/src/plugins/components/typography/wysiwyg.js
+++ b/src/plugins/components/typography/wysiwyg.js
@@ -3,7 +3,7 @@
  * within unstructured WYSIWYG content.
  */
 module.exports = function () {
-  return function ({ addComponents, theme }) {
+  return function ({ addComponents }) {
     const components = {
       '.wysiwyg': {
         '> *:first-child': {
@@ -13,7 +13,6 @@ module.exports = function () {
           marginBottom: '0',
         },
         'p, ol, ul, dl': {
-          color: theme('color.black.true'),
           marginBottom: '1.6em',
         },
         'li p': {
diff --git a/src/plugins/theme/colors.js b/src/plugins/theme/colors.js
index c4e34901a..20715c71c 100644
--- a/src/plugins/theme/colors.js
+++ b/src/plugins/theme/colors.js
@@ -10,6 +10,8 @@ module.exports = function () {
       DEFAULT: '#8C1515', // Stanford main brand color
       light: '#B83A4B',
       dark: '#820000',
+      xdark: '#7A0000', // Passed contrast test with digital-red-xlight as text
+      xxdark: '#541107', // Used for hover/focus color for xdark
     },
     // These replace the Tailwind default Black spectrum
     black: {
@@ -31,6 +33,7 @@ module.exports = function () {
     'digital-red': {
       DEFAULT: '#B1040E', // Same as old Bright Red in previous color palette
       light: '#E50808', // Same as old Vivid Red in previous color palette
+      xlight: '#F83535', // Passed contrast test as regular text on black background
       dark: '#820000', // Same as Dark Cardinal Red in previous color palette
     },
     'digital-blue': {
@@ -78,6 +81,9 @@ module.exports = function () {
       DEFAULT: '#007C92',
       light: '#009AB4',
       dark: '#006B81',
+      // Used for some form elements
+      20: '#CCEBF0',
+      40: '#8DD8E4',
     },
     poppy: {
       DEFAULT: '#E98300',
diff --git a/src/plugins/theme/fontSize.js b/src/plugins/theme/fontSize.js
index 521659d04..2ad333c45 100644
--- a/src/plugins/theme/fontSize.js
+++ b/src/plugins/theme/fontSize.js
@@ -4,7 +4,8 @@
  */
 module.exports = function () {
   return {
-    // text-11 to text-30 correspond to font sizes from 12px to 30px (in rem units)
+    // Font size under 10px (1rem) is not recommended
+    // text-11 to text-30 correspond to font sizes from 11px to 30px (in rem units)
     11: '1.1rem',
     12: '1.2rem',
     13: '1.3rem',
@@ -44,5 +45,6 @@ module.exports = function () {
     // text--m1 doesn't use the 1.25 scale factor.
     // Merely a convenience class for a slightly smaller font size than the base step
     '-m1': '0.9em',
+    '09em': '0.9em', // alias for text--m1
   };
 };
diff --git a/src/plugins/theme/gap.js b/src/plugins/theme/gap.js
index aa00e54b8..801c0880a 100644
--- a/src/plugins/theme/gap.js
+++ b/src/plugins/theme/gap.js
@@ -3,6 +3,9 @@
  */
 module.exports = function () {
   return {
+    // Gap values honor all the options in plugins/theme/spacing plus the following
+    // These are the Decanter gap values that are tied to their corresponding breakpoints
+    // We also have a custom utility .grid-gap which is a combination of gap-xs lg:gap-lg xl:gap-xl 2xl:gap-2xl
     xs: '20px',
     lg: '36px',
     xl: '40px',
diff --git a/src/plugins/theme/spacing.js b/src/plugins/theme/spacing.js
index 4e88dffdd..0fb5f4faa 100644
--- a/src/plugins/theme/spacing.js
+++ b/src/plugins/theme/spacing.js
@@ -1,8 +1,10 @@
 /**
- * Spacing - used in various classes such as margin and padding; individual values taken from Responsive Spacing map
+ * Spacing - used in various classes such as margin, padding, gap and width
+ * Values include curated steps from the modular (responsive) spacing system, plus some extra values for convenience
  */
 module.exports = function () {
   return {
+    px: '1px',
     0: '0',
     // Spacing utilities in em units are mostly used for typography elements,
     // e.g., spacing below headings, between paragraphs, list items, etc.
@@ -17,6 +19,7 @@ module.exports = function () {
     '09em': '0.9em',
     '1em': '1em',
     // Spacing utilities in rem units are mostly used for layout elements and do not scale with container font size
+    // From 1 to 50px in rem units, we have spacing values in 1px (0.1rem) increments
     1: '0.1rem',
     2: '0.2rem',
     3: '0.3rem',
@@ -47,43 +50,91 @@ module.exports = function () {
     28: '2.8rem',
     29: '2.9rem',
     30: '3rem',
+    31: '3.1em',
     32: '3.2rem',
+    33: '3.3rem',
     34: '3.4rem',
+    35: '3.5rem',
     36: '3.6rem',
+    37: '3.7rem',
     38: '3.8rem',
+    39: '3.9rem',
     40: '4rem',
+    41: '4.1rem',
+    42: '4.2rem',
+    43: '4.3rem',
+    44: '4.4rem',
     45: '4.5rem',
+    46: '4.6rem',
+    47: '4.7rem',
     48: '4.8rem',
+    49: '4.9rem',
     50: '5rem',
+    // From 50 to 100px in rem units, we have spacing values in 5px (0.5rem) increments
+    // plus curated values we have for our modular (responsive) spacing system, ie, in rs-p- rs-m- classes
+    55: '5.5rem',
     58: '5.8rem',
     60: '6rem',
     61: '6.1rem',
+    65: '6.5rem',
     70: '7rem',
     72: '7.2rem',
+    75: '7.5rem',
     76: '7.6rem',
     80: '8rem',
+    85: '8.5rem',
     90: '9rem',
     95: '9.5rem',
     100: '10rem',
     108: '10.8rem',
+    // From 100 to 300px in rem units, we have spacing values in 10px (1rem) increments
+    // plus curated values we have for our modular (responsive) spacing system, ie, in rs-p- rs-m- classes
+    110: '11rem',
     120: '12rem',
     114: '11.4rem',
     126: '12.6rem',
+    130: '13rem',
     133: '13.3rem',
     140: '14rem',
+    150: '15rem',
     160: '16rem',
     162: '16.2rem',
+    170: '17rem',
     171: '17.1rem',
+    180: '18rem',
+    190: '19rem',
     200: '20rem',
     216: '21.6rem',
+    220: '22rem',
     228: '22.8rem',
+    230: '23rem',
+    240: '24rem',
+    250: '25rem',
+    260: '26rem',
+    270: '27rem',
+    280: '28rem',
+    290: '29rem',
+    // From 300 to 1000px in rem units, we have spacing values in 50px (5rem) increments
     300: '30rem',
+    350: '35rem',
     400: '40rem',
+    450: '45rem',
     500: '50rem',
+    550: '55rem',
     600: '60rem',
+    650: '65rem',
     700: '70rem',
+    750: '75rem',
     800: '80rem',
+    850: '85rem',
     900: '90rem',
+    950: '95rem',
+    // From 1000 to 1500px in rem units, we have spacing values in 100px (10em) increments
     1000: '100rem',
+    1100: '110rem',
+    1200: '120rem',
+    1300: '130rem',
+    1400: '140rem',
+    1500: '150rem',
   };
 };
diff --git a/static/index.html b/static/index.html
index 60aadf1ca..342faf8f0 100644
--- a/static/index.html
+++ b/static/index.html
@@ -12,18 +12,14 @@
 
   <!-- MAIN DEVELOPMENT AREA -->
   <a href="#top" class="skiplink">Skip to main content</a>
-  <div class="bg-digital-red pt-5 pb-1">
-    <div class="cc">
-      <a class="logo text-white hocus:text-white text-20" href="https://stanford.edu">Stanford
+  <div class="cc bg-digital-red pt-5 pb-1">
+    <a class="logo text-white hocus:text-white text-20" href="https://stanford.edu">Stanford
         University</a>
-    </div>
   </div>
-  <div role="banner" class="rs-py-6 bg-gradient-to-b from-black to-plum text-white">
-    <div class="centered-container">
-      <h1 class="splash-text">Decanter 7 With Tailwind Test Page.</h1>
-      <p class="intro-text">This is a test page filled with common HTML elements to be used to provide visual
-        feedback whilst building CSS systems and frameworks.</p>
-    </div>
+  <div role="banner" class="cc rs-py-6 bg-gradient-to-b from-black to-plum text-white">
+    <h1 class="splash-text">Decanter 7 With Tailwind Test Page.</h1>
+    <p class="intro-text">This is a test page filled with common HTML elements to be used to provide visual
+      feedback whilst building CSS systems and frameworks.</p>
   </div>
   <main id="top">
     <!-- Nav pills -->
@@ -141,6 +137,8 @@ <h2 class="type-5"><a href="#layouts" class="text-black hover:underline focus:un
             <li class="inline-block mb-12"><a href="#aspect-ratio"
                 class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Aspect
                 Ratio Containers</a></li>
+            <li class="inline-block mb-12"><a href="#cc"
+                  class="inline-block py-8 px-20 mr-12 bg-spirited-dark hocus:bg-archway-dark rounded-full text-white hocus:text-white no-underline transition-colors">Centered Container</a></li>
           </ul>
         </nav>
       </div>
@@ -779,20 +777,20 @@ <h3 class="type-5 text-lagunita-light">Stone</h3>
             </div>
           </article>
 
-          <article id="color-palette-foggy" class="rs-mb-5">
+          <article id="color-palette-fog" class="rs-mb-5">
             <header>
-              <h3 class="type-5 text-lagunita-light">Foggy</h3>
+              <h3 class="type-5 text-lagunita-light">Fog</h3>
             </header>
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-xl md:gap-lg 2xl:gap-2xl">
               <div
-                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-foggy">
+                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog">
                 Default</div>
               <div
-                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-foggy-dark">
-                foggy-dark</div>
+                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog-dark">
+                fog-dark</div>
               <div
-                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-foggy-light">
-                foggy-light</div>
+                class="rs-py-4 rs-px-1 flex justify-center content-center font-semibold border border-black-10 text-black bg-fog-light">
+                fog-light</div>
             </div>
           </article>
 
@@ -1291,10 +1289,30 @@ <h3 class="mb-0">2 x 1 Box</h3>
               </div>
             </div>
           </article>
+          <article id="cc" class="rs-mb-5">
+            <header>
+              <h3 class="type-5 text-lagunita-light">Centered container</h3>
+            </header>
+              <p class="max-w-prose-wide">
+                The centered container contains site content within a certain width. From the XS breakpoint up to 1700px device width, it creates a fluid container with spacing on each side of the screen (different for every breakpoint). At 1700px and above, it restricts the content within to a
+                box that maxes out at a width of 1500px, ie., at that point, it becomes a fixed-width container and is no longer fluid.
+              </p>
+            </header>
+            <div class="cc">
+              <div class="centered-container">
+                <div class="cc bg-spirited-light">
+                  <p class="rs-p-3">
+                    <strong>I'm a centered container.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae condimentum sem. Phasellus a ornare eros, eu scelerisque diam. Etiam lacinia, dui sit amet euismod malesuada, eros ante suscipit neque, vitae eleifend urna augue ac nunc. Suspendisse posuere fringilla nisi vel blandit. Vivamus arcu nisl, fermentum ut erat quis, condimentum sodales nulla. Sed sit amet cursus ipsum. Aliquam eleifend, neque vitae vehicula varius, lorem dui tincidunt sapien, a lacinia sapien augue non felis. Donec gravida auctor imperdiet. Maecenas hendrerit commodo congue. Cras libero neque, convallis eu cursus vitae, commodo posuere nunc. Fusce id tortor ex. Nullam tristique velit id mauris consequat, et pretium magna vestibulum. Etiam fringilla arcu bibendum, ornare sapien eget, mollis enim. Aliquam erat volutpat. Nulla facilisi.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </article>
         </div>
       </div>
     </section>
 
+
   </main>
   <div
     class='global-footer basefont-21 bg-digital-red rs-py-1 text-white link-white'>
@@ -1382,13 +1400,11 @@ <h3 class="mb-0">2 x 1 Box</h3>
       </div>
     </div>
   </div>
-  <footer role="contentinfo" class="bg-black text-white text-16 md:text-18 rs-py-2">
+  <footer role="contentinfo" class="cc bg-black text-white text-16 md:text-18 rs-py-2">
     <!-- HTML Test page based on sample provided by http://twitter.com/cbracco -->
-    <div class="cc">
-      <p class="mb-0">A TailwindCSS/Decanter v7 test page.</p>
-      <p><a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-dark.svg"></a>
-      </p>
-    </div>
+    <p class="mb-0">A TailwindCSS/Decanter v7 test page.</p>
+    <p><a href="https://www.netlify.com"><img src="https://www.netlify.com/img/global/badges/netlify-dark.svg"></a>
+    </p>
     <a href="#top"
       class="hidden md:block fixed bottom-20 right-20 w-50 text-black hocus:text-plum transition-colors"><span
         class="sr-only">Back to top</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
diff --git a/tailwind.config.js b/tailwind.config.js
index 4dd9b8d47..faceb3e41 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,7 +17,6 @@ module.exports = {
   theme: {
     // Overrides.
     fontFamily: require(`${dir}/theme/fontFamily.js`)(),
-    gap: require(`${dir}/theme/gap.js`)(),
     screens: require(`${dir}/theme/screens.js`)(),
     spacing: require(`${dir}/theme/spacing.js`)(),
     // Decanter Custom.
@@ -29,6 +28,7 @@ module.exports = {
       colors: require(`${dir}/theme/colors.js`)(),
       fontSize: require(`${dir}/theme/fontSize.js`)(),
       fontWeight: require(`${dir}/theme/fontWeight.js`)(),
+      gap: require(`${dir}/theme/gap.js`)(),
       lineClamp: require(`${dir}/theme/lineClamp.js`)(),
       lineHeight: require(`${dir}/theme/lineHeight.js`)(),
       maxWidth: require(`${dir}/theme/maxWidth.js`)(),