Basic layout and categories nav

app/styles/_colors.scss

@@ -0,0 +1,20 @@
+$dark-grey-1: #2a3743;
+$dark-grey-2: #344453;
+$light-grey-1: #b5c3d1;
+
+#app-container {
+  > aside {
+    background-color: $dark-grey-1;
+    color: $light-grey-1;
+
+    a {
+      color: $light-grey-1;
+      text-decoration: none;
+    }
+  }
+
+  > main {
+    // background-color: $dark-grey-2;
+    background-color: #fff;
+  }
+}

app/styles/_layout.scss

@@ -0,0 +1,46 @@
+* {
+  box-sizing: border-box;
+}
+
+#remotestorage-widget {
+  position: fixed;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+#app-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+
+  > aside {
+    flex: 0 0 16rem;
+    padding: 2rem;
+    overflow: auto;
+
+    nav {
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 0.2rem 0;
+      }
+    }
+  }
+
+  > main {
+    flex: 1;
+    padding: 2rem;
+    overflow: auto;
+  }
+}

app/styles/app.scss

@@ -1,14 +1,12 @@
 @import "bourbon";
+@import "colors";
+@import "layout";
 
 body {
   background-color: white;
   font-size: 16px;
-  font-family: sans-serif;
+  font-family: Open Sans, sans-serif;
   color: #222;
-}
-
-#remotestorage-widget {
-  position: fixed;
-  top: 0.5rem;
-  right: 0.5rem;
+  margin: 0;
+  padding: 0;
 }