diff --git a/docs/pages/foundation/colors.html b/docs/pages/foundation/colors.html
index 90f77cc81..a135b3321 100644
--- a/docs/pages/foundation/colors.html
+++ b/docs/pages/foundation/colors.html
@@ -13,7 +13,7 @@
 Colors bring designs to life.  It is used in a meaningful way to express emotions and tone, and promotes a distinct and consistent look and feel throughout all application.
 </p>
 
-<p>Each color is available to developers with a SASS mixin, CSS variables and as a series of <a href="/guides/design-system-utilities.html#colors">CSS helpers</a>.</p>
+<p>Each color is available to developers with a SASS mixin, CSS variables and as a series of <a href="{{site.baseurl}}/resources/design-system-utilities.html#colors">CSS helpers</a>.</p>
 
 
 {% include colors.html %}
diff --git a/docs/pages/foundation/spacing.html b/docs/pages/foundation/spacing.html
index 2c002c6ac..8f908a5bf 100644
--- a/docs/pages/foundation/spacing.html
+++ b/docs/pages/foundation/spacing.html
@@ -47,7 +47,7 @@ <h2 class="docs-header-h2" id="spacing-sizes">Base Unit of 4</h2>
 
 <h2 class="docs-header-h2" id="spacing-usage">Spacing Usage for <code>padding</code> </h2>
 
-<p><a href="/guides/how-to-use-scss.html#spacing-function" target="_blank">SCSS Mixin</a>: <code>@include fd-space([$size)</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="/guides/design-system-utilities.html#margin-and-padding" target="_blank">Helper class</a>: <code>.fd-has-padding-[size]</code></p>
+<p><a href="{{site.baseurl}}/resources/how-to-use-scss.html#spacing-function" target="_blank">SCSS Mixin</a>: <code>@include fd-space([$size)</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="{{site.baseurl}}/resources/design-system-utilities.html#margin-and-padding" target="_blank">Helper class</a>: <code>.fd-has-padding-[size]</code></p>
 {% capture spacing-preview %}
 
 <div class="fd-has-padding-tiny">
@@ -68,7 +68,7 @@ <h2 class="docs-header-h2" id="spacing-usage">Spacing Usage for <code>padding</c
 
 <h2 class="docs-header-h2" id="spacing-usage">Spacing Usage for <code>margin</code> </h2>
 
-<p><a href="/guides/how-to-use-scss.html#spacing-function" target="_blank">SCSS Mixin</a>: <code>@include fd-space([$size)</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="/guides/design-system-utilities.html#margin-and-padding" target="_blank">Helper class</a>: <code>.fd-has-margin-[size]</code></p>
+<p><a href="{{site.baseurl}}/resources/how-to-use-scss.html#spacing-function" target="_blank">SCSS Mixin</a>: <code>@include fd-space([$size)</code> &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="{{site.baseurl}}/resources/design-system-utilities.html#margin-and-padding" target="_blank">Helper class</a>: <code>.fd-has-margin-[size]</code></p>
 {% capture spacing-preview %}
 
 <div class="fd-has-margin-tiny">
diff --git a/docs/pages/resources/design-system-utilities.md b/docs/pages/resources/design-system-utilities.md
index d5aa529c2..4a40b0f65 100644
--- a/docs/pages/resources/design-system-utilities.md
+++ b/docs/pages/resources/design-system-utilities.md
@@ -75,12 +75,12 @@ Use these CSS classes to control the text size. Used mainly for content text, al
 ## Colors
 {: .docs-header-h2}
 
-All colors on the [color pallete](/foundation/colors.html). Can be accessed via SCSS function and respective CSS classes.
+All colors on the [color palette]({{site.baseurl}}/foundation/colors.html). Can be accessed via SCSS function and respective CSS classes.
 
 ### Color Function
 {: .docs-header-h3}
 
-Colors can be accessed via color function [`fd-color({group}, {shade})`](how-to-use-scss.html#core-functions-and-mixins){:target:"_blank"}
+Colors can be accessed via color function [`fd-color({group}, {shade})`](how-to-use-scss.html#core-functions-and-mixins)
 
 ### Color Helper classes
 {: .docs-header-h3}
@@ -93,7 +93,7 @@ A foreground color class applies the color property to the element for example `
 | ------------------------------- | ----------------------- |
 | Foreground Class: <br> `.fd-has-color-{group}-{shade}` <br><br> Background Class:<br>`.fd-has-background-color-{group}-{shade}` | `action` - `1`, `2`, `3` <br> `shell` - `1`, `2` <br> `text` - `1`, `2`, `3`, `4` <br> `background` - `1`, `2`, `3`, `4`, `5`, `6` <br> `neutral` - `1`, `2`, `3`, `4`  <br> `status` - `1`, `2`, `3`, `4`, `5` <br> `accent` - `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `13`, `14`, `15`, `16`|
 
-Please check the [colors page](colors.html){:target="_blank"} to see full color pallet.
+Please check the [colors page]({{site.baseurl}}/foundation/colors.html) to see full color palette.
 
 Some examples of color helper classes.
 {% capture color %}
diff --git a/docs/pages/resources/how-to-use-scss.md b/docs/pages/resources/how-to-use-scss.md
index 69f9e0230..2e03b1b4c 100644
--- a/docs/pages/resources/how-to-use-scss.md
+++ b/docs/pages/resources/how-to-use-scss.md
@@ -157,7 +157,7 @@ If you have a need to apply a color to any of your scss/css class, you can use t
 }
 {% endhighlight %}
 
-You can refer to the [colors page](/fundamentals/colors.html){:target="_blank"} for the complete list of the available color options.
+You can refer to the [colors page]({{site.baseurl}}/foundation/colors.html){:target="_blank"} for the complete list of the available color options.
 
 ## Spacing Function
 {:.docs-header-h3}
@@ -171,7 +171,7 @@ The space function can be utilized for heights, padding, margins and other posit
 
 
 
-The design system defines a variety of spacing increments that are commonly used throughout and [all of those are available](https://github.com/SAP/fundamental/blob/develop/scss/_settings.scss#L18) using the mixin by passing the key. However, there are four units that will be used most often when building and extending components. These are accessible with special keys to apply consistent padding and margins.
+The design system defines a variety of spacing increments that are commonly used throughout and [all of those are available](https://github.com/SAP/fundamental/blob/master/scss/_settings.scss#L18) using the mixin by passing the key. However, there are four units that will be used most often when building and extending components. These are accessible with special keys to apply consistent padding and margins.
 
 {% highlight css %}
 .foo {