diff --git a/src/components/Anchor/Anchor.js b/src/components/Anchor/Anchor.js
index 57bdd71..3eb7c99 100644
--- a/src/components/Anchor/Anchor.js
+++ b/src/components/Anchor/Anchor.js
@@ -2,7 +2,7 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { fontSizes } from "../common/theme.variables";
+import { fontSizes } from "../common/system";
 
 const StyledAnchor = styled.a`
   color: ${({ theme }) => theme.anchor};
diff --git a/src/components/Bar/Bar.js b/src/components/Bar/Bar.js
index c2ca87d..0f47dc8 100644
--- a/src/components/Bar/Bar.js
+++ b/src/components/Bar/Bar.js
@@ -1,7 +1,7 @@
 import React from "react";
 import propTypes from "prop-types";
 import styled from "styled-components";
-import { blockSizes } from "../common/theme.variables";
+import { blockSizes } from "../common/system";
 
 const StyledBar = styled.div`
   display: inline-block;
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 141b46a..76f3948 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -7,7 +7,7 @@ import {
   createBoxStyles,
   createDisabledTextStyles
 } from "../common";
-import { blockSizes, fontSizes, padding } from "../common/theme.variables";
+import { blockSizes, fontSizes, padding } from "../common/system";
 
 const StyledButton = styled.button`
   ${createBoxStyles()};
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index b3a1f1f..23ae62c 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
 
 import styled, { css } from "styled-components";
 import { StyledCutout, createDisabledTextStyles, insetShadow } from "../common";
-import { padding, fontSizes } from "../common/theme.variables";
+import { padding, fontSizes } from "../common/system";
 
 const StyledLabel = styled.label`
   display: block;
diff --git a/src/components/Fieldset/Fieldset.js b/src/components/Fieldset/Fieldset.js
index cb254b8..f4522b2 100644
--- a/src/components/Fieldset/Fieldset.js
+++ b/src/components/Fieldset/Fieldset.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { createDisabledTextStyles } from "../common";
-import { fontSizes, padding } from "../common/theme.variables";
+import { fontSizes, padding } from "../common/system";
 
 const StyledFieldset = styled.fieldset`
   position: relative;
diff --git a/src/components/InputBase/InputBase.js b/src/components/InputBase/InputBase.js
index fca7ada..5e1502a 100644
--- a/src/components/InputBase/InputBase.js
+++ b/src/components/InputBase/InputBase.js
@@ -4,7 +4,7 @@ import propTypes from "prop-types";
 import styled from "styled-components";
 import { StyledTextInput, StyledCutout } from "../common";
 import { Cutout } from "../";
-import { blockSizes } from "../common/theme.variables";
+import { blockSizes } from "../common/system";
 
 const StyledInputWrapper = styled(Cutout)`
   height: ${blockSizes.md};
diff --git a/src/components/ListItem/ListItem.js b/src/components/ListItem/ListItem.js
index 5c5f09f..1cd4cfb 100644
--- a/src/components/ListItem/ListItem.js
+++ b/src/components/ListItem/ListItem.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { createDisabledTextStyles } from "../common";
-import { padding, blockSizes } from "../common/theme.variables";
+import { padding, blockSizes } from "../common/system";
 
 const StyledListItem = styled.li`
   box-sizing: border-box;
diff --git a/src/components/NumberField/NumberField.js b/src/components/NumberField/NumberField.js
index ee136a7..a2d9f7e 100644
--- a/src/components/NumberField/NumberField.js
+++ b/src/components/NumberField/NumberField.js
@@ -4,7 +4,7 @@ import propTypes from "prop-types";
 import Button from "../Button/Button";
 
 import styled from "styled-components";
-import { blockSizes } from "../common/theme.variables";
+import { blockSizes } from "../common/system";
 import InputBase from "../InputBase/InputBase";
 
 // ⭕⭕⭕⭕⭕ fix functionality and use hooks
diff --git a/src/components/Progress/Progress.js b/src/components/Progress/Progress.js
index 627f4d3..5155217 100644
--- a/src/components/Progress/Progress.js
+++ b/src/components/Progress/Progress.js
@@ -4,7 +4,7 @@ import propTypes from "prop-types";
 import styled from "styled-components";
 
 import { StyledCutout } from "../common";
-import { blockSizes } from "../common/theme.variables";
+import { blockSizes } from "../common/system";
 
 const Wrapper = styled(StyledCutout)`
   display: inline-block;
diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
index f8c0ed4..0c74f9d 100644
--- a/src/components/Radio/Radio.js
+++ b/src/components/Radio/Radio.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
 
 import styled, { css } from "styled-components";
 import { StyledCutout, createDisabledTextStyles, insetShadow } from "../common";
-import { padding, fontSizes } from "../common/theme.variables";
+import { padding, fontSizes } from "../common/system";
 
 const StyledLabel = styled.label`
   display: block;
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 2745967..f099335 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -5,7 +5,7 @@ import Button from "../Button/Button";
 
 import styled from "styled-components";
 import { shadow } from "../common";
-import { blockSizes, fontSizes, padding } from "../common/theme.variables";
+import { blockSizes, fontSizes, padding } from "../common/system";
 import { StyledCutout } from "../common";
 
 const StyledSelectWrapper = styled(StyledCutout)`
diff --git a/src/components/Tab/Tab.js b/src/components/Tab/Tab.js
index a033e65..96be7f3 100644
--- a/src/components/Tab/Tab.js
+++ b/src/components/Tab/Tab.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { createBorderStyles, createBoxStyles } from "../common";
-import { blockSizes, padding } from "../common/theme.variables";
+import { blockSizes, padding } from "../common/system";
 
 const StyledTab = styled.div`
   ${createBoxStyles()}
diff --git a/src/components/TabBody/TabBody.js b/src/components/TabBody/TabBody.js
index c73c51f..c6e50d1 100644
--- a/src/components/TabBody/TabBody.js
+++ b/src/components/TabBody/TabBody.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { createBorderStyles, createBoxStyles } from "../common";
-import { padding } from "../common/theme.variables";
+import { padding } from "../common/system";
 
 const StyledTabBody = styled.div`
   ${createBoxStyles()}
diff --git a/src/components/TableDataCell/TableDataCell.js b/src/components/TableDataCell/TableDataCell.js
index fbeaef7..0817523 100644
--- a/src/components/TableDataCell/TableDataCell.js
+++ b/src/components/TableDataCell/TableDataCell.js
@@ -2,7 +2,7 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { padding } from "../common/theme.variables";
+import { padding } from "../common/system";
 
 const StyledTd = styled.td`
   padding: 0 ${padding.sm};
diff --git a/src/components/TableHeadCell/TableHeadCell.js b/src/components/TableHeadCell/TableHeadCell.js
index 02ef440..460c51e 100644
--- a/src/components/TableHeadCell/TableHeadCell.js
+++ b/src/components/TableHeadCell/TableHeadCell.js
@@ -3,7 +3,7 @@ import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { createBorderStyles } from "../common";
-import { padding } from "../common/theme.variables";
+import { padding } from "../common/system";
 
 // ⭕⭕⭕⭕ move text down on Click
 
diff --git a/src/components/TableRow/TableRow.js b/src/components/TableRow/TableRow.js
index 239528a..52a1536 100644
--- a/src/components/TableRow/TableRow.js
+++ b/src/components/TableRow/TableRow.js
@@ -2,7 +2,7 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { blockSizes, colors } from "../common/theme.variables";
+import { blockSizes, colors } from "../common/system";
 
 const StyledTr = styled.tr`
   color: inherit;
diff --git a/src/components/TextArea/TextArea.js b/src/components/TextArea/TextArea.js
index 1da352a..71b313a 100644
--- a/src/components/TextArea/TextArea.js
+++ b/src/components/TextArea/TextArea.js
@@ -3,12 +3,7 @@ import propTypes from "prop-types";
 
 import styled from "styled-components";
 import { StyledCutout, insetShadow, createDisabledTextStyles } from "../common";
-import {
-  blockSizes,
-  fontSizes,
-  padding,
-  fontFamily
-} from "../common/theme.variables";
+import { blockSizes, fontSizes, padding, fontFamily } from "../common/system";
 
 const StyledTextAreaWrapper = styled(StyledCutout)`
   display: inline-block;
diff --git a/src/components/WindowContent/WindowContent.js b/src/components/WindowContent/WindowContent.js
index b37b8b8..999bece 100644
--- a/src/components/WindowContent/WindowContent.js
+++ b/src/components/WindowContent/WindowContent.js
@@ -2,7 +2,7 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { padding } from "../common/theme.variables";
+import { padding } from "../common/system";
 
 const StyledWindowContent = styled.div`
   padding: ${padding.md};
diff --git a/src/components/WindowHeader/WindowHeader.js b/src/components/WindowHeader/WindowHeader.js
index 9d2e845..d2ce917 100644
--- a/src/components/WindowHeader/WindowHeader.js
+++ b/src/components/WindowHeader/WindowHeader.js
@@ -2,7 +2,7 @@ import React from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { blockSizes, padding } from "../common/theme.variables";
+import { blockSizes, padding } from "../common/system";
 
 const SlyledWindowHeader = styled.div`
   height: ${blockSizes.md};
diff --git a/src/components/common/index.js b/src/components/common/index.js
index 294a0e2..2712be1 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { colors, fontSizes, padding, fontFamily } from "./theme.variables";
+import { fontSizes, padding, fontFamily } from "./system";
 
 export const shadow = `4px 4px 10px 0 rgba(0, 0, 0, 0.35)`;
 export const insetShadow = `inset 3px 3px 10px rgba(0, 0, 0, 0.2)`;
diff --git a/src/components/common/system.js b/src/components/common/system.js
new file mode 100644
index 0000000..0f77a21
--- /dev/null
+++ b/src/components/common/system.js
@@ -0,0 +1,20 @@
+// TODO - implement styled-system
+
+export const fontSizes = {
+  sm: "15px",
+  md: "16px",
+  lg: "17px"
+};
+
+export const blockSizes = {
+  sm: "27px",
+  md: "35px",
+  lg: "43px"
+};
+export const padding = {
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.25rem"
+};
+
+export const fontFamily = "sans-serif";
diff --git a/src/components/common/theme.variables.js b/src/components/common/theme.variables.js
deleted file mode 100644
index 80e2901..0000000
--- a/src/components/common/theme.variables.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const colors = {
-  bg: "#ced0cf",
-  dark: "#050608",
-  light: "#ffffff",
-  darkGray: "#888c8f",
-  lightGray: "#dfe0e3",
-  navy: "#000080",
-  blue: "#1034a6",
-  lightYellow: "#fefbcc",
-  purple: "#440381"
-};
-
-export const styles = {
-  shadow: "4px 4px 10px 0 rgba(0, 0, 0, 0.35)"
-};
-
-export const fontSizes = {
-  sm: "15px",
-  md: "16px",
-  lg: "17px"
-};
-
-export const blockSizes = {
-  sm: "27px",
-  md: "35px",
-  lg: "43px"
-};
-export const padding = {
-  sm: "0.5rem",
-  md: "1rem",
-  lg: "1.25rem"
-};
-
-export const fontFamily = "sans-serif";
diff --git a/src/components/index.css b/src/components/index.css
deleted file mode 100644
index 19a3f34..0000000
--- a/src/components/index.css
+++ /dev/null
@@ -1,189 +0,0 @@
-/* reset css  */
-
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* end of reset css */
-
-* {
-  padding: 0;
-  margin: 0;
-
-  box-sizing: border-box;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-ul,
-li {
-  list-style-type: none;
-}
-button {
-  outline: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-  /* -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; */
-  color: black;
-  background: #ced0cf;
-  overflow: auto;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-}
-#root {
-  height: 100%;
-}
-
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-}
diff --git a/website/src/App.js b/website/src/App.js
index 5b09af4..4d1dcf4 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -20,7 +20,7 @@ const Wrapper = styled.div`
   /* background: #050608; */
 `;
 
-const ratio = 0.8;
+const ratio = 1;
 
 const Main = styled.main`
   display: inline-block;