Fab icons use the palette colors now

app/styleguide/button/_button.scss

@@ -37,7 +37,6 @@ $disabled-btn-text-color: nth($disabledPalette, 5);
   color     : $colored-btn-text-color;
 }
 .ripple {
-  -webkit-transform: translate(-50%, -50%);
   background       : $ripple-bg-color;
   border-radius    : 50%;
   height           : 50px;
@@ -48,9 +47,9 @@ $disabled-btn-text-color: nth($disabledPalette, 5);
   top              : 0;
   transform        : translate(-50%, -50%);
   width            : 50px;
+  overflow: hidden;
 }
 .ripple.animate {
-  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.6s cubic-bezier(0.0, 0.0, 0.2, 1);
   transition        : transform 0.6s cubic-bezier(0.0, 0.0, 0.2, 1), opacity 0.6s cubic-bezier(0.0, 0.0, 0.2, 1);
 }
 .paper-button.colored.ripple {

app/styleguide/fab/_fab.scss

@@ -1,13 +1,16 @@
+@import "../palette/palette";
 
-$fabBackgroundColor: #ff4081;
+$fabBackgroundColor: nth($accentPalette, 12);
+$fabHoverBackgroundColor: nth($accentPalette, 14);
+$fabIconColor: black;
+$fabColoredIconColor: white;
 $fabWidth: 56px;
 $fabHeight: 56px;
 $fabFontSize: 24px;
 
 .paper-fab {
-  border          : none;
   border-radius   : 50%;
-  color           : black;
+  color           : $fabIconColor;
   font-size       : $fabFontSize;
   height          : $fabHeight;
   margin          : auto;
@@ -19,11 +22,11 @@ $fabFontSize: 24px;
 
 .paper-fab.colored {
   background-color: $fabBackgroundColor;
-  color: white;
+  color: $fabColoredIconColor;
 }
 
 .paper-fab.colored:hover {
-  background-color: purple;
+  background-color: $fabHoverBackgroundColor !important;
 }
 
 .paper-fab.small {

app/styleguide/palette/_palette.scss

@@ -67,5 +67,6 @@ $paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c
 
 /* ==========  Used Palettes  ========== */
 $primaryPalette: $paletteBlue;
+$accentPalette: $palettePink;
 $secondaryPalette: $paletteGrey;
 $disabledPalette: $paletteGrey;