Distinguish brand color from error color

We don't want our brand to be associated with errors and warnings
by virtue of using the same colors for both.

This clarifies things a bit by choosing a suitable orange red for
the error base.

As an additional touch-up for the colors this adds a function to
do return color "weights" giving color values similar to those in
Google's Material Design color palettes.

h/static/styles/common.scss

@@ -89,7 +89,7 @@ html {
 }
 
 .red {
-  color: $hypothered;
+  color: $brand-color;
 }
 
 .pull-left {

h/static/styles/forms.scss

@@ -102,7 +102,7 @@
 .form-error-list {
   position: relative;
   display: none;
-  background: $hypothered;
+  background: $error-color;
   margin-top: (10 / 13 * 1em);
   padding: (4 / 13 * 1em) (11 / 13 * 1em);
   float: left;
@@ -122,8 +122,8 @@
     width: 0;
     position: absolute;
     pointer-events: none;
-    border-color: rgba($hypothered, 0);
-    border-bottom-color: $hypothered;
+    border-color: rgba($error-color, 0);
+    border-bottom-color: $error-color;
     border-width: 4px;
     margin-left: -4px;
   }
@@ -132,7 +132,7 @@
 .form-error {
   font-size: 13px;
   line-height: 1.5;
-  color: $error-red;
+  color: $error-color;
 }
 
 .form-checkbox-item {
@@ -217,23 +217,23 @@
 }
 
 .btn-danger {
-  @include background(linear-gradient(top, $hypothered, shade($hypothered, 5%)));
+  @include background(linear-gradient(top, $error-color, shade($error-color, 5%)));
   color: white;
-  border-color: shade($hypothered, 15%);
+  border-color: shade($error-color, 15%);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
 
   &:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
     @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
     color: white;
-    background: #e02b3c;
-    border-color: $hypothered;
+    background: tint($error-color, 5%);
+    border-color: $error-color;
   }
 
   &:active, &.js-active {
     @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.3));
     color: white;
-    background: shade($hypothered, 10%);
-    border-color: shade($hypothered, 30%);
+    background: shade($error-color, 10%);
+    border-color: shade($error-color, 30%);
   }
 }
 
@@ -278,7 +278,7 @@
 
 .btn-message-icon {
   display: inline-block;
-  background: $success-green;
+  background: $success-color;
   border-radius: 50%;
   color: #FFF;
   padding: 2px;

h/static/styles/help-page.scss

@@ -119,7 +119,7 @@
     left: 0;
     width: 2.125em;
     height: 1.8125em;
-    border: .125em solid $hypothered;
+    border: .125em solid $brand-color;
     border-radius: 50%;
     text-align: center;
     padding-top: .3125em; // 24px == Line height of text.

h/static/styles/mixins/forms.scss

@@ -26,12 +26,12 @@
 }
 
 @mixin form-input-error {
-  color: $error-red;
-  border-color: $error-red-light;
-  background-color: $error-red-lightest;
+  color: $error-color;
+  border-color: color-weight($error-color, 300);
+  background-color: color-weight($error-color, 100);
 
   @include placeholder {
-    color: $error-red-light;
+    color: tint($error-color, 5%);
   }
 }
 

h/static/styles/variables.scss

@@ -10,19 +10,39 @@ $gray-lighter: #d3d3d3 !default;
 $gray-lightest: #f9f9f9 !default;
 
 //COLORS
-$hypothered: #bd1c2b !default;
-$hypothered-desat: #bd5862 !default;
-
-$error-red: $hypothered-desat !default;
-$error-red-light: #e0b0b0 !default;
-$error-red-lightest: #fff1f3 !default;
+$brand-color: #bd1c2b !default;
 
 $button-text-color: $gray-dark !default;
 $button-background-start: $white !default;
 $button-background-end: #f0f0f0 !default;
 $button-background-gradient: top, $button-background-start, $button-background-end !default;
 
-$success-green: #76B800 !default;
+$error-color: #f0480c !default;
+$success-color: #1cbd41 !default;
+
+@function color-weight($c, $n: 500) {
+  @if $n == 50 {
+    @return tint($c, 85%);
+  } @if $n == 100 {
+    @return tint($c, 70%);
+  } @if $n == 200 {
+    @return tint($c, 50%);
+  } @if $n == 300 {
+    @return tint($c, 30%);
+  } @if $n == 400 {
+    @return tint($c, 15%);
+  } @if $n == 500 {
+    @return $c;
+  } @if $n == 600 {
+    @return shade($c, 15%);
+  } @if $n == 700 {
+    @return shade($c, 30%);
+  } @if $n == 800 {
+    @return shade($c, 50%);
+  } @if $n == 900 {
+    @return shade($c, 85%);
+  }
+}
 
 // Scaffolding
 // -------------------------
@@ -30,8 +50,8 @@ $body-background:        $white !default;
 $text-color:             $gray-dark !default;
 
 //LINKS
-$link-color:             $hypothered-desat !default;
-$link-color-hover:       $hypothered !default;
+$link-color:             $brand-color !default;
+$link-color-hover:       color-weight($brand-color, 700) !default;
 
 // Typography
 // -------------------------