diff --git a/docs/button.html b/docs/button.html
index 52687b1e9..e21602d76 100755
--- a/docs/button.html
+++ b/docs/button.html
@@ -24,7 +24,7 @@
 
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="library/waypoints.js" type="text/javascript"></script>
-  <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
 
 </head>
 
diff --git a/docs/form.html b/docs/form.html
index 343bf8c52..355097ae6 100755
--- a/docs/form.html
+++ b/docs/form.html
@@ -27,7 +27,7 @@
 
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="library/waypoints.js" type="text/javascript"></script>
-  <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
 
 </head>
 
@@ -376,6 +376,8 @@
   </div>
 
   <h2>Variations</h2>
+  
+  <h3>Forms</h3>
 
   <h4>Size</h4>
   <p>A form can also be small or large</p>
@@ -421,6 +423,33 @@
     <div class="ui blue submit button">Submit</div>
   </div>
   
+  <h4>Inverted</h4>
+  <p>A form on a dark background may have to invert its color scheme</p>
+  
+  <div style="background-color: #333333; padding: 15px;">
+    <div class="ui inverted form">
+      <div class="ui info block">
+        <div class="header">We had some issues</div>
+        <ul class="list">
+          <li>Please enter your first name</li>
+          <li>Please enter your last name</li>
+        </ul>
+      </div>
+      <div class="two fields">
+        <div class="error field">
+          <label>First Name</label>
+          <input placeholder="First Name" type="text">
+        </div>
+        <div class="field">
+          <label>Last Name</label>
+          <input placeholder="Last Name" type="text">
+        </div>
+      </div>
+      <div class="ui blue submit button">Submit</div>
+    </div>
+  </div>
+  
+  
   <h3>Fields</h3>
   
   <h4>Inline</h4>
@@ -434,6 +463,37 @@
     </div>
   </div>
   
+  <h4>Date</h4>
+  <p>A field can let users know they are for dates</p>
+  <div class="ui form">
+    <div class="date field">
+      <label>Birthday</label>
+      <input type="text" placeholder="Full Name">
+    </div>
+  </div>
+  
+  
+  <h2>Groups</h2>
+  
+  <h4>Field Groups</h4>
+  <p>Fields can exist side by side on groups</p>
+  <div class="ui form">
+    <div class="ui three fields">
+      <div class="field">
+        <label>First name</label>
+        <input type="text" placeholder="First Name">
+      </div>
+      <div class="field">
+        <label>Middle name</label>
+        <input type="text" placeholder="Middle Name">
+      </div>
+      <div class="field">
+        <label>Last name</label>
+        <input type="text" placeholder="Last Name">
+      </div>
+    </div>
+  </div>
+  
 </div>
 </body>
 
diff --git a/docs/javascript/example.js b/docs/javascript/semantic.js
similarity index 97%
rename from docs/javascript/example.js
rename to docs/javascript/semantic.js
index 41bc385a7..6c5bc2322 100755
--- a/docs/javascript/example.js
+++ b/docs/javascript/semantic.js
@@ -1,10 +1,10 @@
 // namespace
-var shape = {
+var semantic = {
   handler: {}
 };
 
 // ready event
-shape.ready = function() {
+semantic.ready = function() {
 
   // selector cache
   var 
@@ -140,5 +140,5 @@ shape.ready = function() {
 
 // attach ready event
 $(document)
-  .ready(shape.ready)
+  .ready(semantic.ready)
 ;
\ No newline at end of file
diff --git a/docs/javascript/shape.js b/docs/javascript/shape.js
index 5b63f7c35..81cae4d58 100755
--- a/docs/javascript/shape.js
+++ b/docs/javascript/shape.js
@@ -1,10 +1,7 @@
-// namespace
-var shape = {
-  handler: {}
-};
+semantic.shape = {};
 
 // ready event
-shape.ready = function() {
+semantic.shape.ready = function() {
 
   // selector cache
   var 
@@ -78,5 +75,5 @@ shape.ready = function() {
 
 // attach ready event
 $(document)
-  .ready(shape.ready)
+  .ready(semantic.shape.ready)
 ;
\ No newline at end of file
diff --git a/docs/module.html b/docs/module.html
index 479187c06..287a75409 100755
--- a/docs/module.html
+++ b/docs/module.html
@@ -21,7 +21,7 @@
 
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="library/waypoints.js" type="text/javascript"></script>
-  <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
 
   </head>
 
diff --git a/docs/shape.html b/docs/shape.html
index bddd546ad..fdc21e344 100755
--- a/docs/shape.html
+++ b/docs/shape.html
@@ -24,7 +24,7 @@
   <script src="library/ace/ace.js" type="text/javascript"></script>
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="library/waypoints.js" type="text/javascript"></script>
-  <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
   <script src="javascript/shape.js" type="text/javascript"></script>
 
 
diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css
index 0e6211278..ab61d6a42 100755
--- a/docs/stylesheets/example.css
+++ b/docs/stylesheets/example.css
@@ -212,6 +212,18 @@ a:hover {
   left: -230px;
   width: 180px;
 }
+#example .peek .panel :nth-child(1) {
+  border-left-color: #00B9F0;
+}
+#example .peek .panel :nth-child(2) {
+  border-left-color: #56BB73;
+}
+#example .peek .panel :nth-child(3) {
+  border-left-color: #EF3F49;
+}
+#example .peek .panel :nth-child(4) {
+  border-left-color: #A24096;
+}
 #example .peek .panel {
   width: 180px;
 }
diff --git a/src/modules/ui/colorize.js b/src/modules/behavior/colorize.js
similarity index 100%
rename from src/modules/ui/colorize.js
rename to src/modules/behavior/colorize.js
diff --git a/src/ui/flat/form.css b/src/ui/flat/form.css
index a94b231d2..051427260 100755
--- a/src/ui/flat/form.css
+++ b/src/ui/flat/form.css
@@ -63,15 +63,17 @@
 
 .ui.form textarea,
 .ui.form input[type="text"],
+.ui.form input[type="date"],
 .ui.form input[type="password"],
 .ui.textarea,
 .ui.input {
   width: 100%;
-  padding: 0.5em 0.7em;
+  padding: 0.53em 0.7em;
   font-size: 0.825em;
 
   background-color: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.15);
+  outline: none;
 
   color: #555555;
 
@@ -167,9 +169,11 @@
 }
 .ui.form .fields.error .field textarea,
 .ui.form .fields.error .field input[type="text"],
+.ui.form .fields.error .field input[type="date"],
 .ui.form .fields.error .field input[type="password"],
 .ui.form .field.error textarea,
 .ui.form .field.error input[type="text"],
+.ui.form .field.error input[type="date"],
 .ui.form .field.error input[type="password"] {
   background-color: #FFFAFA;
   border-color: rgba(255, 80, 80, 0.7);
@@ -187,10 +191,10 @@
 
 /* browsers require these rules separate */
 .ui.form ::-webkit-input-placeholder {
-  color: #CCCCCC;
+  color: #E0E0E0;
 }
 .ui.form ::-moz-placeholder {
-  color: #CCCCCC;
+  color: #E0E0E0;
 }
 .ui.form :focus::-webkit-input-placeholder {
   color: #AAAAAA;
@@ -200,7 +204,7 @@
 }
 .ui.form textarea.empty,
 .ui.form input.empty {
-  color: #CCCCCC;
+  color: #E0E0E0;
 }
 
 /* Error Placeholder */
@@ -285,47 +289,26 @@
 }
 .ui.form .date.field > label:after {
   position: absolute;
-  top: 22px;
-  right: 10px;
+  top: 1.2em;
+  right: 0.4em;
 
   font-family: 'Icons';
   content: '📅'; /* '\1f4c5' */
-  font-size: 20px;
+  font-size: 1.5em;
   font-weight: normal;
   color: #CCCCCC;
 }
 
-.ui.large.form .date.field > label:after {
-  top: 29px;
-  font-size: 24px;
-}
 
 /*--------------------
-    Higher Contrast
+    Inverted Colors
 ---------------------*/
-.ui.contrasting.form label {
+.ui.inverted.form label {
   color: #FFFFFF;
 }
-.ui.contrasting.form .field.error textarea,
-.ui.contrasting.form .field.error input[type="text"] {
-  background-color: #FFAAAA;
-  border-color: #FF3333;
-  color: #AA5555;
-}
-.ui.contrasting.form .field.error label {
-  color: #FF3333;
-}
-.ui.contrasting.form .notices,
-.ui.contrasting.form .errors {
-  border-color: #FF3333;
-  background-image: -webkit-linear-gradient(top , #F36666 0px, #E14242 100%);
-  background-image: -moz-linear-gradient(top , #F36666 0px, #E14242 100%);
-  background-image: -o-linear-gradient(top , #F36666 0px, #E14242 100%);
-  background-image: -ms-linear-gradient(top , #F36666 0px, #E14242 100%);
-  background-image: linear-gradient(top , #F36666 0px, #E14242 100%);
-
-  color: #FFFFFF;
-  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
+.ui.inverted.form .field.error textarea,
+.ui.inverted.form .field.error input[type="text"] {
+  background-color: #FFCCCC;
 }
 
 /*--------------------
@@ -443,7 +426,3 @@
   font-weight: bold;
 }
 
-
-/*--------------------
-    Error Messages
----------------------*/
diff --git a/src/ui/images/throbber-large.gif b/src/ui/images/throbber-large.gif
index 965fcbcd8..519621ccd 100755
Binary files a/src/ui/images/throbber-large.gif and b/src/ui/images/throbber-large.gif differ