diff --git a/_data/colors.yml b/_data/colors.yml
new file mode 100644
index 0000000000..4208ec75ac
--- /dev/null
+++ b/_data/colors.yml
@@ -0,0 +1,26 @@
+- name: blue
+  hex: "#007aff"
+- name: indigo
+  hex: "#2b29bb"
+- name: purple
+  hex: "#882ae0"
+- name: pink
+  hex: "#f14095"
+- name: red
+  hex: "#ea0242"
+- name: orange
+  hex: "#ff8d00"
+- name: yellow
+  hex: "#ffec00"
+- name: green
+  hex: "#34da36"
+- name: teal
+  hex: "#1dde8e"
+- name: cyan
+  hex: "#08eff3"
+- name: white
+  hex: "#fff"
+- name: gray
+  hex: "#464a4c"
+- name: gray-dark
+  hex: "#292b2c"
diff --git a/_data/grays.yml b/_data/grays.yml
new file mode 100644
index 0000000000..bf9750ee9c
--- /dev/null
+++ b/_data/grays.yml
@@ -0,0 +1,18 @@
+- name: 100
+  hex: "#f8f9fa"
+- name: 200
+  hex: "#ebedef"
+- name: 300
+  hex: "#ced3d8"
+- name: 400
+  hex: "#abb3bd"
+- name: 500
+  hex: "#7c8a99"
+- name: 600
+  hex: "#55626f"
+- name: 700
+  hex: "#4a5560"
+- name: 800
+  hex: "#384048"
+- name: 900
+  hex: "#131619"
diff --git a/_data/theme-colors.yml b/_data/theme-colors.yml
new file mode 100644
index 0000000000..25f86c364e
--- /dev/null
+++ b/_data/theme-colors.yml
@@ -0,0 +1,16 @@
+- name: primary
+  hex: "#007aff"
+- name: secondary
+  hex: "#ced4da"
+- name: success
+  hex: "#51cf66"
+- name: info
+  hex: "#38d9a9"
+- name: warning
+  hex: "#ff922b"
+- name: danger
+  hex: "#f03e3e"
+- name: foreground
+  hex: "#343a40"
+- name: background
+  hex: "#fff"
diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
new file mode 100644
index 0000000000..d09d3a2c57
--- /dev/null
+++ b/assets/scss/_colors.scss
@@ -0,0 +1,24 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in $colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
+
+@each $color, $value in $grays {
+  .swatch-#{$color} {
+    background-color: #{$value};
+    @include color-yiq($value);
+  }
+}
diff --git a/assets/scss/docs.scss b/assets/scss/docs.scss
index 0991d5bdf6..6535c0ce11 100644
--- a/assets/scss/docs.scss
+++ b/assets/scss/docs.scss
@@ -10,7 +10,7 @@
 //
 // Background information on nomenclature and architecture decisions here.
 //
-// - Bootstrap variables and mixins are included for easy reuse.
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
 //   Doing so gives us access to the same core utilities provided by Bootstrap.
 //   For example, consistent media queries through those mixins.
 //
@@ -48,6 +48,7 @@
 @import "team";
 @import "browser-bugs";
 @import "brand";
+@import "colors";
 @import "clipboard-js";
 
 // Load docs dependencies