diff --git a/dist/_data/data.json b/dist/_data/data.json
index 7253e97..c742212 100644
--- a/dist/_data/data.json
+++ b/dist/_data/data.json
@@ -3,6 +3,88 @@
"name" : "HikeTracker",
"url" : "http://hiketracker.com"
},
+ "brandColors": [
+ {
+ "color": "#5C832F",
+ "title": "$color-brand-green"
+ },
+ {
+ "color": "#3b4a20",
+ "title": "$color-brand-green-dark"
+ }
+ ],
+ "neutralColors": [
+ {
+ "color": "#ffffff",
+ "title": "$color-white"
+ },
+ {
+ "color": "#f7f9f9",
+ "title": "$color-gray-02"
+ },
+ {
+ "color": "#d9d9d9",
+ "title": "$color-gray-15"
+ },
+ {
+ "color": "#a5a5a5",
+ "title": "$color-gray-35"
+ },
+ {
+ "color": "#808080",
+ "title": "$color-gray-50"
+ },
+ {
+ "color": "#595959",
+ "title": "$color-gray-65"
+ },
+ {
+ "color": "#444444",
+ "title": "$color-gray-73"
+ },
+ {
+ "color": "#222222",
+ "title": "$color-gray-87"
+ },
+ {
+ "color": "#000000",
+ "title": "$color-black"
+ },
+ ],
+ "utilityColors": [
+ {
+ "color": "#03804d",
+ "title": "$color-utility-positive"
+ },
+ {
+ "color": "#d4f3e6",
+ "title": "$color-utility-positive-subtle"
+ },
+ {
+ "color": "#a59b15",
+ "title": "$color-utility-caution"
+ },
+ {
+ "color": "#fffecf",
+ "title": "$color-utility-caution-subtle"
+ },
+ {
+ "color": "#b12a0b",
+ "title": "$color-utility-negative"
+ },
+ {
+ "color": "#fdded8",
+ "title": "$color-utility-negative-subtle"
+ },
+ {
+ "color": "#0192d0",
+ "title": "$color-utility-neutral"
+ },
+ {
+ "color": "#d3f2ff",
+ "title": "$color-utility-neutral-subtle"
+ }
+ ],
"title" : "Pattern Lab",
"pageTitle": "Page Title",
"htmlClass": "pl",
diff --git a/dist/_patterns/00-atoms/00-global/00-brand-colors.mustache b/dist/_patterns/00-atoms/00-global/00-brand-colors.mustache
index 97586a8..fdc45e1 100644
--- a/dist/_patterns/00-atoms/00-global/00-brand-colors.mustache
+++ b/dist/_patterns/00-atoms/00-global/00-brand-colors.mustache
@@ -1,16 +1,5 @@
- -
-
-
- $color-brand-green
- #5C832F
-
-
- -
-
-
- $color-brand-green-dark
- #3b4a20
-
-
+ {{# brandColors }}
+ {{> atoms-color-swatch }}
+ {{/ brandColors }}
diff --git a/dist/_patterns/00-atoms/00-global/01-neutral-colors.mustache b/dist/_patterns/00-atoms/00-global/01-neutral-colors.mustache
index 5835577..5b0c094 100644
--- a/dist/_patterns/00-atoms/00-global/01-neutral-colors.mustache
+++ b/dist/_patterns/00-atoms/00-global/01-neutral-colors.mustache
@@ -1,65 +1,5 @@
- -
-
-
- $color-white
- #ffffff
-
-
- -
-
-
- $color-gray-02
- #f7f9f9
-
-
- -
-
-
- $color-gray-15
- #d9d9d9
-
-
- -
-
-
- $color-gray-35
- #a5a5a5
-
-
- -
-
-
- $color-gray-50
- #808080
-
-
- -
-
-
- $color-gray-65
- #595959
-
-
- -
-
-
- $color-gray-73
- #444444
-
-
- -
-
-
- $color-gray-87
- #222222
-
-
- -
-
-
- $color-black
- #000000
-
-
+ {{# neutralColors }}
+ {{> atoms-color-swatch }}
+ {{/ neutralColors }}
diff --git a/dist/_patterns/00-atoms/00-global/02-utility-colors.mustache b/dist/_patterns/00-atoms/00-global/02-utility-colors.mustache
index dae33d2..15bd263 100644
--- a/dist/_patterns/00-atoms/00-global/02-utility-colors.mustache
+++ b/dist/_patterns/00-atoms/00-global/02-utility-colors.mustache
@@ -1,58 +1,5 @@
- -
-
-
- $color-utility-positive
- #03804d
-
-
- -
-
-
- $color-utility-positive-subtle
- #d4f3e6
-
-
- -
-
-
- $color-utility-caution
- #a59b15
-
-
- -
-
-
- $color-utility-caution-subtle
- #fffecf
-
-
- -
-
-
- $color-utility-negative
- #b12a0b
-
-
- -
-
-
- $color-utility-negative-subtle
- #fdded8
-
-
- -
-
-
- $color-utility-neutral
- #0192d0
-
-
- -
-
-
- $color-utility-neutral-subtle
- #d3f2ff
-
-
-
\ No newline at end of file
+ {{# utilityColors }}
+ {{> atoms-color-swatch }}
+ {{/ utilityColors }}
+
diff --git a/dist/_patterns/00-atoms/00-global/_color-swatch.mustache b/dist/_patterns/00-atoms/00-global/_color-swatch.mustache
new file mode 100644
index 0000000..b0616af
--- /dev/null
+++ b/dist/_patterns/00-atoms/00-global/_color-swatch.mustache
@@ -0,0 +1,4 @@
+
+
+ {{ title }}
{{ color }}
+