diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 79081c24..c312db67 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -3,6 +3,7 @@ module.exports = {
   title: 'open-wc',
   description: 'Open Web Components Recommendations',
   themeConfig: {
+    logo: '/logo.png',
     displayAllHeaders: false,
     sidebarDepth: 2,
     sidebar: {
diff --git a/docs/.vuepress/public/hero.jpg b/docs/.vuepress/public/hero.jpg
deleted file mode 100644
index 3c21c142..00000000
Binary files a/docs/.vuepress/public/hero.jpg and /dev/null differ
diff --git a/docs/.vuepress/public/hero.png b/docs/.vuepress/public/hero.png
new file mode 100644
index 00000000..2883abbe
Binary files /dev/null and b/docs/.vuepress/public/hero.png differ
diff --git a/docs/.vuepress/public/logo.png b/docs/.vuepress/public/logo.png
new file mode 100644
index 00000000..975ebc5d
Binary files /dev/null and b/docs/.vuepress/public/logo.png differ
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
new file mode 100644
index 00000000..f02619a4
--- /dev/null
+++ b/docs/.vuepress/styles/index.styl
@@ -0,0 +1,8 @@
+.home .hero .action-button
+	background-color: #217FF9
+
+.home .hero .action-button:hover
+	background-color: #388cfa
+
+.header-anchor
+	color: #9B35FA
\ No newline at end of file
diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl
new file mode 100644
index 00000000..3f859bfa
--- /dev/null
+++ b/docs/.vuepress/styles/palette.styl
@@ -0,0 +1 @@
+$accentColor = #217FF9
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
index b9734ed5..fe8fd8e8 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,6 +1,6 @@
 ---
 home: true
-heroImage: /hero.jpg
+heroImage: /hero.png
 actionText: Get Started →
 actionLink: /guide/
 features: