diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..978b719
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 TJ Holowaychuk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/Readme.md b/Readme.md
new file mode 100644
index 0000000..233dbc9
--- /dev/null
+++ b/Readme.md
@@ -0,0 +1,18 @@
+![Apex Atom monochrome UI](https://dl.dropboxusercontent.com/u/6396913/Apex/Atom/apex-ui-logo.png)
+
+### Installation
+
+```
+$ apm install apex-ui
+```
+
+## Badges
+
+[![](http://apex.sh/images/badge.svg)](https://apex.sh/ping/)
+![](https://img.shields.io/badge/license-MIT-blue.svg)
+
+---
+
+> [tjholowaychuk.com](http://tjholowaychuk.com)  · 
+> GitHub [@tj](https://github.com/tj)  · 
+> Twitter [@tjholowaychuk](https://twitter.com/tjholowaychuk)
diff --git a/index.less b/index.less
new file mode 100644
index 0000000..c6a44eb
--- /dev/null
+++ b/index.less
@@ -0,0 +1,21 @@
+// UI Theme
+// -------------------
+@import "styles/ui-variables";
+@import "styles/helpers";
+
+@import "styles/base";
+@import "styles/buttons";
+@import "styles/editor";
+@import "styles/find-and-replace";
+@import "styles/git";
+@import "styles/key-binding";
+@import "styles/lists";
+@import "styles/panels";
+@import "styles/progress";
+@import "styles/settings-view";
+@import "styles/sites";
+@import "styles/status-bar";
+@import "styles/tabs";
+@import "styles/text";
+@import "styles/tooltips";
+@import "styles/tree-view";
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..c66ce17
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "apex-ui",
+  "theme": "ui",
+  "version": "0.0.1",
+  "description": "Apex monochrome theme UI inspired by iA Writer",
+  "keywords": [
+    "apex",
+    "monochrome",
+    "ui",
+    "ia",
+    "theme",
+    "writer"
+  ],
+  "repository": "https://github.com/apex/apex-ui",
+  "license": "MIT",
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  }
+}
diff --git a/styles/base.less b/styles/base.less
new file mode 100644
index 0000000..0414626
--- /dev/null
+++ b/styles/base.less
@@ -0,0 +1,66 @@
+// Base
+// -------------------
+// Used for global styles
+// Or to override certain Atom core styles
+// -------------------
+body {
+    font-size: @font-size;
+    color: @text-color;
+    background-color: @app-background-color;
+}
+
+atom-pane {
+    border-right: 1px solid @base-border-color;
+
+    &:last-child {
+        border-right: none;
+    }
+}
+
+atom-pane-container atom-pane .item-views > * {
+    top: 5px;
+    bottom: 5px;
+}
+
+// Icons -----------------------------------------
+.icon {
+    &::before {
+        position: relative;
+        top: 1px;
+    }
+}
+
+// Scrollbars ------------------------------------
+.scrollbars-visible-always {
+	/deep/ ::-webkit-scrollbar {
+		width: 5px;
+		height: 5px;
+	}
+
+	/deep/ ::-webkit-scrollbar-track {
+
+	}
+
+	/deep/ ::-webkit-scrollbar-thumb {
+		border-radius: 5px;
+		border: 2px solid transparent;
+		background: @base-border-color;
+		background-clip: content-box;
+	}
+
+	/deep/ ::-webkit-scrollbar-corner {
+
+	}
+
+	/deep/ ::-webkit-scrollbar-thumb:vertical:active {
+		border-radius: 0;
+		border-left-width: 0;
+		border-right-width: 0;
+	}
+
+	/deep/ ::-webkit-scrollbar-thumb:horizontal:active {
+		border-radius: 0;
+		border-top-width: 0;
+		border-bottom-width: 0;
+	}
+}
diff --git a/styles/buttons.less b/styles/buttons.less
new file mode 100644
index 0000000..3e49fad
--- /dev/null
+++ b/styles/buttons.less
@@ -0,0 +1,87 @@
+// Buttons
+// -------------------
+// Overrides: atom/atom/static/buttons.less
+.btn {
+    color: lighten(@text-color, 6%);
+    background-color: @button-background-color;
+
+    &:focus,
+    &:hover {
+        color: @text-color-highlight;
+        background-color: @button-background-color-hover;
+    }
+
+    &:active {
+        color: fade(@text-color-selected, 66%);
+        background-color: darken(@button-background-color, 2%);
+    }
+
+    &.selected {
+        color: @text-color-selected;
+        background-color: @button-background-color-selected;
+    }
+
+    &:focus,
+    &:focus:active {
+        outline: none;
+    }
+
+    .icon {
+        &::before {
+            position: relative;
+            top: 1px;
+        }
+    }
+}
+// Colored buttons -----------------------
+.btn.btn-primary {
+    .btn-color(@background-color-success);
+}
+
+.btn.btn-info {
+    .btn-color(@background-color-info);
+}
+
+.btn.btn-success {
+    .btn-color(@background-color-success);
+}
+
+.btn.btn-warning {
+    .btn-color(@background-color-warning);
+}
+
+.btn.btn-error {
+    .btn-color(@background-color-error);
+}
+
+.btn-color(@bg) {
+    color: @text-color-selected;
+    background-color: @bg;
+
+    &:focus,
+    &:hover {
+        background-color: lighten(@bg, 4%);
+    }
+
+    &:active {
+        background-color: darken(@bg, 4%);
+    }
+
+    &.selected {
+        background-color: lighten(@bg, 4%);
+    }
+
+    &.selected:focus,
+    &.selected:hover {
+        background-color: lighten(@bg, 8%);
+    }
+}
+// Button Group -----------------------
+.btn-group > .btn {
+    .transition-03;
+    border-color: transparent;
+
+    &:hover {
+        background: @base-background-color;
+    }
+}
diff --git a/styles/editor.less b/styles/editor.less
new file mode 100644
index 0000000..b8c7086
--- /dev/null
+++ b/styles/editor.less
@@ -0,0 +1,52 @@
+// Editor
+atom-text-editor, :host {
+  background: @base-background-color;
+}
+
+body {
+  .transition;
+}
+
+// Editor blur
+.is-blurred {
+  -webkit-filter: grayscale();
+}
+
+// Mini Editor
+// -------------------
+// Mini Editors are the "text inputs" used in find+replace or in the settings.
+atom-text-editor[mini] {
+    padding-left: 5px;
+    font-size: .9rem;
+    color: @text-color;
+    background-color: @input-background-color;
+    border-bottom: 1px solid transparent;
+
+    &.is-focused {
+      border-bottom: 1px solid @base-border-color;
+      &::shadow {
+        .cursor {
+          display: block;
+        }
+      }
+    }
+    &,// <-- Deprecated. The `&,` can be removed once the Shadow DOM can't be turned off in the settings.
+
+    &::shadow {
+      .placeholder-text {
+        color: @text-color-subtle;
+      }
+
+      .selection .region {
+        background-color: @background-color-selected;
+      }
+
+      .cursor {
+        display: none;
+      }
+    }
+}
+
+atom-pane {
+  padding: @pane-padding;
+}
diff --git a/styles/find-and-replace.less b/styles/find-and-replace.less
new file mode 100644
index 0000000..1cb6a21
--- /dev/null
+++ b/styles/find-and-replace.less
@@ -0,0 +1,10 @@
+
+// Find + Replace
+// -------------------
+
+// Find and replace in the current buffer or across the entire project.
+// Overrides: atom/find-and-replace
+
+.find-and-replace {
+  border-top: 1px solid @base-border-color;
+}
diff --git a/styles/git.less b/styles/git.less
new file mode 100644
index 0000000..76437fa
--- /dev/null
+++ b/styles/git.less
@@ -0,0 +1,12 @@
+
+// Git
+// -------------------
+
+// Used to color git status
+
+.status          { color: @text-color; }
+.status-added    { color: @text-color-success; } // green
+.status-ignored  { color: @text-color-subtle; }  // faded
+.status-modified { color: @text-color-warning; } // orange
+.status-removed  { color: @text-color-error; }   // red
+.status-renamed  { color: @text-color-info; }    // blue
diff --git a/styles/helpers.less b/styles/helpers.less
new file mode 100644
index 0000000..4836215
--- /dev/null
+++ b/styles/helpers.less
@@ -0,0 +1,3 @@
+.transition-03 {
+    transition: 0.3s ease;
+}
\ No newline at end of file
diff --git a/styles/key-binding.less b/styles/key-binding.less
new file mode 100644
index 0000000..5348a23
--- /dev/null
+++ b/styles/key-binding.less
@@ -0,0 +1,19 @@
+
+// Key Binding
+// -------------------
+
+// Styles key-bindings used in a Select List
+// Overrides: Bootstrap's `kbd`.
+
+
+.key-binding {
+  display: inline-block;
+  margin-left: 1px;
+  padding: 0 @component-padding/2;
+  line-height: 2;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  font-size: .8em;
+  letter-spacing: 1px;
+  border-radius: @component-border-radius;
+  background-color: @app-background-color;
+}
diff --git a/styles/lists.less b/styles/lists.less
new file mode 100644
index 0000000..308aaaf
--- /dev/null
+++ b/styles/lists.less
@@ -0,0 +1,114 @@
+
+// Lists
+// -------------------
+
+// Used in different places, like the Tree View, Commmand Palette etc.
+// Overrides: atom/static/lists.less
+
+// List Group -------------------
+.list-group {
+  li {
+    padding-left: @component-padding/2;
+    border-bottom: 1px dotted @base-border-color;
+    color: @text-color-dim;
+    .transition;
+
+    // We want to highlight the background of the list items because we dont know their size.
+    &.selected {
+      color: @text-color-selected;
+      z-index: 15;
+      &:before{ display: none; }
+    }
+  }
+}
+
+
+// List Tree -------------------
+.list-tree {
+  .selected {
+    color: @text-color-selected;
+  }
+}
+
+
+// Select List -------------------
+.select-list {
+  li {
+    padding: @component-padding * .75 @component-padding;
+  }
+  .status {
+    float: right;
+  }
+}
+
+.select-list {
+  .character-match {
+    font-weight: normal !important;
+    border-bottom: 1px solid @oc-blue-3;
+    color: inherit;
+  }
+}
+
+// Popover List -------------------
+// Used as a popover for something like autocomplete.
+autocomplete-suggestion-list.select-list.popover-list {
+  @popover-list-padding: @component-padding/2;
+
+  padding: @popover-list-padding;
+  border-radius: @component-border-radius;
+  background-color: @overlay-background-color;
+  .medium-shadow;
+
+  .suggestion-description {
+    background: transparent;
+    font-size: .9rem;
+  }
+
+  .suggestion-description-content {
+    font-size: .9rem;
+  }
+
+  ol.list-group {
+    margin-top: @popover-list-padding;
+    li {
+      line-height: 2em;
+    }
+  }
+
+  .selected {
+    background: @oc-gray-0;
+    .icon {
+      color: @oc-gray-9;
+    }
+  }
+}
+
+.select-list .selected .secondary-line {
+  color: @text-color-subtle;
+}
+
+.list-group li:not(.list-nested-item) {
+  line-height: 1.8;
+}
+
+autocomplete-suggestion-list {
+  .suggestion-list-scroller {
+    background: white;
+  }
+
+  .left-label {
+    color: @oc-gray-6;
+  }
+
+  .word-container {
+    color: @oc-gray-5;
+  }
+
+  .icon-container {
+    // display: none !important;
+    .icon {
+      background: rgba(255, 255, 255, .5) !important;
+      color: @oc-gray-4;
+    }
+  }
+}
diff --git a/styles/open-color.less b/styles/open-color.less
new file mode 100644
index 0000000..2153f8f
--- /dev/null
+++ b/styles/open-color.less
@@ -0,0 +1,234 @@
+//
+//
+//  𝗖 𝗢 𝗟 𝗢 𝗥
+//  v 1.4.0
+//
+//  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+
+//  General
+//  ───────────────────────────────────
+
+@oc-white:         #ffffff;
+@oc-black:         #171818;
+
+
+//  Gray
+//  ───────────────────────────────────
+
+@oc-gray-list: #f8f9fa, #f1f3f5, #e9ecef, #dee2e6, #ced4da, #adb5bd, #868e96, #495057, #343a40, #212529;
+
+@oc-gray-0: extract(@oc-gray-list, 1);
+@oc-gray-1: extract(@oc-gray-list, 2);
+@oc-gray-2: extract(@oc-gray-list, 3);
+@oc-gray-3: extract(@oc-gray-list, 4);
+@oc-gray-4: extract(@oc-gray-list, 5);
+@oc-gray-5: extract(@oc-gray-list, 6);
+@oc-gray-6: extract(@oc-gray-list, 7);
+@oc-gray-7: extract(@oc-gray-list, 8);
+@oc-gray-8: extract(@oc-gray-list, 9);
+@oc-gray-9: extract(@oc-gray-list, 10);
+
+
+//  Red
+//  ───────────────────────────────────
+
+@oc-red-list: #fff5f5, #ffe3e3, #ffc9c9, #ffa8a8, #ff8787, #ff6b6b, #fa5252, #f03e3e, #e03131, #c92a2a;
+
+@oc-red-0: extract(@oc-red-list, 1);
+@oc-red-1: extract(@oc-red-list, 2);
+@oc-red-2: extract(@oc-red-list, 3);
+@oc-red-3: extract(@oc-red-list, 4);
+@oc-red-4: extract(@oc-red-list, 5);
+@oc-red-5: extract(@oc-red-list, 6);
+@oc-red-6: extract(@oc-red-list, 7);
+@oc-red-7: extract(@oc-red-list, 8);
+@oc-red-8: extract(@oc-red-list, 9);
+@oc-red-9: extract(@oc-red-list, 10);
+
+
+//  Pink
+//  ───────────────────────────────────
+
+@oc-pink-list: #fff0f6, #ffdeeb, #fcc2d7, #faa2c1, #f783ac, #f06595, #e64980, #d6336c, #c2255c, #a61e4d;
+
+@oc-pink-0: extract(@oc-pink-list, 1);
+@oc-pink-1: extract(@oc-pink-list, 2);
+@oc-pink-2: extract(@oc-pink-list, 3);
+@oc-pink-3: extract(@oc-pink-list, 4);
+@oc-pink-4: extract(@oc-pink-list, 5);
+@oc-pink-5: extract(@oc-pink-list, 6);
+@oc-pink-6: extract(@oc-pink-list, 7);
+@oc-pink-7: extract(@oc-pink-list, 8);
+@oc-pink-8: extract(@oc-pink-list, 9);
+@oc-pink-9: extract(@oc-pink-list, 10);
+
+
+//  Grape
+//  ───────────────────────────────────
+
+@oc-grape-list: #f8f0fc, #f3d9fa, #eebefa, #e599f7, #da77f2, #cc5de8, #be4bdb, #ae3ec9, #9c36b5, #862e9c;
+
+@oc-grape-0: extract(@oc-grape-list, 1);
+@oc-grape-1: extract(@oc-grape-list, 2);
+@oc-grape-2: extract(@oc-grape-list, 3);
+@oc-grape-3: extract(@oc-grape-list, 4);
+@oc-grape-4: extract(@oc-grape-list, 5);
+@oc-grape-5: extract(@oc-grape-list, 6);
+@oc-grape-6: extract(@oc-grape-list, 7);
+@oc-grape-7: extract(@oc-grape-list, 8);
+@oc-grape-8: extract(@oc-grape-list, 9);
+@oc-grape-9: extract(@oc-grape-list, 10);
+
+
+//  Violet
+//  ───────────────────────────────────
+
+@oc-violet-list: #f3f0ff, #e5dbff, #d0bfff, #b197fc, #9775fa, #845ef7, #7950f2, #7048e8, #6741d9, #5f3dc4;
+
+@oc-violet-0: extract(@oc-violet-list, 1);
+@oc-violet-1: extract(@oc-violet-list, 2);
+@oc-violet-2: extract(@oc-violet-list, 3);
+@oc-violet-3: extract(@oc-violet-list, 4);
+@oc-violet-4: extract(@oc-violet-list, 5);
+@oc-violet-5: extract(@oc-violet-list, 6);
+@oc-violet-6: extract(@oc-violet-list, 7);
+@oc-violet-7: extract(@oc-violet-list, 8);
+@oc-violet-8: extract(@oc-violet-list, 9);
+@oc-violet-9: extract(@oc-violet-list, 10);
+
+
+//  Indigo
+//  ───────────────────────────────────
+
+@oc-indigo-list: #edf2ff, #dbe4ff, #bac8ff, #91a7ff, #748ffc, #5c7cfa, #4c6ef5, #4263eb, #3b5bdb, #364fc7;
+
+@oc-indigo-0: extract(@oc-indigo-list, 1);
+@oc-indigo-1: extract(@oc-indigo-list, 2);
+@oc-indigo-2: extract(@oc-indigo-list, 3);
+@oc-indigo-3: extract(@oc-indigo-list, 4);
+@oc-indigo-4: extract(@oc-indigo-list, 5);
+@oc-indigo-5: extract(@oc-indigo-list, 6);
+@oc-indigo-6: extract(@oc-indigo-list, 7);
+@oc-indigo-7: extract(@oc-indigo-list, 8);
+@oc-indigo-8: extract(@oc-indigo-list, 9);
+@oc-indigo-9: extract(@oc-indigo-list, 10);
+
+
+//  Blue
+//  ───────────────────────────────────
+
+@oc-blue-list: #e8f7ff, #ccedff, #a3daff, #72c3fc, #4dadf7, #329af0, #228ae6, #1c7cd6, #1b6ec2, #1862ab;
+
+@oc-blue-0: extract(@oc-blue-list, 1);
+@oc-blue-1: extract(@oc-blue-list, 2);
+@oc-blue-2: extract(@oc-blue-list, 3);
+@oc-blue-3: extract(@oc-blue-list, 4);
+@oc-blue-4: extract(@oc-blue-list, 5);
+@oc-blue-5: extract(@oc-blue-list, 6);
+@oc-blue-6: extract(@oc-blue-list, 7);
+@oc-blue-7: extract(@oc-blue-list, 8);
+@oc-blue-8: extract(@oc-blue-list, 9);
+@oc-blue-9: extract(@oc-blue-list, 10);
+
+
+//  Cyan
+//  ───────────────────────────────────
+
+@oc-cyan-list: #e3fafc, #c5f6fa, #99e9f2, #66d9e8, #3bc9db, #22b8cf, #15aabf, #1098ad, #0c8599, #0b7285;
+
+@oc-cyan-0: extract(@oc-cyan-list, 1);
+@oc-cyan-1: extract(@oc-cyan-list, 2);
+@oc-cyan-2: extract(@oc-cyan-list, 3);
+@oc-cyan-3: extract(@oc-cyan-list, 4);
+@oc-cyan-4: extract(@oc-cyan-list, 5);
+@oc-cyan-5: extract(@oc-cyan-list, 6);
+@oc-cyan-6: extract(@oc-cyan-list, 7);
+@oc-cyan-7: extract(@oc-cyan-list, 8);
+@oc-cyan-8: extract(@oc-cyan-list, 9);
+@oc-cyan-9: extract(@oc-cyan-list, 10);
+
+
+//  Teal
+//  ───────────────────────────────────
+
+@oc-teal-list: #e6fcf5, #c3fae8, #96f2d7, #63e6be, #38d9a9, #20c997, #12b886, #0ca678, #099268, #087f5b;
+
+@oc-teal-0: extract(@oc-teal-list, 1);
+@oc-teal-1: extract(@oc-teal-list, 2);
+@oc-teal-2: extract(@oc-teal-list, 3);
+@oc-teal-3: extract(@oc-teal-list, 4);
+@oc-teal-4: extract(@oc-teal-list, 5);
+@oc-teal-5: extract(@oc-teal-list, 6);
+@oc-teal-6: extract(@oc-teal-list, 7);
+@oc-teal-7: extract(@oc-teal-list, 8);
+@oc-teal-8: extract(@oc-teal-list, 9);
+@oc-teal-9: extract(@oc-teal-list, 10);
+
+
+//  Green
+//  ───────────────────────────────────
+
+@oc-green-list: #ebfbee, #d3f9d8, #b2f2bb, #8ce99a, #69db7c, #51cf66, #40c057, #37b24d, #2f9e44, #2b8a3e;
+
+@oc-green-0: extract(@oc-green-list, 1);
+@oc-green-1: extract(@oc-green-list, 2);
+@oc-green-2: extract(@oc-green-list, 3);
+@oc-green-3: extract(@oc-green-list, 4);
+@oc-green-4: extract(@oc-green-list, 5);
+@oc-green-5: extract(@oc-green-list, 6);
+@oc-green-6: extract(@oc-green-list, 7);
+@oc-green-7: extract(@oc-green-list, 8);
+@oc-green-8: extract(@oc-green-list, 9);
+@oc-green-9: extract(@oc-green-list, 10);
+
+
+//  Lime
+//  ───────────────────────────────────
+
+@oc-lime-list: #f4fce3, #e9fac8, #d8f5a2, #c0eb75, #a9e34b, #94d82d, #82c91e, #74b816, #66a80f, #5c940d;
+
+@oc-lime-0: extract(@oc-lime-list, 1);
+@oc-lime-1: extract(@oc-lime-list, 2);
+@oc-lime-2: extract(@oc-lime-list, 3);
+@oc-lime-3: extract(@oc-lime-list, 4);
+@oc-lime-4: extract(@oc-lime-list, 5);
+@oc-lime-5: extract(@oc-lime-list, 6);
+@oc-lime-6: extract(@oc-lime-list, 7);
+@oc-lime-7: extract(@oc-lime-list, 8);
+@oc-lime-8: extract(@oc-lime-list, 9);
+@oc-lime-9: extract(@oc-lime-list, 10);
+
+
+//  Yellow
+//  ───────────────────────────────────
+
+@oc-yellow-list: #fff9db, #fff3bf, #ffec99, #ffe066, #ffd43b, #fcc419, #fab005, #f59f00, #f08c00, #e67700;
+
+@oc-yellow-0: extract(@oc-yellow-list, 1);
+@oc-yellow-1: extract(@oc-yellow-list, 2);
+@oc-yellow-2: extract(@oc-yellow-list, 3);
+@oc-yellow-3: extract(@oc-yellow-list, 4);
+@oc-yellow-4: extract(@oc-yellow-list, 5);
+@oc-yellow-5: extract(@oc-yellow-list, 6);
+@oc-yellow-6: extract(@oc-yellow-list, 7);
+@oc-yellow-7: extract(@oc-yellow-list, 8);
+@oc-yellow-8: extract(@oc-yellow-list, 9);
+@oc-yellow-9: extract(@oc-yellow-list, 10);
+
+
+//  Orange
+//  ───────────────────────────────────
+
+@oc-orange-list: #fff4e6, #ffe8cc, #ffd8a8, #ffc078, #ffa94d, #ff922b, #fd7e14, #f76707, #e8590c, #d9480f;
+
+@oc-orange-0: extract(@oc-orange-list, 1);
+@oc-orange-1: extract(@oc-orange-list, 2);
+@oc-orange-2: extract(@oc-orange-list, 3);
+@oc-orange-3: extract(@oc-orange-list, 4);
+@oc-orange-4: extract(@oc-orange-list, 5);
+@oc-orange-5: extract(@oc-orange-list, 6);
+@oc-orange-6: extract(@oc-orange-list, 7);
+@oc-orange-7: extract(@oc-orange-list, 8);
+@oc-orange-8: extract(@oc-orange-list, 9);
+@oc-orange-9: extract(@oc-orange-list, 10);
diff --git a/styles/panels.less b/styles/panels.less
new file mode 100644
index 0000000..559b0bf
--- /dev/null
+++ b/styles/panels.less
@@ -0,0 +1,42 @@
+// Panels
+// -------------------
+// Overrides: atom/static/panels.less
+.panel-heading {
+    border-bottom: 1px solid @panel-heading-border-color;
+    background-color: @panel-heading-background-color;
+}
+
+.inset-panel {
+    background-color: @inset-panel-background-color;
+
+    .panel-heading {
+        background-color: lighten(@inset-panel-background-color, 4%);
+    }
+}
+
+// Modal -------------------
+// Used on top of the editor, like the Command Palette.
+
+atom-panel.modal {
+  position: absolute;
+  border: 1px solid @overlay-border-color;
+  border-top: none;
+  top: 0;
+  left: 0;
+  margin-left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, .95);
+}
+
+atom-panel.modal > .select-list {
+  min-width: 500px;
+}
+
+.inset-panel {
+  border-radius: 0;
+}
diff --git a/styles/progress.less b/styles/progress.less
new file mode 100644
index 0000000..2e31791
--- /dev/null
+++ b/styles/progress.less
@@ -0,0 +1,26 @@
+
+// Progress
+// -------------------
+
+// The `progress` element is unstyled and defined by the OS.
+// See https://css-tricks.com/html5-progress-element/ in case you want to customize it.
+
+
+// Spinner -------------------
+
+.loading-spinner-large  { .loading-spinner(64px); }
+.loading-spinner-medium { .loading-spinner(48px); }
+.loading-spinner-small  { .loading-spinner(32px); }
+.loading-spinner-tiny   { .loading-spinner(16px); }
+
+.loading-spinner(@size) {
+  display: block;
+  width: @size;
+  height: @size;
+  background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: @size @size;
+  &.inline-block {
+    display: inline-block;
+  }
+}
diff --git a/styles/settings-view.less b/styles/settings-view.less
new file mode 100644
index 0000000..efe4964
--- /dev/null
+++ b/styles/settings-view.less
@@ -0,0 +1,50 @@
+.settings-view {
+    .link {
+        color: @primary-color;
+
+        &:hover {
+            color: @primary-color;
+        }
+    }
+
+    .alert {
+        border: none;
+
+        .alert-info {
+            
+        }
+    }
+
+    .config-menu {
+        background: @base-background-color;
+
+        .panels-menu {
+            li {
+
+                a {
+                    .transition-03;
+                }
+
+                &.active {
+                    a {
+                        background: @background-color-selected;
+                    }
+                }
+
+                &:hover {
+                    background: @background-color-highlight;
+                }
+            }
+        }
+    }
+
+    .package-card {
+        .transition-03;
+        background: @background-color-selected;
+        border: none;
+
+        &:hover {
+            background: @background-color-highlight;
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/sites.less b/styles/sites.less
new file mode 100644
index 0000000..a536538
--- /dev/null
+++ b/styles/sites.less
@@ -0,0 +1,11 @@
+
+// Site Colors
+// -------------------
+
+// Used when a few different/radom colors are needed.
+
+.ui-site-1 { background-color: @ui-site-color-1; }
+.ui-site-2 { background-color: @ui-site-color-2; }
+.ui-site-3 { background-color: @ui-site-color-3; }
+.ui-site-4 { background-color: @ui-site-color-4; }
+.ui-site-5 { background-color: @ui-site-color-5; }
diff --git a/styles/status-bar.less b/styles/status-bar.less
new file mode 100644
index 0000000..7bdd869
--- /dev/null
+++ b/styles/status-bar.less
@@ -0,0 +1,25 @@
+// Status Bar
+// -------------------
+// Located at the bottom.
+// Displays information about the current editor.
+// Overrides: atom/status-bar
+
+.status-bar {
+  font-size: @font-size;
+  color: @text-color;
+  border-top: 1px solid @base-border-color;
+  background-color: @tree-view-background-color;
+}
+
+.footer {
+  transition: opacity 150ms ease-out;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  transition: opacity 150ms ease-out;
+  opacity: 0;
+  &:hover {
+    opacity: 1;
+  }
+}
diff --git a/styles/tabs.less b/styles/tabs.less
new file mode 100644
index 0000000..19df8bf
--- /dev/null
+++ b/styles/tabs.less
@@ -0,0 +1,114 @@
+
+@import "traits.less";
+
+// Pane blur.
+atom-pane:not(.active) {
+  .tab-bar .tab.active {
+    border-top: 1px solid transparent;
+    color: @text-color-subtle;
+  }
+}
+
+// Tabs
+// -------------------
+// Displays selectable tabs above the editor.
+// Overrides: atom/tabs
+
+.tab-bar {
+    background-color: @tab-bar-background-color;
+    border-top: 1px solid @base-border-color;
+    margin: @pane-padding / 2 @pane-padding;
+
+    .title;
+
+    .tab {
+        color: @text-color-subtle;
+        height: @tab-height;
+        line-height: @tab-height;
+        font-size: @font-size;
+        padding-right: 10px;
+        border-top: 1px solid transparent;
+        margin-top: -1px;
+
+        text-transform: uppercase;
+        font-size: 11px;
+
+        transition: all 150ms ease-out;
+
+        &:last-child {
+          border-right: none;
+        }
+
+        .title {
+            // text-align: center;
+
+            .icon {
+                &::before {
+                    font-size: 13px;
+                }
+            }
+        }
+
+        &.active {
+            flex: 1;
+            color: @text-color-selected;
+            border-top: 1px solid @tab-border-color-active;
+            font-weight: bold;
+
+            .title {
+                padding: 0;
+            }
+        }
+        // Modified Icon (the blue circle) -------------------
+
+        &.modified {
+            .title {
+                color: @base-action-color;
+            }
+        }
+
+        &.modified:not(:hover) .close-icon {
+            top: 50%;
+            right: @component-padding + 4px; // 4px -> half of icon size
+            margin-top: -3px;
+            border-color: @text-color-info;
+        }
+
+        &.modified:hover .close-icon {
+            color: currentColor;
+        }
+        // Close Icon (the X) -------------------
+
+        .close-icon {
+            opacity: 0;
+            &::before {
+                text-align: center;
+            }
+
+            &:hover {
+                color: @text-color-selected;
+            }
+        }
+
+        &.active .close-icon:hover {
+            color: @text-color;
+        }
+        // Dragging -------------------
+        // Styles get applied while dragging a tab
+        &.is-dragging {
+            background: darken(@tab-background-color, 10%);
+            border-color: transparent;
+            opacity: 0.5;
+
+            & .close-icon {
+                visibility: hidden;
+            }
+        }
+
+        &:hover {
+            .close-icon {
+                opacity: 1;
+            }
+        }
+    }
+}
diff --git a/styles/text.less b/styles/text.less
new file mode 100644
index 0000000..cb03421
--- /dev/null
+++ b/styles/text.less
@@ -0,0 +1,40 @@
+
+// Text
+// -------------------
+
+.text-smaller {
+  font-size: smaller;
+}
+
+.text-subtle    { color: @text-color-subtle; }
+.text-highlight { color: @text-color-highlight; }
+
+.text-info    { color: @text-color-info; }
+.text-success { color: @text-color-success; }
+.text-warning { color: @text-color-warning; }
+.text-error   { color: @text-color-error; }
+
+
+// Highlights ---------------
+
+.highlight         { .highlight-mixin(@background-color-highlight); }
+.highlight-info    { .highlight-mixin(@background-color-info); }
+.highlight-warning { .highlight-mixin(@background-color-warning); }
+.highlight-error   { .highlight-mixin(@background-color-error); }
+.highlight-success { .highlight-mixin(@background-color-success); }
+
+.highlight-mixin(@color) {
+  padding: 1px 4px;
+  border-radius: @component-border-radius;
+  background-color: @color;
+  color: @text-color-highlight;
+}
+
+
+// Background Message ---------------
+// Shown when no tabs are open.
+
+.background-message {
+  font-weight: bold;
+  color: @text-color-subtle;
+}
diff --git a/styles/tooltips.less b/styles/tooltips.less
new file mode 100644
index 0000000..be17053
--- /dev/null
+++ b/styles/tooltips.less
@@ -0,0 +1,20 @@
+// Tooltips
+// -------------------
+// Overrides: Bootstrap's `.tooltip`.
+.tooltip {
+    .tooltip-inner {
+        line-height: 1;
+        padding: 0.75em;
+        white-space: nowrap;
+        max-width: none;
+        color: #FFF;
+    }
+
+    .keystroke {
+        padding: 0.15em 0.4em;
+        margin: 0 -.3em 0 0.25em;
+        // border-radius: max(2px, @component-border-radius / 2);
+        color: #FFF;
+        background: @background-color-selected;
+    }
+}
diff --git a/styles/traits.less b/styles/traits.less
new file mode 100644
index 0000000..a91aa44
--- /dev/null
+++ b/styles/traits.less
@@ -0,0 +1,21 @@
+.title {
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 1px;
+}
+
+.transition {
+  transition: all 125ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
+}
+
+.small-shadow {
+  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 0 1px 0 rgba(0,0,0,.14)
+}
+
+.medium-shadow {
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,.1), 0 0 1px 0 rgba(0,0,0,.14)
+}
+
+.large-shadow {
+  box-shadow: 0 5px 32px 0 rgba(0,0,0,.1);
+}
diff --git a/styles/tree-view.less b/styles/tree-view.less
new file mode 100644
index 0000000..f219d7e
--- /dev/null
+++ b/styles/tree-view.less
@@ -0,0 +1,21 @@
+// Tree View
+// -------------------
+// Used to explore and open files in the current project.
+// Overrides: atom/tree-view
+.tree-view-resizer {
+    border-top: 1px solid @base-border-color;
+    border-right: 1px solid @base-border-color;
+}
+
+.tree-view {
+    color: @text-color;
+    background-color: @tree-view-background-color;
+
+    .list-item.selected {
+        color: @text-color-selected;
+
+        &::before {
+            background: lighten(@base-background-color, 5%);
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/ui-variables.less b/styles/ui-variables.less
new file mode 100644
index 0000000..285bca6
--- /dev/null
+++ b/styles/ui-variables.less
@@ -0,0 +1,106 @@
+
+// UI Variables
+// -------------------
+
+// These are the official UI variables that every UI theme should define.
+// It allows other packages to match your theme.
+
+// Overrides: atom/static/variables/ui-variables.less
+
+// Try to edit some of the values below to see your theme change.
+// A good start is to change the color of the `@base-background-color` variable.
+
+@import "open-color.less";
+
+@primary-color: @oc-gray-9;
+
+// Editor
+@pane-padding: 25px;
+
+// Text Colors
+@text-color:           @oc-gray-9;
+@text-color-subtle:    @oc-gray-6;
+@text-color-dim:       @oc-gray-5;
+@text-color-highlight: @oc-gray-9;
+@text-color-selected:  @oc-gray-9;
+
+@text-color-info:    @oc-blue-6;
+@text-color-success: @primary-color;
+@text-color-warning: @oc-teal-6;
+@text-color-error:   @oc-red-6;
+
+// Background colors
+@background-color-info:    @oc-blue-6;
+@background-color-success: @primary-color;
+@background-color-warning: @oc-orange-6;
+@background-color-error:   @oc-red-6;
+
+@background-color-highlight: lighten(@base-background-color, 3%);
+@background-color-selected:  lighten(@base-background-color, 5%);
+@app-background-color:       @base-background-color;
+
+// Base colors
+@base-background-color: #fff;
+@base-border-color:     @oc-gray-1;
+@base-action-color:     @primary-color;
+
+// Component colors
+@pane-item-background-color: @base-background-color;
+@pane-item-border-color:     @base-border-color;
+
+@input-background-color: @app-background-color;
+@input-border-color:     @base-border-color;
+
+@tool-panel-background-color: @base-background-color;
+@tool-panel-border-color:     @base-border-color;
+
+@inset-panel-background-color: @base-background-color;
+@inset-panel-border-color:     @base-border-color;
+
+@panel-heading-background-color: @base-background-color;
+@panel-heading-border-color:     @base-border-color;
+
+@overlay-background-color: @base-background-color;
+@overlay-border-color:     @base-border-color;
+
+@button-background-color:          lighten(@base-background-color, 10%);
+@button-background-color-hover:    lighten(@button-background-color, 12%);
+@button-background-color-selected: @button-background-color-hover;
+@button-border-color:              @base-border-color;
+
+@tab-bar-background-color:    @base-background-color;
+@tab-bar-border-color:        @base-border-color;
+@tab-background-color:        @tab-bar-background-color;
+@tab-background-color-active: @tab-bar-background-color;
+@tab-border-color-active:     @oc-gray-9;
+@tab-border-color:            @base-border-color;
+
+@tree-view-background-color: @base-background-color;
+@tree-view-border-color:     @base-border-color;
+
+// Site colors
+@ui-site-color-1: hsl(208, 100%, 50%); // blue
+@ui-site-color-2: hsl(160,  70%, 42%); // green
+@ui-site-color-3: hsl(32,   60%, 50%); // orange
+@ui-site-color-4: #D831B0;             // pink
+@ui-site-color-5: #EBDD5B;             // yellow
+
+// Sizes
+@font-size: 12px;
+@input-font-size: 14px;
+
+@disclosure-arrow-size: 12px;
+
+@component-padding: 10px;
+@component-icon-padding: 5px;
+@component-icon-size: 16px;
+@component-line-height: 25px;
+
+@tab-height: 34px;
+
+// Misc
+@component-border-radius: 2px;
+@font-family: -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;