diff --git a/exampleSite/content/usage/color_schemes.md b/exampleSite/content/usage/color_schemes.md
new file mode 100644
index 0000000..7a06637
--- /dev/null
+++ b/exampleSite/content/usage/color_schemes.md
@@ -0,0 +1,36 @@
+If you want to customize the color scheme of the theme to give it your individual touch you are just a few lines CSS away. In general, you have to override the defaults, the easiest way to do so is to create a `static/custom.css` file right in your site root.
+
+All necessary class names are listed below. If you miss some classes for theming you are very welcome to fill an [Issue](https://github.com/xoxys/hugo-geekdoc/issues). For some inspiration you can have a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). The following listing use the _HC-primary_ color palette as an example:
+
+{{< highlight CSS "linenos=table" >}}
+/* defaut link color */
+a { color: #1c388e; }
+a:visited { color: #73bfb8 }
+
+/* site header */
+.gdoc-header { background: #e66a4e; border-color: #404040; }
+.gdoc-header__link, .gdoc-header__link:visited { color: #ffffff; }
+
+/* page links */
+.gdoc-page__footer a, .gdoc-page__footer a:visited { color: #1c388e; }
+.gdoc-page__header a, .gdoc-page__header a:visited { color: #1c388e; }
+
+/* site footer */
+.gdoc-footer { background: #404040; color: #ffffff; }
+.gdoc-footer__link{ color: #fecf50; }
+.gdoc-footer__link:visited, .gdoc-footer__link:hover { color: #fecf50; }
+
+/* custom shortcodes */
+/* button */
+.gdoc-button { color: #495057; }
+.gdoc-button:hover { background-color: #eb8771; border-color: #e66a4e; color: #ffffff; }
+
+/* hint */
+.gdoc-hint.info { background: #d1d7e8; border-color: #324b99; color: black; }
+.gdoc-hint.warning { background: #fef5dc; border-color: #e4ba48; color: black; }
+.gdoc-hint.danger { background: #fae1db; border-color: #cf5f46; color: black; }
+{{< /highlight >}}
+
+And that is how the result will looks like. Happy theming!
+
+[![HC-primary Color Scheme](/media/color_scheme_example.png)](/media/color_scheme_example.png)
diff --git a/exampleSite/content/usage/menus.md b/exampleSite/content/usage/menus.md
index c5de4a5..201db96 100644
--- a/exampleSite/content/usage/menus.md
+++ b/exampleSite/content/usage/menus.md
@@ -1,3 +1,7 @@
+---
+draft: true
+---
+
 ## File-tree menu
 
 ## Bundle menu
diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example
new file mode 100644
index 0000000..2b4fda6
--- /dev/null
+++ b/exampleSite/static/custom.css.example
@@ -0,0 +1,25 @@
+/* defaut link color */
+a { color: #1c388e; }
+a:visited { color: #73bfb8 }
+
+/* site header */
+.gdoc-header { background: #e66a4e; border-color: #404040; }
+.gdoc-header__link, .gdoc-header__link:visited { color: #ffffff; }
+
+/* page links */
+.gdoc-page__footer a, .gdoc-page__footer a:visited, .gdoc-page__header a, .gdoc-page__header a:visited { color: #1c388e; }
+
+/* site footer */
+.gdoc-footer { background: #404040; color: #ffffff; }
+.gdoc-footer__link{ color: #fecf50; }
+.gdoc-footer__link:visited, .gdoc-footer__link:hover { color: #fecf50; }
+
+
+/* button shortcode */
+.gdoc-button { color: #495057; }
+.gdoc-button:hover { background-color: #eb8771; border-color: #e66a4e; color: #ffffff; }
+
+/* hint shortcode */
+.gdoc-hint.info { background: #d1d7e8; border-color: #324b99; color: black; }
+.gdoc-hint.warning { background: #fef5dc; border-color: #e4ba48; color: black; }
+.gdoc-hint.danger { background: #fae1db; border-color: #cf5f46; color: black; }
diff --git a/exampleSite/static/logo.png b/exampleSite/static/logo.png
deleted file mode 100644
index 3207b98..0000000
Binary files a/exampleSite/static/logo.png and /dev/null differ
diff --git a/exampleSite/static/media/color_scheme_example.png b/exampleSite/static/media/color_scheme_example.png
new file mode 100644
index 0000000..2ad1cb1
Binary files /dev/null and b/exampleSite/static/media/color_scheme_example.png differ
diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html
index 324b79e..d0a5761 100644
--- a/layouts/partials/site-footer.html
+++ b/layouts/partials/site-footer.html
@@ -1,8 +1,9 @@
 <footer class="gdoc-footer">
-    <div class="container">
-        <div>
+    <div class="container flex">
+        <span>
             Build with <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> and
             <svg class="icon heart"><use xlink:href="#heart"></use></svg>
-        </div>
+        </span>
+        <span>
     </div>
 </footer>
diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html
index a66fc53..ea04661 100644
--- a/layouts/shortcodes/button.html
+++ b/layouts/shortcodes/button.html
@@ -10,6 +10,8 @@
     {{ $ref = relref $ . }}
 {{ end }}
 
-<a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" {{ end }} class="gdoc-btn{{ with .Get "class" }} {{ . }}{{ end }}">
+<span class="gdoc-button{{ with .Get "class" }} {{ . }}{{ end }}">
+<a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" {{ end }} class="gdoc-button__link">
     {{ $.Inner }}
 </a>
+</span>
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 7f27d50..9fb9e33 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -259,7 +259,6 @@ img {
 .gdoc-footer {
   background: $second-color;
   color: $white;
-  padding: $padding-16;
 
   &__link {
     color: $color-link-footer;
@@ -268,6 +267,10 @@ img {
       color: $color-link-footer;
     }
   }
+
+  .container {
+    padding: $padding-16;
+  }
 }
 
 .gdoc-search {
@@ -414,18 +417,10 @@ img {
   }
 
   .gdoc-header {
-    display: flex;
-
     .icon {
       width: $font-size-16 * 1.5;
       height: $font-size-16 * 1.5;
     }
-
-    .container {
-      width: 100%;
-      max-width: 100%;
-      margin: 0;
-    }
   }
 
   .gdoc-brand {
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index e3166e6..a97566b 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -73,17 +73,21 @@
 }
 
 // {{< button >}}
-a.gdoc-btn {
+.gdoc-button {
   display: inline-block;
   color: $gray-700;
-  text-decoration: none !important;
   border: $padding-1 solid $gray-500;
   border-radius: $border-radius;
-  padding: $padding-4 $padding-16;
-  margin-top: $padding-8;
-  margin-bottom: $padding-8;
+  margin: $padding-8 0;
   cursor: pointer;
 
+  &__link {
+    display: inline-block;
+    color: inherit !important;
+    text-decoration: none !important;
+    padding: $padding-4 $padding-16;
+  }
+
   &:hover {
     background: rgba($main-color, 0.9);
     border-color: $main-color;