diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
new file mode 100644
index 0000000..6807318
--- /dev/null
+++ b/docs/.vuepress/config.js
@@ -0,0 +1,51 @@
+module.exports = {
+    base: "/webui-vue/",
+    title: "OpenBMC Web UI Style Guide",
+    description:
+      "Guidance on code style and development for the OpenBMC browser-based UI",
+    smoothScroll: true,
+    themeConfig: {
+      nav: [
+        {
+          text: "Guide",
+          link: "/guide/getting-started"
+        },
+        {
+          text: "Themes",
+          link: "/themes/"
+        },
+        {
+          text: "Github",
+          link: "https://github.com/openbmc/webui-vue"
+        }
+      ],
+      sidebarDepth: 1,
+      sidebar: {
+        "/guide/": [
+          "getting-started",
+          {
+            title: "Coding Standards",
+            children: [
+              "/guide/coding-standards/",
+              ["/guide/coding-standards/accessibility", "Accessibility"],
+              ["/guide/coding-standards/sass", "SASS"],
+              ["/guide/coding-standards/javascript", "JavaScript"]
+            ]
+          },
+          {
+            title: "Guidelines",
+            children: [
+              "/guide/guidelines/",
+              "/guide/guidelines/colors",
+              "/guide/guidelines/typography"
+            ]
+          },
+          {
+            title: "Components",
+            children: ["/guide/components/", "/guide/components/page-section"]
+          }
+        ]
+      },
+      "/themes/": [""]
+    }
+  };
\ No newline at end of file
diff --git a/docs/.vuepress/public/openbmc-logo.svg b/docs/.vuepress/public/openbmc-logo.svg
new file mode 100644
index 0000000..d0fa158
--- /dev/null
+++ b/docs/.vuepress/public/openbmc-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 241.23 240.05"><defs><style>.cls-1{fill:#a6a8ab;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}.cls-5{fill:url(#linear-gradient-4);}.cls-6{fill:#626366;}</style><linearGradient id="linear-gradient" x1="82.9" y1="11.55" x2="82.9" y2="154.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#00b0da"/><stop offset="1" stop-color="#008abf"/></linearGradient><linearGradient id="linear-gradient-2" x1="81.55" y1="27.55" x2="81.55" y2="158.66" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="156.66" y1="51.54" x2="156.66" y2="154.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a5d440"/><stop offset="1" stop-color="#8cce3f"/></linearGradient><linearGradient id="linear-gradient-4" x1="158.41" y1="51.54" x2="158.41" y2="154.8" xlink:href="#linear-gradient-3"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M241.23,205.77a18.66,18.66,0,1,0-.24,16L237.26,220a14.51,14.51,0,1,1,.21-12.46Z"/><path class="cls-2" d="M65.85,81.86a53.68,53.68,0,0,0,11.61,33.41c-.1.29-.15.6-.22.9a10.81,10.81,0,0,0-.34,2.57,11,11,0,1,0,11-11,10.75,10.75,0,0,0-1.2.07c-.31,0-.61.08-.91.13A42.82,42.82,0,0,1,99.95,43.86h0V2.07l-.77.21q-3.63.94-7.12,2.2c-1.29.47-2.58,1-3.84,1.48h0V38.19l-.13.1A53.79,53.79,0,0,0,65.85,81.86Z"/><path class="cls-3" d="M120.28,96.58a14.54,14.54,0,0,1-14.55-14.37H93.59v0a26.29,26.29,0,0,0,21,25.65v45.35A71.13,71.13,0,0,1,63.9,38.1c.31.06.63.1,1,.13s.64,0,1,0a10.83,10.83,0,1,0-10.25-7.41,82.23,82.23,0,0,0,64.18,133.6c1.41,0,2.81-.06,4.2-.14l1.63-.09h0V95.57A14.47,14.47,0,0,1,120.28,96.58Z"/><path class="cls-4" d="M171.95,68.54a53.78,53.78,0,0,0-9.85-19.71,11.31,11.31,0,0,0,.32-1.3,10.78,10.78,0,0,0,.24-2.17,11,11,0,1,0-8.89,10.8,42.83,42.83,0,0,1-14.17,64.08V162c1.08-.27,2.14-.56,3.2-.87a82.35,82.35,0,0,0,8.53-3V125.91a53.91,53.91,0,0,0,20.6-57.37Z"/><path class="cls-5" d="M184.63,132.75A82.21,82.21,0,0,0,119.79,0c-1.64,0-3.26.06-4.87.16h-.11V68.55h0A14.53,14.53,0,0,1,120,67.48h.27A14.56,14.56,0,0,1,134.87,82s0,.07,0,.11,0,.08,0,.13h11.08A26.21,26.21,0,0,0,125.81,56.8V11.3A71.14,71.14,0,0,1,176,125.83h-.07a11,11,0,0,0-12.58,10.88,11,11,0,0,0,11,11h0a11,11,0,0,0,10.54-14.13C184.82,133.3,184.73,133,184.63,132.75Z"/><polygon class="cls-1" points="201.22 231.42 201.22 195.65 196.53 195.65 182 225.14 167.47 195.65 162.72 195.65 162.72 231.42 166.89 231.42 166.89 204.21 180.33 231.42 183.67 231.42 197.1 204.21 197.1 231.42 201.22 231.42"/><path class="cls-6" d="M119.82,208.4a10.6,10.6,0,0,0-7.9-3.34,10.15,10.15,0,0,0-4.16.83,15.94,15.94,0,0,0-3.62,2.24v-2.7H99.91v26h4.23V216.64a7.74,7.74,0,0,1,2.08-5.5,7.48,7.48,0,0,1,10.66,0,7.76,7.76,0,0,1,2.08,5.48v14.78h4.11v-15a11.12,11.12,0,0,0-3.24-8"/><path class="cls-6" d="M63.68,224.4a12.41,12.41,0,0,1-4.86,5.17,13.54,13.54,0,0,1-7,1.85H45.54V240h-4V205.43H51.64a13.41,13.41,0,0,1,9.57,3.76,12.73,12.73,0,0,1,2.47,15.21m-18.14,3.24h5.77A9.48,9.48,0,0,0,58.05,225a8.59,8.59,0,0,0,2.76-6.54,8.38,8.38,0,0,0-2.7-6.41,9.43,9.43,0,0,0-6.68-2.51H45.54Z"/><path class="cls-6" d="M96.44,219.75a4.56,4.56,0,0,0,.14-1.36c0-7.38-6.27-13.36-14-13.36s-14,6-14,13.36,6.27,13.36,14,13.36a14,14,0,0,0,11.93-6.52l-3.25-2.45a9.89,9.89,0,0,1-8.68,5,9.43,9.43,0,1,1,0-18.83,9.8,9.8,0,0,1,9.35,6.54c0,.07.15.63.17.7H76.59v3.52Z"/><path class="cls-6" d="M33.19,213.53A14.53,14.53,0,1,1,18.66,199a14.53,14.53,0,0,1,14.53,14.53m4.12,0a18.66,18.66,0,1,0-18.66,18.66,18.66,18.66,0,0,0,18.66-18.66"/><path class="cls-1" d="M154.37,220.69a6.77,6.77,0,0,1-6.75,6.79H132.14V213.9h15.49a6.78,6.78,0,0,1,6.75,6.79m-2.29-15.93a5.08,5.08,0,0,1-5.05,5.08l-14.89,0V199.67H147a5.07,5.07,0,0,1,5.05,5.08m.94,6.7a9,9,0,0,0-5.69-15.75H128v35.75h20.14l.28,0v0A10.73,10.73,0,0,0,153,211.46"/></g></g></svg>
\ No newline at end of file
diff --git a/docs/guide/coding-standards/accessibility.md b/docs/guide/coding-standards/accessibility.md
new file mode 100644
index 0000000..efbc943
--- /dev/null
+++ b/docs/guide/coding-standards/accessibility.md
@@ -0,0 +1 @@
+# Accessibility Conventions and Standards
\ No newline at end of file
diff --git a/docs/guide/coding-standards/index.md b/docs/guide/coding-standards/index.md
new file mode 100644
index 0000000..4bba659
--- /dev/null
+++ b/docs/guide/coding-standards/index.md
@@ -0,0 +1 @@
+# Overview
\ No newline at end of file
diff --git a/docs/guide/coding-standards/javascript.md b/docs/guide/coding-standards/javascript.md
new file mode 100644
index 0000000..6710f2f
--- /dev/null
+++ b/docs/guide/coding-standards/javascript.md
@@ -0,0 +1 @@
+# JavaScript Conventions and Standards
\ No newline at end of file
diff --git a/docs/guide/coding-standards/sass.md b/docs/guide/coding-standards/sass.md
new file mode 100644
index 0000000..b990f50
--- /dev/null
+++ b/docs/guide/coding-standards/sass.md
@@ -0,0 +1 @@
+# SASS Conventions and Standards
\ No newline at end of file
diff --git a/docs/guide/components/index.md b/docs/guide/components/index.md
new file mode 100644
index 0000000..4bba659
--- /dev/null
+++ b/docs/guide/components/index.md
@@ -0,0 +1 @@
+# Overview
\ No newline at end of file
diff --git a/docs/guide/components/page-section.md b/docs/guide/components/page-section.md
new file mode 100644
index 0000000..9c8f1b2
--- /dev/null
+++ b/docs/guide/components/page-section.md
@@ -0,0 +1 @@
+# Page Section
\ No newline at end of file
diff --git a/docs/guide/components/page-title.md b/docs/guide/components/page-title.md
new file mode 100644
index 0000000..ebc2fc5
--- /dev/null
+++ b/docs/guide/components/page-title.md
@@ -0,0 +1 @@
+# Page Title
\ No newline at end of file
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
new file mode 100644
index 0000000..8b3a794
--- /dev/null
+++ b/docs/guide/getting-started.md
@@ -0,0 +1 @@
+# Getting Started
\ No newline at end of file
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
new file mode 100644
index 0000000..7baf37b
--- /dev/null
+++ b/docs/guide/guidelines/colors.md
@@ -0,0 +1 @@
+# Colors
\ No newline at end of file
diff --git a/docs/guide/guidelines/index.md b/docs/guide/guidelines/index.md
new file mode 100644
index 0000000..4bba659
--- /dev/null
+++ b/docs/guide/guidelines/index.md
@@ -0,0 +1 @@
+# Overview
\ No newline at end of file
diff --git a/docs/guide/guidelines/typography.md b/docs/guide/guidelines/typography.md
new file mode 100644
index 0000000..db88d40
--- /dev/null
+++ b/docs/guide/guidelines/typography.md
@@ -0,0 +1 @@
+# Typography
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..1aaa4ad
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,7 @@
+---
+home: true
+heroImage: openbmc-logo.svg
+heroText: Style Guide and Coding Conventions
+actionText: Getting Started
+actionLink: /guide/getting-started
+---
\ No newline at end of file
diff --git a/docs/themes/index.md b/docs/themes/index.md
new file mode 100644
index 0000000..e86c6e5
--- /dev/null
+++ b/docs/themes/index.md
@@ -0,0 +1 @@
+# Themes
\ No newline at end of file