diff --git a/addon/styles/components/es-page-header.css b/addon/styles/components/es-page-header.css
index 2ad25ad4..894272b8 100644
--- a/addon/styles/components/es-page-header.css
+++ b/addon/styles/components/es-page-header.css
@@ -1,6 +1,9 @@
 .es-page-header {
   padding-top: 4.5rem;
   padding-bottom: 4.5rem;
+  background-image: url('/images/pattern-1.svg');
+  background-repeat: no-repeat;
+  background-position: bottom right;
 }
 
 .es-page-header__title {
diff --git a/addon/styles/global.css b/addon/styles/global.css
index 009c089e..89683b86 100644
--- a/addon/styles/global.css
+++ b/addon/styles/global.css
@@ -67,6 +67,10 @@ h6 {
 .dark {
   background-color: var(--color-dark);
   color: var(--color-light);
+
+  & a {
+    color: var(--color-light);
+  }
 }
 
 .bg-muted {
diff --git a/addon/styles/helpers.css b/addon/styles/helpers.css
index a952e133..5fb3a766 100644
--- a/addon/styles/helpers.css
+++ b/addon/styles/helpers.css
@@ -5,3 +5,7 @@
 .margin-bottom-small {
   margin-bottom: 2rem;
 }
+
+.margin-left-small {
+  margin-left: 2rem;
+}
diff --git a/addon/templates/components/es-page-header.hbs b/addon/templates/components/es-page-header.hbs
index 6320949e..904c1ea8 100644
--- a/addon/templates/components/es-page-header.hbs
+++ b/addon/templates/components/es-page-header.hbs
@@ -1,8 +1,8 @@
 <div class="es-page-header" ...attributes>
   <div class="container">
-    <h1 class="xlarge">{{@headline}}</h1>
+    <h1 class="large">{{@headline}}</h1>
 
-    <p>{{@detail}}</p>
+    <p class="{{if hasBlock 'margin-bottom-small'}}">{{@detail}}</p>
 
     {{yield}}
   </div>
diff --git a/docs/css/helpers.md b/docs/css/helpers.md
index f212745f..56cddcf9 100644
--- a/docs/css/helpers.md
+++ b/docs/css/helpers.md
@@ -9,3 +9,21 @@ if you would like a section or a div to use the dark style then you need to add
   hello there
 </div>
 ```
+
+## margins
+
+If you would like to add a bit of margin to the bottom or left of something (for example in a vertical or horizontal list) there are two simple helpers to add a small amount of margin: `margin-bottom-small` and `margin-left-small`.
+
+```html
+<ul>
+  <li class="margin-bottom-small">One</li>
+  <li>Two</li>
+  <li>Three</li>
+</ul>
+```
+
+```html
+<button>One</button>
+<button class="margin-left-small">Two</button>
+<button>Three</button>
+```
diff --git a/public/images/pattern-1.svg b/public/images/pattern-1.svg
new file mode 100644
index 00000000..451f0565
--- /dev/null
+++ b/public/images/pattern-1.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="677px" height="465px" viewBox="0 0 677 465" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>PAtttern</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Ember" transform="translate(-723.000000, -189.000000)" fill-rule="nonzero" stroke="#4F535C">
+            <g id="Header" transform="translate(200.000000, 119.000000)">
+                <g id="PAtttern" transform="translate(524.000000, 71.000000)">
+                    <path d="M600.241919,483.931001 L487.68,516.76156 C484.49884,517.689399 481.167838,515.862721 480.24,512.68156 C480.080808,512.13576 480,511.570103 480,511.00156 L480,353.50156 C480,350.834894 481.76,348.488227 484.32,347.74156 L484.32,347.74156 L712.32,281.24156 C715.50116,280.313722 718.832162,282.1404 719.76,285.32156 C719.919192,285.867361 720,286.433018 720,287.00156 L720,444.50156 C720,447.168227 718.24,449.514894 715.68,450.26156" id="Path" opacity="0.800000012"></path>
+                    <path d="M604.32,417.74156 L832.32,351.24156 C835.50116,350.313722 838.832162,352.1404 839.76,355.32156 C839.919192,355.867361 840,356.433018 840,357.00156 L840,514.50156 C840,517.168227 838.24,519.514894 835.68,520.26156 L607.68,586.76156 C604.49884,587.689399 601.167838,585.862721 600.24,582.68156 C600.080808,582.13576 600,581.570103 600,581.00156 L600,423.50156 C600,420.834894 601.76,418.488227 604.32,417.74156 Z" id="Rectangle-Copy-2"></path>
+                    <path d="M480.046619,413.987963 L367.68,446.76156 C364.49884,447.689399 361.167838,445.862721 360.24,442.68156 C360.080808,442.13576 360,441.570103 360,441.00156 L360,283.50156 C360,280.834894 361.76,278.488227 364.32,277.74156 L592.32,211.24156 C595.50116,210.313722 598.832162,212.1404 599.76,215.32156 C599.919192,215.867361 600,216.433018 600,217.00156 L600,314.253906" id="Path" opacity="0.600000024"></path>
+                    <path d="M360.046619,342.987963 L247.68,375.76156 C244.49884,376.689399 241.167838,374.862721 240.24,371.68156 C240.080808,371.13576 240,370.570103 240,370.00156 L240,212.50156 C240,209.834894 241.76,207.488227 244.32,206.74156 L472.32,140.24156 C475.50116,139.313722 478.832162,141.1404 479.76,144.32156 C479.919192,144.867361 480,145.433018 480,146.00156 L480,243.253906" id="Path-Copy" opacity="0.400000006"></path>
+                    <path d="M240.046619,272.987963 L127.68,305.76156 C124.49884,306.689399 121.167838,304.862721 120.24,301.68156 C120.080808,301.13576 120,300.570103 120,300.00156 L120,142.50156 C120,139.834894 121.76,137.488227 124.32,136.74156 L352.32,70.2415604 C355.50116,69.313722 358.832162,71.1404002 359.76,74.3215604 C359.919192,74.8673612 360,75.4330179 360,76.0015604 L360,173.253906" id="Path-Copy-2" opacity="0.200000003"></path>
+                    <path d="M120.046619,202.987963 L7.68,235.76156 C4.49883984,236.689399 1.16783838,234.862721 0.24,231.68156 C0.0808081014,231.13576 0,230.570103 0,230.00156 L0,72.5015604 C0,69.8348937 1.76,67.4882271 4.32,66.7415604 L232.32,0.241560402 C235.50116,-0.686277978 238.832162,1.14040024 239.76,4.3215604 C239.919192,4.8673612 240,5.43301791 240,6.0015604 L240,103.253906" id="Path-Copy-3" opacity="0.100000001"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css
index d507b4cc..397c61be 100644
--- a/tests/dummy/app/styles/app.css
+++ b/tests/dummy/app/styles/app.css
@@ -1 +1,5 @@
 @import "color-pallet";
+
+.self-executing-code-block {
+  margin-bottom: 2rem;
+}