styleguide tweaks

_src/_assets/styl/_kremalicious/typography.styl

@@ -254,6 +254,10 @@ mark
 sup
     @extend .small
 
+.text-dimmed
+    color: $text-color-light
+
+
 // Quotes
 /////////////////////////////////////
 
@@ -266,8 +270,7 @@ cite
 
 blockquote,
 blockquote > p
-    @extend .italic
-    color: lighten($text-color, 15%)
+    @extend .italic, .text-dimmed
 
 blockquote
     padding-left: 25px

_src/_assets/styl/_kremalicious/variables.styl

@@ -23,17 +23,19 @@ $font-path                   = '/assets/fonts/'
 
 $brand-dark                 = #015565
 $brand-light                = #e7eef4
-$brand-cyan                 = #3a9085
-$brand-grey                 = #56666e
-$brand-grey-light           = lighten($brand-grey, 15%)
+$brand-cyan                 = #43a699
+
+$brand-grey                 = #6b7f88
+$brand-grey-light           = #96a6ad
+$brand-grey-dimmed          = #D8E0E5
 
 
 // Text Colors
 /////////////////////////////////////
 
-$text-color                 = $brand-grey-light
-$text-color-light           = lighten($brand-grey-light, 30%)
-$text-color-dimmed          = lighten($brand-grey-light, 50%)
+$text-color                 = $brand-grey
+$text-color-light           = $brand-grey-light
+$text-color-dimmed          = $brand-grey-dimmed
 
 
 // Typography
@@ -80,7 +82,7 @@ $page-bg                    = $brand-light
 // Links
 /////////////////////////////////////
 
-$link-color                 = lighten($brand-cyan, 10%)
+$link-color                 = $brand-cyan
 $link-color-hover           = lighten($link-color, 15%)
 
 

_src/_assets/styl/_page-styleguide.styl

@@ -0,0 +1,52 @@
+
+//
+// Colors
+//
+.color__swatch
+    padding: $spacer
+    border: 1px solid $brand-grey-dimmed
+    margin-bottom: ($spacer / 3)
+    border-radius: $border-radius-large
+
+.color__name,
+.color__hex
+    @extend .small
+    font-family: $font-family-monospace
+    display: block
+
+// colors
+.brand-dark
+    background: $brand-dark
+
+.brand-light
+    background: $brand-light
+
+.brand-cyan
+    background: $brand-cyan
+
+.brand-grey
+    background: $brand-grey
+
+.brand-grey-light
+    background: $brand-grey-light
+
+.brand-grey-dimmed
+    background: $brand-grey-dimmed
+
+//
+// Fonts
+//
+
+.font__name
+    font-size: 8vw
+
+.font__name--brandon
+    font-family: $headings-font-family
+    line-height: $headings-line-height
+    color: $headings-color
+    font-weight: $headings-font-weight
+
+.font__name--fftisa
+    font-family: $font-family-base
+    color: $text-color
+    font-weight: $font-weight-base

_src/_assets/styl/kremalicious3.styl

@@ -46,8 +46,9 @@
 @import '_kremalicious/tagcloud'
 
 // Pages
-@import 'page-about'
-@import 'page-404'
+@import '_page-about'
+@import '_page-404'
+@import '_page-styleguide'
 
 
 // Print

_src/_data/colors.yml

@@ -0,0 +1,14 @@
+
+- name: brand-dark
+  hex:  '015565'
+- name: brand-light
+  hex:  'e7eef4'
+- name: brand-cyan
+  hex:  '3a9085'
+
+- name: brand-grey
+  hex:  '6b7f88'
+- name: brand-grey-light
+  hex:  '96a6ad'
+- name: brand-grey-dimmed
+  hex:  'D8E0E5'

_src/styleguide.md

@@ -7,6 +7,26 @@ sitemap: false
 
 The main page title of this guide is an `h1` element.
 
+## Colors
+
+<div class="colors grid grid--gutters grid--full grid-small--third">
+    {% for color in site.data.colors %}
+    <div class="color grid__col">
+        <div class="color__swatch {{ color.name }}"></div>
+        <span class="color__name">${{ color.name }}</span>
+        <span class="color__hex">#{{ color.hex }}</span>
+    </div>
+    {% endfor %}
+</div>
+
+## Typography
+
+<div class="fonts">
+    <p class="font__name font__name--brandon">Brandon Grotesque</p>
+    <p class="font__name font__name--fftisa">FF Tisa Sans Pro</p>
+</div>
+
+
 ## Sections
 
 The secondary header above is an `h2` element, which may be used for any form of important page-level header. Consider using an `h2` unless you need a header level of less importance, or as a sub-header to an existing `h2` element.
@@ -34,6 +54,14 @@ The header above is an `h6` element, which may be used for any form of page-leve
 
 All paragraphs are wrapped in `p` tags. Additionally, `p` elements can be wrapped with a `blockquote` element if the `p` element is indeed a quote.
 
+The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.
+
+<p class="text-dimmed">Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.</p>
+
+```html
+<p class="text-dimmed">...</p>
+```
+
 ### Blockquotes
 
 The `blockquote` element represents a section that is being quoted from another source: