diff --git a/assets/aisforms/styles/aisforms-common/pages-help-notes.css b/assets/aisforms/styles/aisforms-common/pages-help-notes.css
new file mode 100644
index 00000000..28b4caa0
--- /dev/null
+++ b/assets/aisforms/styles/aisforms-common/pages-help-notes.css
@@ -0,0 +1,41 @@
+/* HELP NOTES --> */
+
+.HelpNoteDisplay h1 {
+    margin: -1.5rem -1.25rem .5rem;
+    padding: 0.75rem 1.25rem;
+    background: #f1f2f3;
+}
+.HelpNoteDisplay .sub-nav h1 {
+    margin: -1rem -1.25rem .5rem;
+}
+.help-note h2 .title-text {
+    font-size: 1.75rem;
+    margin-right: 1rem;
+}
+.help-note .ui-library {
+    display: flex;
+    padding-top: 1rem;
+}
+.help-note .ui-library-component {
+    flex-basis: 500px;
+    border: 2px solid #C5D4D1;
+    border-radius: 6px;
+}
+.ui-library-component h3 {
+    background: #C5D4D1;
+    padding: .75rem 1rem;
+    border-radius: 4px 4px 0 0;
+    margin: 0;
+}
+.ui-library .component-description {
+    padding: 1rem 1rem 0;
+    background-color: #DDEDEA;
+}
+.ui-library .component-example {
+    padding: 1rem;
+}
+.ui-library-component .availability {
+    font-style: italic;
+    color: #2d443e;
+}
+/* <-- HELP NOTES */
diff --git a/assets/aisforms/styles/aisforms-common/sub-nav-info-bar.css b/assets/aisforms/styles/aisforms-common/sub-nav-info-bar.css
index f9aa5778..f689d9ed 100644
--- a/assets/aisforms/styles/aisforms-common/sub-nav-info-bar.css
+++ b/assets/aisforms/styles/aisforms-common/sub-nav-info-bar.css
@@ -3,7 +3,7 @@
 .sub-nav,
 .info-bar {
   margin: -1.5rem -1.25rem 1rem;
-  padding: .5rem 1rem;
+  padding: .5rem 1.25rem;
 }
 .sub-nav ~ .info-bar {
   margin: -1rem -1.25rem 1rem;
diff --git a/assets/aisforms/styles/aisforms-common/text.css b/assets/aisforms/styles/aisforms-common/text.css
new file mode 100644
index 00000000..48f12d50
--- /dev/null
+++ b/assets/aisforms/styles/aisforms-common/text.css
@@ -0,0 +1,25 @@
+/* TEXT --> */
+
+p {
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+}
+p:last-child {
+  margin: 0;
+  padding-bottom: 1rem;
+}
+}
+h1, h2 {
+  font-weight: normal;
+}
+h1 {
+  font-size: 1.5rem;
+}
+h2 {
+  font-size: 1.25rem;
+}
+
+.text-small {
+  font-size: .875rem;
+}
+/* <-- TEXT */
diff --git a/static/styles/aisformsCommon.css b/static/styles/aisformsCommon.css
index d21a14c8..f5dcd5f9 100644
--- a/static/styles/aisformsCommon.css
+++ b/static/styles/aisformsCommon.css
@@ -4850,6 +4850,48 @@ div.ApplicationTemplateDisplay div.templateContent {
 }
 /* <-- PAGE: USER HOME */
 
+/* HELP NOTES --> */
+
+.HelpNoteDisplay h1 {
+    margin: -1.5rem -1.25rem .5rem;
+    padding: 0.75rem 1.25rem;
+    background: #f1f2f3;
+}
+.HelpNoteDisplay .sub-nav h1 {
+    margin: -1rem -1.25rem .5rem;
+}
+.help-note h2 .title-text {
+    font-size: 1.75rem;
+    margin-right: 1rem;
+}
+.help-note .ui-library {
+    display: flex;
+    padding-top: 1rem;
+}
+.help-note .ui-library-component {
+    flex-basis: 500px;
+    border: 2px solid #C5D4D1;
+    border-radius: 6px;
+}
+.ui-library-component h3 {
+    background: #C5D4D1;
+    padding: .75rem 1rem;
+    border-radius: 4px 4px 0 0;
+    margin: 0;
+}
+.ui-library .component-description {
+    padding: 1rem 1rem 0;
+    background-color: #DDEDEA;
+}
+.ui-library .component-example {
+    padding: 1rem;
+}
+.ui-library-component .availability {
+    font-style: italic;
+    color: #2d443e;
+}
+/* <-- HELP NOTES */
+
 /* PAGES: PROCTORED EXAM --> */
 form.has-unsaved-edits {
   border-left: 3px solid #de463d;
@@ -5082,7 +5124,7 @@ div#build-and-instance {
 .sub-nav,
 .info-bar {
   margin: -1.5rem -1.25rem 1rem;
-  padding: .5rem 1rem;
+  padding: .5rem 1.25rem;
 }
 .sub-nav ~ .info-bar {
   margin: -1rem -1.25rem 1rem;
@@ -5619,3 +5661,29 @@ caption .title {
 
 }
 /* <-- NEW TABLES CSS FOR AFTER MARCO REPLACES ROWDISPLAY WITH ROW-DISPLAY */
+
+/* TEXT --> */
+
+p {
+  margin: 0 0 1rem 0;
+  line-height: 1.5;
+}
+p:last-child {
+  margin: 0;
+  padding-bottom: 1rem;
+}
+}
+h1, h2 {
+  font-weight: normal;
+}
+h1 {
+  font-size: 1.5rem;
+}
+h2 {
+  font-size: 1.25rem;
+}
+
+.text-small {
+  font-size: .875rem;
+}
+/* <-- TEXT */