diff --git a/docs/foundations/color/index.md b/docs/foundations/color/index.md
index f7cee320b0..fd727f7f1c 100644
--- a/docs/foundations/color/index.md
+++ b/docs/foundations/color/index.md
@@ -12,8 +12,36 @@ subnav:
collection: sortedColor
order: 1
permalink: /foundations/color/index.html
-
+crayons:
+ - red
+ - red-orange
+ - orange
+ - yellow
+ - green
+ - teal
+ - blue
+ - purple
+ - gray
---
+
## Introduction
@@ -58,7 +86,27 @@ Our design system includes multiple sets of colors known as **"crayon" colors**.
-
+## Color tokens
+
+Read more about our colour tokens on the [tokens page](/tokens/).
+
+
+{%- for crayon in crayons -%}
+
+
{{ crayon | title }}
+
+ {%- for _, token in tokens.color[crayon] -%}
+ {%- if token.$value and not r/-(rgb|hsl)$/.test(token.name) -%}
+ -
+ {{ token.name }}
+
+ {%- endif -%}
+ {%- endfor -%}
+
+
+{%- endfor -%}
+
Foundations