diff --git a/package.json b/package.json
index 30374c730..632b0c3c1 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
         "@material-ui/lab": "^4.0.0-alpha.56",
         "@pxblue/colors": "^3.0.0",
         "@pxblue/colors-branding": "^3.0.0",
-        "@pxblue/icons-mui": "^2.3.0",
+        "@pxblue/icons-mui": "^2.5.0",
         "@pxblue/react-components": "^5.1.1",
         "@pxblue/react-progress-icons": "^2.1.0",
         "@pxblue/react-themes": "^6.0.0",
diff --git a/src/__configuration__/contributors/contributors.ts b/src/__configuration__/contributors/contributors.ts
index 7a93b0c61..2cd98a078 100644
--- a/src/__configuration__/contributors/contributors.ts
+++ b/src/__configuration__/contributors/contributors.ts
@@ -10,6 +10,7 @@ import ChinnaGurrala from '../../app/assets/credits/chinna-gurrala.jpeg';
 import AnjaliPatodia from '../../app/assets/credits/anjali-patodia.png';
 import MarianaBela from '../../app/assets/credits/mariana-bela.jpg';
 import RenatoMartins from '../../app/assets/credits/renato-martins.jpg';
+import JosephBoyle from '../../app/assets/credits/joseph-boyle.png';
 
 import { Contributor } from '../../__types__';
 
@@ -60,7 +61,7 @@ export const contributors: Contributor[] = [
     },
     {
         name: 'Bertrand Karerangabo',
-        description: 'Initial website and CLI',
+        description: 'Initial website & CLI',
     },
     {
         name: 'Tyler Hoffman',
@@ -106,4 +107,15 @@ export const contributors: Contributor[] = [
         description: 'Icons',
         image: RenatoMartins,
     },
+
+    {
+        name: 'Joseph Boyle',
+        description: `Front-End Developer & Strategy`,
+        image: JosephBoyle,
+        info: `Forsaking all others, Joe has been with PX Blue since its inception. A double-threat with a background in computer science and user experience, he's not afraid to drop 100+ comments on your most recent PR. Befriend at your own risk.`,
+        contacts: {
+            github: 'https://github.com/joebochill',
+            linkedIn: 'https://www.linkedin.com/in/joebochill/',
+        },
+    },
 ];
diff --git a/src/__configuration__/contributors/currentMaintainers.ts b/src/__configuration__/contributors/currentMaintainers.ts
index 7b3cc1a68..20b5e42b6 100644
--- a/src/__configuration__/contributors/currentMaintainers.ts
+++ b/src/__configuration__/contributors/currentMaintainers.ts
@@ -1,6 +1,5 @@
 import HuayunHuang from '../../app/assets/credits/huayun-huang.jpg';
 import EvanMcLaughlin from '../../app/assets/credits/evan-mclaughlin.jpeg';
-import JosephBoyle from '../../app/assets/credits/joseph-boyle.png';
 import JeffeyGreiner from '../../app/assets/credits/jeffery-greiner.jpeg';
 import ThomasDailey from '../../app/assets/credits/thomas-dailey.jpg';
 import EktaGhag from '../../app/assets/credits/ekta-ghag.jpg';
@@ -27,16 +26,6 @@ export const currentMaintainers: Contributor[] = [
             linkedIn: 'https://www.linkedin.com/in/evan-mclaughlin-3a4b4089/',
         },
     },
-    {
-        name: 'Joseph Boyle',
-        description: `Team Lead`,
-        image: JosephBoyle,
-        info: `Forsaking all others, Joe has been with PX Blue since its inception. A double-threat with a background in computer science and user experience, he's not afraid to drop 100+ comments on your most recent PR. Befriend at your own risk.`,
-        contacts: {
-            github: 'https://github.com/joebochill',
-            linkedIn: 'https://www.linkedin.com/in/joebochill/',
-        },
-    },
     {
         name: 'Jeff Greiner',
         description: 'Quality Assurance',
diff --git a/src/database/index-database.json b/src/database/index-database.json
index 14c51a450..5f1354aaa 100644
--- a/src/database/index-database.json
+++ b/src/database/index-database.json
@@ -273,10 +273,10 @@
             { "/design/websites": 16 },
             { "/design/intro": 14 },
             { "/overview": 10 },
-            { "/style/typography": 7 },
             { "/community/faq": 7 },
             { "/community/our-team": 7 },
             { "/get-started/web": 6 },
+            { "/style/typography": 6 },
             { "/patterns/forms": 5 },
             { "/patterns/lists": 4 },
             { "/get-started/mobile": 3 },
@@ -364,10 +364,10 @@
             { "/style/color": 16 },
             { "/get-started/mobile": 15 },
             { "/design/anatomy": 14 },
+            { "/style/typography": 14 },
             { "/style/iconography": 13 },
             { "/development/frameworks-web/intro": 12 },
             { "/get-started/web": 11 },
-            { "/style/typography": 9 },
             { "/community/license": 9 },
             { "/patterns/steppers": 8 },
             { "/community/our-team": 7 },
@@ -420,13 +420,13 @@
             { "/patterns/internationalization": 7 },
             { "/patterns/lists": 6 },
             { "/patterns/steppers": 6 },
+            { "/style/typography": 6 },
             { "/community/innersourcing": 6 },
             { "/overview": 5 },
             { "/development/environment": 5 },
             { "/development/frameworks-mobile/intro": 5 },
             { "/development/frameworks-mobile/ionic": 5 },
             { "/style/color": 5 },
-            { "/style/typography": 5 },
             { "/get-started/mobile": 4 },
             { "/design/anatomy": 4 },
             { "/design/accessibility": 4 },
@@ -559,10 +559,10 @@
             { "/development/environment": 9 },
             { "/patterns/account-menu": 9 },
             { "/patterns/overlay": 9 },
+            { "/style/typography": 9 },
             { "/development/cli": 8 },
             { "/development/frameworks-mobile/intro": 8 },
             { "/development/frameworks-mobile/ionic": 8 },
-            { "/style/typography": 8 },
             { "/patterns/appbar": 7 },
             { "/patterns/visualizations": 7 },
             { "/community/our-team": 7 },
@@ -799,7 +799,7 @@
             { "/design/project-identity": 17 },
             { "/design/accessibility": 11 },
             { "/design/intro": 9 },
-            { "/style/typography": 7 },
+            { "/style/typography": 8 },
             { "/development/frameworks-mobile/react-native": 6 },
             { "/design/anatomy": 6 },
             { "/design/websites": 6 },
@@ -1014,7 +1014,6 @@
             { "/design/accessibility": 1 },
             { "/patterns/forms": 1 },
             { "/patterns/loading": 1 },
-            { "/style/typography": 1 },
             { "/community/innersourcing": 1 },
             { "/community/our-team": 1 }
         ],
@@ -1022,7 +1021,6 @@
             { "/development/testing": 4 },
             { "/design/anatomy": 4 },
             { "/patterns/lists": 4 },
-            { "/style/typography": 4 },
             { "/design/intro": 3 },
             { "/design/websites": 3 },
             { "/patterns/account-menu": 3 },
@@ -1039,6 +1037,7 @@
             { "/patterns/forms": 1 },
             { "/patterns/internationalization": 1 },
             { "/patterns/navigation": 1 },
+            { "/style/typography": 1 },
             { "/community/bugs": 1 }
         ],
         "new": [
@@ -1140,11 +1139,11 @@
             { "/patterns/overlay": 13 },
             { "/patterns/lists": 12 },
             { "/patterns/loading": 12 },
+            { "/style/typography": 11 },
             { "/get-started/web": 10 },
             { "/design/anatomy": 10 },
             { "/design/accessibility": 10 },
             { "/style/color": 10 },
-            { "/style/typography": 10 },
             { "/community/innersourcing": 10 },
             { "/community/our-team": 10 },
             { "/development/environment": 9 },
@@ -1340,11 +1339,11 @@
             { "/community/bugs": 3 },
             { "/development/cli": 2 },
             { "/patterns/visualizations": 2 },
-            { "/style/typography": 2 },
             { "/style/themes": 2 },
             { "/get-started/mobile": 1 },
             { "/patterns/appbar": 1 },
             { "/style/iconography": 1 },
+            { "/style/typography": 1 },
             { "/resources/designer": 1 }
         ],
         "common": [
@@ -1417,7 +1416,6 @@
             { "/design/accessibility": 6 },
             { "/patterns/forms": 6 },
             { "/style/illustrations": 6 },
-            { "/style/typography": 6 },
             { "/get-started/web": 5 },
             { "/patterns/appbar": 5 },
             { "/patterns/internationalization": 5 },
@@ -1426,6 +1424,7 @@
             { "/design/intro": 4 },
             { "/patterns/loading": 4 },
             { "/style/color": 4 },
+            { "/style/typography": 4 },
             { "/community/innersourcing": 4 },
             { "/overview": 3 },
             { "/get-started/mobile": 3 },
@@ -1467,9 +1466,9 @@
             { "/development/frameworks-web/angular": 5 },
             { "/development/frameworks-web/react": 5 },
             { "/design/anatomy": 5 },
-            { "/style/typography": 5 },
             { "/community/innersourcing": 5 },
             { "/development/frameworks-mobile/ionic": 4 },
+            { "/style/typography": 4 },
             { "/style/iconography": 3 },
             { "/community/license": 3 },
             { "/get-started/web": 2 },
@@ -1494,7 +1493,8 @@
             { "/development/frameworks-mobile/ionic": 1 },
             { "/development/testing": 1 },
             { "/design/intro": 1 },
-            { "/patterns/forms": 1 }
+            { "/patterns/forms": 1 },
+            { "/style/typography": 1 }
         ],
         "all": [
             { "/community/faq": 7 },
@@ -1574,7 +1574,6 @@
             { "/patterns/forms": 2 },
             { "/patterns/steppers": 2 },
             { "/style/illustrations": 2 },
-            { "/style/typography": 2 },
             { "/overview": 1 },
             { "/get-started/mobile": 1 },
             { "/development/frameworks-web/intro": 1 },
@@ -1588,6 +1587,7 @@
             { "/patterns/navigation": 1 },
             { "/patterns/visualizations": 1 },
             { "/style/color": 1 },
+            { "/style/typography": 1 },
             { "/community/license": 1 },
             { "/community/our-team": 1 },
             { "/resources/designer": 1 }
@@ -1773,8 +1773,8 @@
             { "/patterns/internationalization": 14 },
             { "/style/iconography": 14 },
             { "/patterns/forms": 13 },
+            { "/style/typography": 13 },
             { "/patterns/appbar": 11 },
-            { "/style/typography": 11 },
             { "/get-started/new-project": 10 },
             { "/style/illustrations": 10 },
             { "/get-started/web": 9 },
@@ -1885,6 +1885,7 @@
             { "/overview": 2 },
             { "/get-started/web": 1 },
             { "/design/anatomy": 1 },
+            { "/style/typography": 1 },
             { "/community/innersourcing": 1 },
             { "/resources/designer": 1 }
         ],
@@ -2468,6 +2469,7 @@
             { "/patterns/navigation": 1 },
             { "/patterns/user-auth": 1 },
             { "/style/color": 1 },
+            { "/style/typography": 1 },
             { "/community/innersourcing": 1 },
             { "/community/bugs": 1 }
         ],
@@ -2526,6 +2528,7 @@
             { "/patterns/appbar": 2 },
             { "/patterns/forms": 2 },
             { "/style/iconography": 2 },
+            { "/style/typography": 2 },
             { "/overview": 1 },
             { "/development/frameworks-web/intro": 1 },
             { "/development/frameworks-web/angular": 1 },
@@ -2534,7 +2537,6 @@
             { "/patterns/empty-states": 1 },
             { "/patterns/lists": 1 },
             { "/style/illustrations": 1 },
-            { "/style/typography": 1 },
             { "/community/innersourcing": 1 },
             { "/community/our-team": 1 }
         ],
@@ -2581,11 +2583,11 @@
             { "/development/testing": 2 },
             { "/patterns/navigation": 2 },
             { "/patterns/user-auth": 2 },
+            { "/style/typography": 2 },
             { "/development/cli": 1 },
             { "/design/anatomy": 1 },
             { "/patterns/appbar": 1 },
             { "/style/color": 1 },
-            { "/style/typography": 1 },
             { "/community/license": 1 }
         ],
         "guides": [
@@ -2614,6 +2616,7 @@
             { "/patterns/appbar": 1 },
             { "/patterns/lists": 1 },
             { "/style/color": 1 },
+            { "/style/typography": 1 },
             { "/style/themes": 1 },
             { "/community/bugs": 1 }
         ],
@@ -2625,7 +2628,6 @@
             { "/development/frameworks-web/angular": 1 },
             { "/development/frameworks-web/react": 1 },
             { "/development/frameworks-mobile/ionic": 1 },
-            { "/style/typography": 1 },
             { "/community/our-team": 1 }
         ],
         "project": [
@@ -2755,10 +2757,10 @@
             { "/development/frameworks-web/angular": 7 },
             { "/development/frameworks-web/react": 7 },
             { "/patterns/navigation": 6 },
+            { "/style/typography": 6 },
             { "/development/frameworks-mobile/intro": 5 },
             { "/development/testing": 5 },
             { "/patterns/forms": 5 },
-            { "/style/typography": 5 },
             { "/community/license": 5 },
             { "/community/innersourcing": 5 },
             { "/design/intro": 4 },
@@ -2904,9 +2906,9 @@
             { "/development/frameworks-web/react": 3 },
             { "/development/frameworks-mobile/ionic": 2 },
             { "/development/frameworks-mobile/react-native": 2 },
+            { "/style/typography": 2 },
             { "/overview": 1 },
             { "/development/cli": 1 },
-            { "/style/typography": 1 },
             { "/community/license": 1 },
             { "/community/innersourcing": 1 }
         ],
@@ -3090,6 +3092,7 @@
             { "/style/illustrations": 3 },
             { "/design/project-identity": 2 },
             { "/style/color": 2 },
+            { "/style/typography": 2 },
             { "/get-started/new-project": 1 },
             { "/get-started/web": 1 },
             { "/development/cli": 1 },
@@ -3102,7 +3105,6 @@
             { "/patterns/overlay": 1 },
             { "/patterns/steppers": 1 },
             { "/style/iconography": 1 },
-            { "/style/typography": 1 },
             { "/style/themes": 1 },
             { "/community/innersourcing": 1 },
             { "/community/faq": 1 }
@@ -3333,6 +3335,7 @@
             { "/design/websites": 3 },
             { "/patterns/lists": 3 },
             { "/patterns/user-auth": 3 },
+            { "/style/typography": 3 },
             { "/get-started/web": 2 },
             { "/development/environment": 2 },
             { "/development/frameworks-web/angular": 2 },
@@ -3341,7 +3344,6 @@
             { "/development/testing": 2 },
             { "/design/anatomy": 2 },
             { "/patterns/overlay": 2 },
-            { "/style/typography": 2 },
             { "/get-started/mobile": 1 },
             { "/development/frameworks-mobile/intro": 1 },
             { "/design/intro": 1 },
@@ -3695,6 +3697,7 @@
             { "/style/themes": 4 },
             { "/design/project-identity": 2 },
             { "/patterns/account-menu": 2 },
+            { "/style/typography": 2 },
             { "/get-started/new-project": 1 },
             { "/get-started/mobile": 1 },
             { "/development/frameworks-web/intro": 1 },
@@ -3707,7 +3710,6 @@
             { "/patterns/steppers": 1 },
             { "/style/color": 1 },
             { "/style/iconography": 1 },
-            { "/style/typography": 1 },
             { "/community/faq": 1 }
         ],
         "type": [
@@ -3777,6 +3779,7 @@
             { "/patterns/empty-states": 2 },
             { "/patterns/navigation": 2 },
             { "/patterns/visualizations": 2 },
+            { "/style/typography": 2 },
             { "/get-started/mobile": 1 },
             { "/development/frameworks-mobile/intro": 1 },
             { "/patterns/appbar": 1 },
@@ -3870,7 +3873,8 @@
             { "/get-started/new-project": 1 },
             { "/development/environment": 1 },
             { "/patterns/account-menu": 1 },
-            { "/style/illustrations": 1 }
+            { "/style/illustrations": 1 },
+            { "/style/typography": 1 }
         ],
         "before": [
             { "/get-started/new-project": 3 },
@@ -3884,7 +3888,6 @@
             { "/design/project-identity": 1 },
             { "/patterns/forms": 1 },
             { "/patterns/user-auth": 1 },
-            { "/style/typography": 1 },
             { "/community/faq": 1 }
         ],
         "unless": [{ "/get-started/new-project": 1 }, { "/design/accessibility": 1 }, { "/patterns/forms": 1 }],
@@ -3905,7 +3908,6 @@
             { "/patterns/internationalization": 2 },
             { "/patterns/navigation": 2 },
             { "/patterns/steppers": 2 },
-            { "/style/typography": 2 },
             { "/get-started/new-project": 1 },
             { "/design/project-identity": 1 },
             { "/patterns/visualizations": 1 }
@@ -4408,6 +4410,7 @@
             { "/style/color": 1 },
             { "/style/iconography": 1 },
             { "/style/illustrations": 1 },
+            { "/style/typography": 1 },
             { "/style/themes": 1 },
             { "/community/license": 1 },
             { "/community/faq": 1 },
@@ -4520,9 +4523,9 @@
         ],
         "proceed": [{ "/get-started/web": 1 }, { "/patterns/loading": 1 }, { "/patterns/user-auth": 1 }],
         "most": [
+            { "/style/typography": 7 },
             { "/patterns/navigation": 6 },
             { "/development/testing": 5 },
-            { "/style/typography": 5 },
             { "/patterns/account-menu": 4 },
             { "/patterns/forms": 4 },
             { "/design/accessibility": 3 },
@@ -4826,6 +4829,7 @@
             { "/patterns/empty-states": 1 },
             { "/patterns/lists": 1 },
             { "/patterns/visualizations": 1 },
+            { "/style/typography": 1 },
             { "/community/bugs": 1 }
         ],
         "online": [
@@ -4910,11 +4914,11 @@
             { "/development/frameworks-mobile/intro": 3 },
             { "/patterns/lists": 3 },
             { "/patterns/user-auth": 3 },
+            { "/style/typography": 3 },
             { "/community/innersourcing": 3 },
             { "/development/frameworks-web/intro": 2 },
             { "/patterns/forms": 2 },
             { "/patterns/loading": 2 },
-            { "/style/typography": 2 },
             { "/community/bugs": 2 },
             { "/development/cli": 1 },
             { "/design/project-identity": 1 },
@@ -5033,6 +5037,7 @@
             { "/patterns/forms": 4 },
             { "/get-started/mobile": 2 },
             { "/style/illustrations": 2 },
+            { "/style/typography": 2 },
             { "/development/environment": 1 },
             { "/development/testing": 1 },
             { "/design/accessibility": 1 },
@@ -5040,8 +5045,7 @@
             { "/patterns/appbar": 1 },
             { "/patterns/internationalization": 1 },
             { "/patterns/lists": 1 },
-            { "/patterns/navigation": 1 },
-            { "/style/typography": 1 }
+            { "/patterns/navigation": 1 }
         ],
         "namely": [{ "/get-started/mobile": 1 }],
         "i": [
@@ -5154,6 +5158,7 @@
             { "/design/intro": 1 },
             { "/patterns/empty-states": 1 },
             { "/patterns/internationalization": 1 },
+            { "/style/typography": 1 },
             { "/community/faq": 1 }
         ],
         "view": [
@@ -5308,6 +5313,7 @@
             { "/development/frameworks-web/react": 2 },
             { "/design/intro": 2 },
             { "/patterns/forms": 2 },
+            { "/style/typography": 2 },
             { "/community/innersourcing": 2 },
             { "/get-started/mobile": 1 },
             { "/development/environment": 1 },
@@ -6277,14 +6283,14 @@
             { "/patterns/internationalization": 1 },
             { "/patterns/loading": 1 },
             { "/style/iconography": 1 },
-            { "/style/typography": 1 },
             { "/community/faq": 1 }
         ],
         "skeleton": [{ "/patterns/loading": 6 }, { "/development/cli": 1 }],
         "chosen": [
             { "/development/cli": 1 },
             { "/development/frameworks-mobile/intro": 1 },
-            { "/design/accessibility": 1 }
+            { "/design/accessibility": 1 },
+            { "/style/typography": 1 }
         ],
         "automatically": [
             { "/development/frameworks-web/angular": 4 },
@@ -7329,6 +7335,7 @@
             { "/patterns/empty-states": 1 },
             { "/patterns/lists": 1 },
             { "/style/color": 1 },
+            { "/style/typography": 1 },
             { "/style/themes": 1 },
             { "/community/innersourcing": 1 },
             { "/community/faq": 1 }
@@ -7366,6 +7373,7 @@
             { "/development/testing": 5 },
             { "/design/websites": 3 },
             { "/development/frameworks-mobile/react-native": 2 },
+            { "/style/typography": 2 },
             { "/community/faq": 2 },
             { "/development/frameworks-web/angular": 1 },
             { "/development/frameworks-web/react": 1 },
@@ -7374,7 +7382,6 @@
             { "/design/project-identity": 1 },
             { "/style/color": 1 },
             { "/style/iconography": 1 },
-            { "/style/typography": 1 },
             { "/community/bugs": 1 }
         ],
         "browsers": [
@@ -7591,6 +7598,7 @@
             { "/design/project-identity": 1 },
             { "/patterns/overlay": 1 },
             { "/style/illustrations": 1 },
+            { "/style/typography": 1 },
             { "/community/innersourcing": 1 }
         ],
         "final": [{ "/development/frameworks-mobile/intro": 4 }, { "/development/frameworks-mobile/react-native": 1 }],
@@ -7958,7 +7966,6 @@
             { "/development/frameworks-mobile/react-native": 1 },
             { "/development/testing": 1 },
             { "/style/color": 1 },
-            { "/style/typography": 1 },
             { "/community/contactus": 1 }
         ],
         "solution": [{ "/community/faq": 3 }, { "/development/frameworks-mobile/react-native": 1 }],
@@ -8173,7 +8180,7 @@
         "document": [{ "/development/testing": 1 }],
         "focuses": [{ "/development/testing": 1 }, { "/design/anatomy": 1 }],
         "mainly": [{ "/development/testing": 1 }],
-        "easiest": [{ "/development/testing": 1 }, { "/patterns/lists": 1 }],
+        "easiest": [{ "/development/testing": 1 }, { "/patterns/lists": 1 }, { "/style/typography": 1 }],
         "automate": [{ "/development/testing": 3 }],
         "smallest": [{ "/development/testing": 1 }, { "/style/illustrations": 1 }],
         "pieces": [{ "/development/testing": 2 }, { "/community/faq": 1 }],
@@ -8275,6 +8282,7 @@
         "_when_": [{ "/development/testing": 1 }],
         "important": [
             { "/design/websites": 4 },
+            { "/style/typography": 3 },
             { "/development/testing": 2 },
             { "/design/accessibility": 2 },
             { "/design/intro": 1 },
@@ -8282,8 +8290,7 @@
             { "/patterns/loading": 1 },
             { "/patterns/navigation": 1 },
             { "/style/color": 1 },
-            { "/style/illustrations": 1 },
-            { "/style/typography": 1 }
+            { "/style/illustrations": 1 }
         ],
         "elect": [{ "/development/testing": 1 }, { "/patterns/account-menu": 1 }],
         "driven": [{ "/development/testing": 2 }],
@@ -8914,11 +8921,11 @@
         "hierarchy": [
             { "/patterns/navigation": 4 },
             { "/design/intro": 2 },
+            { "/style/typography": 2 },
             { "/design/anatomy": 1 },
             { "/design/websites": 1 },
             { "/design/project-identity": 1 },
-            { "/patterns/appbar": 1 },
-            { "/style/typography": 1 }
+            { "/patterns/appbar": 1 }
         ],
         "clarity": [{ "/design/intro": 1 }],
         "increases": [{ "/design/intro": 1 }],
@@ -8942,7 +8949,7 @@
         "communicating": [{ "/design/intro": 1 }, { "/design/anatomy": 1 }],
         "defaults": [{ "/design/intro": 1 }],
         "understanding": [{ "/design/intro": 1 }, { "/design/anatomy": 1 }, { "/patterns/internationalization": 1 }],
-        "careful": [{ "/design/intro": 1 }, { "/patterns/user-auth": 1 }, { "/style/typography": 1 }],
+        "careful": [{ "/design/intro": 1 }, { "/patterns/user-auth": 1 }],
         "states": [
             { "/patterns/empty-states": 8 },
             { "/style/color": 3 },
@@ -9115,7 +9122,12 @@
             { "/community/license": 1 },
             { "/community/contactus": 1 }
         ],
-        "establish": [{ "/design/project-identity": 4 }, { "/design/anatomy": 1 }, { "/community/innersourcing": 1 }],
+        "establish": [
+            { "/design/project-identity": 4 },
+            { "/design/anatomy": 1 },
+            { "/style/typography": 1 },
+            { "/community/innersourcing": 1 }
+        ],
         "lay": [{ "/design/anatomy": 1 }, { "/design/accessibility": 1 }, { "/patterns/navigation": 1 }],
         "units": [{ "/patterns/internationalization": 2 }, { "/design/anatomy": 1 }],
         "clicking": [
@@ -9916,12 +9928,7 @@
             { "/style/illustrations": 1 },
             { "/community/innersourcing": 1 }
         ],
-        "too": [
-            { "/style/illustrations": 2 },
-            { "/design/project-identity": 1 },
-            { "/patterns/overlay": 1 },
-            { "/style/typography": 1 }
-        ],
+        "too": [{ "/style/illustrations": 2 }, { "/design/project-identity": 1 }, { "/patterns/overlay": 1 }],
         "opportunities": [{ "/design/project-identity": 1 }, { "/community/contactus": 1 }],
         "tweaks": [{ "/design/project-identity": 1 }, { "/style/typography": 1 }],
         "extends": [{ "/design/project-identity": 1 }, { "/patterns/user-auth": 1 }],
@@ -10104,12 +10111,7 @@
             { "/patterns/forms": 2 },
             { "/patterns/steppers": 1 }
         ],
-        "contents": [
-            { "/patterns/account-menu": 3 },
-            { "/patterns/navigation": 2 },
-            { "/patterns/overlay": 1 },
-            { "/style/typography": 1 }
-        ],
+        "contents": [{ "/patterns/account-menu": 3 }, { "/patterns/navigation": 2 }, { "/patterns/overlay": 1 }],
         "bar": [
             { "/patterns/appbar": 23 },
             { "/patterns/account-menu": 3 },
@@ -10490,7 +10492,7 @@
         "comma": [{ "/patterns/internationalization": 1 }],
         "period": [{ "/patterns/internationalization": 1 }],
         "punctuation": [{ "/patterns/internationalization": 1 }],
-        "crafting": [{ "/patterns/internationalization": 1 }],
+        "crafting": [{ "/patterns/internationalization": 1 }, { "/style/typography": 1 }],
         "vertical": [{ "/patterns/internationalization": 1 }, { "/patterns/steppers": 1 }],
         "horizontal": [
             { "/patterns/internationalization": 1 },
@@ -10930,7 +10932,7 @@
         "adjusted": [{ "/style/iconography": 1 }],
         "programmatically": [{ "/style/iconography": 1 }],
         "fill": [{ "/style/iconography": 1 }, { "/community/innersourcing": 1 }, { "/community/features": 1 }],
-        "properties": [{ "/style/iconography": 1 }],
+        "properties": [{ "/style/iconography": 1 }, { "/style/typography": 1 }],
         "suitable": [{ "/style/iconography": 1 }],
         "ux": [{ "/style/iconography": 1 }],
         "hours": [{ "/style/iconography": 1 }],
@@ -11009,7 +11011,7 @@
         "characteristics": [{ "/style/typography": 1 }],
         "letter": [{ "/style/typography": 1 }],
         "grow": [{ "/style/typography": 1 }],
-        "raise": [{ "/style/typography": 1 }],
+        "consideration": [{ "/style/typography": 1 }],
         "unrealistic": [{ "/style/typography": 1 }],
         "presume": [{ "/style/typography": 1 }],
         "_every_": [{ "/style/typography": 1 }],
diff --git a/src/database/sitemap-database.json b/src/database/sitemap-database.json
index c6e3bd17b..60046c173 100644
--- a/src/database/sitemap-database.json
+++ b/src/database/sitemap-database.json
@@ -136,11 +136,11 @@
     },
     "/style/typography": {
         "title": "Typography",
-        "text": "import { ImageGrid, MaterialDesignDescription, TypographyTable, TOC } from '../../app/components';\nimport { Divider, Typography } from '@material-ui/core';\nimport PxblueSmallAltIcon from '@pxblue/icons-mui/PxblueSmallAlt';\n\n<!-- Images -->\n\nimport SimplifiedChineseImg from '../../app/assets/styles/typography/noto-sans-cjk-sc.png';\nimport AppBar from '../../app/assets/styles/typography/subtitle-variations.png';\nimport ScoreCard from '../../app/assets/styles/typography/scorecard-variations.png';\nimport CompeteAttention1 from '../../app/assets/styles/typography/compete-attention-1.png';\nimport CompeteAttention2 from '../../app/assets/styles/typography/compete-attention-2.png';\nimport TextHierarchy1 from '../../app/assets/styles/typography/text-hierarchy-1.png';\nimport TextHierarchy2 from '../../app/assets/styles/typography/text-hierarchy-2.png';\nimport TextHierarchy3 from '../../app/assets/styles/typography/text-hierarchy-3.png';\nimport TextHierarchy4 from '../../app/assets/styles/typography/text-hierarchy-4.png';\nimport StatusColor1 from '../../app/assets/styles/typography/status-color-1.png';\nimport StatusColor2 from '../../app/assets/styles/typography/status-color-2.png';\n\n<!-- KEYWORDS: design style typography text -->\n\n# Typography Guidelines\n\nPX Blue builds off of the Material Design system, so in general, you may refer to the typography guidelines presented at Material Design. Below, we cover some of the areas where PX Blue differs from Material Design.\n\n<MaterialDesignDescription\n    title={'The Type System'}\n    url={'https://material.io/design/typography/the-type-system.html'}\n    description={`Material Design's typography guidelines.`}\n/>\n\nUnlike Material Design, the primary font for Power Xpert Blue is [Open Sans](https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans) (licensed under [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)). This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letter forms.\n\n<TOC\n    anchors={[\n        { title: 'Introduction', hash: '#typography-guidelines' },\n        { title: 'Type Scale', hash: '#type-scale' },\n        { title: 'Principles', hash: '#principles' },\n        { title: 'Customization', hash: '#customization' },\n        { title: 'Internationalization', hash: '#internationalization' },\n    ]}\n/>\n<Divider />\n\n# Type Scale\n\nPX Blue provides a type scale that includes a range of styles to support the needs of your application. All styles and fonts are available in the design library. As PX Blue continues to grow, additional font patterns will be added.\n\n<TypographyTable />\n\n# Principles\n\nFont variations can create a hierarchy in your information display that guides your user's attention. This involves changing the font's size, weight, and / or color.\n\n<ImageGrid\n    images={[TextHierarchy1, TextHierarchy2, TextHierarchy3, TextHierarchy4]}\n    caption={[\n        'You can manipulate many different aspects of your typography to indicate hierarchy.',\n        '1: Font size',\n        '2: Font weight',\n        '3: Font color',\n        '4: Combined',\n    ]}\n/>\n\nBefore starting on your design, you should understand what contents are important from your user's perspective.\n\n<ImageGrid\n    images={[CompeteAttention1, CompeteAttention2]}\n    caption={[\n        '1: Do not rely solely on font weight changes to indicate an active state. Do not let auxiliary text (the circled numbers on the right) distract your user.',\n        '2: Use clues like background color and radio buttons to clearly communicate the state.',\n    ]}\n/>\n\nBe careful with font colors too, as they can raise [accessibility issues](/design/accessibility).\n\n<ImageGrid\n    images={[StatusColor1, StatusColor2]}\n    caption={[\n        '1: Be careful when using status color for a large body of text, as they have decreased legibility compared to those with neutral colors.',\n        '2: Shorter text, such as a list item tag, may be colored to reflect a certain status.',\n    ]}\n/>\n\n<Divider />\n\n# Customization\n\nThe standard styles above should cover most of the typography needs in your application. However, it is unrealistic to presume that these styles will cover _every_ potential use case. Slight customization of these styles — such as changing a font weight for a particular component — is acceptable and expected. In most cases, these can be treated as one-off styling tweaks, rather than an entirely new style. If you find that you are using customized styles in multiple places, [contact us](/community/contactus) so we can consider standardizing these styles or provide alternative recommendations.\n\nMost PX Blue components have been designed to work well with the standard styles. Most often, you'll only need to worry about custom typography styles when you are developing your own product-specific components. Keep in mind that even if you are adjusting font styles, you should still continue to use the Open Sans font family.\n\n## Common Customizations\n\nThere are a few specific elements in PX Blue applications that are often customized — to the point that they can be considered alternative standard styles.\n\n### App Bar Subtitle\n\nThe most commonly customized style in PX Blue applications is the subtitle in the [App Bar](/patterns/appbar) component. This typically makes use of the Body1 style, but a variety of different styles are acceptable. One favorite is to use 18dp / Light.\n\n<React.Fragment>\n    <ImageGrid\n        images={[AppBar]}\n        regularWidth\n        caption={[\n            '1: App Bar with the standard typography styles.',\n            '2: App Bar with commonly used custom subtitle style.',\n        ]}\n    />\n</React.Fragment>\n\n### Scorecard Header\n\nThe standard Scorecard component makes use of custom styles by default: the three lines of text are H6, Body1, and 14dp / Light. You should avoid changing the style for the first line, but the second and third lines can be customized as appropriate.\n\n<React.Fragment>\n    <ImageGrid\n        images={[ScoreCard]}\n        regularWidth\n        caption={[\n            '1: Scorecard with the standard typography styles.',\n            '2: Scorecard with custom text styles on the second and third lines. These styles can be adjusted based on the displayed information.',\n        ]}\n    />\n    <Divider />\n</React.Fragment>\n\n# Internationalization\n\n<ImageGrid\n    images={[SimplifiedChineseImg]}\n    regularWidth\n    caption={['Use \"Noto Sans CJK SC\" font for Simplified Chinese.']}\n/>\n\nFor non-western languages, we recommend using [Noto Sans](https://www.google.com/get/noto/). You should select the appropriate font variation based on the language(s) you are designing for.\n\n<React.Fragment>\n    <MaterialDesignDescription\n        title={'Internationalization'}\n        url={'/patterns/internationalization'}\n        description={`Follow PX Blue's guideline to design your UI for different languages.`}\n        avatar={<PxblueSmallAltIcon style={{ width: 48, height: 48 }} />}\n    />\n    <MaterialDesignDescription\n        title={'Language Support'}\n        url={'https://material.io/design/typography/language-support.html'}\n        description={`Material Design's guideline on typography considerations for global audiences.`}\n    />\n</React.Fragment>\n"
+        "text": "import { ImageGrid, MaterialDesignDescription, TypographyTable, TOC } from '../../app/components';\nimport { Divider, Typography } from '@material-ui/core';\nimport PxblueSmallAltIcon from '@pxblue/icons-mui/PxblueSmallAlt';\n\n<!-- Images -->\n\nimport SimplifiedChineseImg from '../../app/assets/styles/typography/noto-sans-cjk-sc.png';\nimport AppBar from '../../app/assets/styles/typography/subtitle-variations.png';\nimport ScoreCard from '../../app/assets/styles/typography/scorecard-variations.png';\nimport CompeteAttention1 from '../../app/assets/styles/typography/compete-attention-1.png';\nimport CompeteAttention2 from '../../app/assets/styles/typography/compete-attention-2.png';\nimport TextHierarchy1 from '../../app/assets/styles/typography/text-hierarchy-1.png';\nimport TextHierarchy2 from '../../app/assets/styles/typography/text-hierarchy-2.png';\nimport TextHierarchy3 from '../../app/assets/styles/typography/text-hierarchy-3.png';\nimport TextHierarchy4 from '../../app/assets/styles/typography/text-hierarchy-4.png';\nimport StatusColor1 from '../../app/assets/styles/typography/status-color-1.png';\nimport StatusColor2 from '../../app/assets/styles/typography/status-color-2.png';\n\n<!-- KEYWORDS: design style typography text -->\n\n# Typography Guidelines\n\nPX Blue builds off of the Material Design system, so in general, you may refer to the typography guidelines presented at Material Design. Below, we cover some of the areas where PX Blue differs from Material Design.\n\n<MaterialDesignDescription\n    title={'The Type System'}\n    url={'https://material.io/design/typography/the-type-system.html'}\n    description={`Material Design's typography guidelines.`}\n/>\n\nUnlike Material Design, the primary font for Power Xpert Blue is [Open Sans](https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans) (licensed under [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)). This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letter forms.\n\n<TOC\n    anchors={[\n        { title: 'Introduction', hash: '#typography-guidelines' },\n        { title: 'Type Scale', hash: '#type-scale' },\n        { title: 'Principles', hash: '#principles' },\n        { title: 'Customization', hash: '#customization' },\n        { title: 'Internationalization', hash: '#internationalization' },\n    ]}\n/>\n<Divider />\n\n# Type Scale\n\nPX Blue provides a type scale that includes a range of styles to support the needs of your application. All styles and fonts are available in the design library. As PX Blue continues to grow, additional font patterns will be added.\n\n<TypographyTable />\n\n# Principles\n\nYou should use font variations to establish an information hierarchy in your display that guides users' attention from the most important details to the least important. Creating this information hierarchy involves using multiple font properties, including size, weight, and / or color.\n\n<ImageGrid\n    images={[TextHierarchy1, TextHierarchy2, TextHierarchy3, TextHierarchy4]}\n    caption={[\n        'You can manipulate different typography properties to establish hierarchy.',\n        '1: Font size',\n        '2: Font weight',\n        '3: Font color',\n        '4: Combination',\n    ]}\n/>\n\nAs you are crafting your designs, you need to understand which content is the most important from your users' perspective and make that the easiest to find on the page.\n\n<ImageGrid\n    images={[CompeteAttention1, CompeteAttention2]}\n    caption={[\n        `1: Do not rely solely on font weight changes to indicate an active state. Avoid having auxiliary information (e.g., the circled numbers on the right) compete for users' attention.`,\n        `2: Use clues like background color and radio buttons to clearly communicate the state.`,\n    ]}\n/>\n\nWhen changing font colors, make sure to take into consideration the [accessibility](/design/accessibility) of your chosen colors.\n\n<ImageGrid\n    images={[StatusColor1, StatusColor2]}\n    caption={[\n        '1: Be careful when using status colors for a large body of text, as they have reduced legibility compared to standard text colors.',\n        '2: Shorter text, such as a list item tag, may be colored to reflect a certain status.',\n    ]}\n/>\n\n<Divider />\n\n# Customization\n\nThe standard styles above should cover most of the typography needs in your application. However, it is unrealistic to presume that these styles will cover _every_ potential use case. Slight customization of these styles — such as changing a font weight for a particular component — is acceptable and expected. In most cases, these can be treated as one-off styling tweaks, rather than an entirely new style. If you find that you are using customized styles in multiple places, [contact us](/community/contactus) so we can consider standardizing these styles or provide alternative recommendations.\n\nMost PX Blue components have been designed to work well with the standard styles. Most often, you'll only need to worry about custom typography styles when you are developing your own product-specific components. Keep in mind that even if you are adjusting font styles, you should still continue to use the Open Sans font family.\n\n## Common Customizations\n\nThere are a few specific elements in PX Blue applications that are often customized — to the point that they can be considered alternative standard styles.\n\n### App Bar Subtitle\n\nThe most commonly customized style in PX Blue applications is the subtitle in the [App Bar](/patterns/appbar) component. This typically makes use of the Body1 style, but a variety of different styles are acceptable. One favorite is to use 18dp / Light.\n\n<React.Fragment>\n    <ImageGrid\n        images={[AppBar]}\n        regularWidth\n        caption={[\n            '1: App Bar with the standard typography styles.',\n            '2: App Bar with commonly used custom subtitle style.',\n        ]}\n    />\n</React.Fragment>\n\n### Scorecard Header\n\nThe standard Scorecard component makes use of custom styles by default: the three lines of text are H6, Body1, and 14dp / Light. You should avoid changing the style for the first line, but the second and third lines can be customized as appropriate.\n\n<React.Fragment>\n    <ImageGrid\n        images={[ScoreCard]}\n        regularWidth\n        caption={[\n            '1: Scorecard with the standard typography styles.',\n            '2: Scorecard with custom text styles on the second and third lines. These styles can be adjusted based on the displayed information.',\n        ]}\n    />\n    <Divider />\n</React.Fragment>\n\n# Internationalization\n\n<ImageGrid\n    images={[SimplifiedChineseImg]}\n    regularWidth\n    caption={['Use \"Noto Sans CJK SC\" font for Simplified Chinese.']}\n/>\n\nFor non-western languages, we recommend using [Noto Sans](https://www.google.com/get/noto/). You should select the appropriate font variation based on the language(s) you are designing for.\n\n<React.Fragment>\n    <MaterialDesignDescription\n        title={'Internationalization'}\n        url={'/patterns/internationalization'}\n        description={`Follow PX Blue's guideline to design your UI for different languages.`}\n        avatar={<PxblueSmallAltIcon style={{ width: 48, height: 48 }} />}\n    />\n    <MaterialDesignDescription\n        title={'Language Support'}\n        url={'https://material.io/design/typography/language-support.html'}\n        description={`Material Design's guideline on typography considerations for global audiences.`}\n    />\n</React.Fragment>\n"
     },
     "/style/themes": {
         "title": "Themes",
-        "text": "import { ImageGrid, DemoCard, MaterialDesignDescription, Divider, ThemeExplorer, TOC } from '../../app/components';\n\nimport LightThemeColors from '../../app/assets/styles/themes/light-theme-colors.png';\nimport DarkThemeColors from '../../app/assets/styles/themes/dark-theme-colors.png';\nimport LightThemeExample from '../../app/assets/styles/themes/light-theme-example.png';\nimport DarkThemeExample from '../../app/assets/styles/themes/dark-theme-example.png';\nimport OutlinedAndFlat from '../../app/assets/styles/themes/outlined-and-flat.png';\nimport DarkThemeElevation from '../../app/assets/styles/themes/dark-theme-elevation.png';\n\n<!-- KEYWORDS: design style theme light dark mode -->\n\n# Themes\n\nOne of the key benefits of PX Blue is the consistent look & feel between different applications. This is achieved primarily through the use of PX Blue themes. PX Blue offers two themes: a light theme (blue) and a dark theme (blueDark).\n\n<MaterialDesignDescription\n    title={'Material Theming Overview'}\n    description={`Material Design's brief introduction to theming.`}\n    url={'https://material.io/design/material-theming/overview.html#'}\n/>\n<MaterialDesignDescription\n    title={'Dark Theme'}\n    url={'https://material.io/design/color/dark-theme.html'}\n    description={`Material Design's dark theme guide.`}\n    style={{ marginRight: 0 }}\n/>\n\nBoth themes inherit from Material Design's baseline theme and expand upon it with PX Blue specific styles. The major differences between PX Blue themes and the baseline Material theme are the color palettes and [typographies](/style/typography).\n\n<TOC\n    anchors={[\n        { title: 'Introduction', hash: '#themes' },\n        { title: 'Blue Theme / Light Theme', hash: '#blue-theme--light-theme' },\n        { title: 'Dark Theme / Blue Dark Theme', hash: '#dark-theme--blue-dark-theme' },\n        { title: 'Developers', hash: '#developers' },\n    ]}\n/>\n\n## Explore Our Themes\n\nHave a look at the component theme explorer below and learn how PX Blue themes work at a high level. Here we showcase some of the most representative components from Material Design and PX Blue, and how our themes affect them.\n\n<ThemeExplorer />\n\nYou are also encouraged to explore our more detailed theme examples where you can modify the code and see the effects in real-time.\n\n<React.Fragment>\n    <DemoCard\n        repository={'showcase-demo'}\n        angular={`https://stackblitz.com/github/pxblue/angular-showcase-demo/tree/master`}\n        react={`https://codesandbox.io/s/github/pxblue/react-showcase-demo/tree/master`}\n    />\n    <Divider />\n</React.Fragment>\n\n# Blue Theme / Light Theme\n\n<ImageGrid images={[LightThemeExample]} regularWidth caption={'An example of an application using the light theme.'} />\n\nThe blue theme is the default theme for all PX Blue applications. With a clean color vibrance and high text legibility, it is well-suited for everyday use on a computer monitor, on-site facility inspection on a tablet, or on a mobile phone screen.\n\nThe light theme uses our iconic [Blue 500](/style/color) color (`#007bc1`) throughout the application, notably in toolbars, buttons, and icons. In some places, Light Blue 500 is applied as a secondary color on interactive UI elements such as form controls. The light theme's base background color is White 200, although the surface elements are often shaded in White 50 (pure white).\n\n<ImageGrid images={[LightThemeColors]} regularWidth />\n<Divider />\n\n# Dark Theme / Blue Dark Theme\n\n<ImageGrid images={[DarkThemeExample]} regularWidth caption={'An example of an application using the dark theme.'} />\n\nThe dark theme is intended primarily for applications used in low-light conditions. As the name indicates, it utilizes mostly dark colors (grays and blacks). Other colors are typically reserved for interactive components and status displays.\n\n<ImageGrid images={[DarkThemeColors]} regularWidth />\n\nTo accommodate for [accessibility requirements](/design/accessibility), PX Blue uses the 200 shade of colors when text is used on a dark background, such as in an outlined button and a text field label. For \"contained\" elements, such as in an elevated / contained button, the same style is used as in the light theme (500 shades).\n\n<ImageGrid\n    images={[OutlinedAndFlat]}\n    caption={`You may use the 200 shade of text colors on a dark background (#1) or White 50 on 500 shades (#2). However, the 200 shades should never be used as a background color (#3), as they can cause glare in a dark environment.`}\n    regularWidth\n/>\n<ImageGrid\n    images={[DarkThemeElevation]}\n    caption={[\n        'In dark theme, you can express surface elevation with:',\n        '1: A different surface color. (Optionally, you may apply a drop shadow to further define the edge.)',\n        '2: Use outlined component style.',\n        '3: However, you should never rely SOLELY on the drop shadow, no matter how dark it is.',\n    ]}\n    regularWidth\n/>\n<Divider />\n\n# Developers\n\n## Angular and Ionic\n\nAngular themes are available from our @pxblue/angular-themes package, which is a collection of SCSS stylesheets that are imported into your application and applied via classes (`pxb-blue` or `pxb-dark`) to both PX Blue components and Angular Material components.\n\n-   @pxblue/angular-themes: [NPM](https://www.npmjs.com/package/@pxblue/angular-themes), [GitHub](https://github.com/pxblue/angular-themes/tree/master)\n-   [Theming Guide](https://material.angular.io/guide/theming) on Angular Material\n\nIf you are using Ionic for hybrid application development, you can utilize our Angular themes as well. See [our Ionic getting started guide](/development/frameworks-mobile/ionic).\n\n## React\n\nReact themes are available from our @pxblue/react-themes package, which contains JSON objects that are consumed by the theme mechanism for Material UI components (`<ThemeProvider />`), including some specific styling rules defined in [JSS](https://material-ui.com/customization/css-in-js/).\n\n-   @pxblue/react-themes: [NPM](https://www.npmjs.com/package/@pxblue/react-themes), [GitHub](https://github.com/pxblue/react-themes/tree/master)\n-   [Theming Guide](https://material-ui.com/customization/themes/) on Material-UI\n\n## React Native\n\nReact Native themes are available from our @pxblue/react-themes package, which utilize React Native Paper's theming mechanism. This package contains two separate dark themes which must be applied to different components to achieve the correct appearance (see the package readme for details).\n\n-   @pxblue/react-native-themes: [NPM](https://www.npmjs.com/package/@pxblue/react-native-themes), [GitHub](https://github.com/pxblue/react-native-themes/tree/master)\n-   [Theming Guide](https://callstack.github.io/react-native-paper/theming.html) on React Native Paper\n\n## Color Palette\n\nAll of the [PX Blue colors](/style/color) are available individually ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors)) for use in your application. However, in most cases, you should use values from the themes to alter styles for better future-proofing.\n"
+        "text": "import { ImageGrid, DemoCard, MaterialDesignDescription, Divider, ThemeExplorer, TOC } from '../../app/components';\n\nimport LightThemeColors from '../../app/assets/styles/themes/light-theme-colors.png';\nimport DarkThemeColors from '../../app/assets/styles/themes/dark-theme-colors.png';\nimport LightThemeExample from '../../app/assets/styles/themes/light-theme-example.png';\nimport DarkThemeExample from '../../app/assets/styles/themes/dark-theme-example.png';\nimport OutlinedAndFlat from '../../app/assets/styles/themes/outlined-and-flat.png';\nimport DarkThemeElevation from '../../app/assets/styles/themes/dark-theme-elevation.png';\n\n<!-- KEYWORDS: design style theme light dark mode -->\n\n# Themes\n\nOne of the key benefits of PX Blue is the consistent look & feel between different applications. This is achieved primarily through the use of PX Blue themes. PX Blue offers two themes: a light theme (blue) and a dark theme (blueDark).\n\n<MaterialDesignDescription\n    title={'Material Theming Overview'}\n    description={`Material Design's brief introduction to theming.`}\n    url={'https://material.io/design/material-theming/overview.html#'}\n/>\n<MaterialDesignDescription\n    title={'Dark Theme'}\n    url={'https://material.io/design/color/dark-theme.html'}\n    description={`Material Design's dark theme guide.`}\n    style={{ marginRight: 0 }}\n/>\n\nBoth themes inherit from Material Design's baseline theme and expand upon it with PX Blue specific styles. The major differences between PX Blue themes and the baseline Material theme are the color palettes and [typographies](/style/typography).\n\n<TOC\n    anchors={[\n        { title: 'Introduction', hash: '#themes' },\n        { title: 'Blue Theme / Light Theme', hash: '#blue-theme--light-theme' },\n        { title: 'Dark Theme / Blue Dark Theme', hash: '#dark-theme--blue-dark-theme' },\n        { title: 'Developers', hash: '#developers' },\n    ]}\n/>\n\n## Explore Our Themes\n\nHave a look at the component theme explorer below and learn how PX Blue themes work at a high level. Here we showcase some of the most representative components from Material Design and PX Blue, and how our themes affect them.\n\n<ThemeExplorer />\n\nYou are also encouraged to explore our more detailed theme examples where you can modify the code and see the effects in real-time.\n\n<React.Fragment>\n    <DemoCard\n        repository={'showcase-demo'}\n        angular={`https://stackblitz.com/github/pxblue/angular-showcase-demo/tree/master`}\n        react={`https://codesandbox.io/s/github/pxblue/react-showcase-demo/tree/master`}\n    />\n    <Divider />\n</React.Fragment>\n\n# Blue Theme / Light Theme\n\n<ImageGrid images={[LightThemeExample]} regularWidth caption={'An example of an application using the light theme.'} />\n\nThe blue theme is the default theme for all PX Blue applications. With a clean color vibrance and high text legibility, it is well-suited for everyday use on a computer monitor, on-site facility inspection on a tablet, or on a mobile phone screen.\n\nThe light theme uses our iconic [Blue 500](/style/color) color (`#007bc1`) throughout the application, notably in toolbars, buttons, and icons. In some places, Light Blue 500 is applied as a secondary color on interactive UI elements such as form controls. The light theme's base background color is White 200, although the surface elements are often shaded in White 50 (pure white).\n\n<ImageGrid images={[LightThemeColors]} regularWidth />\n<Divider />\n\n# Dark Theme / Blue Dark Theme\n\n<ImageGrid images={[DarkThemeExample]} regularWidth caption={'An example of an application using the dark theme.'} />\n\nThe dark theme is intended primarily for applications used in low-light conditions. As the name indicates, it utilizes mostly dark colors (grays and blacks). Other colors are typically reserved for interactive components and status displays.\n\n<ImageGrid images={[DarkThemeColors]} regularWidth />\n\nTo accommodate for [accessibility requirements](/design/accessibility), PX Blue uses the 200 shade of colors when text is used on a dark background, such as in an outlined button and a text field label. For \"contained\" elements, such as in an elevated / contained button, the same style is used as in the light theme (500 shades).\n\n<ImageGrid\n    images={[OutlinedAndFlat]}\n    caption={`You may use the 200 shade of text colors on a dark background (#1) or White 50 on 500 shades (#2). However, the 200 shades should never be used as a background color (#3), as they can cause glare in a dark environment.`}\n    regularWidth\n/>\n<ImageGrid\n    images={[DarkThemeElevation]}\n    caption={[\n        'In dark theme, you can express surface elevation with:',\n        '1: A different surface color. (Optionally, you may apply a drop shadow to further define the edge.)',\n        '2: Use outlined component style.',\n        '3: However, you should never rely SOLELY on the drop shadow, no matter how dark it is.',\n    ]}\n    regularWidth\n/>\n<Divider />\n\n# Developers\n\n## Angular and Ionic\n\nAngular themes are available from our @pxblue/angular-themes package, which is a collection of SCSS stylesheets that are imported into your application and applied via classes (`pxb-blue` or `pxb-dark`) to both PX Blue components and Angular Material components.\n\n-   @pxblue/angular-themes: [NPM](https://www.npmjs.com/package/@pxblue/angular-themes), [GitHub](https://github.com/pxblue/angular-themes/tree/master)\n-   [Theming Guide](https://material.angular.io/guide/theming) on Angular Material\n\nIf you are using Ionic for hybrid application development, you can utilize our Angular themes as well. See [our Ionic getting started guide](/development/frameworks-mobile/ionic).\n\n## React\n\nReact themes are available from our @pxblue/react-themes package, which contains JSON objects that are consumed by the theme mechanism for Material UI components (`<ThemeProvider />`), including some specific styling rules defined in [JSS](https://material-ui.com/styles/advanced/#jss-plugins).\n\n-   @pxblue/react-themes: [NPM](https://www.npmjs.com/package/@pxblue/react-themes), [GitHub](https://github.com/pxblue/react-themes/tree/master)\n-   [Theming Guide](https://material-ui.com/customization/theming/) on Material-UI\n\n## React Native\n\nReact Native themes are available from our @pxblue/react-themes package, which utilize React Native Paper's theming mechanism. This package contains two separate dark themes which must be applied to different components to achieve the correct appearance (see the package readme for details).\n\n-   @pxblue/react-native-themes: [NPM](https://www.npmjs.com/package/@pxblue/react-native-themes), [GitHub](https://github.com/pxblue/react-native-themes/tree/master)\n-   [Theming Guide](https://callstack.github.io/react-native-paper/theming.html) on React Native Paper\n\n## Color Palette\n\nAll of the [PX Blue colors](/style/color) are available individually ([@pxblue/colors](https://www.npmjs.com/package/@pxblue/colors)) for use in your application. However, in most cases, you should use values from the themes to alter styles for better future-proofing.\n"
     },
     "/community": { "title": "Community" },
     "/community/license": {
diff --git a/src/docs/style/themes.mdx b/src/docs/style/themes.mdx
index 00142eeb7..1c0c2bf79 100644
--- a/src/docs/style/themes.mdx
+++ b/src/docs/style/themes.mdx
@@ -104,10 +104,10 @@ If you are using Ionic for hybrid application development, you can utilize our A
 
 ## React
 
-React themes are available from our @pxblue/react-themes package, which contains JSON objects that are consumed by the theme mechanism for Material UI components (`<ThemeProvider />`), including some specific styling rules defined in [JSS](https://material-ui.com/customization/css-in-js/).
+React themes are available from our @pxblue/react-themes package, which contains JSON objects that are consumed by the theme mechanism for Material UI components (`<ThemeProvider />`), including some specific styling rules defined in [JSS](https://material-ui.com/styles/advanced/#jss-plugins).
 
 -   @pxblue/react-themes: [NPM](https://www.npmjs.com/package/@pxblue/react-themes), [GitHub](https://github.com/pxblue/react-themes/tree/master)
--   [Theming Guide](https://material-ui.com/customization/themes/) on Material-UI
+-   [Theming Guide](https://material-ui.com/customization/theming/) on Material-UI
 
 ## React Native
 
diff --git a/yarn.lock b/yarn.lock
index faff3fe1f..601f4ab4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2457,10 +2457,10 @@
   optionalDependencies:
     eslint-plugin-react "^7.16.0"
 
-"@pxblue/icons-mui@^2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@pxblue/icons-mui/-/icons-mui-2.3.0.tgz#5398630529e5a89b2c93d13db7ccf86f14b8ab51"
-  integrity sha512-GzqkkSKFYgaSy1/LITheqI3BSxPthXE6UrCAz5Ubk1btwDajSvw0O5YR3/b4h7p9vfk/fIxSYgztW8H2/1i4Eg==
+"@pxblue/icons-mui@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@pxblue/icons-mui/-/icons-mui-2.5.0.tgz#7949feb83867a98f427dcbce4a6ba5497c6e3ab2"
+  integrity sha512-Yyj4legMXS2C2Gf47cxXsceWHr3U9z1L4JxBGdvtM4TqLz1vqX03ewYVC3bK9V0hx2RrERyqFMfATxjuXMjdAw==
 
 "@pxblue/prettier-config@^1.0.2":
   version "1.0.2"