[No QA] Setup modular sass config and add color file to help site

docs/_sass/_colors.scss

@@ -0,0 +1,7 @@
+$color-blue: #0185FF;
+$color-blueHover: #006FD6;
+$color-dark: #0B1B34;
+$color-gray1: #FAFAFA;
+$color-gray2: #ECECEC;
+$color-gray3: #C6C9CA;
+$color-white: #FFFFFF;

docs/_sass/_fonts.scss

@@ -0,0 +1,99 @@
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 100;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Light.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Light.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 200;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Thin.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Thin.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 400;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Regular.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Regular.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 500;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Medium.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 600;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Medium.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-Regular;
+  font-weight: 700;
+  font-style: normal;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Bold.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-RgIt;
+  font-weight: 400;
+  font-style: italic;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Regular-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-MdIt;
+  font-weight: 500;
+  font-style: italic;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Medium-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExp-BdIt;
+  font-weight: 700;
+  font-style: italic;
+  src: url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.eot") format("embedded-opentype"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff") format("woff"), url("https://www.expensify.com/font/GT-America-Standard-Bold-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: GTAmericaExpMono-Rg;
+  font-weight: 400;
+  font-style: normal;
+  src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: GTAmericaExpMono-RgIt;
+  font-weight: 400;
+  font-style: italic;
+  src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: GTAmericaExpMono-Bd;
+  font-weight: 700;
+  font-style: normal;
+  src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: GTAmericaExpMono-BdIt;
+  font-weight: 700;
+  font-style: italic;
+  src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff2') format('woff2');
+}
+
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+strong {
+  font-weight: 600;
+}

docs/_sass/_main.scss

@@ -0,0 +1,266 @@
+@import 'colors';
+@import 'fonts';
+
+:root {
+  --spacing-default: 24px;
+}
+
+* {
+  margin: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  line-height: 1;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+caption,
+th,
+td {
+  text-align: left;
+  font-weight: 400;
+  vertical-align: middle;
+}
+
+q,
+blockquote {
+  quotes: none;
+
+  &:before,
+  &:after {
+    content: none;
+  }
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+html,
+body {
+  height: 100%;
+  min-height: 100%;
+  background: $color-white;
+}
+
+hr {
+  background: $color-blue;
+  border: none;
+  display: inline-block;
+  width: 24px;
+  height: 2px;
+  margin: 0 0 15px;
+}
+
+strong {
+  font-weight: 700;
+  font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+}
+
+em {
+  font-style: italic;
+}
+
+a {
+  color: $color-blue;
+  text-decoration: none;
+
+  &:hover {
+    color: $color-blueHover;
+    text-decoration: underline;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $color-dark;
+  font-family: "GTAmericaExp-Regular";
+  font-weight: 400;
+  margin-bottom: 12px;
+  line-height: 1.33;
+}
+
+h1 {
+  font-size: 36px;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 26px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+h5 {
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: $color-blue;
+  margin-bottom: 6px;
+}
+
+h6 {
+  font-size: 11px;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+p {
+  margin: 0 0 var(--spacing-default);
+}
+
+body,
+button,
+input,
+select,
+textarea {
+  line-height: 1.4;
+  font-weight: 400;
+  font-family: "GTAmericaExp-Regular", "Helvetica Neue", "Helvetica", Arial, sans-serif;
+  font-size: 16px;
+  color: $color-dark;
+}
+
+.lhn {
+  height: 100%;
+  width: 375px;
+  position: fixed;
+  background-color: $color-gray1;
+  padding: 36px;
+  box-sizing: border-box;
+  border-right-color: $color-gray2;
+  border-right-width: 1px;
+  border-style: solid;
+
+  .logo {
+    width: 150px;
+  }
+
+  .lhn-content {
+    padding-top: 24px;
+    margin-left: 32px;
+  }
+
+  ul,
+  li {
+    list-style: none;
+  }
+}
+
+.content-area {
+  /* Same as the width of the lhn */
+  margin-left: 375px;
+  padding: 48px;
+  box-sizing: border-box;
+}
+
+.main-navigation-tree {
+
+  ul,
+  li {
+    margin-bottom: 12px;
+
+    /* Apply recursive style to add a margin to the nested items */
+    ul,
+    li {
+      margin-top: 12px;
+      cursor: pointer;
+    }
+  }
+
+  .caret-icon {
+    left: 48px;
+    padding-top: 1px;
+    position: absolute;
+    color: $color-gray3;
+    font-size: larger;
+  }
+
+  .caret-icon-down {
+    left: 44px;
+  }
+
+  .selected-hub {
+    font-weight: bold;
+  }
+
+  .link {
+    color: $color-blue;
+    cursor: pointer;
+
+    &:hover {
+      color: $color-blueHover;
+      text-decoration: underline;
+    }
+  }
+}
+
+.cards-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  row-gap: 10px;
+  column-gap: 20px;
+}
+
+.card {
+  display: flex;
+  flex-wrap: nowrap;
+  flex: 42%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-radius: 15px;
+  border: 1px solid lightgray;
+  padding: 20px;
+
+  .left-icon {
+    display: flex;
+    align-items: center;
+    padding-right: 15px;
+  }
+
+  .right-icon {
+    display: flex;
+    align-items: center;
+    padding-left: 15px;
+  }
+
+  .body {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    flex-grow: 2;
+  }
+
+  .description {
+    margin-top: 15px;
+  }
+}