diff --git a/css/colors.css b/css/colors.css
index bad8df4..0bce04c 100644
--- a/css/colors.css
+++ b/css/colors.css
@@ -1,6 +1,36 @@
 :root {
-    --givewp-givewp-gutenberg-blue: #007cba;
-    --givewp-wp-blue-blue-50: #2271b1;
+    --givewp-red-25: #fff4f2;
+    --givewp-red-50: #ffdfd9;
+    --givewp-red-100: #ffb5a6;
+    --givewp-red-200: #ff8a73;
+    --givewp-red-300: #ff6040;
+    --givewp-red-400: #f2320c;
+    --givewp-red-500: #d92d0b;
+    --givewp-red-600: #a62308;
+    --givewp-red-700: #8c1700;
+    --givewp-red-800: #590f00;
+    --givewp-red-900: #260600;
+    --givewp-orange-50: #ffefd9;
+    --givewp-orange-100: #ffdaa6;
+    --givewp-orange-200: #ffc473;
+    --givewp-orange-300: #f2a63d;
+    --givewp-orange-400: #f29718;
+    --givewp-orange-500: #d98715;
+    --givewp-orange-600: #a66710;
+    --givewp-orange-700: #73480b;
+    --givewp-orange-800: #402806;
+    --givewp-orange-900: #1a0f00;
+    --givewp-yellow-25: #fffdf2;
+    --givewp-yellow-50: #fff9d9;
+    --givewp-yellow-100: #fff0a6;
+    --givewp-yellow-200: #ffe873;
+    --givewp-yellow-300: #ffdf40;
+    --givewp-yellow-400: #f2cc0c;
+    --givewp-yellow-500: #d9b60b;
+    --givewp-yellow-600: #a68c08;
+    --givewp-yellow-700: #8c7607;
+    --givewp-yellow-800: #594b05;
+    --givewp-yellow-900: #262000;
     --givewp-green-25: #f2fff3;
     --givewp-green-50: #e5ffe6;
     --givewp-green-100: #cef2cf;
@@ -12,17 +42,6 @@
     --givewp-green-700: #19661c;
     --givewp-green-800: #0a400b;
     --givewp-green-900: #022603;
-    --givewp-blue-25: #f2f9ff;
-    --givewp-blue-50: #d9ecff;
-    --givewp-blue-100: #a6d2ff;
-    --givewp-blue-200: #73b9ff;
-    --givewp-blue-300: #3d97f2;
-    --givewp-blue-400: #0c7ff2;
-    --givewp-blue-500: #0b72d9;
-    --givewp-blue-600: #0857a6;
-    --givewp-blue-700: #074a8c;
-    --givewp-blue-800: #052f59;
-    --givewp-blue-900: #001326;
     --givewp-emerald-25: #f2fff9;
     --givewp-emerald-50: #d9ffec;
     --givewp-emerald-100: #9df2c8;
@@ -34,62 +53,40 @@
     --givewp-emerald-700: #078c4a;
     --givewp-emerald-800: #05592f;
     --givewp-emerald-900: #002613;
-    --givewp-yellow-25: #fffdf2;
-    --givewp-yellow-50: #fff9d9;
-    --givewp-yellow-100: #fff0a6;
-    --givewp-yellow-200: #ffe873;
-    --givewp-yellow-300: #ffdf40;
-    --givewp-yellow-400: #f2cc0c;
-    --givewp-yellow-500: #d9b60b;
-    --givewp-yellow-600: #a68c08;
-    --givewp-yellow-700: #8c7607;
-    --givewp-yellow-800: #594b05;
-    --givewp-yellow-900: #262000;
-    --givewp-orange-800: #402806;
-    --givewp-orange-900: #1a0f00;
-    --givewp-orange-700: #73480b;
-    --givewp-orange-400: #f29718;
-    --givewp-orange-500: #d98715;
-    --givewp-orange-300: #f2a63d;
-    --givewp-orange-200: #ffc473;
-    --givewp-orange-100: #ffdaa6;
-    --givewp-orange-600: #a66710;
-    --givewp-orange-50: #ffefd9;
-    --givewp-red-800: #590f00;
-    --givewp-orange-25: #fffaf2;
-    --givewp-red-900: #260600;
-    --givewp-red-700: #8c1700;
-    --givewp-red-500: #d92d0b;
-    --givewp-red-400: #f2320c;
-    --givewp-red-300: #ff6040;
-    --givewp-red-200: #ff8a73;
-    --givewp-red-100: #ffb5a6;
-    --givewp-red-600: #a62308;
-    --givewp-red-50: #ffdfd9;
-    --givewp-red-25: #fff4f2;
-    --givewp-grey-900: #0e0e0e;
-    --givewp-grey-800: #262626;
-    --givewp-grey-700: #404040;
-    --givewp-grey-500: #737373;
-    --givewp-grey-400: #8c8c8c;
-    --givewp-grey-300: #a6a6a6;
-    --givewp-grey-200: #bfbfbf;
+    --givewp-blue-25: #f2f9ff;
+    --givewp-blue-50: #d9ecff;
+    --givewp-blue-100: #a6d2ff;
+    --givewp-blue-200: #73b9ff;
+    --givewp-blue-300: #3d97f2;
+    --givewp-blue-400: #0c7ff2;
+    --givewp-blue-500: #0b72d9;
+    --givewp-blue-600: #0857a6;
+    --givewp-blue-700: #074a8c;
+    --givewp-blue-800: #052f59;
+    --givewp-blue-900: #001326;
+    --givewp-purple-25: #f4f2ff;
+    --givewp-purple-50: #beb6f2;
+    --givewp-purple-100: #8c7ee5;
+    --givewp-purple-200: #5f4cd9;
+    --givewp-purple-300: #3a21d9;
+    --givewp-purple-400: #2b13bf;
+    --givewp-purple-500: #2511a6;
+    --givewp-purple-600: #19078c;
+    --givewp-purple-700: #120566;
+    --givewp-purple-800: #090040;
+    --givewp-purple-900: #03001a;
+    --givewp-grey-5: #fafafa;
+    --givewp-grey-25: #f2f2f2;
+    --givewp-grey-50: #e6e6e6;
     --givewp-grey-100: #dadada;
+    --givewp-grey-200: #bfbfbf;
+    --givewp-grey-300: #a6a6a6;
+    --givewp-grey-400: #8c8c8c;
+    --givewp-grey-500: #737373;
     --givewp-grey-600: #595959;
-    --givewp-grey-50: #e6e6e6;
-    --givewp-grey-25: #f2f2f2;
-    --givewp-grey-5: #fafafa;
+    --givewp-grey-700: #404040;
+    --givewp-grey-800: #262626;
+    --givewp-grey-900: #0e0e0e;
     --givewp-shades-white: #fff;
     --givewp-shades-black: #000;
-    --givewp-purple-700: #120566;
-    --givewp-purple-900: #03001a;
-    --givewp-purple-800: #090040;
-    --givewp-purple-500: #2511a6;
-    --givewp-purple-400: #2b13bf;
-    --givewp-purple-600: #19078c;
-    --givewp-purple-300: #3a21d9;
-    --givewp-purple-200: #5f4cd9;
-    --givewp-purple-50: #beb6f2;
-    --givewp-purple-100: #8c7ee5;
-    --givewp-purple-25: #f4f2ff;
 }
diff --git a/css/foundation.css b/css/foundation.css
index f9a6c36..d2bb055 100644
--- a/css/foundation.css
+++ b/css/foundation.css
@@ -1,3 +1,5 @@
 @import "colors.css";
 @import "rounding.css";
 @import "spacing.css";
+@import "typography.css";
+@import "shadows.css";
diff --git a/css/shadows.css b/css/shadows.css
new file mode 100644
index 0000000..5cafdc6
--- /dev/null
+++ b/css/shadows.css
@@ -0,0 +1,29 @@
+:root {
+    --givewp-shadow-xs: 0 1px 2px var(--givewp-grey-50);
+    --givewp-shadow-sm: 0 2px 4px var(--givewp-grey-50);
+    --givewp-shadow-md: 0 4px 8px var(--givewp-grey-50);
+    --givewp-shadow-lg: 0 12px 24px var(--givewp-grey-50);
+    --givewp-shadow-xl: 0 16px 32px var(--givewp-grey-50);
+    --givewp-shadow-inner: inset 0 2px 4px var(--givewp-grey-50);
+
+    --givewp-shadow-xs-green: 0 1px 2px var(--givewp-green-50);
+    --givewp-shadow-sm-green: 0 2px 4px var(--givewp-green-50);
+    --givewp-shadow-md-green: 0 4px 8px var(--givewp-green-50);
+    --givewp-shadow-lg-green: 0 12px 24px var(--givewp-green-50);
+    --givewp-shadow-xl-green: 0 16px 32px var(--givewp-green-50);
+    --givewp-shadow-inner-green: inset 0 2px 4px var(--givewp-green-50);
+
+    --givewp-shadow-xs-blue: 0 1px 2px var(--givewp-blue-50);
+    --givewp-shadow-sm-blue: 0 2px 4px var(--givewp-blue-50);
+    --givewp-shadow-md-blue: 0 4px 8px var(--givewp-blue-50);
+    --givewp-shadow-lg-blue: 0 12px 24px var(--givewp-blue-50);
+    --givewp-shadow-xl-blue: 0 16px 32px var(--givewp-blue-50);
+    --givewp-shadow-inner-blue: inset 0 2px 4px var(--givewp-blue-50);
+
+    --givewp-shadow-xs-orange: 0 1px 2px var(--givewp-orange-50);
+    --givewp-shadow-sm-orange: 0 2px 4px var(--givewp-orange-50);
+    --givewp-shadow-md-orange: 0 4px 8px var(--givewp-orange-50);
+    --givewp-shadow-lg-orange: 0 12px 24px var(--givewp-orange-50);
+    --givewp-shadow-xl-orange: 0 16px 32px var(--givewp-orange-50);
+    --givewp-shadow-inner-orange: inset 0 2px 4px var(--givewp-orange-50);
+}
diff --git a/css/typography.css b/css/typography.css
new file mode 100644
index 0000000..462ac2a
--- /dev/null
+++ b/css/typography.css
@@ -0,0 +1,45 @@
+/**
+ * Use both the font-size and font-weight variables to set the font size and weight of your text:
+ *
+ *  h1.display-xl {
+ *      font-size: var(--givewp-font-size-display-xl);
+ *      font-weight: var(--givewp-font-weight-display-xl);
+ *  }
+ */
+:root {
+    --givewp-font-size-display-xl: 6rem;
+    --givewp-font-weight-display-xl: semi-bold;
+
+    --givewp-font-size-display-lg: 4.5rem;
+    --givewp-font-weight-display-lg: semi-bold;
+
+    --givewp-font-size-heading-xl: 4rem;
+    --givewp-font-weight-heading-xl: bold;
+
+    --givewp-font-size-heading-lg: 2.5rem;
+    --givewp-font-weight-heading-lg: semi-bold;
+
+    --givewp-font-size-heading-md: 2.25rem;
+    --givewp-font-weight-heading-md: semi-bold;
+
+    --givewp-font-size-heading-sm: 1.5rem;
+    --givewp-font-weight-heading-sm: semi-bold;
+
+    --givewp-font-size-headline-lg: 1.25rem;
+    --givewp-font-weight-headline-lg: extra-bold;
+
+    --givewp-font-size-headline-md: 1rem;
+    --givewp-font-weight-headline-md: extra-bold;
+
+    --givewp-font-size-headline-sm: 0.75rem;
+    --givewp-font-weight-headline-sm: extra-bold;
+
+    --givewp-font-size-paragraph-lg: 1rem;
+    --givewp-font-weight-paragraph-lg: medium;
+
+    --givewp-font-size-paragraph-md: 0.75rem;
+    --givewp-font-weight-paragraph-md: medium;
+
+    --givewp-font-size-paragraph-sm: 0.5rem;
+    --givewp-font-weight-paragraph-sm: medium;
+}