diff --git a/docs/elements.md b/docs/elements.md
index 166040cc..39aef4fe 100644
--- a/docs/elements.md
+++ b/docs/elements.md
@@ -1 +1 @@
-**Elements** are the smallest basic structures of a UI. They can not be broken down any further. Buttons, links and inputs are good examples. Elements utilize *Tokens*. *(btw: everything you see here is user editable, to change or remove this text, see `/docs/elements.md`)*
+**Elements** are the smallest basic structures of a UI. They can not be broken down any further. Buttons, links and inputs are good examples. Elements utilize *Tokens*. *(Everything you see here is user editable, to change or remove this text, see `/docs/elements.md`)*
diff --git a/docs/introduction.md b/docs/introduction.md
index d30bbab6..ed0d70fe 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -17,50 +17,15 @@ Made by [@viljamis](https://twitter.com/viljamis) and other contributors. Read m
* Autoprefixing, SCSS, Webpack & CSS extraction included by default *(Extend with lint-on-save & unit tests).*
* [And more…](https://github.com/viljamis/vue-design-system)
-
## Get Started
-Get started by cloning the repo and installing dependencies:
-
-```bash
-git clone git@github.com:viljamis/vue-design-system.git
-cd vue-design-system
-npm install
-```
-
-Start up the project and living documentation at [http://localhost:8080](http://localhost:8080) & [http://localhost:6060](http://localhost:6060):
-
-```bash
-npm start
-```
-
-To learn more, view the [official documentation](https://github.com/viljamis/vue-design-system) on GitHub.
-
-
-## Terminology
-
-The following terminology is used throughout Vue Design System. It’s a good idea to get familiar with these concepts before diving deeper.
-
-* **Principles** are a set of established design principles that are at the heart of the system. They should guide you when working with *Tokens*, *Elements*, *Patterns* and *Templates* listed below.
-* **Tokens** are the visual design atoms of the system. Specifically, they are named entities that store visual design attributes. SalesForce’s system has [a great example](https://www.lightningdesignsystem.com/design-tokens/).
-* **Elements** are the smallest basic structures of a UI. They can not be broken down any further. Buttons, links and inputs are good examples. Elements utilize *Tokens* mentioned above.
-* **Patterns** are UI patterns that fall on the more complex side of the spectrum. Patterns consist of both *Elements* and *Tokens*.
-* **Templates** exist to document the layout and structure of a section or the entirety of an interface. Templates can consist of all three things mentioned above: *Patterns*, *Elements* and *Tokens*.
-
-## Hierarchy, visualized:
-
-```bash
-Template
- ├─ Pattern
- │ ├─ Element
- │ │ ├─ Token
- │ │ └─ Token
- │ └─ Element
- │ └─ Token
- └─ Pattern
- └─ Element
- ├─ Token
- └─ Token
-```
+* **[Getting Started](https://github.com/viljamis/vue-design-system/wiki/getting-started): How to install and run Vue Design System.**
+* [Terminology](https://github.com/viljamis/vue-design-system/wiki/terminology): Introduction to the system concepts and its hierarchy.
+* [Naming of Things](https://github.com/viljamis/vue-design-system/wiki/naming-of-Things): Naming is hard, so it’s good to have clear guidelines.
+* [Directory Structure](https://github.com/viljamis/vue-design-system/wiki/directory-structure): What goes where and why.
+* [Working with the System](https://github.com/viljamis/vue-design-system/wiki/working-with-the-system): Concrete examples on how to work with `Tokens`, `Elements` , `Patterns` and `Templates`.
+* [Editing Living Documentation](https://github.com/viljamis/vue-design-system/wiki/editing-living-documentation): How to customize the living system documentation.
+* [Frequently Asked Questions](https://github.com/viljamis/vue-design-system/wiki/frequently-asked-questions-(FAQ)): How to use icons, how to use font-face, etc.
-### [View project on GitHub →](https://github.com/viljamis/vue-design-system)
+View on GitHub
+Documentation
diff --git a/docs/patterns.md b/docs/patterns.md
index c60c96df..323f5723 100644
--- a/docs/patterns.md
+++ b/docs/patterns.md
@@ -1 +1 @@
-**Patterns** are UI patterns that fall on the more complex side of the spectrum. Patterns consist of both *Elements* and *Tokens*. *(btw: everything you see here is user editable, to change or remove this text, see `/docs/patterns.md`)*
+**Patterns** are UI patterns that fall on the more complex side of the spectrum. Patterns consist of both *Elements* and *Tokens*. *(everything you see here is user editable, to change or remove this text, see `/docs/patterns.md`)*
diff --git a/docs/principles.md b/docs/principles.md
index 16b0106b..fb59d7ec 100644
--- a/docs/principles.md
+++ b/docs/principles.md
@@ -1,4 +1,4 @@
-**Principles** are a set of established design principles that are at the heart of the design system. They should guide us when working with *Tokens*, *Elements*, *Patterns* and *Templates*. *(btw: everything you see here is user editable, to change or remove this text, see `/docs/principles.md`)*
+**Principles** are a set of established design principles that are at the heart of the design system. They should guide us when working with *Tokens*, *Elements*, *Patterns* and *Templates*. *(Everything you see here is user editable, to change or remove this text, see `/docs/principles.md`. The principles below are just an example, you should replace them.)*
1. **Design is how it works**
2. **Reduce concepts to increase confidence**
diff --git a/docs/styleguide.styles.css b/docs/styleguide.styles.css
index 260a3d3f..e32fe500 100644
--- a/docs/styleguide.styles.css
+++ b/docs/styleguide.styles.css
@@ -120,3 +120,52 @@ div[class^='rsg--root'] > ul[class^='rsg--list'] > li > a {
div[class^='rsg--sidebar'] a:hover {
color: #fff;
}
+
+a[class^='rsg--link'].button {
+ width: 100%;
+ text-align: center;
+ -webkit-font-smoothing: antialiased;
+ border: 1px solid #2389ee;
+ background: #2389ee;
+ border-radius: 3px;
+ font-weight: 600;
+ display: inline-block;
+ padding: .7rem 2rem;
+ margin: 0 .2rem .4rem 0;
+ color: #fff;
+}
+
+a[class^='rsg--link'].button:hover {
+ border: 1px solid #1960a7;
+ background: #1960a7;
+}
+
+a[class^='rsg--link'].button--secondary:hover {
+ border: 1px solid #ddd;
+ background: #ddd;
+}
+
+a[class^='rsg--link'].button:active {
+ opacity: 0.8;
+}
+
+a[class^='rsg--link'].button:first-child {
+ margin-top: 1.5rem;
+}
+
+@media (min-width: 600px) {
+ a[class^='rsg--link'].button {
+ width: auto;
+ margin: 1.5rem .2rem 1rem 0;
+ }
+}
+
+a[class^='rsg--link'].button--secondary {
+ background: transparent;
+ border: 1px solid #ccc;
+ color: #333;
+}
+
+strong[class^='rsg--strong'] a[class^='rsg--link'] {
+ font-weight: 600;
+}
diff --git a/docs/templates.md b/docs/templates.md
index c130a28d..e1903763 100644
--- a/docs/templates.md
+++ b/docs/templates.md
@@ -1 +1 @@
-**Templates** exist to document the layout and structure of a section or the entirety of an interface. Templates can consist of all three things mentioned above: *Patterns*, *Elements* and *Tokens*. *(btw: everything you see here is user editable, to change or remove this text, see `/docs/templates.md`)*
+**Templates** exist to document the layout and structure of a section or the entirety of an interface. Templates can consist of all three things mentioned above: *Patterns*, *Elements* and *Tokens*. *(Everything you see here is user editable, to change or remove this text, see `/docs/templates.md`)*
diff --git a/docs/tokens.md b/docs/tokens.md
index 06712d3f..20cf2a56 100644
--- a/docs/tokens.md
+++ b/docs/tokens.md
@@ -1 +1 @@
-**Tokens** are the visual design atoms of the design system. Specifically, they are named entities that store visual design attributes. SalesForce’s system has [a great example](https://www.lightningdesignsystem.com/design-tokens/). *(btw: everything you see here is user editable, to change or remove this text, see `/docs/tokens.md`)*
+**Tokens** are the visual design atoms of the design system. Specifically, they are named entities that store visual design attributes. SalesForce’s system has [a great example](https://www.lightningdesignsystem.com/design-tokens/). *(Everything you see here is user editable, to change or remove this text, see `/docs/tokens.md`)*