set PEL design to UI

src/theme/fonts.scss

@@ -0,0 +1,6 @@
+@font-face {
+    font-family: "Grobold";
+    src: url("../theme/fonts/GROBOLD.eot?") format("eot"),
+        url("../theme/fonts/GROBOLD.woff") format("woff"),
+        url("../theme/fonts/GROBOLD.ttf") format("truetype");
+}

src/theme/form.scss

@@ -0,0 +1,10 @@
+@import "./variables";
+
+button {
+    padding: 5px 20px;
+    background-color: $color-orange;
+    border: none;
+    color: $color-white;
+    border-radius: 14px;
+    font-weight: bold;
+}

src/theme/main.scss

@@ -0,0 +1,10 @@
+@import "./variables";
+@import "./fonts";
+@import "./reset";
+@import "./form";
+
+body {
+    padding: 0;
+    font-family: "Helvetica-Light", Helvetica, Arial, sans-serif;
+    background-color: $color-orange;
+}

src/theme/mixins.scss

@@ -0,0 +1,5 @@
+@mixin desktop {
+    @media (min-width: 800px) {
+        @content;
+    }
+}

src/theme/reset.scss

@@ -0,0 +1,7 @@
+body,
+h1,
+div,
+input,
+button {
+    box-sizing: border-box;
+}

src/theme/variables.scss

@@ -1,2 +1,7 @@
-$color-dark-gray: #333;
-$color-white: #eee;
+$color-white: #fff;
+$color-orange: #ea4d0a;
+
+$border-large: 4px solid black;
+$border-thin: 2px solid black;
+
+$font-pel: "Grobold";