diff --git a/demo/index.html b/demo/index.html
index d57f5e1..06e6370 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,7 +5,7 @@
   <title>flip-clock Demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../flip-clock.html">
-  <style>
+  <style is="custom-style">
     body {
       margin: 0;
       padding: 0;
@@ -43,6 +43,24 @@
       border-radius: 3px;
       padding: 2px 4px;
       color: #333;
+      white-space: pre;
+      text-align: left;
+    }
+
+
+    flip-clock.styled{
+      --digit-color: #FFEB3B;
+      --digit-bg-color: #2196F3;
+      --digit-size: 40px;
+      --digit-box-shadow: none;
+      --clock-digit: {
+        margin-right: 5px;
+      };
+      --digit-divider-color: #eee;
+      --divider-bar: {
+        height: 1px;
+      };
+
     }
   </style>
 </head>
@@ -63,6 +81,27 @@ <h2>Countdown </h2>
     <h2>Countdown without hours</h2>
     <code>&lt;flip-clock display-mode=&quot;countdown&quot; start-from=&quot;20&quot; show-buttons hide-hours&gt;&lt;/flip-clock&gt;</code>
     <flip-clock display-mode="countdown" start-from="20" show-buttons hide-hours></flip-clock>
+
+    <h2>Custom Styling</h2>
+    <code>
+      &lt;style is="custom-style"&gt;
+      flip-clock.styled{
+        --digit-color: #FFEB3B;
+        --digit-bg-color: #2196F3;
+        --digit-size: 40px;
+        --digit-box-shadow: none;
+        --clock-digit: {
+          margin-right: 5px;
+        };
+        --digit-divider-color: #eee;
+        --divider-bar: {
+          height: 1px;
+        };
+      }
+      &lt;/style&gt;
+      &lt;flip-clock class="styled" display-mode="countdown" start-from="20" hide-hours&gt;&lt;/flip-clock&gt;
+    </code>
+    <flip-clock class="styled" display-mode="countdown" start-from="20" hide-hours></flip-clock>
   </div>
 </body>
 </html>
diff --git a/flip-clock.html b/flip-clock.html
index 9aa82ee..d8d7751 100644
--- a/flip-clock.html
+++ b/flip-clock.html
@@ -12,6 +12,20 @@
 
     <flip-clock display-mode="countdown" start-from="20" show-buttons></flip-clock>
 
+### Custom Properties
+The following mixins and custom properties are available to style the clock:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--digit-color` | Text color on the digit | `#fff`
+`--digit-size` | Font size of the digits | `70px`
+`--digit-bg-color` | Text color on the digit | `#fff`
+`--digit-box-shadow` | Box shadow around the digit box | `1px 1px 1px #555`
+`--clock-digit` | Mixin applied to the entire digit | `{}`
+`--digit-divider-color` | Color of the horizontal divider over each digit | `#111`
+`--divider-bar` | Mixin applied to horizontal divider over each digit | `{}`
+
+
 @demo
 @element flip-clock
 @homepage http://Granze.github.io/flip-clock
@@ -27,7 +41,7 @@
     #clock {
       font-family: Arial, Verdana, sans-serif;
       font-weight: bold;
-      font-size: var(--digits-size, 70px);
+      font-size: var(--digit-size, 70px);
     }
     #clock .num {
       position: relative;
@@ -35,9 +49,10 @@
       margin-right: 10px;
       padding: 5px 15px;
       border-radius: 4px;
-      color: var(--digits-color, #fff);
-      box-shadow: var(--box-shadow, 1px 1px 1px #555);
-      background-color: var(--bg-color, #333);
+      color: var(--digit-color, #fff);
+      box-shadow: var(--digit-box-shadow, 1px 1px 1px #555);
+      background-color: var(--digit-bg-color, #333);
+      @apply(--clock-digit);
     }
     #clock .num:after {
       content: '';
@@ -46,7 +61,8 @@
       top: 50%;
       width: 100%;
       height: 3px;
-      background-color: #111;
+      background-color: var(--digit-divider-color, #111);
+      @apply(--divider-bar);
     }
     #clock b {
       color: #333;