Replace Lato font with 'Clear Sans'

src/components/app/app.scss

@@ -4,14 +4,14 @@
 @import "compass/css3/user-interface";
 
 :host {
-    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: "Clear Sans", sans-serif;
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     margin: auto;
-    font-weight: $font-weight-default;
+    font-weight: $font-weight-regular;
     font-size: $font-size-default;
     color: $text-color;
     -webkit-tap-highlight-color: transparent;
@@ -82,21 +82,17 @@ button {
     line-height: $row-height;
     padding: 0 15px;
     cursor: pointer;
-    // color: darken($color-primary, 0.3);
     color: $color-primary;
-    // font-weight: $font-weight-bold;
 }
 
 button.primary {
     background: $color-primary;
     color: $text-color-light;
-    font-weight: $font-weight-bold;
 }
 
 button.negative {
     background: $color-negative;
     color: $text-color-light;
-    font-weight: $font-weight-bold;
 }
 
 input {

src/components/header/header.scss

@@ -85,7 +85,7 @@
 }
 
 .middle > * {
-    $line-height: 20px;
+    $line-height: 22px;
     display: block;
     position: absolute;
     top: 0;

src/components/lock-view/lock-view.scss

@@ -16,8 +16,8 @@
 
 .header {
     font-size: 50px;
-    font-weight: 300;
-    padding: 40px;
+    font-weight: $font-weight-thin;
+    padding: 35px;
     color: $color-primary;
 }
 

src/config.scss

@@ -1,5 +1,7 @@
 $font-size-default: 18px;
-$font-weight-default: 400;
+$font-weight-thin: 100;
+$font-weight-light: 300;
+$font-weight-regular: 400;
 $font-weight-bold: 700;
 
 $text-color: #333;
@@ -16,7 +18,7 @@ $color-primary: $color-blue;
 $color-negative: red;
 
 $placeholder-color: rgba(0, 0, 0, 0.3);
-$placeholder-color-light: rgba(255, 255, 255, 0.5);
+$placeholder-color-light: rgba(255, 255, 255, 0.6);
 
 $border-color: rgba(0, 0, 0, 0.2);
 $border-color-light: rgba(255, 255, 255, 0.5);

src/fonts.css

@@ -1,18 +1,24 @@
 @font-face {
-  font-family: 'Lato';
+  font-family: 'Clear Sans';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Clear Sans Thin'), local('ClearSans-Thin'), url(../assets/fonts/ClearSans-Thin.woff) format('woff');
+}
+@font-face {
+  font-family: 'Clear Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Lato Light'), local('Lato-Light'), url(../assets/fonts/Lato-Light.ttf) format('truetype');
+  src: local('Clear Sans Light'), local('ClearSans-Light'), url(../assets/fonts/ClearSans-Light.woff) format('woff');
 }
 @font-face {
-  font-family: 'Lato';
+  font-family: 'Clear Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Lato Regular'), local('Lato-Regular'),  url(../assets/fonts/Lato-Regular.ttf) format('truetype');
+  src: local('Clear Sans Regular'), local('ClearSans-Regular'), url(../assets/fonts/ClearSans-Regular.woff) format('woff');
 }
 @font-face {
-  font-family: 'Lato';
+  font-family: 'Clear Sans';
   font-style: normal;
   font-weight: 700;
-  src: local('Lato Bold'), local('Lato-Bold'),  url(../assets/fonts/Lato-Bold.ttf) format('truetype');
+  src: local('Clear Sans Bold'), local('ClearSans-Bold'), url(../assets/fonts/ClearSans-Bold.woff) format('woff');
 }