diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 4e7f152b1..4c1b284b7 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -45,7 +45,11 @@
                                         Configuration
                                     </a>
                                 </li>
-
+                                <li class="mb-2">
+                                    <a class="{{ $page->active('/color-palette') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/color-palette">
+                                        Color Palette
+                                    </a>
+                                </li>
                                 <li class="mb-2">
                                     <a class="{{ $page->active('/responsive-design') ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/workflow/responsive-design">
                                         Responsive Design
diff --git a/docs/source/workflow/color-palete.md b/docs/source/workflow/color-palete.md
new file mode 100644
index 000000000..eeb7a7a72
--- /dev/null
+++ b/docs/source/workflow/color-palete.md
@@ -0,0 +1,10 @@
+---
+extends: _layouts.markdown
+title: "Color Palette"
+---
+
+# Color Palette
+
+- Explain default color palette
+- Document how to customize your color palette, using regular JS features in your config file to avoid duplication, merging colors, etc.
+- Talk about naming, how it's easy to use color-based names or hierarchy-based names, whatever floats your boat