4 files changed, 23 insertions, 3 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index efa29c5..a93418c 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -6,6 +6,7 @@
 
 include layouts/container.pug
 
+include objects/palette.pug
 include objects/heading.pug
 include objects/divider.pug
 include objects/badge.pug
@@ -51,6 +52,7 @@ mixin user-card(name, hue)
             = avaName
         = name
 
+include views/palette.pug
 include views/heading.pug
 include views/divider.pug
 include views/links.pug
@@ -92,8 +94,9 @@ html
         link(rel="stylesheet" href="style.css")
         script(src="script.js")
 
-    body
+    body.t-l1
         .c-content.l-overflow
+            +view-palette
             +view-heading
             +view-divider
             +view-links
@@ -125,7 +128,7 @@ html
             +view-message
             +view-message-group
 
-        .c-sidebar.l-overflow.u-themed.t-lo.u-p-75
+        .c-sidebar.l-overflow.t-base.u-p-75
             +menu
                 each view in views
                     +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/objects/palette.pug b/tpl/objects/palette.pug
new file mode 100644
index 0000000..77e6e9e
--- /dev/null
+++ b/tpl/objects/palette.pug
@@ -0,0 +1,12 @@
+mixin palette(palette)
+    -
+        let classes = {
+            'o-palette': true,
+        }
+        classes['o-palette--' + palette] = true
+
+        let i = 0, n = palette == 'base' ? 11 : 13
+
+    div(class=classes)
+        while i++ < n
+            .o-palette__item
diff --git a/tpl/views/list.pug b/tpl/views/list.pug
index e3e82bb..ce09b27 100644
--- a/tpl/views/list.pug
+++ b/tpl/views/list.pug
@@ -22,4 +22,4 @@ mixin view-list
                 dt= 'JavaScript'
                 dd= 'A client side scripting language.'
             p= loremIpsum
-</dl>
+
diff --git a/tpl/views/palette.pug b/tpl/views/palette.pug
new file mode 100644
index 0000000..384fe03
--- /dev/null
+++ b/tpl/views/palette.pug
@@ -0,0 +1,5 @@
+mixin view-palette 
+    +view('palette', 'Palettes')
+        each palette in ['base', 'blue', 'purple', 'red', 'green', 'yellow']
+            .c-box
+                +palette(palette)