diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css
index 5471a069df..dc2f8443b9 100644
--- a/ghost/admin/app/styles/components/koenig.css
+++ b/ghost/admin/app/styles/components/koenig.css
@@ -517,7 +517,6 @@ textarea.koenig-card-markdown {
 .__mobiledoc-card {
     display: inline-block;
     width: 100%;
-    margin: 0 0 1.7em 0; /* match P margin */
 }
 
 /**
diff --git a/ghost/admin/app/styles/spirit-product/_animations.css b/ghost/admin/app/styles/spirit-product/_animations.css
new file mode 100644
index 0000000000..fb53224c95
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_animations.css
@@ -0,0 +1,140 @@
+/*
+  HOVER EFFECTS
+
+    - Dim
+    - Glow
+    - Hide Child
+    - Underline text
+    - Grow
+    - Pointer
+    - Shadow
+*/
+
+:root {
+  --animation-speed-fast: 0.15s;
+  --animation-speed-normal: 0.3s;
+  --animation-speed-slow: 0.45s;
+}
+
+
+
+/* Animations
+/* -------------------------------------------------------- */
+.anim-fast          {  transition: all var(--animation-speed-fast) ease;  }
+.anim-normal        {  transition: all var(--animation-speed-normal) ease;  }
+.anim-slow          {  transition: all var(--animation-speed-slow) ease;  }
+
+
+/*
+
+  Dim element on hover by adding the dim class.
+
+*/
+.dim {
+  opacity: 1;
+  transition: opacity var(--animation-speed-fast) ease-in;
+}
+.dim:hover,
+.dim:focus {
+  opacity: .5;
+  transition: opacity var(--animation-speed-fast) ease-in;
+}
+.dim:active {
+  opacity: .8; transition: opacity var(--animation-speed-fast) ease-out;
+}
+
+/*
+
+  Hide child & reveal on hover:
+
+  Put the hide-child class on a parent element and any nested element with the
+  child class will be hidden and displayed on hover or focus.
+
+  <div class="hide-child">
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+  </div>
+*/
+
+.hide-child .child {
+  opacity: 0;
+  transition: all var(--animation-speed-normal) ease-in;
+}
+.hide-child:hover  .child,
+.hide-child:focus  .child,
+.hide-child:active .child {
+  opacity: 1;
+  transition: all var(--animation-speed-normal) ease-in;
+}
+
+.underline-hover:hover,
+.underline-hover:focus {
+  text-decoration: underline;
+}
+
+/* Can combine this with overflow-hidden to make background images grow on hover
+ * even if you are using background-size: cover */
+
+.grow {
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateY(0) translateZ(0);
+  transition: transform var(--animation-speed-normal) ease-out;
+}
+
+.grow:hover,
+.grow:focus {
+  transform: translateY(-0.6rem) scale(1.002);
+}
+
+.grow:active {
+  transform: scale(.90);
+}
+
+/* Add pointer on hover */
+
+.pointer:hover {
+  cursor: pointer;
+}
+
+/*
+   Add shadow on hover.
+
+   Performant box-shadow animation pattern from
+   http://tobiasahlin.com/blog/how-to-animate-box-shadow/
+*/
+
+.shadow-hover {
+  position: relative;
+  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover::after {
+  content: '';
+  box-shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.09);
+  border-radius: inherit;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover:hover::after,
+.shadow-hover:focus::after {
+  opacity: 1;
+}
+
+/* Combine with classes in skins and skins-pseudo for
+ * many different transition possibilities. */
+
+.bg-animate,
+.bg-animate:hover,
+.bg-animate:focus {
+  transition: background-color var(--animation-speed-normal) ease-in-out;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_aspect-ratios.css b/ghost/admin/app/styles/spirit-product/_aspect-ratios.css
new file mode 100644
index 0000000000..1ee67e1d96
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_aspect-ratios.css
@@ -0,0 +1,135 @@
+/*
+
+   ASPECT RATIOS
+
+*/
+
+/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
+ * Make sure there are no height and width attributes on the embedded media.
+ * Adapted from: https://github.com/suitcss/components-flex-embed
+ *
+ * Example:
+ *
+ * <div class="aspect-ratio aspect-ratio--16x9">
+ *  <iframe class="aspect-ratio--object"></iframe>
+ * </div>
+ *
+ * */
+
+.aspect-ratio {
+  height: 0;
+  position: relative;
+}
+
+.aspect-ratio--16x9 { padding-bottom: 56.25%; }
+.aspect-ratio--9x16 { padding-bottom: 177.77%; }
+
+.aspect-ratio--4x3 {  padding-bottom: 75%; }
+.aspect-ratio--3x4 {  padding-bottom: 133.33%; }
+
+.aspect-ratio--6x4 {  padding-bottom: 66.6%; }
+.aspect-ratio--4x6 {  padding-bottom: 150%; }
+
+.aspect-ratio--8x5 {  padding-bottom: 62.5%; }
+.aspect-ratio--5x8 {  padding-bottom: 160%; }
+
+.aspect-ratio--7x5 {  padding-bottom: 71.42%; }
+.aspect-ratio--5x7 {  padding-bottom: 140%; }
+
+.aspect-ratio--1x1 {  padding-bottom: 100%; }
+
+.aspect-ratio--object {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+}
+
+@media (--breakpoint-not-small){
+    .aspect-ratio-ns {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-ns {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-ns {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-ns {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-ns {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-ns {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-ns {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-ns {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-ns {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-ns {  padding-bottom: 100%; }
+    .aspect-ratio--object-ns {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}
+
+@media (--breakpoint-medium){
+    .aspect-ratio-m {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-m {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-m {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-m {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-m {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-m {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-m {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-m {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-m {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-m {  padding-bottom: 100%; }
+    .aspect-ratio--object-m {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}
+
+@media (--breakpoint-large){
+    .aspect-ratio-l {
+      height: 0;
+      position: relative;
+    }
+    .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
+    .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
+    .aspect-ratio--4x3-l {  padding-bottom: 75%; }
+    .aspect-ratio--3x4-l {  padding-bottom: 133.33%; }
+    .aspect-ratio--6x4-l {  padding-bottom: 66.6%; }
+    .aspect-ratio--4x6-l {  padding-bottom: 150%; }
+    .aspect-ratio--8x5-l {  padding-bottom: 62.5%; }
+    .aspect-ratio--5x8-l {  padding-bottom: 160%; }
+    .aspect-ratio--7x5-l {  padding-bottom: 71.42%; }
+    .aspect-ratio--5x7-l {  padding-bottom: 140%; }
+    .aspect-ratio--1x1-l {  padding-bottom: 100%; }
+    .aspect-ratio--object-l {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 100;
+    }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_background-position.css b/ghost/admin/app/styles/spirit-product/_background-position.css
new file mode 100644
index 0000000000..4d850b6a55
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_background-position.css
@@ -0,0 +1,126 @@
+/*
+
+    BACKGROUND POSITION
+
+    Base:
+    bg = background
+
+    Modifiers:
+    -center = center center
+    -top = top center
+    -right = center right
+    -bottom = bottom center
+    -left = center left
+
+    Media Query Extensions:
+      -ns = not-small
+      -m  = medium
+      -l  = large
+
+ */
+
+.bg-center { 
+  background-repeat: no-repeat;
+  background-position: center center; 
+}
+
+.bg-top {    
+  background-repeat: no-repeat; 
+  background-position: top center;    
+}
+
+.bg-right {  
+  background-repeat: no-repeat; 
+  background-position: center right;  
+}
+
+.bg-bottom { 
+  background-repeat: no-repeat; 
+  background-position: bottom center; 
+}
+
+.bg-left {   
+  background-repeat: no-repeat; 
+  background-position: center left;   
+}
+
+@media (--breakpoint-not-small) {
+  .bg-center-ns { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-ns {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-ns {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-ns { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-ns {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}
+
+@media (--breakpoint-medium) {
+  .bg-center-m { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-m {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-m {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-m { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-m {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}
+
+@media (--breakpoint-large) {
+  .bg-center-l { 
+    background-repeat: no-repeat;
+    background-position: center center; 
+  }
+
+  .bg-top-l {    
+    background-repeat: no-repeat; 
+    background-position: top center;    
+  }
+
+  .bg-right-l {  
+    background-repeat: no-repeat; 
+    background-position: center right;  
+  }
+
+  .bg-bottom-l { 
+    background-repeat: no-repeat; 
+    background-position: bottom center; 
+  }
+
+  .bg-left-l {   
+    background-repeat: no-repeat; 
+    background-position: center left;   
+  }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_background-size.css b/ghost/admin/app/styles/spirit-product/_background-size.css
new file mode 100644
index 0000000000..18afe5c7c5
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_background-size.css
@@ -0,0 +1,34 @@
+/*
+
+   BACKGROUND SIZE
+   Docs: http://tachyons.io/docs/themes/background-size/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/*
+  Often used in combination with background image set as an inline style
+  on an html element.
+*/
+
+  .cover { background-size: cover!important; }
+  .contain { background-size: contain!important; }
+
+@media (--breakpoint-not-small) {
+  .cover-ns { background-size: cover!important; }
+  .contain-ns { background-size: contain!important; }
+}
+
+@media (--breakpoint-medium) {
+  .cover-m { background-size: cover!important; }
+  .contain-m { background-size: contain!important; }
+}
+
+@media (--breakpoint-large) {
+  .cover-l { background-size: cover!important; }
+  .contain-l { background-size: contain!important; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_border-colors.css b/ghost/admin/app/styles/spirit-product/_border-colors.css
new file mode 100644
index 0000000000..cabb1224fb
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_border-colors.css
@@ -0,0 +1,129 @@
+/*
+
+   BORDER COLORS
+
+   Border colors can be used to extend the base
+   border classes ba,bt,bb,br,bl found in the _borders.css file.
+
+   The base border class by default will set the color of the border
+   to that of the current text color. These classes are for the cases
+   where you desire for the text and border colors to be different.
+
+   Base:
+     b = border
+
+   Modifiers:
+   --color-name = each color variable name is also a border color name
+
+*/
+
+.b--blue           { border-color: var(--blue); }
+.b--green          { border-color: var(--green); }
+.b--purple          { border-color: var(--purple); }
+.b--yellow         { border-color: var(--yellow); }
+.b--red            { border-color: var(--red); }
+.b--pink           { border-color: var(--pink); }
+.b--white          { border-color: var(--white); }
+
+.b--white-10          { border-color: var(--white-10); }
+.b--white-20          { border-color: var(--white-20); }
+.b--white-30          { border-color: var(--white-30); }
+.b--white-40          { border-color: var(--white-40); }
+.b--white-50          { border-color: var(--white-50); }
+.b--white-60          { border-color: var(--white-60); }
+.b--white-70          { border-color: var(--white-70); }
+.b--white-80          { border-color: var(--white-80); }
+.b--white-90          { border-color: var(--white-90); }
+
+.b--black-10          { border-color: var(--black-10); }
+.b--black-20          { border-color: var(--black-20); }
+.b--black-30          { border-color: var(--black-30); }
+.b--black-40          { border-color: var(--black-40); }
+.b--black-50          { border-color: var(--black-50); }
+.b--black-60          { border-color: var(--black-60); }
+.b--black-70          { border-color: var(--black-70); }
+.b--black-80          { border-color: var(--black-80); }
+.b--black-90          { border-color: var(--black-90); }
+
+.b--darkgrey       { border-color: var(--darkgrey); }
+.b--middarkgrey    { border-color: var(--middarkgrey); }
+.b--midgrey        { border-color: var(--midgrey); }
+.b--midlightgrey   { border-color: var(--midlightgrey); }
+.b--lightgrey      { border-color: var(--lightgrey); }
+.b--whitegrey      { border-color: var(--whitegrey); }
+
+/* Shades */
+.b--blue-p3       { border-color: var(--blue-p3); }
+.b--blue-p2       { border-color: var(--blue-p2); }
+.b--blue-p1       { border-color: var(--blue-p1); }
+.b--blue-m1       { border-color: var(--blue-m1); }
+.b--blue-m2       { border-color: var(--blue-m2); }
+.b--blue-m3       { border-color: var(--blue-m3); }
+
+.b--green-p3       { border-color: var(--green-p3); }
+.b--green-p2       { border-color: var(--green-p2); }
+.b--green-p1       { border-color: var(--green-p1); }
+.b--green-m1       { border-color: var(--green-m1); }
+.b--green-m2       { border-color: var(--green-m2); }
+.b--green-m3       { border-color: var(--green-m3); }
+
+.b--purple-p3       { border-color: var(--purple-p3); }
+.b--purple-p2       { border-color: var(--purple-p2); }
+.b--purple-p1       { border-color: var(--purple-p1); }
+.b--purple-m1       { border-color: var(--purple-m1); }
+.b--purple-m2       { border-color: var(--purple-m2); }
+.b--purple-m3       { border-color: var(--purple-m3); }
+
+.b--yellow-p3       { border-color: var(--yellow-p3); }
+.b--yellow-p2       { border-color: var(--yellow-p2); }
+.b--yellow-p1       { border-color: var(--yellow-p1); }
+.b--yellow-m1       { border-color: var(--yellow-m1); }
+.b--yellow-m2       { border-color: var(--yellow-m2); }
+.b--yellow-m3       { border-color: var(--yellow-m3); }
+
+.b--red-p3       { border-color: var(--red-p3); }
+.b--red-p2       { border-color: var(--red-p2); }
+.b--red-p1       { border-color: var(--red-p1); }
+.b--red-m1       { border-color: var(--red-m1); }
+.b--red-m2       { border-color: var(--red-m2); }
+.b--red-m3       { border-color: var(--red-m3); }
+
+.b--pink-p3       { border-color: var(--pink-p3); }
+.b--pink-p2       { border-color: var(--pink-p2); }
+.b--pink-p1       { border-color: var(--pink-p1); }
+.b--pink-m1       { border-color: var(--pink-m1); }
+.b--pink-m2       { border-color: var(--pink-m2); }
+.b--pink-m3       { border-color: var(--pink-m3); }
+
+.b--darkgrey-p2       { border-color: var(--darkgrey-p2); }
+.b--darkgrey-p1       { border-color: var(--darkgrey-p1); }
+.b--darkgrey-m1       { border-color: var(--darkgrey-m1); }
+.b--darkgrey-m2       { border-color: var(--darkgrey-m2); }
+
+.b--middarkgrey-p2       { border-color: var(--middarkgrey-p2); }
+.b--middarkgrey-p1       { border-color: var(--middarkgrey-p1); }
+.b--middarkgrey-m1       { border-color: var(--middarkgrey-m1); }
+.b--middarkgrey-m2       { border-color: var(--middarkgrey-m2); }
+
+.b--midgrey-p2       { border-color: var(--midgrey-p2); }
+.b--midgrey-p1       { border-color: var(--midgrey-p1); }
+.b--midgrey-m1       { border-color: var(--midgrey-m1); }
+.b--midgrey-m2       { border-color: var(--midgrey-m2); }
+
+.b--midlightgrey-p2       { border-color: var(--midlightgrey-p2); }
+.b--midlightgrey-p1       { border-color: var(--midlightgrey-p1); }
+.b--midlightgrey-m1       { border-color: var(--midlightgrey-m1); }
+.b--midlightgrey-m2       { border-color: var(--midlightgrey-m2); }
+
+.b--lightgrey-p2       { border-color: var(--lightgrey-p2); }
+.b--lightgrey-p1       { border-color: var(--lightgrey-p1); }
+.b--lightgrey-m1       { border-color: var(--lightgrey-m1); }
+.b--lightgrey-m2       { border-color: var(--lightgrey-m2); }
+
+.b--whitegrey-p2       { border-color: var(--whitegrey-p2); }
+.b--whitegrey-p1       { border-color: var(--whitegrey-p1); }
+.b--whitegrey-m1       { border-color: var(--whitegrey-m1); }
+.b--whitegrey-m2       { border-color: var(--whitegrey-m2); }
+
+.b--transparent { border-color: var(--transparent); }
+.b--inherit { border-color: inherit; }
diff --git a/ghost/admin/app/styles/spirit-product/_border-radius.css b/ghost/admin/app/styles/spirit-product/_border-radius.css
new file mode 100644
index 0000000000..d7d8365533
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_border-radius.css
@@ -0,0 +1,126 @@
+/*
+
+   BORDER RADIUS
+
+   Base:
+     br   = border-radius
+
+   Modifiers:
+     0    = 0/none
+     1    = 1st step in scale
+     2    = 2nd step in scale
+     3    = 3rd step in scale
+     4    = 4th step in scale
+
+   Literal values:
+     -100 = 100%
+     -pill = 9999px
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+  .br0 {        border-radius: 0; }
+  .br1 {        border-radius: .2rem; }
+  .br2 {        border-radius: .3rem; }
+  .br3 {        border-radius: .5rem; }
+  .br4 {        border-radius: .8rem; }
+  .br-100 {     border-radius: 100%; }
+  .br-pill {    border-radius: 9999px; }
+  .br--bottom {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
+  .br--top {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br--right {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+
+@media (--breakpoint-not-small) {
+  .br0-ns {     border-radius: 0; }
+  .br1-ns {     border-radius: .2rem; }
+  .br2-ns {     border-radius: .3rem; }
+  .br3-ns {     border-radius: .5rem; }
+  .br4-ns {     border-radius: .8rem; }
+  .br-100-ns {  border-radius: 100%; }
+  .br-pill-ns { border-radius: 9999px; }
+  .br--bottom-ns {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
+  .br--top-ns {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br--right-ns {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-ns {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+}
+
+@media (--breakpoint-medium) {
+  .br0-m {     border-radius: 0; }
+  .br1-m {     border-radius: .2rem; }
+  .br2-m {     border-radius: .3rem; }
+  .br3-m {     border-radius: .5rem; }
+  .br4-m {     border-radius: .8rem; }
+  .br-100-m {  border-radius: 100%; }
+  .br-pill-m { border-radius: 9999px; }
+  .br--bottom-m {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
+  .br--top-m {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br--right-m {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-m {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+}
+
+@media (--breakpoint-large) {
+  .br0-l {     border-radius: 0; }
+  .br1-l {     border-radius: .2rem; }
+  .br2-l {     border-radius: .3rem; }
+  .br3-l {     border-radius: .5rem; }
+  .br4-l {     border-radius: .8rem; }
+  .br-100-l {  border-radius: 100%; }
+  .br-pill-l { border-radius: 9999px; }
+  .br--bottom-l {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+  }
+  .br--top-l {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+  .br--right-l {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+  }
+  .br--left-l {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+  }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_border-style.css b/ghost/admin/app/styles/spirit-product/_border-style.css
new file mode 100644
index 0000000000..46c2517e41
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_border-style.css
@@ -0,0 +1,47 @@
+/*
+
+   BORDER STYLES
+
+   Depends on base border module in _borders.css
+
+   Base:
+     b = border-style
+
+   Modifiers:
+     --none   = none
+     --dotted = dotted
+     --dashed = dashed
+     --solid  = solid
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+ */
+
+.b--dotted { border-style: dotted; }
+.b--dashed { border-style: dashed; }
+.b--solid {  border-style: solid; }
+.b--none {   border-style: none; }
+
+@media (--breakpoint-not-small) {
+  .b--dotted-ns { border-style: dotted; }
+  .b--dashed-ns { border-style: dashed; }
+  .b--solid-ns {  border-style: solid; }
+  .b--none-ns {   border-style: none; }
+}
+
+@media (--breakpoint-medium) {
+  .b--dotted-m { border-style: dotted; }
+  .b--dashed-m { border-style: dashed; }
+  .b--solid-m {  border-style: solid; }
+  .b--none-m {   border-style: none; }
+}
+
+@media (--breakpoint-large) {
+  .b--dotted-l { border-style: dotted; }
+  .b--dashed-l { border-style: dashed; }
+  .b--solid-l {  border-style: solid; }
+  .b--none-l {   border-style: none; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_border-widths.css b/ghost/admin/app/styles/spirit-product/_border-widths.css
new file mode 100644
index 0000000000..1a95091e57
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_border-widths.css
@@ -0,0 +1,73 @@
+/*
+
+   BORDER WIDTHS
+
+   Base:
+     bw = border-width
+
+   Modifiers:
+     0 = 0 width border
+     1 = 1st step in border-width scale
+     2 = 2nd step in border-width scale
+     3 = 3rd step in border-width scale
+     4 = 4th step in border-width scale
+     5 = 5th step in border-width scale
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.bw0 { border-width: 0; }
+.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.bw4 { border-width: 1rem; }
+.bw5 { border-width: 2rem; }
+
+/* Resets */
+.bt-0 { border-top-width: 0; }
+.br-0 { border-right-width: 0; }
+.bb-0 { border-bottom-width: 0; }
+.bl-0 { border-left-width: 0; }
+
+@media (--breakpoint-not-small) {
+  .bw0-ns { border-width: 0; }
+  .bw1-ns { border-width: .125rem; }
+  .bw2-ns { border-width: .25rem; }
+  .bw3-ns { border-width: .5rem; }
+  .bw4-ns { border-width: 1rem; }
+  .bw5-ns { border-width: 2rem; }
+  .bt-0-ns { border-top-width: 0; }
+  .br-0-ns { border-right-width: 0; }
+  .bb-0-ns { border-bottom-width: 0; }
+  .bl-0-ns { border-left-width: 0; }
+}
+
+@media (--breakpoint-medium) {
+  .bw0-m { border-width: 0; }
+  .bw1-m { border-width: .125rem; }
+  .bw2-m { border-width: .25rem; }
+  .bw3-m { border-width: .5rem; }
+  .bw4-m { border-width: 1rem; }
+  .bw5-m { border-width: 2rem; }
+  .bt-0-m { border-top-width: 0; }
+  .br-0-m { border-right-width: 0; }
+  .bb-0-m { border-bottom-width: 0; }
+  .bl-0-m { border-left-width: 0; }
+}
+
+@media (--breakpoint-large) {
+  .bw0-l { border-width: 0; }
+  .bw1-l { border-width: .125rem; }
+  .bw2-l { border-width: .25rem; }
+  .bw3-l { border-width: .5rem; }
+  .bw4-l { border-width: 1rem; }
+  .bw5-l { border-width: 2rem; }
+  .bt-0-l { border-top-width: 0; }
+  .br-0-l { border-right-width: 0; }
+  .bb-0-l { border-bottom-width: 0; }
+  .bl-0-l { border-left-width: 0; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_borders.css b/ghost/admin/app/styles/spirit-product/_borders.css
new file mode 100644
index 0000000000..1d94312ba9
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_borders.css
@@ -0,0 +1,56 @@
+/*
+
+    BORDERS
+
+    Base:
+      b = border
+
+    Modifiers:
+      a = all
+      t = top
+      r = right
+      b = bottom
+      l = left
+      n = none
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+  .ba { border-style: solid; border-width: 1px; }
+  .bt { border-top-style: solid; border-top-width: 1px; }
+  .br { border-right-style: solid; border-right-width: 1px; }
+  .bb { border-bottom-style: solid; border-bottom-width: 1px; }
+  .bl { border-left-style: solid; border-left-width: 1px; }
+  .bn { border-style: none; border-width: 0; }
+
+
+@media (--breakpoint-not-small) {
+  .ba-ns { border-style: solid; border-width: 1px; }
+  .bt-ns { border-top-style: solid; border-top-width: 1px; }
+  .br-ns { border-right-style: solid; border-right-width: 1px; }
+  .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
+  .bl-ns { border-left-style: solid; border-left-width: 1px; }
+  .bn-ns { border-style: none; border-width: 0; }
+}
+
+@media (--breakpoint-medium) {
+  .ba-m { border-style: solid; border-width: 1px; }
+  .bt-m { border-top-style: solid; border-top-width: 1px; }
+  .br-m { border-right-style: solid; border-right-width: 1px; }
+  .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
+  .bl-m { border-left-style: solid; border-left-width: 1px; }
+  .bn-m { border-style: none; border-width: 0; }
+}
+
+@media (--breakpoint-large) {
+  .ba-l { border-style: solid; border-width: 1px; }
+  .bt-l { border-top-style: solid; border-top-width: 1px; }
+  .br-l { border-right-style: solid; border-right-width: 1px; }
+  .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
+  .bl-l { border-left-style: solid; border-left-width: 1px; }
+  .bn-l { border-style: none; border-width: 0; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_box-shadow.css b/ghost/admin/app/styles/spirit-product/_box-shadow.css
new file mode 100644
index 0000000000..f9f63baa2f
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_box-shadow.css
@@ -0,0 +1,15 @@
+/*
+
+  BOX-SHADOW
+
+  Media Query Extensions:
+   -ns = not-small
+   -m  = medium
+   -l  = large
+
+ */
+
+.shadow-1           { box-shadow: 0 0 1px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.03); }
+.shadow-1-strong    { box-shadow: 0 0 1px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.03); }
+.shadow-2           { box-shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08); }
+.shadow-3           { box-shadow: 0 0 1px rgba(0,0,0,.05), 0 10px 28px rgba(0,0,0,.07); }
diff --git a/ghost/admin/app/styles/spirit-product/_box-sizing.css b/ghost/admin/app/styles/spirit-product/_box-sizing.css
new file mode 100644
index 0000000000..8a965e0902
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_box-sizing.css
@@ -0,0 +1,48 @@
+/*
+ 
+  BOX SIZING
+
+*/
+
+html,
+body,
+div,
+article,
+aside,
+section,
+main,
+nav,
+footer,
+header,
+form,
+fieldset,
+legend,
+pre,
+code,
+a,
+h1,h2,h3,h4,h5,h6,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figcaption,
+figure,
+textarea,
+table, 
+td,
+th,
+tr,
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+.border-box {
+  box-sizing: border-box;
+}
+
diff --git a/ghost/admin/app/styles/spirit-product/_clears.css b/ghost/admin/app/styles/spirit-product/_clears.css
new file mode 100644
index 0000000000..4366b91363
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_clears.css
@@ -0,0 +1,39 @@
+/*
+
+   CLEARFIX
+
+*/
+
+/* Nicolas Gallaghers Clearfix solution
+   Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
+.cf:before,
+.cf:after { content: " "; display: table; }
+.cf:after { clear: both; }
+.cf {       *zoom: 1; }
+
+.cl { clear: left; }
+.cr { clear: right; }
+.cb { clear: both; }
+.cn { clear: none; }
+
+@media (--breakpoint-not-small) {
+  .cl-ns { clear: left; }
+  .cr-ns { clear: right; }
+  .cb-ns { clear: both; }
+  .cn-ns { clear: none; }
+}
+
+@media (--breakpoint-medium) {
+  .cl-m { clear: left; }
+  .cr-m { clear: right; }
+  .cb-m { clear: both; }
+  .cn-m { clear: none; }
+}
+
+@media (--breakpoint-large) {
+  .cl-l { clear: left; }
+  .cr-l { clear: right; }
+  .cb-l { clear: both; }
+  .cn-l { clear: none; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_code.css b/ghost/admin/app/styles/spirit-product/_code.css
new file mode 100644
index 0000000000..ac691f30d4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_code.css
@@ -0,0 +1,11 @@
+/*
+
+   CODE
+
+*/
+
+.pre {
+  overflow-x: auto;
+  overflow-y: hidden;
+  overflow:   scroll;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_colors.css b/ghost/admin/app/styles/spirit-product/_colors.css
new file mode 100644
index 0000000000..70218295a6
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_colors.css
@@ -0,0 +1,124 @@
+/*
+
+   Tachyons
+   COLOR VARIABLES
+
+   Grayscale
+   - Solids
+   - Transparencies
+   Colors
+
+*/
+
+:root {
+    /* Base colors */
+    --blue: #3eb0ef;
+    --green: #a4d037;
+    --purple: #ad26b4;
+    --yellow: #fecd35;
+    --red: #f05230;
+    --pink: #fa3a57;
+    --white: #ffffff;
+
+    --white-10: rgba(255, 255, 255, 0.1);
+    --white-20: rgba(255, 255, 255, 0.2);
+    --white-30: rgba(255, 255, 255, 0.3);
+    --white-40: rgba(255, 255, 255, 0.4);
+    --white-50: rgba(255, 255, 255, 0.5);
+    --white-60: rgba(255, 255, 255, 0.6);
+    --white-70: rgba(255, 255, 255, 0.7);
+    --white-80: rgba(255, 255, 255, 0.8);
+    --white-90: rgba(255, 255, 255, 0.9);
+
+    --black-10: rgba(40, 48, 52, 0.1);
+    --black-20: rgba(40, 48, 52, 0.2);
+    --black-30: rgba(40, 48, 52, 0.3);
+    --black-40: rgba(40, 48, 52, 0.4);
+    --black-50: rgba(40, 48, 52, 0.5);
+    --black-60: rgba(40, 48, 52, 0.6);
+    --black-70: rgba(40, 48, 52, 0.7);
+    --black-80: rgba(40, 48, 52, 0.8);
+    --black-90: rgba(40, 48, 52, 0.9);
+
+    --darkgrey: #343f44;
+    --middarkgrey: #54666D;
+    --midgrey: #738a94;
+    --midlightgrey: #9BAEB8;
+    --lightgrey: #c5d2d9;
+    --whitegrey: #e5eff5;
+
+    --transparent:transparent;
+
+    /* Tone variations */
+    --blue-p3: color(var(--blue) l(+15%));
+    --blue-p2: color(var(--blue) l(+10%));
+    --blue-p1: color(var(--blue) l(+5%));
+    --blue-m1: color(var(--blue) l(-5%));
+    --blue-m2: color(var(--blue) l(-10%));
+    --blue-m3: color(var(--blue) l(-15%));
+
+    --green-p3: color(var(--green) l(+15%));
+    --green-p2: color(var(--green) l(+10%));
+    --green-p1: color(var(--green) l(+5%));
+    --green-m1: color(var(--green) l(-5%));
+    --green-m2: color(var(--green) l(-10%));
+    --green-m3: color(var(--green) l(-15%));
+
+    --purple-p3: color(var(--purple) l(+15%));
+    --purple-p2: color(var(--purple) l(+10%));
+    --purple-p1: color(var(--purple) l(+5%));
+    --purple-m1: color(var(--purple) l(-5%));
+    --purple-m2: color(var(--purple) l(-10%));
+    --purple-m3: color(var(--purple) l(-15%));
+
+    --yellow-p3: color(var(--yellow) l(+15%));
+    --yellow-p2: color(var(--yellow) l(+10%));
+    --yellow-p1: color(var(--yellow) l(+5%));
+    --yellow-m1: color(var(--yellow) l(-5%));
+    --yellow-m2: color(var(--yellow) l(-10%));
+    --yellow-m3: color(var(--yellow) l(-13%));
+
+    --red-p3: color(var(--red) l(+15%));
+    --red-p2: color(var(--red) l(+10%));
+    --red-p1: color(var(--red) l(+5%));
+    --red-m1: color(var(--red) l(-5%));
+    --red-m2: color(var(--red) l(-10%));
+    --red-m3: color(var(--red) l(-15%));
+
+    --pink-p3: color(var(--pink) l(+15%));
+    --pink-p2: color(var(--pink) l(+10%));
+    --pink-p1: color(var(--pink) l(+5%));
+    --pink-m1: color(var(--pink) l(-5%));
+    --pink-m2: color(var(--pink) l(-10%));
+    --pink-m3: color(var(--pink) l(-15%));
+
+    --darkgrey-p2: color(var(--darkgrey) h(-1) l(+7%));
+    --darkgrey-p1: color(var(--darkgrey) h(+1) l(+3%));
+    --darkgrey-m1: color(var(--darkgrey) l(-3%));
+    --darkgrey-m2: color(var(--darkgrey) l(-6%));
+
+    --middarkgrey-p2: color(var(--middarkgrey) h(+1%) l(+7%));
+    --middarkgrey-p1: color(var(--middarkgrey) h(+2%) l(+4%));
+    --middarkgrey-m1: color(var(--middarkgrey) h(+2%) l(-3%));
+    --middarkgrey-m2: color(var(--middarkgrey) h(+1%) l(-7%));
+
+    --midgrey-p2: color(var(--midgrey) h(+2%) s(+2%) l(+7%));
+    --midgrey-p1: color(var(--midgrey) h(+1%) s(+1%) l(+4%));
+    --midgrey-m1: color(var(--midgrey) h(+1%) l(-3%));
+    --midgrey-m2: color(var(--midgrey) l(-7%));
+
+    --midlightgrey-p2: color(var(--midlightgrey) h(-3%) s(+2%) l(+8%));
+    --midlightgrey-p1: color(var(--midlightgrey) h(-1%) s(+1%) l(+4%));
+    --midlightgrey-m1: color(var(--midlightgrey) h(+1%) s(-1%) l(-3%));
+    --midlightgrey-m2: color(var(--midlightgrey) h(-3%) s(-2%) l(-7%));
+
+    --lightgrey-p2: color(var(--lightgrey) h(+1%) s(+14%) l(+8%));
+    --lightgrey-p1: color(var(--lightgrey) h(+1%) s(+12%) l(+6%));
+    --lightgrey-m1: color(var(--lightgrey) s(-1%) l(-4%));
+    --lightgrey-m2: color(var(--lightgrey) h(-2%) s(-2%) l(-7%));
+
+    --whitegrey-p2: color(var(--whitegrey) h(+7%) s(-4%) l(+5%));
+    --whitegrey-p1: color(var(--whitegrey) h(+1%) s(-2%) l(+2%));
+    --whitegrey-m1: color(var(--whitegrey) h(-1%) s(-7%) l(-3%));
+    --whitegrey-m2: color(var(--whitegrey) h(-1%) s(-11%) l(-6%));
+}
diff --git a/ghost/admin/app/styles/spirit-product/_coordinates.css b/ghost/admin/app/styles/spirit-product/_coordinates.css
new file mode 100644
index 0000000000..93ef704fab
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_coordinates.css
@@ -0,0 +1,266 @@
+/*
+
+   COORDINATES
+   Docs: http://tachyons.io/docs/layout/position/
+
+   Use in combination with the position module.
+
+   Base:
+     top
+     bottom
+     right
+     left
+
+   Modifiers:
+     -0  = literal value 0
+     -1  = literal value 1
+     -2  = literal value 2
+     --1 = literal value -1
+     --2 = literal value -2
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/* .top-0    { top:    var(--spacing-none); }
+.right-0  { right:  var(--spacing-none); }
+.bottom-0 { bottom: var(--spacing-none); }
+.left-0   { left:   var(--spacing-none); }
+
+.top-1    { top:    var(--spacing-extra-small); }
+.right-1  { right:  var(--spacing-extra-small); }
+.bottom-1 { bottom: var(--spacing-extra-small); }
+.left-1   { left:   var(--spacing-extra-small); }
+
+.top-2    { top:    var(--spacing-small); }
+.right-2  { right:  var(--spacing-small); }
+.bottom-2 { bottom: var(--spacing-small); }
+.left-2   { left:   var(--spacing-small); }
+
+.top-3    { top:    var(--spacing-medium); }
+.right-3  { right:  var(--spacing-medium); }
+.bottom-3 { bottom: var(--spacing-medium); }
+.left-3   { left:   var(--spacing-medium); }
+
+.top-4    { top:    var(--spacing-large); }
+.right-4  { right:  var(--spacing-large); }
+.bottom-4 { bottom: var(--spacing-large); }
+.left-4   { left:   var(--spacing-large); }
+
+.top-5    { top:    var(--spacing-xl); }
+.right-5  { right:  var(--spacing-xl); }
+.bottom-5 { bottom: var(--spacing-xl); }
+.left-5   { left:   var(--spacing-xl); }
+
+.top-4    { top:    var(--spacing-xxl); }
+.right-4  { right:  var(--spacing-xxl); }
+.bottom-4 { bottom: var(--spacing-xxl); }
+.left-4   { left:   var(--spacing-xxl); }
+
+.top-7    { top:    var(--spacing-xxxl); }
+.right-7  { right:  var(--spacing-xxxl); }
+.bottom-7 { bottom: var(--spacing-xxxl); }
+.left-7   { left:   var(--spacing-xxxl); }
+
+.top-8    { top:    var(--spacing-xxxxl); }
+.right-8  { right:  var(--spacing-xxxxl); }
+.bottom-8 { bottom: var(--spacing-xxxxl); }
+.left-8   { left:   var(--spacing-xxxxl); }
+
+.top-9    { top:    var(--spacing-xxxxxl); }
+.right-9  { right:  var(--spacing-xxxxxl); }
+.bottom-9 { bottom: var(--spacing-xxxxxl); }
+.left-9   { left:   var(--spacing-xxxxxl); }
+
+.top--1    { top:    -var(--spacing-extra-small); }
+.right--1  { right:  -var(--spacing-extra-small); }
+.bottom--1 { bottom: -var(--spacing-extra-small); }
+.left--1   { left:   -var(--spacing-extra-small); }
+
+
+.absolute--fill {
+  top: var(--spacing-none);
+  right: var(--spacing-none);
+  bottom: var(--spacing-none);
+  left: var(--spacing-none);
+}
+
+@media (--breakpoint-not-small) {
+  .top-0-ns     { top:   var(--spacing-none); }
+  .left-0-ns    { left:  var(--spacing-none); }
+  .right-0-ns   { right: var(--spacing-none); }
+  .bottom-0-ns  { bottom: var(--spacing-none); }
+
+  .top-1-ns     { top:   var(--spacing-extra-small); }
+  .left-1-ns    { left:  var(--spacing-extra-small); }
+  .right-1-ns   { right: var(--spacing-extra-small); }
+  .bottom-1-ns  { bottom: var(--spacing-extra-small); }
+
+  .top-2-ns     { top:   var(--spacing-small); }
+  .left-2-ns    { left:  var(--spacing-small); }
+  .right-2-ns   { right: var(--spacing-small); }
+  .bottom-2-ns  { bottom: var(--spacing-small); }
+
+  .top-3    { top:    var(--spacing-medium); }
+  .right-3  { right:  var(--spacing-medium); }
+  .bottom-3 { bottom: var(--spacing-medium); }
+  .left-3   { left:   var(--spacing-medium); }
+
+  .top-4    { top:    var(--spacing-large); }
+  .right-4  { right:  var(--spacing-large); }
+  .bottom-4 { bottom: var(--spacing-large); }
+  .left-4   { left:   var(--spacing-large); }
+
+  .top-5    { top:    var(--spacing-xl); }
+  .right-5  { right:  var(--spacing-xl); }
+  .bottom-5 { bottom: var(--spacing-xl); }
+  .left-5   { left:   var(--spacing-xl); }
+
+  .top-4    { top:    var(--spacing-xxl); }
+  .right-4  { right:  var(--spacing-xxl); }
+  .bottom-4 { bottom: var(--spacing-xxl); }
+  .left-4   { left:   var(--spacing-xxl); }
+
+  .top-7    { top:    var(--spacing-xxxl); }
+  .right-7  { right:  var(--spacing-xxxl); }
+  .bottom-7 { bottom: var(--spacing-xxxl); }
+  .left-7   { left:   var(--spacing-xxxl); }
+
+  .top-8    { top:    var(--spacing-xxxxl); }
+  .right-8  { right:  var(--spacing-xxxxl); }
+  .bottom-8 { bottom: var(--spacing-xxxxl); }
+  .left-8   { left:   var(--spacing-xxxxl); }
+
+  .top-9    { top:    var(--spacing-xxxxxl); }
+  .right-9  { right:  var(--spacing-xxxxxl); }
+  .bottom-9 { bottom: var(--spacing-xxxxxl); }
+  .left-9   { left:   var(--spacing-xxxxxl); }
+
+  .absolute--fill-ns {
+    top: var(--spacing-none);
+    right: var(--spacing-none);
+    bottom: var(--spacing-none);
+    left: var(--spacing-none);
+  }
+}
+
+@media (--breakpoint-medium) {
+  .top-0-m     { top:   var(--spacing-none); }
+  .left-0-m    { left:  var(--spacing-none); }
+  .right-0-m   { right: var(--spacing-none); }
+  .bottom-0-m  { bottom: var(--spacing-none); }
+
+  .top-1-m     { top:   var(--spacing-extra-small); }
+  .left-1-m    { left:  var(--spacing-extra-small); }
+  .right-1-m   { right: var(--spacing-extra-small); }
+  .bottom-1-m  { bottom: var(--spacing-extra-small); }
+
+  .top-2-m     { top:   var(--spacing-small); }
+  .left-2-m    { left:  var(--spacing-small); }
+  .right-2-m   { right: var(--spacing-small); }
+  .bottom-2-m  { bottom: var(--spacing-small); }
+
+  .top-3    { top:    var(--spacing-medium); }
+  .right-3  { right:  var(--spacing-medium); }
+  .bottom-3 { bottom: var(--spacing-medium); }
+  .left-3   { left:   var(--spacing-medium); }
+
+  .top-4    { top:    var(--spacing-large); }
+  .right-4  { right:  var(--spacing-large); }
+  .bottom-4 { bottom: var(--spacing-large); }
+  .left-4   { left:   var(--spacing-large); }
+
+  .top-5    { top:    var(--spacing-xl); }
+  .right-5  { right:  var(--spacing-xl); }
+  .bottom-5 { bottom: var(--spacing-xl); }
+  .left-5   { left:   var(--spacing-xl); }
+
+  .top-4    { top:    var(--spacing-xxl); }
+  .right-4  { right:  var(--spacing-xxl); }
+  .bottom-4 { bottom: var(--spacing-xxl); }
+  .left-4   { left:   var(--spacing-xxl); }
+
+  .top-7    { top:    var(--spacing-xxxl); }
+  .right-7  { right:  var(--spacing-xxxl); }
+  .bottom-7 { bottom: var(--spacing-xxxl); }
+  .left-7   { left:   var(--spacing-xxxl); }
+
+  .top-8    { top:    var(--spacing-xxxxl); }
+  .right-8  { right:  var(--spacing-xxxxl); }
+  .bottom-8 { bottom: var(--spacing-xxxxl); }
+  .left-8   { left:   var(--spacing-xxxxl); }
+
+  .top-9    { top:    var(--spacing-xxxxxl); }
+  .right-9  { right:  var(--spacing-xxxxxl); }
+  .bottom-9 { bottom: var(--spacing-xxxxxl); }
+  .left-9   { left:   var(--spacing-xxxxxl); }
+
+  .absolute--fill-m {
+    top: var(--spacing-none);
+    right: var(--spacing-none);
+    bottom: var(--spacing-none);
+    left: var(--spacing-none);
+  }
+}
+
+@media (--breakpoint-large) {
+  .top-0-l     { top:   var(--spacing-none); }
+  .left-0-l    { left:  var(--spacing-none); }
+  .right-0-l   { right: var(--spacing-none); }
+  .bottom-0-l  { bottom: var(--spacing-none); }
+
+  .top-1-l     { top:   var(--spacing-extra-small); }
+  .left-1-l    { left:  var(--spacing-extra-small); }
+  .right-1-l   { right: var(--spacing-extra-small); }
+  .bottom-1-l  { bottom: var(--spacing-extra-small); }
+
+  .top-2-l     { top:   var(--spacing-small); }
+  .left-2-l    { left:  var(--spacing-small); }
+  .right-2-l   { right: var(--spacing-small); }
+  .bottom-2-l  { bottom: var(--spacing-small); }
+
+  .top-3    { top:    var(--spacing-medium); }
+  .right-3  { right:  var(--spacing-medium); }
+  .bottom-3 { bottom: var(--spacing-medium); }
+  .left-3   { left:   var(--spacing-medium); }
+
+  .top-4    { top:    var(--spacing-large); }
+  .right-4  { right:  var(--spacing-large); }
+  .bottom-4 { bottom: var(--spacing-large); }
+  .left-4   { left:   var(--spacing-large); }
+
+  .top-5    { top:    var(--spacing-xl); }
+  .right-5  { right:  var(--spacing-xl); }
+  .bottom-5 { bottom: var(--spacing-xl); }
+  .left-5   { left:   var(--spacing-xl); }
+
+  .top-4    { top:    var(--spacing-xxl); }
+  .right-4  { right:  var(--spacing-xxl); }
+  .bottom-4 { bottom: var(--spacing-xxl); }
+  .left-4   { left:   var(--spacing-xxl); }
+
+  .top-7    { top:    var(--spacing-xxxl); }
+  .right-7  { right:  var(--spacing-xxxl); }
+  .bottom-7 { bottom: var(--spacing-xxxl); }
+  .left-7   { left:   var(--spacing-xxxl); }
+
+  .top-8    { top:    var(--spacing-xxxxl); }
+  .right-8  { right:  var(--spacing-xxxxl); }
+  .bottom-8 { bottom: var(--spacing-xxxxl); }
+  .left-8   { left:   var(--spacing-xxxxl); }
+
+  .top-9    { top:    var(--spacing-xxxxxl); }
+  .right-9  { right:  var(--spacing-xxxxxl); }
+  .bottom-9 { bottom: var(--spacing-xxxxxl); }
+  .left-9   { left:   var(--spacing-xxxxxl); }
+
+  .absolute--fill-l {
+    top: var(--spacing-none);
+    right: var(--spacing-none);
+    bottom: var(--spacing-none);
+    left: var(--spacing-none);
+  }
+} */
diff --git a/ghost/admin/app/styles/spirit-product/_custom-styles.css b/ghost/admin/app/styles/spirit-product/_custom-styles.css
new file mode 100644
index 0000000000..8b5175a8fd
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_custom-styles.css
@@ -0,0 +1,150 @@
+/* Buttons */
+/* ---------------------------------------------- */
+button, .btn-base {
+    transition: none!important;
+    text-decoration: none!important;
+    user-select: none;
+    outline: none;
+    /* border: none; */
+}
+
+.btn-base span {
+    padding: 0 14px;
+    height: 37px;
+    line-height: 37px;
+    border-radius: 4px;
+}
+
+/* Blue button */
+.btn-blue {
+    padding: 1px;
+    background: linear-gradient(
+    color(var(--blue) blackness(+10%)),
+    color(var(--blue) lightness(-15%) saturation(-15%))
+    );
+    text-shadow: 0 -1px 0 rgba(0,0,0,.1);
+    box-shadow: 0 1px 0 rgba(0,0,0,.12);
+}
+
+.btn-blue span {
+    background: linear-gradient(
+    color(var(--blue) whiteness(+7%)),
+    color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
+    color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
+    color(var(--blue) lightness(-4%) saturation(-10%))
+    );
+    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1);
+}
+.btn-blue:active,
+.btn-blue:focus {
+    background: color(var(--blue) lightness(-20%) saturation(-15%));
+}
+.btn-blue:active span,
+.btn-blue:focus span {
+    background: color(var(--blue) lightness(-7%) saturation(-10%));
+    box-shadow: none;
+}
+
+
+/* Green button */
+.btn-green {
+    padding: 1px;
+    background: linear-gradient(
+    color(var(--green) blackness(+7%)),
+    color(var(--green) lightness(-10%) saturation(-10%))
+    );
+    text-shadow: 0 -1px 0 rgba(0,0,0,.1);
+    box-shadow: 0 1px 0 rgba(0,0,0,.12);
+}
+
+.btn-green span {
+    background: linear-gradient(
+    color(var(--green) whiteness(+5%)),
+    color(var(--green) lightness(-4%) saturation(-8%)) 60%,
+    color(var(--green) lightness(-4%) saturation(-8%)) 90%,
+    color(var(--green) lightness(-4%) saturation(-10%))
+    );
+    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.1);
+}
+
+.btn-green:active,
+.btn-green:focus {
+    background: color(var(--green) lightness(-10%) saturation(-10%));
+}
+.btn-green:active span,
+.btn-green:focus span {
+    background: color(var(--green) lightness(-4%) saturation(-8%));
+    box-shadow: none;
+}
+
+/* Forms */
+.form-icon {
+    position: absolute;
+    top: calc(50% + 2px);
+    left: 12px;
+    z-index: 100;
+    height: 14px;
+    fill: #a6bac5;
+}
+
+.form-text {
+    user-select: none;
+    transition: border-color .15s linear;
+    -webkit-appearance: none;
+    outline: none;
+}
+
+.form-text::placeholder {
+    color: var(--lightgrey);
+}
+
+.form-input-w-icon {
+    padding-left: 35px;
+}
+
+.form-input-w-button {
+    padding-right: 77px;
+}
+
+.form-btn-forgot {
+    right: 1px;
+    padding: 5px 11px 5px 12px;
+    border: none;
+    border-left: 1px solid var(--lightgrey);
+    background-color: transparent;
+    top: 27px;
+    line-height: 1.1em;
+}
+
+.form-response {
+    top: 0;
+    right: 0;
+}
+
+/* Koenig Styles */
+.kg-editor {
+    font-family: georgia,
+                 serif;
+}
+.kg-editor a {
+    color: var(--darkgrey-m2);
+    text-decoration: none;
+    box-shadow: inset 0 -1px 0 var(--blue);
+}
+.kg-editor a:hover {
+    color: var(--blue);
+}
+.kg-code-inline {
+    padding: 0 5px 2px;
+}
+.kg-link     { box-shadow: inset 0 -1px 0 var(--blue); }
+.kg-mark { background-color: ##fdffb6; }
+.kg-card-hover:hover,
+.kg-card-selected {
+    border: 1px solid var(--blue);
+}
+
+/* Editor styles */
+.mih100vh {
+    min-height: 100vh;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_debug-children.css b/ghost/admin/app/styles/spirit-product/_debug-children.css
new file mode 100644
index 0000000000..10204dacc2
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_debug-children.css
@@ -0,0 +1,14 @@
+/*
+
+  DEBUG CHILDREN
+  Docs: http://tachyons.io/docs/debug/
+
+  Just add the debug class to any element to see outlines on its
+  children.
+
+*/
+
+.debug * { outline: 1px solid gold; }
+.debug-white * { outline: 1px solid white; }
+.debug-black * { outline: 1px solid black; }
+
diff --git a/ghost/admin/app/styles/spirit-product/_debug-grid.css b/ghost/admin/app/styles/spirit-product/_debug-grid.css
new file mode 100644
index 0000000000..8bb85bc567
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_debug-grid.css
@@ -0,0 +1,26 @@
+/*
+
+   DEBUG GRID
+   http://tachyons.io/docs/debug-grid/
+
+   Can be useful for debugging layout issues
+   or helping to make sure things line up perfectly.
+   Just tack one of these classes onto a parent element.
+
+*/
+
+.debug-grid {
+  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-16 {
+  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-8-solid {
+  background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
+}
+
+.debug-grid-16-solid {
+  background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_debug.css b/ghost/admin/app/styles/spirit-product/_debug.css
new file mode 100644
index 0000000000..f09f2b5190
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_debug.css
@@ -0,0 +1,132 @@
+/* 
+ 
+  DEBUG (PESTICIDE)
+  Docs: http://tachyons.io/docs/debug/
+
+  This is a partial you have to manually include in your
+  build file. It places a different colored outline on 
+  each element which can help you debug layout issues.
+  There is also a handy chrome extension that can 
+  be found at http://pesticide.io
+
+*/
+
+body {        outline: 1px solid  #2980B9!important; }
+article {     outline: 1px solid  #3498DB!important; }
+nav {         outline: 1px solid  #0088C3!important; }
+aside {       outline: 1px solid  #33A0CE!important; }
+section {     outline: 1px solid  #66B8DA!important; }
+header {      outline: 1px solid  #99CFE7!important; }
+footer {      outline: 1px solid  #CCE7F3!important; }
+h1 {          outline: 1px solid  #162544!important; }
+h2 {          outline: 1px solid  #314E6E!important; }
+h3 {          outline: 1px solid  #3E5E85!important; }
+h4 {          outline: 1px solid  #449BAF!important; }
+h5 {          outline: 1px solid  #C7D1CB!important; }
+h6 {          outline: 1px solid  #4371D0!important; }
+main {        outline: 1px solid  #2F4F90!important; }
+address {     outline: 1px solid  #1A2C51!important; }
+div {         outline: 1px solid  #036CDB!important; }
+
+
+p {           outline: 1px solid  #AC050B!important; }
+hr {          outline: 1px solid  #FF063F!important; }
+pre {         outline: 1px solid  #850440!important; }
+blockquote {  outline: 1px solid  #F1B8E7!important; }
+ol {          outline: 1px solid  #FF050C!important; }
+ul {          outline: 1px solid  #D90416!important; }
+li {          outline: 1px solid  #D90416!important; }
+dl {          outline: 1px solid  #FD3427!important; }
+dt {          outline: 1px solid  #FF0043!important; }
+dd {          outline: 1px solid  #E80174!important; }
+figure {      outline: 1px solid  #FF00BB!important; }
+figcaption {  outline: 1px solid  #BF0032!important; }
+
+
+
+table {       outline: 1px solid  #00CC99!important; }
+caption {     outline: 1px solid  #37FFC4!important; }
+thead {       outline: 1px solid  #98DACA!important; }
+tbody {       outline: 1px solid  #64A7A0!important; }
+tfoot {       outline: 1px solid  #22746B!important; }
+tr {          outline: 1px solid  #86C0B2!important; }
+th {          outline: 1px solid  #A1E7D6!important; }
+td {          outline: 1px solid  #3F5A54!important; }
+col {         outline: 1px solid  #6C9A8F!important; }
+colgroup {    outline: 1px solid  #6C9A9D!important; }
+
+
+button {      outline: 1px solid  #DA8301!important; }
+datalist {    outline: 1px solid  #C06000!important; }
+fieldset {    outline: 1px solid  #D95100!important; }
+form {        outline: 1px solid  #D23600!important; }
+input {       outline: 1px solid  #FCA600!important; }
+keygen {      outline: 1px solid  #B31E00!important; }
+label {       outline: 1px solid  #EE8900!important; }
+legend {      outline: 1px solid  #DE6D00!important; }
+meter {       outline: 1px solid  #E8630C!important; }
+optgroup {    outline: 1px solid  #B33600!important; }
+option {      outline: 1px solid  #FF8A00!important; }
+output {      outline: 1px solid  #FF9619!important; }
+progress {    outline: 1px solid  #E57C00!important; }
+select {      outline: 1px solid  #E26E0F!important; }
+textarea {    outline: 1px solid  #CC5400!important; }
+
+
+
+details {     outline: 1px solid  #33848F!important; }
+summary {     outline: 1px solid  #60A1A6!important; }
+command {     outline: 1px solid  #438DA1!important; }
+menu {        outline: 1px solid  #449DA6!important; }
+
+
+
+del {         outline: 1px solid  #BF0000!important; }
+ins {         outline: 1px solid  #400000!important; }
+
+
+
+img     {     outline: 1px solid #22746B!important; }
+iframe  {     outline: 1px solid #64A7A0!important; }
+embed   {     outline: 1px solid #98DACA!important; }
+object  {     outline: 1px solid #00CC99!important; }
+param   {     outline: 1px solid #37FFC4!important; }
+video   {     outline: 1px solid #6EE866!important; }
+audio   {     outline: 1px solid #027353!important; }
+source  {     outline: 1px solid #012426!important; }
+canvas  {     outline: 1px solid #A2F570!important; }
+track   {     outline: 1px solid #59A600!important; }
+map     {     outline: 1px solid #7BE500!important; }
+area    {     outline: 1px solid #305900!important; }
+
+
+
+a {           outline: 1px solid #FF62AB!important; }
+em {          outline: 1px solid #800B41!important; }
+strong {      outline: 1px solid #FF1583!important; }
+i {           outline: 1px solid #803156!important; }
+b {           outline: 1px solid #CC1169!important; }
+u {           outline: 1px solid #FF0430!important; }
+s {           outline: 1px solid #F805E3!important; }
+small {       outline: 1px solid #D107B2!important; }
+abbr {        outline: 1px solid #4A0263!important; }
+q {           outline: 1px solid #240018!important; }
+cite {        outline: 1px solid #64003C!important; }
+dfn {         outline: 1px solid #B4005A!important; }
+sub {         outline: 1px solid #DBA0C8!important; }
+sup {         outline: 1px solid #CC0256!important; }
+time {        outline: 1px solid #D6606D!important; }
+code {        outline: 1px solid #E04251!important; }
+kbd {         outline: 1px solid #5E001F!important; }
+samp {        outline: 1px solid #9C0033!important; }
+var {         outline: 1px solid #D90047!important; }
+mark {        outline: 1px solid #FF0053!important; }
+bdi {         outline: 1px solid #BF3668!important; }
+bdo {         outline: 1px solid #6F1400!important; }
+ruby {        outline: 1px solid #FF7B93!important; }
+rt {          outline: 1px solid #FF2F54!important; }
+rp {          outline: 1px solid #803E49!important; }
+span {        outline: 1px solid #CC2643!important; }
+br {          outline: 1px solid #DB687D!important; }
+wbr {         outline: 1px solid #DB175B!important; }
+
diff --git a/ghost/admin/app/styles/spirit-product/_display.css b/ghost/admin/app/styles/spirit-product/_display.css
new file mode 100644
index 0000000000..5eb68b307a
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_display.css
@@ -0,0 +1,104 @@
+/*
+
+   DISPLAY
+   Docs: http://tachyons.io/docs/layout/display
+
+   Base:
+    d = display
+
+   Modifiers:
+    n     = none
+    b     = block
+    ib    = inline-block
+    it    = inline-table
+    t     = table
+    tc    = table-cell
+    t-row          = table-row
+    t-columm       = table-column
+    t-column-group = table-column-group
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.dn {              display: none; }
+.di {              display: inline; }
+.db {              display: block; }
+.dib {             display: inline-block; }
+.dit {             display: inline-table; }
+.dt {              display: table; }
+.dtc {             display: table-cell; }
+.dt-row {          display: table-row; }
+.dt-row-group {    display: table-row-group; }
+.dt-column {       display: table-column; }
+.dt-column-group { display: table-column-group; }
+
+/*
+  This will set table to full width and then
+  all cells will be equal width
+*/
+.dt--fixed {
+  table-layout: fixed;
+  width: 100%;
+}
+
+@media (--breakpoint-not-small) {
+  .dn-ns {              display: none; }
+  .di-ns {              display: inline; }
+  .db-ns {              display: block; }
+  .dib-ns {             display: inline-block; }
+  .dit-ns {             display: inline-table; }
+  .dt-ns {              display: table; }
+  .dtc-ns {             display: table-cell; }
+  .dt-row-ns {          display: table-row; }
+  .dt-row-group-ns {    display: table-row-group; }
+  .dt-column-ns {       display: table-column; }
+  .dt-column-group-ns { display: table-column-group; }
+
+  .dt--fixed-ns {
+    table-layout: fixed;
+    width: 100%;
+  }
+}
+
+@media (--breakpoint-medium) {
+  .dn-m {              display: none; }
+  .di-m {              display: inline; }
+  .db-m {              display: block; }
+  .dib-m {             display: inline-block; }
+  .dit-m {             display: inline-table; }
+  .dt-m {              display: table; }
+  .dtc-m {             display: table-cell; }
+  .dt-row-m {          display: table-row; }
+  .dt-row-group-m {    display: table-row-group; }
+  .dt-column-m {       display: table-column; }
+  .dt-column-group-m { display: table-column-group; }
+
+  .dt--fixed-m {
+    table-layout: fixed;
+    width: 100%;
+  }
+}
+
+@media (--breakpoint-large) {
+  .dn-l {              display: none; }
+  .di-l {              display: inline; }
+  .db-l {              display: block; }
+  .dib-l {             display: inline-block; }
+  .dit-l {             display: inline-table; }
+  .dt-l {              display: table; }
+  .dtc-l {             display: table-cell; }
+  .dt-row-l {          display: table-row; }
+  .dt-row-group-l {    display: table-row-group; }
+  .dt-column-l {       display: table-column; }
+  .dt-column-group-l { display: table-column-group; }
+
+  .dt--fixed-l {
+    table-layout: fixed;
+    width: 100%;
+  }
+}
+
diff --git a/ghost/admin/app/styles/spirit-product/_dropdown.css b/ghost/admin/app/styles/spirit-product/_dropdown.css
new file mode 100644
index 0000000000..6028e99ada
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_dropdown.css
@@ -0,0 +1,94 @@
+/* Ghost Dropdown
+/* -------------------------------------------------------- */
+.trans-from-up      {  transform: scale(0.9) translateY(-10px); }
+
+.dd-w1,
+.dd-w2,
+.dd-w3              {
+    margin-right: 50%;
+    pointer-events: none;
+}
+
+.dd-w1              {  width: 16rem;  right: -8rem;  }
+.dd-w2              {  width: 20rem;  right: -10rem;  }
+.dd-w3              {  width: 24rem;  right: -12rem;  }
+
+.gd-drop.active .dd-w1,
+.gd-drop.active .dd-w2,
+.gd-drop.active .dd-w3,
+.gd-drop.dropdown-expanded .dd-w1,
+.gd-drop.dropdown-expanded .dd-w2,
+.gd-drop.dropdown-expanded .dd-w3 {
+    opacity: 1;
+    transition: all 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+    transform: scale(1) translateY(0px);
+    pointer-events: auto;
+}
+
+/* Dropdown triagle */
+.dd-w1:after,
+.dd-w3:after,
+.dd-w2:after        {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    width: 0;
+    height: 0;
+    border-width: 0 0.6rem 0.6rem 0.6rem;
+    border-style: solid;
+    border-color: #fff transparent;
+    left: calc(50% - 6px);
+}
+
+.dd-w1:before,
+.dd-w3:before,
+.dd-w2:before       {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    width: 0;
+    height: 0;
+    border-width: 0 8px 8px 8px;
+    border-style: solid;
+    border-color: rgba(0,0,0,0.07) transparent;
+    left: calc(50% - 8px);
+}
+
+.dd-up {
+    top: auto;
+    bottom: 85%;
+    right: calc(50% - 12rem);
+    margin-right: 0;
+}
+
+.dd-up:after,
+.dd-up:before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    right: auto;
+    bottom: auto;
+    width: 0;
+    height: 0;
+    border-style: solid;
+}
+
+.dd-up:before {
+    left: calc(50% - 8px);
+    border-width: 8px 8px 0;
+    border-color: rgba(0,0,0,.07) transparent;
+}
+
+.dd-up:after {
+    left: calc(50% - 6px);
+    border-width: 6px 6px 0;
+    border-color: #fff transparent;
+}
+
+
+/* TO BE DONE: add all classes (per group) to media queries */
+@media (--breakpoint-not-small) { }
+
+@media (--breakpoint-medium) { }
+
+@media (--breakpoint-large) { }
diff --git a/ghost/admin/app/styles/spirit-product/_flexbox.css b/ghost/admin/app/styles/spirit-product/_flexbox.css
new file mode 100644
index 0000000000..5002be7cd7
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_flexbox.css
@@ -0,0 +1,250 @@
+/*
+
+  FLEXBOX
+
+  Media Query Extensions:
+   -ns = not-small
+   -m  = medium
+   -l  = large
+
+*/
+
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+
+/* 1. Fix for Chrome 44 bug.
+ * https://code.google.com/p/chromium/issues/detail?id=506893 */
+.flex-auto {
+  flex: 1 1 auto;
+  min-width: 0; /* 1 */
+  min-height: 0; /* 1 */
+}
+
+.flex-none { flex: none; }
+
+.flex-column  { flex-direction: column; }
+.flex-row     { flex-direction: row; }
+.flex-wrap    { flex-wrap: wrap; }
+.flex-nowrap    { flex-wrap: nowrap; }
+.flex-wrap-reverse    { flex-wrap: wrap-reverse; }
+.flex-column-reverse  { flex-direction: column-reverse; }
+.flex-row-reverse     { flex-direction: row-reverse; }
+
+.items-start    { align-items: flex-start; }
+.items-end      { align-items: flex-end; }
+.items-center   { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch  { align-items: stretch; }
+
+.self-start    { align-self: flex-start; }
+.self-end      { align-self: flex-end; }
+.self-center   { align-self: center; }
+.self-baseline { align-self: baseline; }
+.self-stretch  { align-self: stretch; }
+
+.justify-start   { justify-content: flex-start; }
+.justify-end     { justify-content: flex-end; }
+.justify-center  { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+
+.content-start   { align-content: flex-start; }
+.content-end     { align-content: flex-end; }
+.content-center  { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around  { align-content: space-around; }
+.content-stretch { align-content: stretch; }
+
+.order-0 { order: 0; }
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-last { order: 99999; }
+
+.flex-grow-0 { flex-grow: 0; }
+.flex-grow-1 { flex-grow: 1; }
+
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-shrink-1 { flex-shrink: 1; }
+
+@media (--breakpoint-not-small) {
+  .flex-ns { display: flex; }
+  .inline-flex-ns { display: inline-flex; }
+  .flex-auto-ns {
+    flex: 1 1 auto;
+    min-width: 0; /* 1 */
+    min-height: 0; /* 1 */
+  }
+  .flex-none-ns { flex: none; }
+  .flex-column-ns { flex-direction: column; }
+  .flex-row-ns { flex-direction: row; }
+  .flex-wrap-ns { flex-wrap: wrap; }
+  .flex-nowrap-ns { flex-wrap: nowrap; }
+  .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
+  .flex-column-reverse-ns { flex-direction: column-reverse; }
+  .flex-row-reverse-ns { flex-direction: row-reverse; }
+  .items-start-ns { align-items: flex-start; }
+  .items-end-ns { align-items: flex-end; }
+  .items-center-ns { align-items: center; }
+  .items-baseline-ns { align-items: baseline; }
+  .items-stretch-ns { align-items: stretch; }
+
+  .self-start-ns { align-self: flex-start; }
+  .self-end-ns { align-self: flex-end; }
+  .self-center-ns { align-self: center; }
+  .self-baseline-ns { align-self: baseline; }
+  .self-stretch-ns { align-self: stretch; }
+
+  .justify-start-ns { justify-content: flex-start; }
+  .justify-end-ns { justify-content: flex-end; }
+  .justify-center-ns { justify-content: center; }
+  .justify-between-ns { justify-content: space-between; }
+  .justify-around-ns { justify-content: space-around; }
+
+  .content-start-ns { align-content: flex-start; }
+  .content-end-ns { align-content: flex-end; }
+  .content-center-ns { align-content: center; }
+  .content-between-ns { align-content: space-between; }
+  .content-around-ns { align-content: space-around; }
+  .content-stretch-ns { align-content: stretch; }
+
+  .order-0-ns { order: 0; }
+  .order-1-ns { order: 1; }
+  .order-2-ns { order: 2; }
+  .order-3-ns { order: 3; }
+  .order-4-ns { order: 4; }
+  .order-5-ns { order: 5; }
+  .order-6-ns { order: 6; }
+  .order-7-ns { order: 7; }
+  .order-8-ns { order: 8; }
+  .order-last-ns { order: 99999; }
+
+  .flex-grow-0-ns { flex-grow: 0; }
+  .flex-grow-1-ns { flex-grow: 1; }
+
+  .flex-shrink-0-ns { flex-shrink: 0; }
+  .flex-shrink-1-ns { flex-shrink: 1; }
+}
+@media (--breakpoint-medium) {
+  .flex-m { display: flex; }
+  .inline-flex-m { display: inline-flex; }
+  .flex-auto-m {
+    flex: 1 1 auto;
+    min-width: 0; /* 1 */
+    min-height: 0; /* 1 */
+  }
+  .flex-none-m { flex: none; }
+  .flex-column-m { flex-direction: column; }
+  .flex-row-m     { flex-direction: row; }
+  .flex-wrap-m { flex-wrap: wrap; }
+  .flex-nowrap-m { flex-wrap: nowrap; }
+  .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
+  .flex-column-reverse-m { flex-direction: column-reverse; }
+  .flex-row-reverse-m { flex-direction: row-reverse; }
+  .items-start-m { align-items: flex-start; }
+  .items-end-m { align-items: flex-end; }
+  .items-center-m { align-items: center; }
+  .items-baseline-m { align-items: baseline; }
+  .items-stretch-m { align-items: stretch; }
+
+  .self-start-m { align-self: flex-start; }
+  .self-end-m { align-self: flex-end; }
+  .self-center-m { align-self: center; }
+  .self-baseline-m { align-self: baseline; }
+  .self-stretch-m { align-self: stretch; }
+
+  .justify-start-m { justify-content: flex-start; }
+  .justify-end-m { justify-content: flex-end; }
+  .justify-center-m { justify-content: center; }
+  .justify-between-m { justify-content: space-between; }
+  .justify-around-m { justify-content: space-around; }
+
+  .content-start-m { align-content: flex-start; }
+  .content-end-m { align-content: flex-end; }
+  .content-center-m { align-content: center; }
+  .content-between-m { align-content: space-between; }
+  .content-around-m { align-content: space-around; }
+  .content-stretch-m { align-content: stretch; }
+
+  .order-0-m { order: 0; }
+  .order-1-m { order: 1; }
+  .order-2-m { order: 2; }
+  .order-3-m { order: 3; }
+  .order-4-m { order: 4; }
+  .order-5-m { order: 5; }
+  .order-6-m { order: 6; }
+  .order-7-m { order: 7; }
+  .order-8-m { order: 8; }
+  .order-last-m { order: 99999; }
+
+  .flex-grow-0-m { flex-grow: 0; }
+  .flex-grow-1-m { flex-grow: 1; }
+
+  .flex-shrink-0-m { flex-shrink: 0; }
+  .flex-shrink-1-m { flex-shrink: 1; }
+}
+
+@media (--breakpoint-large) {
+  .flex-l { display: flex; }
+  .inline-flex-l { display: inline-flex; }
+  .flex-auto-l {
+    flex: 1 1 auto;
+    min-width: 0; /* 1 */
+    min-height: 0; /* 1 */
+  }
+  .flex-none-l { flex: none; }
+  .flex-column-l { flex-direction: column; }
+  .flex-row-l { flex-direction: row; }
+  .flex-wrap-l { flex-wrap: wrap; }
+  .flex-nowrap-l { flex-wrap: nowrap; }
+  .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
+  .flex-column-reverse-l { flex-direction: column-reverse; }
+  .flex-row-reverse-l { flex-direction: row-reverse; }
+
+  .items-start-l { align-items: flex-start; }
+  .items-end-l { align-items: flex-end; }
+  .items-center-l { align-items: center; }
+  .items-baseline-l { align-items: baseline; }
+  .items-stretch-l { align-items: stretch; }
+
+  .self-start-l { align-self: flex-start; }
+  .self-end-l { align-self: flex-end; }
+  .self-center-l { align-self: center; }
+  .self-baseline-l { align-self: baseline; }
+  .self-stretch-l { align-self: stretch; }
+
+  .justify-start-l { justify-content: flex-start; }
+  .justify-end-l { justify-content: flex-end; }
+  .justify-center-l { justify-content: center; }
+  .justify-between-l { justify-content: space-between; }
+  .justify-around-l { justify-content: space-around; }
+
+  .content-start-l { align-content: flex-start; }
+  .content-end-l { align-content: flex-end; }
+  .content-center-l { align-content: center; }
+  .content-between-l { align-content: space-between; }
+  .content-around-l { align-content: space-around; }
+  .content-stretch-l { align-content: stretch; }
+
+  .order-0-l { order: 0; }
+  .order-1-l { order: 1; }
+  .order-2-l { order: 2; }
+  .order-3-l { order: 3; }
+  .order-4-l { order: 4; }
+  .order-5-l { order: 5; }
+  .order-6-l { order: 6; }
+  .order-7-l { order: 7; }
+  .order-8-l { order: 8; }
+  .order-last-l { order: 99999; }
+
+  .flex-grow-0-l { flex-grow: 0; }
+  .flex-grow-1-l { flex-grow: 1; }
+
+  .flex-shrink-0-l { flex-shrink: 0; }
+  .flex-shrink-1-l { flex-shrink: 1; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_floats.css b/ghost/admin/app/styles/spirit-product/_floats.css
new file mode 100644
index 0000000000..d5b391201c
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_floats.css
@@ -0,0 +1,49 @@
+/*
+
+   FLOATS
+   http://tachyons.io/docs/layout/floats/
+
+   1. Floated elements are automatically rendered as block level elements.
+      Setting floats to display inline will fix the double margin bug in
+      ie6. You know... just in case.
+
+   2. Don't forget to clearfix your floats with .cf
+
+   Base:
+     f = float
+
+   Modifiers:
+     l = left
+     r = right
+     n = none
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+
+.fl { float: left;  _display: inline; }
+.fr { float: right; _display: inline; }
+.fn { float: none; }
+
+@media (--breakpoint-not-small) {
+  .fl-ns { float: left; _display: inline; }
+  .fr-ns { float: right; _display: inline; }
+  .fn-ns { float: none; }
+}
+
+@media (--breakpoint-medium) {
+  .fl-m { float: left; _display: inline; }
+  .fr-m { float: right; _display: inline; }
+  .fn-m { float: none; }
+}
+
+@media (--breakpoint-large) {
+  .fl-l { float: left; _display: inline; }
+  .fr-l { float: right; _display: inline; }
+  .fn-l { float: none; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_font-family.css b/ghost/admin/app/styles/spirit-product/_font-family.css
new file mode 100644
index 0000000000..28ebc0d2b2
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_font-family.css
@@ -0,0 +1,52 @@
+/*
+
+   FONT FAMILY GROUPS
+   Docs: http://tachyons.io/docs/typography/font-family/
+
+*/
+
+
+.sans-serif {
+  font-family: -apple-system, BlinkMacSystemFont,
+               'avenir next', avenir,
+               'helvetica neue', helvetica,
+               ubuntu,
+               roboto, noto,
+               'segoe ui', arial,
+               sans-serif;
+}
+
+.serif {
+  font-family: georgia,
+               serif;
+}
+
+.system-sans-serif {
+  font-family: sans-serif;
+}
+
+.system-serif {
+  font-family: serif;
+}
+
+
+/* Monospaced Typefaces (for code) */
+
+/* From http://cssfontstack.com */
+code, .code {
+  font-family: monospace,monospace;
+}
+
+.courier {
+  font-family: 'Courier Next',
+               courier,
+               monospace;
+}
+
+
+/* Sans-Serif Typefaces */
+
+.whitney {
+    font-family: "Whitney SSm A", "Whitney SSm B",
+                 sans-serif;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_font-style.css b/ghost/admin/app/styles/spirit-product/_font-style.css
new file mode 100644
index 0000000000..d095dfea5c
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_font-style.css
@@ -0,0 +1,29 @@
+/*
+
+   FONT STYLE
+   Docs: http://tachyons.io/docs/typography/font-style/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.i         { font-style: italic; }
+.fs-normal { font-style: normal; }
+
+@media (--breakpoint-not-small) {
+  .i-ns       { font-style: italic; }
+  .fs-normal-ns     { font-style: normal; }
+}
+
+@media (--breakpoint-medium) {
+  .i-m       { font-style: italic; }
+  .fs-normal-m     { font-style: normal; }
+}
+
+@media (--breakpoint-large) {
+  .i-l       { font-style: italic; }
+  .fs-normal-l     { font-style: normal; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_font-weight.css b/ghost/admin/app/styles/spirit-product/_font-weight.css
new file mode 100644
index 0000000000..0944f641f0
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_font-weight.css
@@ -0,0 +1,33 @@
+.normal             { font-weight: 300; }
+.b, strong          { font-weight: 700; }
+
+.fw1     { font-weight: 100; }
+.fw3    { font-weight: 300; }
+.fw4    { font-weight: 400; }
+.fw6      { font-weight: 600; }
+.fw7      { font-weight: 700; }
+
+
+@media (--breakpoint-not-small) {
+    .fw1-ns     { font-weight: 100; }
+    .fw3-ns    { font-weight: 300; }
+    .fw4-ns    { font-weight: 400; }
+    .fw6-ns      { font-weight: 600; }
+    .fw7-ns      { font-weight: 700; }
+}
+
+@media (--breakpoint-medium) {
+    .fw1-m     { font-weight: 100; }
+    .fw3-m    { font-weight: 300; }
+    .fw4-m    { font-weight: 400; }
+    .fw6-m      { font-weight: 600; }
+    .fw7-m      { font-weight: 700; }
+}
+
+@media (--breakpoint-large) {
+    .fw1-l     { font-weight: 100; }
+    .fw3-l    { font-weight: 300; }
+    .fw4-l    { font-weight: 400; }
+    .fw6-l      { font-weight: 600; }
+    .fw7-l      { font-weight: 700; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_forms.css b/ghost/admin/app/styles/spirit-product/_forms.css
new file mode 100644
index 0000000000..fe0b8ab6cd
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_forms.css
@@ -0,0 +1,16 @@
+/*
+
+   FORMS
+   
+*/
+
+.input-reset {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.button-reset::-moz-focus-inner,
+.input-reset::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_gradients.css b/ghost/admin/app/styles/spirit-product/_gradients.css
new file mode 100644
index 0000000000..cf6cc3a758
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_gradients.css
@@ -0,0 +1,83 @@
+.bg-lgr-blue {
+    background: linear-gradient(color(var(--blue-p3)), color(var(--blue)));
+}
+.bg-rgr-blue {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--blue-p3)) 0%, color(var(--blue))) 100%;
+}
+
+.bg-lgr-green {
+    background: linear-gradient(color(var(--green-p3)), color(var(--green)));
+}
+.bg-rgr-green {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--green-p3)) 0%, color(var(--green))) 100%;
+}
+
+.bg-lgr-purple {
+    background: linear-gradient(color(var(--purple-p3)), color(var(--purple)));
+}
+.bg-rgr-purple {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--purple-p3)) 0%, color(var(--purple))) 100%;
+}
+
+.bg-lgr-yellow {
+    background: linear-gradient(color(var(--yellow-p3)), color(var(--yellow)));
+}
+.bg-rgr-yellow {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--yellow-p3)) 0%, color(var(--yellow))) 100%;
+}
+
+.bg-lgr-red {
+    background: linear-gradient(color(var(--red-p3)), color(var(--red)));
+}
+.bg-rgr-red {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--red-p3)) 0%, color(var(--red))) 100%;
+}
+
+.bg-lgr-pink {
+    background: linear-gradient(color(var(--pink-p3)), color(var(--pink)));
+}
+.bg-rgr-pink {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--pink-p3)) 0%, color(var(--pink))) 100%;
+}
+
+.bg-lgr-whitegrey {
+    background: linear-gradient(color(var(--whitegrey-p2)), color(var(--whitegrey)));
+}
+.bg-rgr-whitegrey {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--whitegrey-p2)) 0%, color(var(--whitegrey))) 100%;
+}
+
+.bg-lgr-lightgrey {
+    background: linear-gradient(color(var(--lightgrey-p2)), color(var(--lightgrey)));
+}
+.bg-rgr-lightgrey {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--lightgrey-p2)) 0%, color(var(--lightgrey))) 100%;
+}
+
+.bg-lgr-midlightgrey {
+    background: linear-gradient(color(var(--midlightgrey-p2)), color(var(--midlightgrey)));
+}
+.bg-rgr-midlightgrey {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--midlightgrey-p2)) 0%, color(var(--midlightgrey))) 100%;
+}
+
+.bg-lgr-midgrey {
+    background: linear-gradient(color(var(--midgrey-p2)), color(var(--midgrey-m1)));
+}
+.bg-rgr-midgrey {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--midgrey-p2)) 0%, color(var(--midgrey-m1))) 100%;
+}
+
+.bg-lgr-middarkgrey {
+    background: linear-gradient(color(var(--middarkgrey-p2)), color(var(--middarkgrey-m1)));
+}
+.bg-rgr-middarkgrey {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--middarkgrey-p2)) 0%, color(var(--middarkgrey-m1))) 100%;
+}
+
+.bg-lgr-darkgrey {
+    background: linear-gradient(color(var(--darkgrey-p2)), color(var(--darkgrey-m2)));
+}
+.bg-rgr-darkgrey {
+    background: radial-gradient(circle farthest-corner at left bottom, color(var(--darkgrey-p2)) 0%, color(var(--darkgrey-m2))) 100%;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_heights.css b/ghost/admin/app/styles/spirit-product/_heights.css
new file mode 100644
index 0000000000..0ea9abd735
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_heights.css
@@ -0,0 +1,61 @@
+.h1 {    height: calc(var(--grid-size) * 1); }
+.h2 {    height: calc(var(--grid-size) * 2); }
+.h3 {    height: calc(var(--grid-size) * 3); }
+.h4 {    height: calc(var(--grid-size) * 4); }
+.h5 {    height: calc(var(--grid-size) * 5); }
+.h6 {    height: calc(var(--grid-size) * 6); }
+.h7 {    height: calc(var(--grid-size) * 7); }
+.h8 {    height: calc(var(--grid-size) * 8); }
+.h9 {    height: calc(var(--grid-size) * 9); }
+.h10 {    height: calc(var(--grid-size) * 10); }
+.h11 {    height: calc(var(--grid-size) * 11); }
+.h12 {    height: calc(var(--grid-size) * 12); }
+.h13 {    height: calc(var(--grid-size) * 13); }
+.h14 {    height: calc(var(--grid-size) * 14); }
+.h15 {    height: calc(var(--grid-size) * 15); }
+.h16 {    height: calc(var(--grid-size) * 16); }
+.h17 {    height: calc(var(--grid-size) * 17); }
+.h18 {    height: calc(var(--grid-size) * 18); }
+.h19 {    height: calc(var(--grid-size) * 19); }
+.h20 {    height: calc(var(--grid-size) * 20); }
+.h25 {    height: calc(var(--grid-size) * 25); }
+.h30 {    height: calc(var(--grid-size) * 30); }
+.h40 {    height: calc(var(--grid-size) * 40); }
+.h50 {    height: calc(var(--grid-size) * 50); }
+.h70 {    height: calc(var(--grid-size) * 70); }
+
+/* Height Percentages - Based off of height of parent */
+
+.h-25 {  height:  25%; }
+.h-50 {  height:  50%; }
+.h-75 {  height:  75%; }
+.h-100 { height: 100%; }
+
+.min-h-100 { min-height: 100%; }
+
+/* Screen Height Percentage */
+
+.vh-25 {  height:  25vh; }
+.vh-50 {  height:  50vh; }
+.vh-75 {  height:  75vh; }
+.vh-100 { height: 100vh; }
+
+.min-vh-100 { min-height: 100vh; }
+
+
+/* String Properties */
+
+.h-auto {     height: auto; }
+.h-inherit {  height: inherit; }
+
+@media (--breakpoint-not-small) {
+
+}
+
+@media (--breakpoint-medium) {
+
+}
+
+@media (--breakpoint-large) {
+
+}
diff --git a/ghost/admin/app/styles/spirit-product/_hovers.css b/ghost/admin/app/styles/spirit-product/_hovers.css
new file mode 100644
index 0000000000..6d15021836
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_hovers.css
@@ -0,0 +1,423 @@
+/*
+
+   SKINS:PSEUDO
+
+   Customize the color of an element when
+   it is focused or hovered over.
+
+ */
+
+ /*
+
+    SKINS
+    Docs: http://tachyons.io/docs/themes/skins/
+
+    Classes for setting foreground and background colors on elements.
+    If you haven't declared a border color, but set border on an element, it will
+    be set to the current text color.
+
+ */
+
+ /* Text colors */
+
+.hover-blue:hover,
+.hover-blue:focus { color: var(--blue); }
+.hover-green:hover,
+.hover-green:focus { color: var(--green); }
+.hover-purple:hover,
+.hover-purple:focus { color: var(--purple); }
+.hover-yellow:hover,
+.hover-yellow:focus { color: var(--yellow); }
+.hover-red:hover,
+.hover-red:focus { color: var(--red); }
+.hover-pink:hover,
+.hover-pink:focus { color: var(--pink); }
+.hover-white:hover,
+.hover-white:focus { color: var(--white); }
+
+.hover-white-10:hover,
+.hover-white-10:focus { color: var(--white-10); }
+.hover-white-20:hover,
+.hover-white-20:focus { color: var(--white-20); }
+.hover-white-30:hover,
+.hover-white-30:focus { color: var(--white-30); }
+.hover-white-40:hover,
+.hover-white-40:focus { color: var(--white-40); }
+.hover-white-50:hover,
+.hover-white-50:focus { color: var(--white-50); }
+.hover-white-60:hover,
+.hover-white-60:focus { color: var(--white-60); }
+.hover-white-70:hover,
+.hover-white-70:focus { color: var(--white-70); }
+.hover-white-80:hover,
+.hover-white-80:focus { color: var(--white-80); }
+.hover-white-90:hover,
+.hover-white-90:focus { color: var(--white-90); }
+
+.hover-black-10:hover,
+.hover-black-10:focus { color: var(--black-10); }
+.hover-black-20:hover,
+.hover-black-20:focus { color: var(--black-20); }
+.hover-black-30:hover,
+.hover-black-30:focus { color: var(--black-30); }
+.hover-black-40:hover,
+.hover-black-40:focus { color: var(--black-40); }
+.hover-black-50:hover,
+.hover-black-50:focus { color: var(--black-50); }
+.hover-black-60:hover,
+.hover-black-60:focus { color: var(--black-60); }
+.hover-black-70:hover,
+.hover-black-70:focus { color: var(--black-70); }
+.hover-black-80:hover,
+.hover-black-80:focus { color: var(--black-80); }
+.hover-black-90:hover,
+.hover-black-90:focus { color: var(--black-90); }
+
+.hover-darkgrey:hover,
+.hover-darkgrey:focus { color: var(--darkgrey); }
+.hover-middarkgrey:hover,
+.hover-middarkgrey:focus { color: var(--middarkgrey); }
+.hover-midgrey:hover,
+.hover-midgrey:focus { color: var(--midgrey); }
+.hover-midlightgrey:hover,
+.hover-midlightgrey:focus { color: var(--midlightgrey); }
+.hover-lightgrey:hover,
+.hover-lightgrey:focus { color: var(--lightgrey); }
+.hover-whitegrey:hover,
+.hover-whitegrey:focus { color: var(--whitegrey); }
+
+/* Shades */
+.hover-blue-p3:hover,
+.hover-blue-p3:focus { color: var(--blue-p3); }
+.hover-blue-p2:hover,
+.hover-blue-p2:focus { color: var(--blue-p2); }
+.hover-blue-p1:hover,
+.hover-blue-p1:focus { color: var(--blue-p1); }
+.hover-blue-m1:hover,
+.hover-blue-m1:focus { color: var(--blue-m1); }
+.hover-blue-m2:hover,
+.hover-blue-m2:focus { color: var(--blue-m2); }
+.hover-blue-m3:hover,
+.hover-blue-m3:focus { color: var(--blue-m3); }
+
+.hover-green-p3:hover,
+.hover-green-p3:focus { color: var(--green-p3); }
+.hover-green-p2:hover,
+.hover-green-p2:focus { color: var(--green-p2); }
+.hover-green-p1:hover,
+.hover-green-p1:focus { color: var(--green-p1); }
+.hover-green-m1:hover,
+.hover-green-m1:focus { color: var(--green-m1); }
+.hover-green-m2:hover,
+.hover-green-m2:focus { color: var(--green-m2); }
+.hover-green-m3:hover,
+.hover-green-m3:focus { color: var(--green-m3); }
+
+.hover-purple-p3:hover,
+.hover-purple-p3:focus { color: var(--purple-p3); }
+.hover-purple-p2:hover,
+.hover-purple-p2:focus { color: var(--purple-p2); }
+.hover-purple-p1:hover,
+.hover-purple-p1:focus { color: var(--purple-p1); }
+.hover-purple-m1:hover,
+.hover-purple-m1:focus { color: var(--purple-m1); }
+.hover-purple-m2:hover,
+.hover-purple-m2:focus { color: var(--purple-m2); }
+.hover-purple-m3:hover,
+.hover-purple-m3:focus { color: var(--purple-m3); }
+
+.hover-yellow-p3:hover,
+.hover-yellow-p3:focus { color: var(--yellow-p3); }
+.hover-yellow-p2:hover,
+.hover-yellow-p2:focus { color: var(--yellow-p2); }
+.hover-yellow-p1:hover,
+.hover-yellow-p1:focus { color: var(--yellow-p1); }
+.hover-yellow-m1:hover,
+.hover-yellow-m1:focus { color: var(--yellow-m1); }
+.hover-yellow-m2:hover,
+.hover-yellow-m2:focus { color: var(--yellow-m2); }
+.hover-yellow-m3:hover,
+.hover-yellow-m3:focus { color: var(--yellow-m3); }
+
+.hover-red-p3:hover,
+.hover-red-p3:focus { color: var(--red-p3); }
+.hover-red-p2:hover,
+.hover-red-p2:focus { color: var(--red-p2); }
+.hover-red-p1:hover,
+.hover-red-p1:focus { color: var(--red-p1); }
+.hover-red-m1:hover,
+.hover-red-m1:focus { color: var(--red-m1); }
+.hover-red-m2:hover,
+.hover-red-m2:focus { color: var(--red-m2); }
+.hover-red-m3:hover,
+.hover-red-m3:focus { color: var(--red-m3); }
+
+.hover-pink-p3:hover,
+.hover-pink-p3:focus { color: var(--pink-p3); }
+.hover-pink-p2:hover,
+.hover-pink-p2:focus { color: var(--pink-p2); }
+.hover-pink-p1:hover,
+.hover-pink-p1:focus { color: var(--pink-p1); }
+.hover-pink-m1:hover,
+.hover-pink-m1:focus { color: var(--pink-m1); }
+.hover-pink-m2:hover,
+.hover-pink-m2:focus { color: var(--pink-m2); }
+.hover-pink-m3:hover,
+.hover-pink-m3:focus { color: var(--pink-m3); }
+
+.hover-darkgrey-p2:hover,
+.hover-darkgrey-p2:focus { color: var(--darkgrey-p2); }
+.hover-darkgrey-p1:hover,
+.hover-darkgrey-p1:focus { color: var(--darkgrey-p1); }
+.hover-darkgrey-m1:hover,
+.hover-darkgrey-m1:focus { color: var(--darkgrey-m1); }
+.hover-darkgrey-m2:hover,
+.hover-darkgrey-m2:focus { color: var(--darkgrey-m2); }
+
+.hover-middarkgrey-p2:hover,
+.hover-middarkgrey-p2:focus { color: var(--middarkgrey-p2); }
+.hover-middarkgrey-p1:hover,
+.hover-middarkgrey-p1:focus { color: var(--middarkgrey-p1); }
+.hover-middarkgrey-m1:hover,
+.hover-middarkgrey-m1:focus { color: var(--middarkgrey-m1); }
+.hover-middarkgrey-m2:hover,
+.hover-middarkgrey-m2:focus { color: var(--middarkgrey-m2); }
+
+.hover-midgrey-p2:hover,
+.hover-midgrey-p2:focus { color: var(--midgrey-p2); }
+.hover-midgrey-p1:hover,
+.hover-midgrey-p1:focus { color: var(--midgrey-p1); }
+.hover-midgrey-m1:hover,
+.hover-midgrey-m1:focus { color: var(--midgrey-m1); }
+.hover-midgrey-m2:hover,
+.hover-midgrey-m2:focus { color: var(--midgrey-m2); }
+
+.hover-midlightgrey-p2:hover,
+.hover-midlightgrey-p2:focus { color: var(--midlightgrey-p2); }
+.hover-midlightgrey-p1:hover,
+.hover-midlightgrey-p1:focus { color: var(--midlightgrey-p1); }
+.hover-midlightgrey-m1:hover,
+.hover-midlightgrey-m1:focus { color: var(--midlightgrey-m1); }
+.hover-midlightgrey-m2:hover,
+.hover-midlightgrey-m2:focus { color: var(--midlightgrey-m2); }
+
+.hover-lightgrey-p2:hover,
+.hover-lightgrey-p2:focus { color: var(--lightgrey-p2); }
+.hover-lightgrey-p1:hover,
+.hover-lightgrey-p1:focus { color: var(--lightgrey-p1); }
+.hover-lightgrey-m1:hover,
+.hover-lightgrey-m1:focus { color: var(--lightgrey-m1); }
+.hover-lightgrey-m2:hover,
+.hover-lightgrey-m2:focus { color: var(--lightgrey-m2); }
+
+.hover-whitegrey-p2:hover,
+.hover-whitegrey-p2:focus { color: var(--whitegrey-p2); }
+.hover-whitegrey-p1:hover,
+.hover-whitegrey-p1:focus { color: var(--whitegrey-p1); }
+.hover-whitegrey-m1:hover,
+.hover-whitegrey-m1:focus { color: var(--whitegrey-m1); }
+.hover-whitegrey-m2:hover,
+.hover-whitegrey-m2:focus { color: var(--whitegrey-m2); }
+
+.hover-color-inherit:hover,
+.hover-color-inherit:focus { color: inherit; }
+
+/* Background colors */
+.hover-bg-blue:hover,
+.hover-bg-blue:focus { background-color: var(--blue); }
+.hover-bg-green:hover,
+.hover-bg-green:focus { background-color: var(--green); }
+.hover-bg-purple:hover,
+.hover-bg-purple:focus { background-color: var(--purple); }
+.hover-bg-yellow:hover,
+.hover-bg-yellow:focus { background-color: var(--yellow); }
+.hover-bg-red:hover,
+.hover-bg-red:focus { background-color: var(--red); }
+.hover-bg-pink:hover,
+.hover-bg-pink:focus { background-color: var(--pink); }
+.hover-bg-white:hover,
+.hover-bg-white:focus { background-color: var(--white); }
+
+.hover-bg-white-10:hover,
+.hover-bg-white-10:focus { background-color: var(--white-10); }
+.hover-bg-white-20:hover,
+.hover-bg-white-20:focus { background-color: var(--white-20); }
+.hover-bg-white-30:hover,
+.hover-bg-white-30:focus { background-color: var(--white-30); }
+.hover-bg-white-40:hover,
+.hover-bg-white-40:focus { background-color: var(--white-40); }
+.hover-bg-white-50:hover,
+.hover-bg-white-50:focus { background-color: var(--white-50); }
+.hover-bg-white-60:hover,
+.hover-bg-white-60:focus { background-color: var(--white-60); }
+.hover-bg-white-70:hover,
+.hover-bg-white-70:focus { background-color: var(--white-70); }
+.hover-bg-white-80:hover,
+.hover-bg-white-80:focus { background-color: var(--white-80); }
+.hover-bg-white-90:hover,
+.hover-bg-white-90:focus { background-color: var(--white-90); }
+
+.hover-bg-black-10:hover,
+.hover-bg-black-10:focus { background-color: var(--black-10); }
+.hover-bg-black-20:hover,
+.hover-bg-black-20:focus { background-color: var(--black-20); }
+.hover-bg-black-30:hover,
+.hover-bg-black-30:focus { background-color: var(--black-30); }
+.hover-bg-black-40:hover,
+.hover-bg-black-40:focus { background-color: var(--black-40); }
+.hover-bg-black-50:hover,
+.hover-bg-black-50:focus { background-color: var(--black-50); }
+.hover-bg-black-60:hover,
+.hover-bg-black-60:focus { background-color: var(--black-60); }
+.hover-bg-black-70:hover,
+.hover-bg-black-70:focus { background-color: var(--black-70); }
+.hover-bg-black-80:hover,
+.hover-bg-black-80:focus { background-color: var(--black-80); }
+.hover-bg-black-90:hover,
+.hover-bg-black-90:focus { background-color: var(--black-90); }
+
+.hover-bg-darkgrey:hover,
+.hover-bg-darkgrey:focus { background-color: var(--darkgrey); }
+.hover-bg-middarkgrey:hover,
+.hover-bg-middarkgrey:focus { background-color: var(--middarkgrey); }
+.hover-bg-midgrey:hover,
+.hover-bg-midgrey:focus { background-color: var(--midgrey); }
+.hover-bg-midlightgrey:hover,
+.hover-bg-midlightgrey:focus { background-color: var(--midlightgrey); }
+.hover-bg-lightgrey:hover,
+.hover-bg-lightgrey:focus { background-color: var(--lightgrey); }
+.hover-bg-whitegrey:hover,
+.hover-bg-whitegrey:focus { background-color: var(--whitegrey); }
+
+/* Shades */
+.hover-bg-blue-p3:hover,
+.hover-bg-blue-p3:focus { background-color: var(--blue-p3); }
+.hover-bg-blue-p2:hover,
+.hover-bg-blue-p2:focus { background-color: var(--blue-p2); }
+.hover-bg-blue-p1:hover,
+.hover-bg-blue-p1:focus { background-color: var(--blue-p1); }
+.hover-bg-blue-m1:hover,
+.hover-bg-blue-m1:focus { background-color: var(--blue-m1); }
+.hover-bg-blue-m2:hover,
+.hover-bg-blue-m2:focus { background-color: var(--blue-m2); }
+.hover-bg-blue-m3:hover,
+.hover-bg-blue-m3:focus { background-color: var(--blue-m3); }
+
+.hover-bg-green-p3:hover,
+.hover-bg-green-p3:focus { background-color: var(--green-p3); }
+.hover-bg-green-p2:hover,
+.hover-bg-green-p2:focus { background-color: var(--green-p2); }
+.hover-bg-green-p1:hover,
+.hover-bg-green-p1:focus { background-color: var(--green-p1); }
+.hover-bg-green-m1:hover,
+.hover-bg-green-m1:focus { background-color: var(--green-m1); }
+.hover-bg-green-m2:hover,
+.hover-bg-green-m2:focus { background-color: var(--green-m2); }
+.hover-bg-green-m3:hover,
+.hover-bg-green-m3:focus { background-color: var(--green-m3); }
+
+.hover-bg-purple-p3:hover,
+.hover-bg-purple-p3:focus { background-color: var(--purple-p3); }
+.hover-bg-purple-p2:hover,
+.hover-bg-purple-p2:focus { background-color: var(--purple-p2); }
+.hover-bg-purple-p1:hover,
+.hover-bg-purple-p1:focus { background-color: var(--purple-p1); }
+.hover-bg-purple-m1:hover,
+.hover-bg-purple-m1:focus { background-color: var(--purple-m1); }
+.hover-bg-purple-m2:hover,
+.hover-bg-purple-m2:focus { background-color: var(--purple-m2); }
+.hover-bg-purple-m3:hover,
+.hover-bg-purple-m3:focus { background-color: var(--purple-m3); }
+
+.hover-bg-yellow-p3:hover,
+.hover-bg-yellow-p3:focus { background-color: var(--yellow-p3); }
+.hover-bg-yellow-p2:hover,
+.hover-bg-yellow-p2:focus { background-color: var(--yellow-p2); }
+.hover-bg-yellow-p1:hover,
+.hover-bg-yellow-p1:focus { background-color: var(--yellow-p1); }
+.hover-bg-yellow-m1:hover,
+.hover-bg-yellow-m1:focus { background-color: var(--yellow-m1); }
+.hover-bg-yellow-m2:hover,
+.hover-bg-yellow-m2:focus { background-color: var(--yellow-m2); }
+.hover-bg-yellow-m3:hover,
+.hover-bg-yellow-m3:focus { background-color: var(--yellow-m3); }
+
+.hover-bg-red-p3:hover,
+.hover-bg-red-p3:focus { background-color: var(--red-p3); }
+.hover-bg-red-p2:hover,
+.hover-bg-red-p2:focus { background-color: var(--red-p2); }
+.hover-bg-red-p1:hover,
+.hover-bg-red-p1:focus { background-color: var(--red-p1); }
+.hover-bg-red-m1:hover,
+.hover-bg-red-m1:focus { background-color: var(--red-m1); }
+.hover-bg-red-m2:hover,
+.hover-bg-red-m2:focus { background-color: var(--red-m2); }
+.hover-bg-red-m3:hover,
+.hover-bg-red-m3:focus { background-color: var(--red-m3); }
+
+.hover-bg-pink-p3:hover,
+.hover-bg-pink-p3:focus { background-color: var(--pink-p3); }
+.hover-bg-pink-p2:hover,
+.hover-bg-pink-p2:focus { background-color: var(--pink-p2); }
+.hover-bg-pink-p1:hover,
+.hover-bg-pink-p1:focus { background-color: var(--pink-p1); }
+.hover-bg-pink-m1:hover,
+.hover-bg-pink-m1:focus { background-color: var(--pink-m1); }
+.hover-bg-pink-m2:hover,
+.hover-bg-pink-m2:focus { background-color: var(--pink-m2); }
+.hover-bg-pink-m3:hover,
+.hover-bg-pink-m3:focus { background-color: var(--pink-m3); }
+
+.hover-bg-darkgrey-p2:hover,
+.hover-bg-darkgrey-p2:focus { background-color: var(--darkgrey-p2); }
+.hover-bg-darkgrey-p1:hover,
+.hover-bg-darkgrey-p1:focus { background-color: var(--darkgrey-p1); }
+.hover-bg-darkgrey-m1:hover,
+.hover-bg-darkgrey-m1:focus { background-color: var(--darkgrey-m1); }
+.hover-bg-darkgrey-m2:hover,
+.hover-bg-darkgrey-m2:focus { background-color: var(--darkgrey-m2); }
+
+.hover-bg-middarkgrey-p2:hover,
+.hover-bg-middarkgrey-p2:focus { background-color: var(--middarkgrey-p2); }
+.hover-bg-middarkgrey-p1:hover,
+.hover-bg-middarkgrey-p1:focus { background-color: var(--middarkgrey-p1); }
+.hover-bg-middarkgrey-m1:hover,
+.hover-bg-middarkgrey-m1:focus { background-color: var(--middarkgrey-m1); }
+.hover-bg-middarkgrey-m2:hover,
+.hover-bg-middarkgrey-m2:focus { background-color: var(--middarkgrey-m2); }
+
+.hover-bg-midgrey-p2:hover,
+.hover-bg-midgrey-p2:focus { background-color: var(--midgrey-p2); }
+.hover-bg-midgrey-p1:hover,
+.hover-bg-midgrey-p1:focus { background-color: var(--midgrey-p1); }
+.hover-bg-midgrey-m1:hover,
+.hover-bg-midgrey-m1:focus { background-color: var(--midgrey-m1); }
+.hover-bg-midgrey-m2:hover,
+.hover-bg-midgrey-m2:focus { background-color: var(--midgrey-m2); }
+
+.hover-bg-midlightgrey-p2:hover,
+.hover-bg-midlightgrey-p2:focus { background-color: var(--midlightgrey-p2); }
+.hover-bg-midlightgrey-p1:hover,
+.hover-bg-midlightgrey-p1:focus { background-color: var(--midlightgrey-p1); }
+.hover-bg-midlightgrey-m1:hover,
+.hover-bg-midlightgrey-m1:focus { background-color: var(--midlightgrey-m1); }
+.hover-bg-midlightgrey-m2:hover,
+.hover-bg-midlightgrey-m2:focus { background-color: var(--midlightgrey-m2); }
+
+.hover-bg-lightgrey-p2:hover,
+.hover-bg-lightgrey-p2:focus { background-color: var(--lightgrey-p2); }
+.hover-bg-lightgrey-p1:hover,
+.hover-bg-lightgrey-p1:focus { background-color: var(--lightgrey-p1); }
+.hover-bg-lightgrey-m1:hover,
+.hover-bg-lightgrey-m1:focus { background-color: var(--lightgrey-m1); }
+.hover-bg-lightgrey-m2:hover,
+.hover-bg-lightgrey-m2:focus { background-color: var(--lightgrey-m2); }
+
+.hover-bg-whitegrey-p2:hover,
+.hover-bg-whitegrey-p2:focus { background-color: var(--whitegrey-p2); }
+.hover-bg-whitegrey-p1:hover,
+.hover-bg-whitegrey-p1:focus { background-color: var(--whitegrey-p1); }
+.hover-bg-whitegrey-m1:hover,
+.hover-bg-whitegrey-m1:focus { background-color: var(--whitegrey-m1); }
+.hover-bg-whitegrey-m2:hover,
+.hover-bg-whitegrey-m2:focus { background-color: var(--whitegrey-m2); }
diff --git a/ghost/admin/app/styles/spirit-product/_icons.css b/ghost/admin/app/styles/spirit-product/_icons.css
new file mode 100644
index 0000000000..7b6f31ac94
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_icons.css
@@ -0,0 +1,477 @@
+/* Icon fill colors
+/* -------------------------------------------------------- */
+.filter-invert      {  filter: invert(100%);  }
+
+.fill-blue path,
+.fill-blue g { fill: var(--blue); }
+.fill-green path,
+.fill-green g { fill: var(--green); }
+.fill-purple path,
+.fill-purple g { fill: var(--purple); }
+.fill-yellow path,
+.fill-yellow g { fill: var(--yellow); }
+.fill-red path,
+.fill-red g { fill: var(--red); }
+.fill-pink path,
+.fill-pink g { fill: var(--pink); }
+.fill-white path,
+.fill-white g { fill: var(--white); }
+
+.fill-white-10 path,
+.fill-white-10 g { fill: var(--white-10); }
+.fill-white-20 path,
+.fill-white-20 g { fill: var(--white-20); }
+.fill-white-30 path,
+.fill-white-30 g { fill: var(--white-30); }
+.fill-white-40 path,
+.fill-white-40 g { fill: var(--white-40); }
+.fill-white-50 path,
+.fill-white-50 g { fill: var(--white-50); }
+.fill-white-60 path,
+.fill-white-60 g { fill: var(--white-60); }
+.fill-white-70 path,
+.fill-white-70 g { fill: var(--white-70); }
+.fill-white-80 path,
+.fill-white-80 g { fill: var(--white-80); }
+.fill-white-90 path,
+.fill-white-90 g { fill: var(--white-90); }
+
+.fill-black-10 path,
+.fill-black-10 g { fill: var(--black-10); }
+.fill-black-20 path,
+.fill-black-20 g { fill: var(--black-20); }
+.fill-black-30 path,
+.fill-black-30 g { fill: var(--black-30); }
+.fill-black-40 path,
+.fill-black-40 g { fill: var(--black-40); }
+.fill-black-50 path,
+.fill-black-50 g { fill: var(--black-50); }
+.fill-black-60 path,
+.fill-black-60 g { fill: var(--black-60); }
+.fill-black-70 path,
+.fill-black-70 g { fill: var(--black-70); }
+.fill-black-80 path,
+.fill-black-80 g { fill: var(--black-80); }
+.fill-black-90 path,
+.fill-black-90 g { fill: var(--black-90); }
+
+.fill-darkgrey path,
+.fill-darkgrey g { fill: var(--darkgrey); }
+.fill-middarkgrey path,
+.fill-middarkgrey g { fill: var(--middarkgrey); }
+.fill-midgrey path,
+.fill-midgrey g { fill: var(--midgrey); }
+.fill-midlightgrey path,
+.fill-midlightgrey g { fill: var(--midlightgrey); }
+.fill-lightgrey path,
+.fill-lightgrey g { fill: var(--lightgrey); }
+.fill-whitegrey path,
+.fill-whitegrey g { fill: var(--whitegrey); }
+
+/* Shades */
+.fill-blue-p3 path,
+.fill-blue-p3 g { fill: var(--blue-p3); }
+.fill-blue-p2 path,
+.fill-blue-p2 g { fill: var(--blue-p2); }
+.fill-blue-p1 path,
+.fill-blue-p1 g { fill: var(--blue-p1); }
+.fill-blue-m1 path,
+.fill-blue-m1 g { fill: var(--blue-m1); }
+.fill-blue-m2 path,
+.fill-blue-m2 g { fill: var(--blue-m2); }
+.fill-blue-m3 path,
+.fill-blue-m3 g { fill: var(--blue-m3); }
+
+.fill-green-p3 path,
+.fill-green-p3 g { fill: var(--green-p3); }
+.fill-green-p2 path,
+.fill-green-p2 g { fill: var(--green-p2); }
+.fill-green-p1 path,
+.fill-green-p1 g { fill: var(--green-p1); }
+.fill-green-m1 path,
+.fill-green-m1 g { fill: var(--green-m1); }
+.fill-green-m2 path,
+.fill-green-m2 g { fill: var(--green-m2); }
+.fill-green-m3 path,
+.fill-green-m3 g { fill: var(--green-m3); }
+
+.fill-purple-p3 path,
+.fill-purple-p3 g { fill: var(--purple-p3); }
+.fill-purple-p2 path,
+.fill-purple-p2 g { fill: var(--purple-p2); }
+.fill-purple-p1 path,
+.fill-purple-p1 g { fill: var(--purple-p1); }
+.fill-purple-m1 path,
+.fill-purple-m1 g { fill: var(--purple-m1); }
+.fill-purple-m2 path,
+.fill-purple-m2 g { fill: var(--purple-m2); }
+.fill-purple-m3 path,
+.fill-purple-m3 g { fill: var(--purple-m3); }
+
+.fill-yellow-p3 path,
+.fill-yellow-p3 g { fill: var(--yellow-p3); }
+.fill-yellow-p2 path,
+.fill-yellow-p2 g { fill: var(--yellow-p2); }
+.fill-yellow-p1 path,
+.fill-yellow-p1 g { fill: var(--yellow-p1); }
+.fill-yellow-m1 path,
+.fill-yellow-m1 g { fill: var(--yellow-m1); }
+.fill-yellow-m2 path,
+.fill-yellow-m2 g { fill: var(--yellow-m2); }
+.fill-yellow-m3 path,
+.fill-yellow-m3 g { fill: var(--yellow-m3); }
+
+.fill-red-p3 path,
+.fill-red-p3 g { fill: var(--red-p3); }
+.fill-red-p2 path,
+.fill-red-p2 g { fill: var(--red-p2); }
+.fill-red-p1 path,
+.fill-red-p1 g { fill: var(--red-p1); }
+.fill-red-m1 path,
+.fill-red-m1 g { fill: var(--red-m1); }
+.fill-red-m2 path,
+.fill-red-m2 g { fill: var(--red-m2); }
+.fill-red-m3 path,
+.fill-red-m3 g { fill: var(--red-m3); }
+
+.fill-pink-p3 path,
+.fill-pink-p3 g { fill: var(--pink-p3); }
+.fill-pink-p2 path,
+.fill-pink-p2 g { fill: var(--pink-p2); }
+.fill-pink-p1 path,
+.fill-pink-p1 g { fill: var(--pink-p1); }
+.fill-pink-m1 path,
+.fill-pink-m1 g { fill: var(--pink-m1); }
+.fill-pink-m2 path,
+.fill-pink-m2 g { fill: var(--pink-m2); }
+.fill-pink-m3 path,
+.fill-pink-m3 g { fill: var(--pink-m3); }
+
+.fill-darkgrey-p2 path,
+.fill-darkgrey-p2 g { fill: var(--darkgrey-p2); }
+.fill-darkgrey-p1 path,
+.fill-darkgrey-p1 g { fill: var(--darkgrey-p1); }
+.fill-darkgrey-m1 path,
+.fill-darkgrey-m1 g { fill: var(--darkgrey-m1); }
+.fill-darkgrey-m2 path,
+.fill-darkgrey-m2 g { fill: var(--darkgrey-m2); }
+
+.fill-middarkgrey-p2 path,
+.fill-middarkgrey-p2 g { fill: var(--middarkgrey-p2); }
+.fill-middarkgrey-p1 path,
+.fill-middarkgrey-p1 g { fill: var(--middarkgrey-p1); }
+.fill-middarkgrey-m1 path,
+.fill-middarkgrey-m1 g { fill: var(--middarkgrey-m1); }
+.fill-middarkgrey-m2 path,
+.fill-middarkgrey-m2 g { fill: var(--middarkgrey-m2); }
+
+.fill-midgrey-p2 path,
+.fill-midgrey-p2 g { fill: var(--midgrey-p2); }
+.fill-midgrey-p1 path,
+.fill-midgrey-p1 g { fill: var(--midgrey-p1); }
+.fill-midgrey-m1 path,
+.fill-midgrey-m1 g { fill: var(--midgrey-m1); }
+.fill-midgrey-m2 path,
+.fill-midgrey-m2 g { fill: var(--midgrey-m2); }
+
+.fill-midlightgrey-p2 path,
+.fill-midlightgrey-p2 g { fill: var(--midlightgrey-p2); }
+.fill-midlightgrey-p1 path,
+.fill-midlightgrey-p1 g { fill: var(--midlightgrey-p1); }
+.fill-midlightgrey-m1 path,
+.fill-midlightgrey-m1 g { fill: var(--midlightgrey-m1); }
+.fill-midlightgrey-m2 path,
+.fill-midlightgrey-m2 g { fill: var(--midlightgrey-m2); }
+
+.fill-lightgrey-p2 path,
+.fill-lightgrey-p2 g { fill: var(--lightgrey-p2); }
+.fill-lightgrey-p1 path,
+.fill-lightgrey-p1 g { fill: var(--lightgrey-p1); }
+.fill-lightgrey-m1 path,
+.fill-lightgrey-m1 g { fill: var(--lightgrey-m1); }
+.fill-lightgrey-m2 path,
+.fill-lightgrey-m2 g { fill: var(--lightgrey-m2); }
+
+.fill-whitegrey-p2 path,
+.fill-whitegrey-p2 g { fill: var(--whitegrey-p2); }
+.fill-whitegrey-p1 path,
+.fill-whitegrey-p1 g { fill: var(--whitegrey-p1); }
+.fill-whitegrey-m1 path,
+.fill-whitegrey-m1 g { fill: var(--whitegrey-m1); }
+.fill-whitegrey-m2 path,
+.fill-whitegrey-m2 g { fill: var(--whitegrey-m2); }
+
+.fill-color-inherit path,
+.fill-color-inherit g { fill: inherit; }
+
+.fill-white path,
+.fill-white g       {  fill: var(--white)  }
+
+
+.stroke-blue path,
+.stroke-blue path path,
+.stroke-blue g { stroke: var(--blue); }
+.stroke-green path,
+.stroke-green g { stroke: var(--green); }
+.stroke-purple path,
+.stroke-purple g { stroke: var(--purple); }
+.stroke-yellow path,
+.stroke-yellow g { stroke: var(--yellow); }
+.stroke-red path,
+.stroke-red g { stroke: var(--red); }
+.stroke-pink path,
+.stroke-pink g { stroke: var(--pink); }
+.stroke-white path,
+.stroke-white g { stroke: var(--white); }
+
+.stroke-white-10 path,
+.stroke-white-10 g { stroke: var(--white-10); }
+.stroke-white-20 path,
+.stroke-white-20 g { stroke: var(--white-20); }
+.stroke-white-30 path,
+.stroke-white-30 g { stroke: var(--white-30); }
+.stroke-white-40 path,
+.stroke-white-40 g { stroke: var(--white-40); }
+.stroke-white-50 path,
+.stroke-white-50 g { stroke: var(--white-50); }
+.stroke-white-60 path,
+.stroke-white-60 g { stroke: var(--white-60); }
+.stroke-white-70 path,
+.stroke-white-70 g { stroke: var(--white-70); }
+.stroke-white-80 path,
+.stroke-white-80 g { stroke: var(--white-80); }
+.stroke-white-90 path,
+.stroke-white-90 g { stroke: var(--white-90); }
+
+.stroke-black-10 path,
+.stroke-black-10 g { stroke: var(--black-10); }
+.stroke-black-20 path,
+.stroke-black-20 g { stroke: var(--black-20); }
+.stroke-black-30 path,
+.stroke-black-30 g { stroke: var(--black-30); }
+.stroke-black-40 path,
+.stroke-black-40 g { stroke: var(--black-40); }
+.stroke-black-50 path,
+.stroke-black-50 g { stroke: var(--black-50); }
+.stroke-black-60 path,
+.stroke-black-60 g { stroke: var(--black-60); }
+.stroke-black-70 path,
+.stroke-black-70 g { stroke: var(--black-70); }
+.stroke-black-80 path,
+.stroke-black-80 g { stroke: var(--black-80); }
+.stroke-black-90 path,
+.stroke-black-90 g { stroke: var(--black-90); }
+
+.stroke-darkgrey path,
+.stroke-darkgrey g { stroke: var(--darkgrey); }
+.stroke-middarkgrey path,
+.stroke-middarkgrey g { stroke: var(--middarkgrey); }
+.stroke-midgrey path,
+.stroke-midgrey g { stroke: var(--midgrey); }
+.stroke-midlightgrey path,
+.stroke-midlightgrey g { stroke: var(--midlightgrey); }
+.stroke-lightgrey path,
+.stroke-lightgrey g { stroke: var(--lightgrey); }
+.stroke-whitegrey path,
+.stroke-whitegrey g { stroke: var(--whitegrey); }
+
+/* Shades */
+.stroke-blue-p3 path,
+.stroke-blue-p3 g { stroke: var(--blue-p3); }
+.stroke-blue-p2 path,
+.stroke-blue-p2 g { stroke: var(--blue-p2); }
+.stroke-blue-p1 path,
+.stroke-blue-p1 g { stroke: var(--blue-p1); }
+.stroke-blue-m1 path,
+.stroke-blue-m1 g { stroke: var(--blue-m1); }
+.stroke-blue-m2 path,
+.stroke-blue-m2 g { stroke: var(--blue-m2); }
+.stroke-blue-m3 path,
+.stroke-blue-m3 g { stroke: var(--blue-m3); }
+
+.stroke-green-p3 path,
+.stroke-green-p3 g { stroke: var(--green-p3); }
+.stroke-green-p2 path,
+.stroke-green-p2 g { stroke: var(--green-p2); }
+.stroke-green-p1 path,
+.stroke-green-p1 g { stroke: var(--green-p1); }
+.stroke-green-m1 path,
+.stroke-green-m1 g { stroke: var(--green-m1); }
+.stroke-green-m2 path,
+.stroke-green-m2 g { stroke: var(--green-m2); }
+.stroke-green-m3 path,
+.stroke-green-m3 g { stroke: var(--green-m3); }
+
+.stroke-purple-p3 path,
+.stroke-purple-p3 g { stroke: var(--purple-p3); }
+.stroke-purple-p2 path,
+.stroke-purple-p2 g { stroke: var(--purple-p2); }
+.stroke-purple-p1 path,
+.stroke-purple-p1 g { stroke: var(--purple-p1); }
+.stroke-purple-m1 path,
+.stroke-purple-m1 g { stroke: var(--purple-m1); }
+.stroke-purple-m2 path,
+.stroke-purple-m2 g { stroke: var(--purple-m2); }
+.stroke-purple-m3 path,
+.stroke-purple-m3 g { stroke: var(--purple-m3); }
+
+.stroke-yellow-p3 path,
+.stroke-yellow-p3 g { stroke: var(--yellow-p3); }
+.stroke-yellow-p2 path,
+.stroke-yellow-p2 g { stroke: var(--yellow-p2); }
+.stroke-yellow-p1 path,
+.stroke-yellow-p1 g { stroke: var(--yellow-p1); }
+.stroke-yellow-m1 path,
+.stroke-yellow-m1 g { stroke: var(--yellow-m1); }
+.stroke-yellow-m2 path,
+.stroke-yellow-m2 g { stroke: var(--yellow-m2); }
+.stroke-yellow-m3 path,
+.stroke-yellow-m3 g { stroke: var(--yellow-m3); }
+
+.stroke-red-p3 path,
+.stroke-red-p3 g { stroke: var(--red-p3); }
+.stroke-red-p2 path,
+.stroke-red-p2 g { stroke: var(--red-p2); }
+.stroke-red-p1 path,
+.stroke-red-p1 g { stroke: var(--red-p1); }
+.stroke-red-m1 path,
+.stroke-red-m1 g { stroke: var(--red-m1); }
+.stroke-red-m2 path,
+.stroke-red-m2 g { stroke: var(--red-m2); }
+.stroke-red-m3 path,
+.stroke-red-m3 g { stroke: var(--red-m3); }
+
+.stroke-pink-p3 path,
+.stroke-pink-p3 g { stroke: var(--pink-p3); }
+.stroke-pink-p2 path,
+.stroke-pink-p2 g { stroke: var(--pink-p2); }
+.stroke-pink-p1 path,
+.stroke-pink-p1 g { stroke: var(--pink-p1); }
+.stroke-pink-m1 path,
+.stroke-pink-m1 g { stroke: var(--pink-m1); }
+.stroke-pink-m2 path,
+.stroke-pink-m2 g { stroke: var(--pink-m2); }
+.stroke-pink-m3 path,
+.stroke-pink-m3 g { stroke: var(--pink-m3); }
+
+.stroke-darkgrey-p2 path,
+.stroke-darkgrey-p2 g { stroke: var(--darkgrey-p2); }
+.stroke-darkgrey-p1 path,
+.stroke-darkgrey-p1 g { stroke: var(--darkgrey-p1); }
+.stroke-darkgrey-m1 path,
+.stroke-darkgrey-m1 g { stroke: var(--darkgrey-m1); }
+.stroke-darkgrey-m2 path,
+.stroke-darkgrey-m2 g { stroke: var(--darkgrey-m2); }
+
+.stroke-middarkgrey-p2 path,
+.stroke-middarkgrey-p2 g { stroke: var(--middarkgrey-p2); }
+.stroke-middarkgrey-p1 path,
+.stroke-middarkgrey-p1 g { stroke: var(--middarkgrey-p1); }
+.stroke-middarkgrey-m1 path,
+.stroke-middarkgrey-m1 g { stroke: var(--middarkgrey-m1); }
+.stroke-middarkgrey-m2 path,
+.stroke-middarkgrey-m2 g { stroke: var(--middarkgrey-m2); }
+
+.stroke-midgrey-p2 path,
+.stroke-midgrey-p2 g { stroke: var(--midgrey-p2); }
+.stroke-midgrey-p1 path,
+.stroke-midgrey-p1 g { stroke: var(--midgrey-p1); }
+.stroke-midgrey-m1 path,
+.stroke-midgrey-m1 g { stroke: var(--midgrey-m1); }
+.stroke-midgrey-m2 path,
+.stroke-midgrey-m2 g { stroke: var(--midgrey-m2); }
+
+.stroke-midlightgrey-p2 path,
+.stroke-midlightgrey-p2 g { stroke: var(--midlightgrey-p2); }
+.stroke-midlightgrey-p1 path,
+.stroke-midlightgrey-p1 g { stroke: var(--midlightgrey-p1); }
+.stroke-midlightgrey-m1 path,
+.stroke-midlightgrey-m1 g { stroke: var(--midlightgrey-m1); }
+.stroke-midlightgrey-m2 path,
+.stroke-midlightgrey-m2 g { stroke: var(--midlightgrey-m2); }
+
+.stroke-lightgrey-p2 path,
+.stroke-lightgrey-p2 g { stroke: var(--lightgrey-p2); }
+.stroke-lightgrey-p1 path,
+.stroke-lightgrey-p1 g { stroke: var(--lightgrey-p1); }
+.stroke-lightgrey-m1 path,
+.stroke-lightgrey-m1 g { stroke: var(--lightgrey-m1); }
+.stroke-lightgrey-m2 path,
+.stroke-lightgrey-m2 g { stroke: var(--lightgrey-m2); }
+
+.stroke-whitegrey-p2 path,
+.stroke-whitegrey-p2 g { stroke: var(--whitegrey-p2); }
+.stroke-whitegrey-p1 path,
+.stroke-whitegrey-p1 g { stroke: var(--whitegrey-p1); }
+.stroke-whitegrey-m1 path,
+.stroke-whitegrey-m1 g { stroke: var(--whitegrey-m1); }
+.stroke-whitegrey-m2 path,
+.stroke-whitegrey-m2 g { stroke: var(--whitegrey-m2); }
+
+.stroke-color-inherit path,
+.stroke-color-inherit g { stroke: inherit; }
+
+.stroke-white path,
+.stroke-white g       {  stroke: var(--white)  }
+
+
+/* Custom icon sizes
+/* -------------------------------------------------------- */
+.ih1 { height: .8rem;  }
+.iw1 { width: .8rem;  }
+.ih2 { height: 1.2rem;  }
+.iw2 { width: 1.2rem;  }
+.ih3 { height: 1.6rem;  }
+.iw3 { width: 1.6rem;  }
+.ih4 { height: 2.0rem;  }
+.iw4 { width: 2.0rem;  }
+.ih5 { height: 2.4rem;  }
+.iw5 { width: 2.4rem;  }
+.ih6 { height: 3.2rem;  }
+.iw6 { width: 3.2rem;  }
+
+
+@media (--breakpoint-not-small) {
+    .ih1-ns { height: .8rem;  }
+    .iw1-ns { width: .8rem;  }
+    .ih2-ns { height: 1.2rem;  }
+    .iw2-ns { width: 1.2rem;  }
+    .ih3-ns { height: 1.6rem;  }
+    .iw3-ns { width: 1.6rem;  }
+    .ih4-ns { height: 2.0rem;  }
+    .iw4-ns { width: 2.0rem;  }
+    .ih5-ns { height: 2.4rem;  }
+    .iw5-ns { width: 2.4rem;  }
+    .ih6-ns { height: 3.2rem;  }
+    .iw6-ns { width: 3.2rem;  }
+}
+
+@media (--breakpoint-medium) {
+    .ih1-m { height: .8rem;  }
+    .iw1-m { width: .8rem;  }
+    .ih2-m { height: 1.2rem;  }
+    .iw2-m { width: 1.2rem;  }
+    .ih3-m { height: 1.6rem;  }
+    .iw3-m { width: 1.6rem;  }
+    .ih4-m { height: 2.0rem;  }
+    .iw4-m { width: 2.0rem;  }
+    .ih5-m { height: 2.4rem;  }
+    .iw5-m { width: 2.4rem;  }
+    .ih6-m { height: 3.2rem;  }
+    .iw6-m { width: 3.2rem;  }
+}
+
+@media (--breakpoint-large) {
+    .ih1-l { height: .8rem;  }
+    .iw1-l { width: .8rem;  }
+    .ih2-l { height: 1.2rem;  }
+    .iw2-l { width: 1.2rem;  }
+    .ih3-l { height: 1.6rem;  }
+    .iw3-l { width: 1.6rem;  }
+    .ih4-l { height: 2.0rem;  }
+    .iw4-l { width: 2.0rem;  }
+    .ih5-l { height: 2.4rem;  }
+    .iw5-l { width: 2.4rem;  }
+    .ih6-l { height: 3.2rem;  }
+    .iw6-l { width: 3.2rem;  }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_images.css b/ghost/admin/app/styles/spirit-product/_images.css
new file mode 100644
index 0000000000..0298ceae77
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_images.css
@@ -0,0 +1,11 @@
+/*
+
+   IMAGES
+   Docs: http://tachyons.io/docs/elements/images/
+
+*/
+
+/* Responsive images! */
+
+img { max-width: 100%; }
+
diff --git a/ghost/admin/app/styles/spirit-product/_letter-spacing.css b/ghost/admin/app/styles/spirit-product/_letter-spacing.css
new file mode 100644
index 0000000000..58bff49168
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_letter-spacing.css
@@ -0,0 +1,40 @@
+/*
+
+   LETTER SPACING
+   Docs: http://tachyons.io/docs/typography/tracking/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+
+.tracked-tight-1 { letter-spacing: 0rem; }
+.tracked-tight-2 { letter-spacing: -.02rem; }
+.tracked-tight-3 { letter-spacing: -.04rem; }
+
+.tracked-1 { letter-spacing: .02rem; }
+.tracked-2 { letter-spacing: .04rem; }
+.tracked-3 { letter-spacing: .06rem; }
+
+
+@media (--breakpoint-not-small) {
+  .tracked-ns       { letter-spacing:  .045em; }
+  .tracked-tight-ns { letter-spacing: -.045em; }
+  .tracked-tight-2-ns { letter-spacing: -.02em; }
+}
+
+@media (--breakpoint-medium) {
+  .tracked-m       { letter-spacing:  .045em; }
+  .tracked-tight-m { letter-spacing: -.045em; }
+  .tracked-tight-2-m { letter-spacing: -.02em; }
+}
+
+@media (--breakpoint-large) {
+  .tracked-l       { letter-spacing:  .045em; }
+  .tracked-tight-l { letter-spacing: -.045em; }
+  .tracked-tight-2-l { letter-spacing: -.02em; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_line-height.css b/ghost/admin/app/styles/spirit-product/_line-height.css
new file mode 100644
index 0000000000..fb45bd855b
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_line-height.css
@@ -0,0 +1,54 @@
+/*
+
+   LINE HEIGHT / LEADING
+   Docs: http://tachyons.io/docs/typography/line-height
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+:root {
+    --lh-1-1: 1.1em;
+    --lh-1-3: 1.333em;
+    --lh-1-4: 1.4em;
+    --lh-1-6: 1.6em;
+    --lh-2-0: 2.0em;
+}
+
+/* Dedicated line heights  */
+.lh-solid       { line-height: var(--lh-1-1); }
+.lh-heading     { line-height: var(--lh-1-3); }
+.lh-title       { line-height: var(--lh-1-4); }
+.lh-copy        { line-height: var(--lh-1-6); }
+.lh-list        { line-height: 3.2rem; }
+.lh-code        { line-height: var(--lh-1-3); }
+
+@media (--breakpoint-not-small) {
+    .lh-solid-ns       { line-height: var(--lh-1-1); }
+    .lh-heading-ns     { line-height: var(--lh-1-3); }
+    .lh-title-ns       { line-height: var(--lh-1-4); }
+    .lh-copy-ns        { line-height: var(--lh-1-6); }
+    .lh-list-ns        { line-height: var(--lh-2-0); }
+    .lh-code-ns        { line-height: var(--lh-1-3); }
+}
+
+@media (--breakpoint-medium) {
+    .lh-solid-m       { line-height: var(--lh-1-1); }
+    .lh-heading-m     { line-height: var(--lh-1-3); }
+    .lh-title-m       { line-height: var(--lh-1-4); }
+    .lh-copy-m        { line-height: var(--lh-1-6); }
+    .lh-list-m        { line-height: var(--lh-2-0); }
+    .lh-code-m        { line-height: var(--lh-1-3); }
+}
+
+@media (--breakpoint-large) {
+    .lh-solid-l       { line-height: var(--lh-1-1); }
+    .lh-heading-l     { line-height: var(--lh-1-3); }
+    .lh-title-l       { line-height: var(--lh-1-4); }
+    .lh-copy-l        { line-height: var(--lh-1-6); }
+    .lh-list-l        { line-height: var(--lh-2-0); }
+    .lh-code-l        { line-height: var(--lh-1-3); }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_links.css b/ghost/admin/app/styles/spirit-product/_links.css
new file mode 100644
index 0000000000..6c9a2c8763
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_links.css
@@ -0,0 +1,27 @@
+/*
+
+   LINKS
+   Docs: http://tachyons.io/docs/elements/links/
+
+*/
+
+.link {
+  text-decoration: none;
+  transition: color .15s ease-in;
+}
+
+.link:link,
+.link:visited {
+  transition: color .15s ease-in;
+}
+.link:hover   {
+  transition: color .15s ease-in;
+}
+.link:active  {
+  transition: color .15s ease-in;
+}
+.link:focus   {
+  transition: color .15s ease-in;
+  outline: 1px dotted currentColor;
+}
+
diff --git a/ghost/admin/app/styles/spirit-product/_lists.css b/ghost/admin/app/styles/spirit-product/_lists.css
new file mode 100644
index 0000000000..88ca28d907
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_lists.css
@@ -0,0 +1,8 @@
+/*
+
+   LISTS
+   http://tachyons.io/docs/elements/lists/
+
+*/
+
+.list {         list-style-type: none; }
diff --git a/ghost/admin/app/styles/spirit-product/_max-widths.css b/ghost/admin/app/styles/spirit-product/_max-widths.css
new file mode 100644
index 0000000000..ae62ba223a
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_max-widths.css
@@ -0,0 +1,106 @@
+/*
+
+   MAX WIDTHS
+   Docs: http://tachyons.io/docs/layout/max-widths/
+
+   Base:
+     mw = max-width
+
+   Modifiers
+     1 = 1st step in width scale
+     2 = 2nd step in width scale
+     3 = 3rd step in width scale
+     4 = 4th step in width scale
+     5 = 5th step in width scale
+     6 = 6st step in width scale
+     7 = 7nd step in width scale
+     8 = 8rd step in width scale
+     9 = 9th step in width scale
+     10 = 10th step in width scale
+
+     -100 = literal value 100%
+
+     -none  = string value none
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/* Max Width Percentages */
+
+.mw-70   { max-width: 70%; }
+.mw-80   { max-width: 80%; }
+.mw-90   { max-width: 90%; }
+.mw-100  { max-width: 100%; }
+
+/* Max Width Scale */
+
+.mw1  {  max-width: 1rem; }
+.mw2  {  max-width: 2rem; }
+.mw3  {  max-width: 4rem; }
+.mw4  {  max-width: 8rem; }
+.mw5  {  max-width: 16rem; }
+.mw6  {  max-width: 32rem; }
+.mw7  {  max-width: 48rem; }
+.mw8  {  max-width: 64rem; }
+.mw9  {  max-width: 76rem; }
+.mw10 {  max-width: 114rem; }
+
+/* Max Width String Properties */
+
+.mw-none { max-width: none; }
+
+@media (--breakpoint-not-small) {
+  .mw-100-ns  { max-width: 100%; }
+
+  .mw1-ns  {  max-width: 1rem; }
+  .mw2-ns  {  max-width: 2rem; }
+  .mw3-ns  {  max-width: 4rem; }
+  .mw4-ns  {  max-width: 8rem; }
+  .mw5-ns  {  max-width: 16rem; }
+  .mw6-ns  {  max-width: 32rem; }
+  .mw7-ns  {  max-width: 48rem; }
+  .mw8-ns  {  max-width: 64rem; }
+  .mw9-ns  {  max-width: 76rem; }
+  .mw10-ns {  max-width: 114rem; }
+
+  .mw-none-ns { max-width: none; }
+}
+
+@media (--breakpoint-medium) {
+  .mw-100-m  { max-width: 100%; }
+
+  .mw1-m  {  max-width: 1rem; }
+  .mw2-m  {  max-width: 2rem; }
+  .mw3-m  {  max-width: 4rem; }
+  .mw4-m  {  max-width: 8rem; }
+  .mw5-m  {  max-width: 16rem; }
+  .mw6-m  {  max-width: 32rem; }
+  .mw7-m  {  max-width: 48rem; }
+  .mw8-m  {  max-width: 64rem; }
+  .mw9-m  {  max-width: 76rem; }
+  .mw10-m {  max-width: 114rem; }
+
+  .mw-none-m { max-width: none; }
+}
+
+@media (--breakpoint-large) {
+  .mw-100-l  { max-width: 100%; }
+
+  .mw1-l  {  max-width: 1rem; }
+  .mw2-l  {  max-width: 2rem; }
+  .mw3-l  {  max-width: 4rem; }
+  .mw4-l  {  max-width: 8rem; }
+  .mw5-l  {  max-width: 16rem; }
+  .mw6-l  {  max-width: 32rem; }
+  .mw7-l  {  max-width: 48rem; }
+  .mw8-l  {  max-width: 64rem; }
+  .mw9-l  {  max-width: 76rem; }
+  .mw10-l {  max-width: 114rem; }
+
+  .mw-none-l { max-width: none; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_media-queries.css b/ghost/admin/app/styles/spirit-product/_media-queries.css
new file mode 100644
index 0000000000..94efde84a1
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_media-queries.css
@@ -0,0 +1,36 @@
+/*
+
+  CUSTOM MEDIA QUERIES
+
+  Media query values can be changed to fit your own content.
+  There are no magic bullets when it comes to media query width values.
+  They should be declared in em units - and they should be set to meet
+  the needs of your content. You can also add additional media queries,
+  or remove some of the existing ones.
+
+  These media queries can be referenced like so:
+
+  @media (--breakpoint-not-small) {
+    .medium-and-larger-specific-style {
+      background-color: red;
+    }
+  }
+
+  @media (--breakpoint-medium) {
+    .medium-screen-specific-style {
+      background-color: red;
+    }
+  }
+
+  @media (--breakpoint-large) {
+    .large-and-larger-screen-specific-style {
+      background-color: red;
+    }
+  }
+
+*/
+
+/* Media Queries */
+@custom-media --breakpoint-not-small screen and (min-width: 44rem);
+@custom-media --breakpoint-medium screen and (min-width: 44rem) and (max-width: 66rem);
+@custom-media --breakpoint-large screen and (min-width: 66rem);
diff --git a/ghost/admin/app/styles/spirit-product/_min-widths.css b/ghost/admin/app/styles/spirit-product/_min-widths.css
new file mode 100644
index 0000000000..1bb6592784
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_min-widths.css
@@ -0,0 +1,106 @@
+/*
+
+   MAX WIDTHS
+   Docs: http://tachyons.io/docs/layout/min-widths/
+
+   Base:
+     mw = min-width
+
+   Modifiers
+     1 = 1st step in width scale
+     2 = 2nd step in width scale
+     3 = 3rd step in width scale
+     4 = 4th step in width scale
+     5 = 5th step in width scale
+     6 = 6st step in width scale
+     7 = 7nd step in width scale
+     8 = 8rd step in width scale
+     9 = 9th step in width scale
+     10 = 10th step in width scale
+
+     -100 = literal value 100%
+
+     -none  = string value none
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/* Max Width Percentages */
+
+.miw-70   { min-width: 70%; }
+.miw-80   { min-width: 80%; }
+.miw-90   { min-width: 90%; }
+.miw-100  { min-width: 100%; }
+
+/* Max Width Scale */
+
+.miw1  {  min-width: 1rem; }
+.miw2  {  min-width: 2rem; }
+.miw3  {  min-width: 4rem; }
+.miw4  {  min-width: 8rem; }
+.miw5  {  min-width: 16rem; }
+.miw6  {  min-width: 32rem; }
+.miw7  {  min-width: 48rem; }
+.miw8  {  min-width: 64rem; }
+.miw9  {  min-width: 96rem; }
+.miw10 {  min-width: 114rem; }
+
+/* Max Width String Properties */
+
+.miw-none { min-width: none; }
+
+@media (--breakpoint-not-small) {
+  .miw-100-ns  { min-width: 100%; }
+
+  .miw1-ns  {  min-width: 1rem; }
+  .miw2-ns  {  min-width: 2rem; }
+  .miw3-ns  {  min-width: 4rem; }
+  .miw4-ns  {  min-width: 8rem; }
+  .miw5-ns  {  min-width: 16rem; }
+  .miw6-ns  {  min-width: 32rem; }
+  .miw7-ns  {  min-width: 48rem; }
+  .miw8-ns  {  min-width: 64rem; }
+  .miw9-ns  {  min-width: 96rem; }
+  .miw10-ns {  min-width: 114rem; }
+
+  .miw-none-ns { min-width: none; }
+}
+
+@media (--breakpoint-medium) {
+  .miw-100-m  { min-width: 100%; }
+
+  .miw1-m  {  min-width: 1rem; }
+  .miw2-m  {  min-width: 2rem; }
+  .miw3-m  {  min-width: 4rem; }
+  .miw4-m  {  min-width: 8rem; }
+  .miw5-m  {  min-width: 16rem; }
+  .miw6-m  {  min-width: 32rem; }
+  .miw7-m  {  min-width: 48rem; }
+  .miw8-m  {  min-width: 64rem; }
+  .miw9-m  {  min-width: 96rem; }
+  .miw10-m {  min-width: 114rem; }
+
+  .miw-none-m { min-width: none; }
+}
+
+@media (--breakpoint-large) {
+  .miw-100-l  { min-width: 100%; }
+
+  .miw1-l  {  min-width: 1rem; }
+  .miw2-l  {  min-width: 2rem; }
+  .miw3-l  {  min-width: 4rem; }
+  .miw4-l  {  min-width: 8rem; }
+  .miw5-l  {  min-width: 16rem; }
+  .miw6-l  {  min-width: 32rem; }
+  .miw7-l  {  min-width: 48rem; }
+  .miw8-l  {  min-width: 64rem; }
+  .miw9-l  {  min-width: 96rem; }
+  .miw10-l {  min-width: 114rem; }
+
+  .miw-none-l { min-width: none; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_module-template.css b/ghost/admin/app/styles/spirit-product/_module-template.css
new file mode 100644
index 0000000000..0447e0c1e4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_module-template.css
@@ -0,0 +1,22 @@
+/*
+
+  MODULE NAME
+
+  Use this scaffolding to create or extend your own modules with tachyons
+  style architecture.
+
+*/
+
+
+@media (--breakpoint-not-small) {
+
+}
+
+@media (--breakpoint-medium) {
+
+}
+
+@media (--breakpoint-large) {
+
+}
+
diff --git a/ghost/admin/app/styles/spirit-product/_negative-margins.css b/ghost/admin/app/styles/spirit-product/_negative-margins.css
new file mode 100644
index 0000000000..c28bb188ae
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_negative-margins.css
@@ -0,0 +1,549 @@
+/*
+   NEGATIVE MARGINS
+
+   Base:
+     n = negative
+
+   Modifiers:
+     a = all
+     t = top
+     r = right
+     b = bottom
+     l = left
+
+     1 = 1st step in spacing scale
+     2 = 2nd step in spacing scale
+     3 = 3rd step in spacing scale
+     4 = 4th step in spacing scale
+     5 = 5th step in spacing scale
+     6 = 6th step in spacing scale
+     7 = 7th step in spacing scale
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.na0 {    margin: 0; }
+.na1 {    margin: calc(-var(--grid-size) * 1); }
+.na2 {    margin: calc(-var(--grid-size) * 2); }
+.na3 {    margin: calc(-var(--grid-size) * 3); }
+.na4 {    margin: calc(-var(--grid-size) * 4); }
+.na5 {    margin: calc(-var(--grid-size) * 5); }
+.na6 {    margin: calc(-var(--grid-size) * 6); }
+.na7 {    margin: calc(-var(--grid-size) * 7); }
+.na8 {    margin: calc(-var(--grid-size) * 8); }
+.na9 {    margin: calc(-var(--grid-size) * 9); }
+.na10 {    margin: calc(-var(--grid-size) * 10); }
+.na11 {    margin: calc(-var(--grid-size) * 11); }
+.na12 {    margin: calc(-var(--grid-size) * 12); }
+.na13 {    margin: calc(-var(--grid-size) * 13); }
+.na14 {    margin: calc(-var(--grid-size) * 14); }
+.na15 {    margin: calc(-var(--grid-size) * 15); }
+.na16 {    margin: calc(-var(--grid-size) * 16); }
+.na17 {    margin: calc(-var(--grid-size) * 17); }
+.na18 {    margin: calc(-var(--grid-size) * 18); }
+.na19 {    margin: calc(-var(--grid-size) * 19); }
+.na20 {    margin: calc(-var(--grid-size) * 20); }
+.na25 {    margin: calc(-var(--grid-size) * 25); }
+.na30 {    margin: calc(-var(--grid-size) * 30); }
+.na40 {    margin: calc(-var(--grid-size) * 40); }
+.na50 {    margin: calc(-var(--grid-size) * 50); }
+
+.nr0 {    margin-right: 0; }
+.nr1 {    margin-right: calc(-var(--grid-size) * 1); }
+.nr2 {    margin-right: calc(-var(--grid-size) * 2); }
+.nr3 {    margin-right: calc(-var(--grid-size) * 3); }
+.nr4 {    margin-right: calc(-var(--grid-size) * 4); }
+.nr5 {    margin-right: calc(-var(--grid-size) * 5); }
+.nr6 {    margin-right: calc(-var(--grid-size) * 6); }
+.nr7 {    margin-right: calc(-var(--grid-size) * 7); }
+.nr8 {    margin-right: calc(-var(--grid-size) * 8); }
+.nr9 {    margin-right: calc(-var(--grid-size) * 9); }
+.nr10 {    margin-right: calc(-var(--grid-size) * 10); }
+.nr11 {    margin-right: calc(-var(--grid-size) * 11); }
+.nr12 {    margin-right: calc(-var(--grid-size) * 12); }
+.nr13 {    margin-right: calc(-var(--grid-size) * 13); }
+.nr14 {    margin-right: calc(-var(--grid-size) * 14); }
+.nr15 {    margin-right: calc(-var(--grid-size) * 15); }
+.nr16 {    margin-right: calc(-var(--grid-size) * 16); }
+.nr17 {    margin-right: calc(-var(--grid-size) * 17); }
+.nr18 {    margin-right: calc(-var(--grid-size) * 18); }
+.nr19 {    margin-right: calc(-var(--grid-size) * 19); }
+.nr20 {    margin-right: calc(-var(--grid-size) * 20); }
+.nr25 {    margin-right: calc(-var(--grid-size) * 25); }
+.nr30 {    margin-right: calc(-var(--grid-size) * 30); }
+.nr40 {    margin-right: calc(-var(--grid-size) * 40); }
+.nr50 {    margin-right: calc(-var(--grid-size) * 50); }
+
+.nb0 {    margin-bottom: 0; }
+.nb1 {    margin-bottom: calc(-var(--grid-size) * 1); }
+.nb2 {    margin-bottom: calc(-var(--grid-size) * 2); }
+.nb3 {    margin-bottom: calc(-var(--grid-size) * 3); }
+.nb4 {    margin-bottom: calc(-var(--grid-size) * 4); }
+.nb5 {    margin-bottom: calc(-var(--grid-size) * 5); }
+.nb6 {    margin-bottom: calc(-var(--grid-size) * 6); }
+.nb7 {    margin-bottom: calc(-var(--grid-size) * 7); }
+.nb8 {    margin-bottom: calc(-var(--grid-size) * 8); }
+.nb9 {    margin-bottom: calc(-var(--grid-size) * 9); }
+.nb10 {    margin-bottom: calc(-var(--grid-size) * 10); }
+.nb11 {    margin-bottom: calc(-var(--grid-size) * 11); }
+.nb12 {    margin-bottom: calc(-var(--grid-size) * 12); }
+.nb13 {    margin-bottom: calc(-var(--grid-size) * 13); }
+.nb14 {    margin-bottom: calc(-var(--grid-size) * 14); }
+.nb15 {    margin-bottom: calc(-var(--grid-size) * 15); }
+.nb16 {    margin-bottom: calc(-var(--grid-size) * 16); }
+.nb17 {    margin-bottom: calc(-var(--grid-size) * 17); }
+.nb18 {    margin-bottom: calc(-var(--grid-size) * 18); }
+.nb19 {    margin-bottom: calc(-var(--grid-size) * 19); }
+.nb20 {    margin-bottom: calc(-var(--grid-size) * 20); }
+.nb25 {    margin-bottom: calc(-var(--grid-size) * 25); }
+.nb30 {    margin-bottom: calc(-var(--grid-size) * 30); }
+.nb40 {    margin-bottom: calc(-var(--grid-size) * 40); }
+.nb50 {    margin-bottom: calc(-var(--grid-size) * 50); }
+
+.nl0 {    margin-left: 0; }
+.nl1 {    margin-left: calc(-var(--grid-size) * 1); }
+.nl2 {    margin-left: calc(-var(--grid-size) * 2); }
+.nl3 {    margin-left: calc(-var(--grid-size) * 3); }
+.nl4 {    margin-left: calc(-var(--grid-size) * 4); }
+.nl5 {    margin-left: calc(-var(--grid-size) * 5); }
+.nl6 {    margin-left: calc(-var(--grid-size) * 6); }
+.nl7 {    margin-left: calc(-var(--grid-size) * 7); }
+.nl8 {    margin-left: calc(-var(--grid-size) * 8); }
+.nl9 {    margin-left: calc(-var(--grid-size) * 9); }
+.nl10 {    margin-left: calc(-var(--grid-size) * 10); }
+.nl11 {    margin-left: calc(-var(--grid-size) * 11); }
+.nl12 {    margin-left: calc(-var(--grid-size) * 12); }
+.nl13 {    margin-left: calc(-var(--grid-size) * 13); }
+.nl14 {    margin-left: calc(-var(--grid-size) * 14); }
+.nl15 {    margin-left: calc(-var(--grid-size) * 15); }
+.nl16 {    margin-left: calc(-var(--grid-size) * 16); }
+.nl17 {    margin-left: calc(-var(--grid-size) * 17); }
+.nl18 {    margin-left: calc(-var(--grid-size) * 18); }
+.nl19 {    margin-left: calc(-var(--grid-size) * 19); }
+.nl20 {    margin-left: calc(-var(--grid-size) * 20); }
+.nl25 {    margin-left: calc(-var(--grid-size) * 25); }
+.nl30 {    margin-left: calc(-var(--grid-size) * 30); }
+.nl40 {    margin-left: calc(-var(--grid-size) * 40); }
+.nl50 {    margin-left: calc(-var(--grid-size) * 50); }
+
+.nt0 {    margin-top: 0; }
+.nt1 {    margin-top: calc(-var(--grid-size) * 1); }
+.nt2 {    margin-top: calc(-var(--grid-size) * 2); }
+.nt3 {    margin-top: calc(-var(--grid-size) * 3); }
+.nt4 {    margin-top: calc(-var(--grid-size) * 4); }
+.nt5 {    margin-top: calc(-var(--grid-size) * 5); }
+.nt6 {    margin-top: calc(-var(--grid-size) * 6); }
+.nt7 {    margin-top: calc(-var(--grid-size) * 7); }
+.nt8 {    margin-top: calc(-var(--grid-size) * 8); }
+.nt9 {    margin-top: calc(-var(--grid-size) * 9); }
+.nt10 {    margin-top: calc(-var(--grid-size) * 10); }
+.nt11 {    margin-top: calc(-var(--grid-size) * 11); }
+.nt12 {    margin-top: calc(-var(--grid-size) * 12); }
+.nt13 {    margin-top: calc(-var(--grid-size) * 13); }
+.nt14 {    margin-top: calc(-var(--grid-size) * 14); }
+.nt15 {    margin-top: calc(-var(--grid-size) * 15); }
+.nt16 {    margin-top: calc(-var(--grid-size) * 16); }
+.nt17 {    margin-top: calc(-var(--grid-size) * 17); }
+.nt18 {    margin-top: calc(-var(--grid-size) * 18); }
+.nt19 {    margin-top: calc(-var(--grid-size) * 19); }
+.nt20 {    margin-top: calc(-var(--grid-size) * 20); }
+.nt25 {    margin-top: calc(-var(--grid-size) * 25); }
+.nt30 {    margin-top: calc(-var(--grid-size) * 30); }
+.nt40 {    margin-top: calc(-var(--grid-size) * 40); }
+.nt50 {    margin-top: calc(-var(--grid-size) * 50); }
+
+
+/*
+
+.na1 { margin: -var(--spacing-extra-small); }
+.na2 { margin: -var(--spacing-small); }
+.na3 { margin: -var(--spacing-medium); }
+.na4 { margin: -var(--spacing-large); }
+.na5 { margin: -var(--spacing-xl); }
+.na6 { margin: -var(--spacing-xxl); }
+.na7 { margin: -var(--spacing-xxxl); }
+.na8 { margin: -var(--spacing-xxxxl); }
+.na9 { margin: -var(--spacing-xxxxxl); }
+
+.na-vw1 { margin: -var(--spacing-vw-extra-small); }
+.na-vw2 { margin: -var(--spacing-vw-small); }
+.na-vw3 { margin: -var(--spacing-vw-medium); }
+.na-vw4 { margin: -var(--spacing-vw-large); }
+.na-vw5 { margin: -var(--spacing-vw-xl); }
+.na-vw6 { margin: -var(--spacing-vw-xxl); }
+.na-vw7 { margin: -var(--spacing-vw-xxxl); }
+.na-vw8 { margin: -var(--spacing-vw-xxxxl); }
+
+.nl1 { margin-left: -var(--spacing-extra-small); }
+.nl2 { margin-left: -var(--spacing-small); }
+.nl3 { margin-left: -var(--spacing-medium); }
+.nl4 { margin-left: -var(--spacing-large); }
+.nl5 { margin-left: -var(--spacing-xl); }
+.nl6 { margin-left: -var(--spacing-xxl); }
+.nl7 { margin-left: -var(--spacing-xxxl); }
+.nl8 { margin-left: -var(--spacing-xxxxl); }
+.nl9 { margin-left: -var(--spacing-xxxxxl); }
+
+.nl-vw1 { margin-left: -var(--spacing-vw-extra-small); }
+.nl-vw2 { margin-left: -var(--spacing-vw-small); }
+.nl-vw3 { margin-left: -var(--spacing-vw-medium); }
+.nl-vw4 { margin-left: -var(--spacing-vw-large); }
+.nl-vw5 { margin-left: -var(--spacing-vw-xl); }
+.nl-vw6 { margin-left: -var(--spacing-vw-xxl); }
+.nl-vw7 { margin-left: -var(--spacing-vw-xxxl); }
+.nl-vw8 { margin-left: -var(--spacing-vw-xxxxl); }
+
+.nr1 { margin-right: -var(--spacing-extra-small); }
+.nr2 { margin-right: -var(--spacing-small); }
+.nr3 { margin-right: -var(--spacing-medium); }
+.nr4 { margin-right: -var(--spacing-large); }
+.nr5 { margin-right: -var(--spacing-xl); }
+.nr6 { margin-right: -var(--spacing-xxl); }
+.nr7 { margin-right: -var(--spacing-xxxl); }
+.nr8 { margin-right: -var(--spacing-xxxxl); }
+.nr9 { margin-right: -var(--spacing-xxxxxl); }
+
+.nr-vw1 { margin-right: -var(--spacing-vw-extra-small); }
+.nr-vw2 { margin-right: -var(--spacing-vw-small); }
+.nr-vw3 { margin-right: -var(--spacing-vw-medium); }
+.nr-vw4 { margin-right: -var(--spacing-vw-large); }
+.nr-vw5 { margin-right: -var(--spacing-vw-xl); }
+.nr-vw6 { margin-right: -var(--spacing-vw-xxl); }
+.nr-vw7 { margin-right: -var(--spacing-vw-xxxl); }
+.nr-vw8 { margin-right: -var(--spacing-vw-xxxxl); }
+
+.nb1 { margin-bottom: -var(--spacing-extra-small); }
+.nb2 { margin-bottom: -var(--spacing-small); }
+.nb3 { margin-bottom: -var(--spacing-medium); }
+.nb4 { margin-bottom: -var(--spacing-large); }
+.nb5 { margin-bottom: -var(--spacing-xl); }
+.nb6 { margin-bottom: -var(--spacing-xxl); }
+.nb7 { margin-bottom: -var(--spacing-xxxl); }
+.nb8 { margin-bottom: -var(--spacing-xxxxl); }
+.nb9 { margin-bottom: -var(--spacing-xxxxxl); }
+
+.nb-vw1 { margin-bottom: -var(--spacing-vw-extra-small); }
+.nb-vw2 { margin-bottom: -var(--spacing-vw-small); }
+.nb-vw3 { margin-bottom: -var(--spacing-vw-medium); }
+.nb-vw4 { margin-bottom: -var(--spacing-vw-large); }
+.nb-vw5 { margin-bottom: -var(--spacing-vw-xl); }
+.nb-vw6 { margin-bottom: -var(--spacing-vw-xxl); }
+.nb-vw7 { margin-bottom: -var(--spacing-vw-xxxl); }
+.nb-vw8 { margin-bottom: -var(--spacing-vw-xxxxl); }
+
+.nt1 { margin-top: -var(--spacing-extra-small); }
+.nt2 { margin-top: -var(--spacing-small); }
+.nt3 { margin-top: -var(--spacing-medium); }
+.nt4 { margin-top: -var(--spacing-large); }
+.nt5 { margin-top: -var(--spacing-xl); }
+.nt6 { margin-top: -var(--spacing-xxl); }
+.nt7 { margin-top: -var(--spacing-xxxl); }
+.nt8 { margin-top: -var(--spacing-xxxxl); }
+.nt9 { margin-top: -var(--spacing-xxxxxl); }
+
+.nt-vw1 { margin-top: -var(--spacing-vw-extra-small); }
+.nt-vw2 { margin-top: -var(--spacing-vw-small); }
+.nt-vw3 { margin-top: -var(--spacing-vw-medium); }
+.nt-vw4 { margin-top: -var(--spacing-vw-large); }
+.nt-vw5 { margin-top: -var(--spacing-vw-xl); }
+.nt-vw6 { margin-top: -var(--spacing-vw-xxl); }
+.nt-vw7 { margin-top: -var(--spacing-vw-xxxl); }
+.nt-vw8 { margin-top: -var(--spacing-vw-xxxxl); }
+
+@media (--breakpoint-not-small) {
+
+    .na1-ns { margin: -var(--spacing-extra-small); }
+    .na2-ns { margin: -var(--spacing-small); }
+    .na3-ns { margin: -var(--spacing-medium); }
+    .na4-ns { margin: -var(--spacing-large); }
+    .na5-ns { margin: -var(--spacing-xl); }
+    .na6-ns { margin: -var(--spacing-xxl); }
+    .na7-ns { margin: -var(--spacing-xxxl); }
+    .na8-ns { margin: -var(--spacing-xxxxl); }
+    .na9-ns { margin: -var(--spacing-xxxxxl); }
+
+    .na-vw1-ns { margin: -var(--spacing-vw-extra-small); }
+    .na-vw2-ns { margin: -var(--spacing-vw-small); }
+    .na-vw3-ns { margin: -var(--spacing-vw-medium); }
+    .na-vw4-ns { margin: -var(--spacing-vw-large); }
+    .na-vw5-ns { margin: -var(--spacing-vw-xl); }
+    .na-vw6-ns { margin: -var(--spacing-vw-xxl); }
+    .na-vw7-ns { margin: -var(--spacing-vw-xxxl); }
+    .na-vw8-ns { margin: -var(--spacing-vw-xxxxl); }
+
+    .nl1-ns { margin-left: -var(--spacing-extra-small); }
+    .nl2-ns { margin-left: -var(--spacing-small); }
+    .nl3-ns { margin-left: -var(--spacing-medium); }
+    .nl4-ns { margin-left: -var(--spacing-large); }
+    .nl5-ns { margin-left: -var(--spacing-xl); }
+    .nl6-ns { margin-left: -var(--spacing-xxl); }
+    .nl7-ns { margin-left: -var(--spacing-xxxl); }
+    .nl8-ns { margin-left: -var(--spacing-xxxxl); }
+    .nl9-ns { margin-left: -var(--spacing-xxxxxl); }
+
+    .nl-vw1-ns { margin-left: -var(--spacing-vw-extra-small); }
+    .nl-vw2-ns { margin-left: -var(--spacing-vw-small); }
+    .nl-vw3-ns { margin-left: -var(--spacing-vw-medium); }
+    .nl-vw4-ns { margin-left: -var(--spacing-vw-large); }
+    .nl-vw5-ns { margin-left: -var(--spacing-vw-xl); }
+    .nl-vw6-ns { margin-left: -var(--spacing-vw-xxl); }
+    .nl-vw7-ns { margin-left: -var(--spacing-vw-xxxl); }
+    .nl-vw8-ns { margin-left: -var(--spacing-vw-xxxxl); }
+
+    .nr1-ns { margin-right: -var(--spacing-extra-small); }
+    .nr2-ns { margin-right: -var(--spacing-small); }
+    .nr3-ns { margin-right: -var(--spacing-medium); }
+    .nr4-ns { margin-right: -var(--spacing-large); }
+    .nr5-ns { margin-right: -var(--spacing-xl); }
+    .nr6-ns { margin-right: -var(--spacing-xxl); }
+    .nr7-ns { margin-right: -var(--spacing-xxxl); }
+    .nr8-ns { margin-right: -var(--spacing-xxxxl); }
+    .nr9-ns { margin-right: -var(--spacing-xxxxxl); }
+
+    .nr-vw1-ns { margin-right: -var(--spacing-vw-extra-small); }
+    .nr-vw2-ns { margin-right: -var(--spacing-vw-small); }
+    .nr-vw3-ns { margin-right: -var(--spacing-vw-medium); }
+    .nr-vw4-ns { margin-right: -var(--spacing-vw-large); }
+    .nr-vw5-ns { margin-right: -var(--spacing-vw-xl); }
+    .nr-vw6-ns { margin-right: -var(--spacing-vw-xxl); }
+    .nr-vw7-ns { margin-right: -var(--spacing-vw-xxxl); }
+    .nr-vw8-ns { margin-right: -var(--spacing-vw-xxxxl); }
+
+    .nb1-ns { margin-bottom: -var(--spacing-extra-small); }
+    .nb2-ns { margin-bottom: -var(--spacing-small); }
+    .nb3-ns { margin-bottom: -var(--spacing-medium); }
+    .nb4-ns { margin-bottom: -var(--spacing-large); }
+    .nb5-ns { margin-bottom: -var(--spacing-xl); }
+    .nb6-ns { margin-bottom: -var(--spacing-xxl); }
+    .nb7-ns { margin-bottom: -var(--spacing-xxxl); }
+    .nb8-ns { margin-bottom: -var(--spacing-xxxxl); }
+    .nb9-ns { margin-bottom: -var(--spacing-xxxxxl); }
+
+    .nb-vw1-ns { margin-bottom: -var(--spacing-vw-extra-small); }
+    .nb-vw2-ns { margin-bottom: -var(--spacing-vw-small); }
+    .nb-vw3-ns { margin-bottom: -var(--spacing-vw-medium); }
+    .nb-vw4-ns { margin-bottom: -var(--spacing-vw-large); }
+    .nb-vw5-ns { margin-bottom: -var(--spacing-vw-xl); }
+    .nb-vw6-ns { margin-bottom: -var(--spacing-vw-xxl); }
+    .nb-vw7-ns { margin-bottom: -var(--spacing-vw-xxxl); }
+    .nb-vw8-ns { margin-bottom: -var(--spacing-vw-xxxxl); }
+
+    .nt1-ns { margin-top: -var(--spacing-extra-small); }
+    .nt2-ns { margin-top: -var(--spacing-small); }
+    .nt3-ns { margin-top: -var(--spacing-medium); }
+    .nt4-ns { margin-top: -var(--spacing-large); }
+    .nt5-ns { margin-top: -var(--spacing-xl); }
+    .nt6-ns { margin-top: -var(--spacing-xxl); }
+    .nt7-ns { margin-top: -var(--spacing-xxxl); }
+    .nt8-ns { margin-top: -var(--spacing-xxxxl); }
+    .nt9-ns { margin-top: -var(--spacing-xxxxxl); }
+
+    .nt-vw1-ns { margin-top: -var(--spacing-vw-extra-small); }
+    .nt-vw2-ns { margin-top: -var(--spacing-vw-small); }
+    .nt-vw3-ns { margin-top: -var(--spacing-vw-medium); }
+    .nt-vw4-ns { margin-top: -var(--spacing-vw-large); }
+    .nt-vw5-ns { margin-top: -var(--spacing-vw-xl); }
+    .nt-vw6-ns { margin-top: -var(--spacing-vw-xxl); }
+    .nt-vw7-ns { margin-top: -var(--spacing-vw-xxxl); }
+    .nt-vw8-ns { margin-top: -var(--spacing-vw-xxxxl); }
+
+}
+
+@media (--breakpoint-medium) {
+    .na1-m { margin: -var(--spacing-extra-small); }
+    .na2-m { margin: -var(--spacing-small); }
+    .na3-m { margin: -var(--spacing-medium); }
+    .na4-m { margin: -var(--spacing-large); }
+    .na5-m { margin: -var(--spacing-xl); }
+    .na6-m { margin: -var(--spacing-xxl); }
+    .na7-m { margin: -var(--spacing-xxxl); }
+    .na8-m { margin: -var(--spacing-xxxxl); }
+    .na9-m { margin: -var(--spacing-xxxxxl); }
+
+    .na-vw1-m { margin: -var(--spacing-vw-extra-small); }
+    .na-vw2-m { margin: -var(--spacing-vw-small); }
+    .na-vw3-m { margin: -var(--spacing-vw-medium); }
+    .na-vw4-m { margin: -var(--spacing-vw-large); }
+    .na-vw5-m { margin: -var(--spacing-vw-xl); }
+    .na-vw6-m { margin: -var(--spacing-vw-xxl); }
+    .na-vw7-m { margin: -var(--spacing-vw-xxxl); }
+    .na-vw8-m { margin: -var(--spacing-vw-xxxxl); }
+
+    .nl1-m { margin-left: -var(--spacing-extra-small); }
+    .nl2-m { margin-left: -var(--spacing-small); }
+    .nl3-m { margin-left: -var(--spacing-medium); }
+    .nl4-m { margin-left: -var(--spacing-large); }
+    .nl5-m { margin-left: -var(--spacing-xl); }
+    .nl6-m { margin-left: -var(--spacing-xxl); }
+    .nl7-m { margin-left: -var(--spacing-xxxl); }
+    .nl8-m { margin-left: -var(--spacing-xxxxl); }
+    .nl9-m { margin-left: -var(--spacing-xxxxxl); }
+
+    .nl-vw1-m { margin-left: -var(--spacing-vw-extra-small); }
+    .nl-vw2-m { margin-left: -var(--spacing-vw-small); }
+    .nl-vw3-m { margin-left: -var(--spacing-vw-medium); }
+    .nl-vw4-m { margin-left: -var(--spacing-vw-large); }
+    .nl-vw5-m { margin-left: -var(--spacing-vw-xl); }
+    .nl-vw6-m { margin-left: -var(--spacing-vw-xxl); }
+    .nl-vw7-m { margin-left: -var(--spacing-vw-xxxl); }
+    .nl-vw8-m { margin-left: -var(--spacing-vw-xxxxl); }
+
+    .nr1-m { margin-right: -var(--spacing-extra-small); }
+    .nr2-m { margin-right: -var(--spacing-small); }
+    .nr3-m { margin-right: -var(--spacing-medium); }
+    .nr4-m { margin-right: -var(--spacing-large); }
+    .nr5-m { margin-right: -var(--spacing-xl); }
+    .nr6-m { margin-right: -var(--spacing-xxl); }
+    .nr7-m { margin-right: -var(--spacing-xxxl); }
+    .nr8-m { margin-right: -var(--spacing-xxxxl); }
+    .nr9-m { margin-right: -var(--spacing-xxxxxl); }
+
+    .nr-vw1-m { margin-right: -var(--spacing-vw-extra-small); }
+    .nr-vw2-m { margin-right: -var(--spacing-vw-small); }
+    .nr-vw3-m { margin-right: -var(--spacing-vw-medium); }
+    .nr-vw4-m { margin-right: -var(--spacing-vw-large); }
+    .nr-vw5-m { margin-right: -var(--spacing-vw-xl); }
+    .nr-vw6-m { margin-right: -var(--spacing-vw-xxl); }
+    .nr-vw7-m { margin-right: -var(--spacing-vw-xxxl); }
+    .nr-vw8-m { margin-right: -var(--spacing-vw-xxxxl); }
+
+    .nb1-m { margin-bottom: -var(--spacing-extra-small); }
+    .nb2-m { margin-bottom: -var(--spacing-small); }
+    .nb3-m { margin-bottom: -var(--spacing-medium); }
+    .nb4-m { margin-bottom: -var(--spacing-large); }
+    .nb5-m { margin-bottom: -var(--spacing-xl); }
+    .nb6-m { margin-bottom: -var(--spacing-xxl); }
+    .nb7-m { margin-bottom: -var(--spacing-xxxl); }
+    .nb8-m { margin-bottom: -var(--spacing-xxxxl); }
+    .nb9-m { margin-bottom: -var(--spacing-xxxxxl); }
+
+    .nb-vw1-m { margin-bottom: -var(--spacing-vw-extra-small); }
+    .nb-vw2-m { margin-bottom: -var(--spacing-vw-small); }
+    .nb-vw3-m { margin-bottom: -var(--spacing-vw-medium); }
+    .nb-vw4-m { margin-bottom: -var(--spacing-vw-large); }
+    .nb-vw5-m { margin-bottom: -var(--spacing-vw-xl); }
+    .nb-vw6-m { margin-bottom: -var(--spacing-vw-xxl); }
+    .nb-vw7-m { margin-bottom: -var(--spacing-vw-xxxl); }
+    .nb-vw8-m { margin-bottom: -var(--spacing-vw-xxxxl); }
+
+    .nt1-m { margin-top: -var(--spacing-extra-small); }
+    .nt2-m { margin-top: -var(--spacing-small); }
+    .nt3-m { margin-top: -var(--spacing-medium); }
+    .nt4-m { margin-top: -var(--spacing-large); }
+    .nt5-m { margin-top: -var(--spacing-xl); }
+    .nt6-m { margin-top: -var(--spacing-xxl); }
+    .nt7-m { margin-top: -var(--spacing-xxxl); }
+    .nt8-m { margin-top: -var(--spacing-xxxxl); }
+    .nt9-m { margin-top: -var(--spacing-xxxxxl); }
+
+    .nt-vw1-m { margin-top: -var(--spacing-vw-extra-small); }
+    .nt-vw2-m { margin-top: -var(--spacing-vw-small); }
+    .nt-vw3-m { margin-top: -var(--spacing-vw-medium); }
+    .nt-vw4-m { margin-top: -var(--spacing-vw-large); }
+    .nt-vw5-m { margin-top: -var(--spacing-vw-xl); }
+    .nt-vw6-m { margin-top: -var(--spacing-vw-xxl); }
+    .nt-vw7-m { margin-top: -var(--spacing-vw-xxxl); }
+    .nt-vw8-m { margin-top: -var(--spacing-vw-xxxxl); }
+}
+
+@media (--breakpoint-large) {
+    .na1-l { margin: -var(--spacing-extra-small); }
+    .na2-l { margin: -var(--spacing-small); }
+    .na3-l { margin: -var(--spacing-medium); }
+    .na4-l { margin: -var(--spacing-large); }
+    .na5-l { margin: -var(--spacing-xl); }
+    .na6-l { margin: -var(--spacing-xxl); }
+    .na7-l { margin: -var(--spacing-xxxl); }
+    .na8-l { margin: -var(--spacing-xxxxl); }
+    .na9-l { margin: -var(--spacing-xxxxxl); }
+
+    .na-vw1-l { margin: -var(--spacing-vw-extra-small); }
+    .na-vw2-l { margin: -var(--spacing-vw-small); }
+    .na-vw3-l { margin: -var(--spacing-vw-medium); }
+    .na-vw4-l { margin: -var(--spacing-vw-large); }
+    .na-vw5-l { margin: -var(--spacing-vw-xl); }
+    .na-vw6-l { margin: -var(--spacing-vw-xxl); }
+    .na-vw7-l { margin: -var(--spacing-vw-xxxl); }
+    .na-vw8-l { margin: -var(--spacing-vw-xxxxl); }
+
+    .nl1-l { margin-left: -var(--spacing-extra-small); }
+    .nl2-l { margin-left: -var(--spacing-small); }
+    .nl3-l { margin-left: -var(--spacing-medium); }
+    .nl4-l { margin-left: -var(--spacing-large); }
+    .nl5-l { margin-left: -var(--spacing-xl); }
+    .nl6-l { margin-left: -var(--spacing-xxl); }
+    .nl7-l { margin-left: -var(--spacing-xxxl); }
+    .nl8-l { margin-left: -var(--spacing-xxxxl); }
+    .nl9-l { margin-left: -var(--spacing-xxxxxl); }
+
+    .nl-vw1-l { margin-left: -var(--spacing-vw-extra-small); }
+    .nl-vw2-l { margin-left: -var(--spacing-vw-small); }
+    .nl-vw3-l { margin-left: -var(--spacing-vw-medium); }
+    .nl-vw4-l { margin-left: -var(--spacing-vw-large); }
+    .nl-vw5-l { margin-left: -var(--spacing-vw-xl); }
+    .nl-vw6-l { margin-left: -var(--spacing-vw-xxl); }
+    .nl-vw7-l { margin-left: -var(--spacing-vw-xxxl); }
+    .nl-vw8-l { margin-left: -var(--spacing-vw-xxxxl); }
+
+    .nr1-l { margin-right: -var(--spacing-extra-small); }
+    .nr2-l { margin-right: -var(--spacing-small); }
+    .nr3-l { margin-right: -var(--spacing-medium); }
+    .nr4-l { margin-right: -var(--spacing-large); }
+    .nr5-l { margin-right: -var(--spacing-xl); }
+    .nr6-l { margin-right: -var(--spacing-xxl); }
+    .nr7-l { margin-right: -var(--spacing-xxxl); }
+    .nr8-l { margin-right: -var(--spacing-xxxxl); }
+    .nr9-l { margin-right: -var(--spacing-xxxxxl); }
+
+    .nr-vw1-l { margin-right: -var(--spacing-vw-extra-small); }
+    .nr-vw2-l { margin-right: -var(--spacing-vw-small); }
+    .nr-vw3-l { margin-right: -var(--spacing-vw-medium); }
+    .nr-vw4-l { margin-right: -var(--spacing-vw-large); }
+    .nr-vw5-l { margin-right: -var(--spacing-vw-xl); }
+    .nr-vw6-l { margin-right: -var(--spacing-vw-xxl); }
+    .nr-vw7-l { margin-right: -var(--spacing-vw-xxxl); }
+    .nr-vw8-l { margin-right: -var(--spacing-vw-xxxxl); }
+
+    .nb1-l { margin-bottom: -var(--spacing-extra-small); }
+    .nb2-l { margin-bottom: -var(--spacing-small); }
+    .nb3-l { margin-bottom: -var(--spacing-medium); }
+    .nb4-l { margin-bottom: -var(--spacing-large); }
+    .nb5-l { margin-bottom: -var(--spacing-xl); }
+    .nb6-l { margin-bottom: -var(--spacing-xxl); }
+    .nb7-l { margin-bottom: -var(--spacing-xxxl); }
+    .nb8-l { margin-bottom: -var(--spacing-xxxxl); }
+    .nb9-l { margin-bottom: -var(--spacing-xxxxxl); }
+
+    .nb-vw1-l { margin-bottom: -var(--spacing-vw-extra-small); }
+    .nb-vw2-l { margin-bottom: -var(--spacing-vw-small); }
+    .nb-vw3-l { margin-bottom: -var(--spacing-vw-medium); }
+    .nb-vw4-l { margin-bottom: -var(--spacing-vw-large); }
+    .nb-vw5-l { margin-bottom: -var(--spacing-vw-xl); }
+    .nb-vw6-l { margin-bottom: -var(--spacing-vw-xxl); }
+    .nb-vw7-l { margin-bottom: -var(--spacing-vw-xxxl); }
+    .nb-vw8-l { margin-bottom: -var(--spacing-vw-xxxxl); }
+
+    .nt1-l { margin-top: -var(--spacing-extra-small); }
+    .nt2-l { margin-top: -var(--spacing-small); }
+    .nt3-l { margin-top: -var(--spacing-medium); }
+    .nt4-l { margin-top: -var(--spacing-large); }
+    .nt5-l { margin-top: -var(--spacing-xl); }
+    .nt6-l { margin-top: -var(--spacing-xxl); }
+    .nt7-l { margin-top: -var(--spacing-xxxl); }
+    .nt8-l { margin-top: -var(--spacing-xxxxl); }
+    .nt9-l { margin-top: -var(--spacing-xxxxxl); }
+
+    .nt-vw1-l { margin-top: -var(--spacing-vw-extra-small); }
+    .nt-vw2-l { margin-top: -var(--spacing-vw-small); }
+    .nt-vw3-l { margin-top: -var(--spacing-vw-medium); }
+    .nt-vw4-l { margin-top: -var(--spacing-vw-large); }
+    .nt-vw5-l { margin-top: -var(--spacing-vw-xl); }
+    .nt-vw6-l { margin-top: -var(--spacing-vw-xxl); }
+    .nt-vw7-l { margin-top: -var(--spacing-vw-xxxl); }
+    .nt-vw8-l { margin-top: -var(--spacing-vw-xxxxl); }
+}
+*/
diff --git a/ghost/admin/app/styles/spirit-product/_nested.css b/ghost/admin/app/styles/spirit-product/_nested.css
new file mode 100644
index 0000000000..dc833b608f
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_nested.css
@@ -0,0 +1,56 @@
+/*
+
+    NESTED
+    Tachyons module for styling nested elements
+    that are generated by a cms.
+
+*/
+
+.nested-copy-line-height p,
+.nested-copy-line-height ul,
+.nested-copy-line-height ol {
+  line-height: 1.5;
+}
+
+.nested-headline-line-height h1,
+.nested-headline-line-height h2,
+.nested-headline-line-height h3,
+.nested-headline-line-height h4,
+.nested-headline-line-height h5,
+.nested-headline-line-height h6 {
+  line-height: 1.25;
+}
+
+.nested-list-reset ul,
+.nested-list-reset ol {
+  padding-left: 0;
+  margin-left: 0;
+  list-style-type: none;
+}
+
+.nested-copy-indent p+p {
+  text-indent: 1em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.nested-copy-separator p+p {
+  margin-top: 1.5em;
+}
+
+.nested-img img {
+  width: 100%;
+  max-width: 100%;
+  display: block;
+}
+
+.nested-links a {
+  color: var(--blue);
+  transition: color .15s ease-in;
+}
+
+.nested-links a:hover,
+.nested-links a:focus {
+  color: var(--blue);
+  transition: color .15s ease-in;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_normalize.css b/ghost/admin/app/styles/spirit-product/_normalize.css
new file mode 100644
index 0000000000..b944659343
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_normalize.css
@@ -0,0 +1,449 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  /* font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_nudge.css b/ghost/admin/app/styles/spirit-product/_nudge.css
new file mode 100644
index 0000000000..f9e5038d72
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_nudge.css
@@ -0,0 +1,661 @@
+.nudge-top--1 {
+    position: relative;
+    top: 1px;
+}
+.nudge-top--2 {
+    position: relative;
+    top: 2px;
+}
+.nudge-top--3 {
+    position: relative;
+    top: 3px;
+}
+.nudge-top--4 {
+    position: relative;
+    top: 4px;
+}
+.nudge-top--5 {
+    position: relative;
+    top: 5px;
+}
+.nudge-top--6 {
+    position: relative;
+    top: 6px;
+}
+.nudge-top--7 {
+    position: relative;
+    top: 7px;
+}
+.nudge-top--8 {
+    position: relative;
+    top: 8px;
+}
+.nudge-top--9 {
+    position: relative;
+    top: 9px;
+}
+.nudge-top--10 {
+    position: relative;
+    top: 10px;
+}
+
+.nudge-right--1 {
+    position: relative;
+    right: 1px;
+}
+.nudge-right--2 {
+    position: relative;
+    right: 2px;
+}
+.nudge-right--3 {
+    position: relative;
+    right: 3px;
+}
+.nudge-right--4 {
+    position: relative;
+    right: 4px;
+}
+.nudge-right--5 {
+    position: relative;
+    right: 5px;
+}
+.nudge-right--6 {
+    position: relative;
+    right: 6px;
+}
+.nudge-right--7 {
+    position: relative;
+    right: 7px;
+}
+.nudge-right--8 {
+    position: relative;
+    right: 8px;
+}
+.nudge-right--9 {
+    position: relative;
+    right: 9px;
+}
+.nudge-right--10 {
+    position: relative;
+    right: 10px;
+}
+
+.nudge-bottom--1 {
+    position: relative;
+    bottom: 1px;
+}
+.nudge-bottom--2 {
+    position: relative;
+    bottom: 2px;
+}
+.nudge-bottom--3 {
+    position: relative;
+    bottom: 3px;
+}
+.nudge-bottom--4 {
+    position: relative;
+    bottom: 4px;
+}
+.nudge-bottom--5 {
+    position: relative;
+    bottom: 5px;
+}
+.nudge-bottom--6 {
+    position: relative;
+    bottom: 6px;
+}
+.nudge-bottom--7 {
+    position: relative;
+    bottom: 7px;
+}
+.nudge-bottom--8 {
+    position: relative;
+    bottom: 8px;
+}
+.nudge-bottom--9 {
+    position: relative;
+    bottom: 9px;
+}
+.nudge-bottom--10 {
+    position: relative;
+    bottom: 10px;
+}
+
+.nudge-left--1 {
+    position: relative;
+    left: 1px;
+}
+.nudge-left--2 {
+    position: relative;
+    left: 2px;
+}
+.nudge-left--3 {
+    position: relative;
+    left: 3px;
+}
+.nudge-left--4 {
+    position: relative;
+    left: 4px;
+}
+.nudge-left--5 {
+    position: relative;
+    left: 5px;
+}
+.nudge-left--6 {
+    position: relative;
+    left: 6px;
+}
+.nudge-left--7 {
+    position: relative;
+    left: 7px;
+}
+.nudge-left--8 {
+    position: relative;
+    left: 8px;
+}
+.nudge-left--9 {
+    position: relative;
+    left: 9px;
+}
+.nudge-left--10 {
+    position: relative;
+    left: 10px;
+}
+
+@media (--breakpoint-not-small) {
+    .nudge-top--1-ns {
+        position: relative;
+        top: 1px;
+    }
+    .nudge-top--2-ns {
+        position: relative;
+        top: 2px;
+    }
+    .nudge-top--3-ns {
+        position: relative;
+        top: 3px;
+    }
+    .nudge-top--4-ns {
+        position: relative;
+        top: 4px;
+    }
+    .nudge-top--5-ns {
+        position: relative;
+        top: 5px;
+    }
+    .nudge-top--6-ns {
+        position: relative;
+        top: 6px;
+    }
+    .nudge-top--7-ns {
+        position: relative;
+        top: 7px;
+    }
+    .nudge-top--8-ns {
+        position: relative;
+        top: 8px;
+    }
+    .nudge-top--9-ns {
+        position: relative;
+        top: 9px;
+    }
+    .nudge-top--10-ns {
+        position: relative;
+        top: 10px;
+    }
+
+    .nudge-right--1-ns {
+        position: relative;
+        right: 1px;
+    }
+    .nudge-right--2-ns {
+        position: relative;
+        right: 2px;
+    }
+    .nudge-right--3-ns {
+        position: relative;
+        right: 3px;
+    }
+    .nudge-right--4-ns {
+        position: relative;
+        right: 4px;
+    }
+    .nudge-right--5-ns {
+        position: relative;
+        right: 5px;
+    }
+    .nudge-right--6-ns {
+        position: relative;
+        right: 6px;
+    }
+    .nudge-right--7-ns {
+        position: relative;
+        right: 7px;
+    }
+    .nudge-right--8-ns {
+        position: relative;
+        right: 8px;
+    }
+    .nudge-right--9-ns {
+        position: relative;
+        right: 9px;
+    }
+    .nudge-right--10-ns {
+        position: relative;
+        right: 10px;
+    }
+
+    .nudge-bottom--1-ns {
+        position: relative;
+        bottom: 1px;
+    }
+    .nudge-bottom--2-ns {
+        position: relative;
+        bottom: 2px;
+    }
+    .nudge-bottom--3-ns {
+        position: relative;
+        bottom: 3px;
+    }
+    .nudge-bottom--4-ns {
+        position: relative;
+        bottom: 4px;
+    }
+    .nudge-bottom--5-ns {
+        position: relative;
+        bottom: 5px;
+    }
+    .nudge-bottom--6-ns {
+        position: relative;
+        bottom: 6px;
+    }
+    .nudge-bottom--7-ns {
+        position: relative;
+        bottom: 7px;
+    }
+    .nudge-bottom--8-ns {
+        position: relative;
+        bottom: 8px;
+    }
+    .nudge-bottom--9-ns {
+        position: relative;
+        bottom: 9px;
+    }
+    .nudge-bottom--10-ns {
+        position: relative;
+        bottom: 10px;
+    }
+
+    .nudge-left--1-ns {
+        position: relative;
+        left: 1px;
+    }
+    .nudge-left--2-ns {
+        position: relative;
+        left: 2px;
+    }
+    .nudge-left--3-ns {
+        position: relative;
+        left: 3px;
+    }
+    .nudge-left--4-ns {
+        position: relative;
+        left: 4px;
+    }
+    .nudge-left--5-ns {
+        position: relative;
+        left: 5px;
+    }
+    .nudge-left--6-ns {
+        position: relative;
+        left: 6px;
+    }
+    .nudge-left--7-ns {
+        position: relative;
+        left: 7px;
+    }
+    .nudge-left--8-ns {
+        position: relative;
+        left: 8px;
+    }
+    .nudge-left--9-ns {
+        position: relative;
+        left: 9px;
+    }
+    .nudge-left--10-ns {
+        position: relative;
+        left: 10px;
+    }
+}
+
+@media (--breakpoint-medium) {
+    .nudge-top--1-m {
+        position: relative;
+        top: 1px;
+    }
+    .nudge-top--2-m {
+        position: relative;
+        top: 2px;
+    }
+    .nudge-top--3-m {
+        position: relative;
+        top: 3px;
+    }
+    .nudge-top--4-m {
+        position: relative;
+        top: 4px;
+    }
+    .nudge-top--5-m {
+        position: relative;
+        top: 5px;
+    }
+    .nudge-top--6-m {
+        position: relative;
+        top: 6px;
+    }
+    .nudge-top--7-m {
+        position: relative;
+        top: 7px;
+    }
+    .nudge-top--8-m {
+        position: relative;
+        top: 8px;
+    }
+    .nudge-top--9-m {
+        position: relative;
+        top: 9px;
+    }
+    .nudge-top--10-m {
+        position: relative;
+        top: 10px;
+    }
+
+    .nudge-right--1-m {
+        position: relative;
+        right: 1px;
+    }
+    .nudge-right--2-m {
+        position: relative;
+        right: 2px;
+    }
+    .nudge-right--3-m {
+        position: relative;
+        right: 3px;
+    }
+    .nudge-right--4-m {
+        position: relative;
+        right: 4px;
+    }
+    .nudge-right--5-m {
+        position: relative;
+        right: 5px;
+    }
+    .nudge-right--6-m {
+        position: relative;
+        right: 6px;
+    }
+    .nudge-right--7-m {
+        position: relative;
+        right: 7px;
+    }
+    .nudge-right--8-m {
+        position: relative;
+        right: 8px;
+    }
+    .nudge-right--9-m {
+        position: relative;
+        right: 9px;
+    }
+    .nudge-right--10-m {
+        position: relative;
+        right: 10px;
+    }
+
+    .nudge-bottom--1-m {
+        position: relative;
+        bottom: 1px;
+    }
+    .nudge-bottom--2-m {
+        position: relative;
+        bottom: 2px;
+    }
+    .nudge-bottom--3-m {
+        position: relative;
+        bottom: 3px;
+    }
+    .nudge-bottom--4-m {
+        position: relative;
+        bottom: 4px;
+    }
+    .nudge-bottom--5-m {
+        position: relative;
+        bottom: 5px;
+    }
+    .nudge-bottom--6-m {
+        position: relative;
+        bottom: 6px;
+    }
+    .nudge-bottom--7-m {
+        position: relative;
+        bottom: 7px;
+    }
+    .nudge-bottom--8-m {
+        position: relative;
+        bottom: 8px;
+    }
+    .nudge-bottom--9-m {
+        position: relative;
+        bottom: 9px;
+    }
+    .nudge-bottom--10-m {
+        position: relative;
+        bottom: 10px;
+    }
+
+    .nudge-left--1-m {
+        position: relative;
+        left: 1px;
+    }
+    .nudge-left--2-m {
+        position: relative;
+        left: 2px;
+    }
+    .nudge-left--3-m {
+        position: relative;
+        left: 3px;
+    }
+    .nudge-left--4-m {
+        position: relative;
+        left: 4px;
+    }
+    .nudge-left--5-m {
+        position: relative;
+        left: 5px;
+    }
+    .nudge-left--6-m {
+        position: relative;
+        left: 6px;
+    }
+    .nudge-left--7-m {
+        position: relative;
+        left: 7px;
+    }
+    .nudge-left--8-m {
+        position: relative;
+        left: 8px;
+    }
+    .nudge-left--9-m {
+        position: relative;
+        left: 9px;
+    }
+    .nudge-left--10-m {
+        position: relative;
+        left: 10px;
+    }
+}
+
+@media (--breakpoint-large) {
+    .nudge-top--1-l {
+        position: relative;
+        top: 1px;
+    }
+    .nudge-top--2-l {
+        position: relative;
+        top: 2px;
+    }
+    .nudge-top--3-l {
+        position: relative;
+        top: 3px;
+    }
+    .nudge-top--4-l {
+        position: relative;
+        top: 4px;
+    }
+    .nudge-top--5-l {
+        position: relative;
+        top: 5px;
+    }
+    .nudge-top--6-l {
+        position: relative;
+        top: 6px;
+    }
+    .nudge-top--7-l {
+        position: relative;
+        top: 7px;
+    }
+    .nudge-top--8-l {
+        position: relative;
+        top: 8px;
+    }
+    .nudge-top--9-l {
+        position: relative;
+        top: 9px;
+    }
+    .nudge-top--10-l {
+        position: relative;
+        top: 10px;
+    }
+
+    .nudge-right--1-l {
+        position: relative;
+        right: 1px;
+    }
+    .nudge-right--2-l {
+        position: relative;
+        right: 2px;
+    }
+    .nudge-right--3-l {
+        position: relative;
+        right: 3px;
+    }
+    .nudge-right--4-l {
+        position: relative;
+        right: 4px;
+    }
+    .nudge-right--5-l {
+        position: relative;
+        right: 5px;
+    }
+    .nudge-right--6-l {
+        position: relative;
+        right: 6px;
+    }
+    .nudge-right--7-l {
+        position: relative;
+        right: 7px;
+    }
+    .nudge-right--8-l {
+        position: relative;
+        right: 8px;
+    }
+    .nudge-right--9-l {
+        position: relative;
+        right: 9px;
+    }
+    .nudge-right--10-l {
+        position: relative;
+        right: 10px;
+    }
+
+    .nudge-bottom--1-l {
+        position: relative;
+        bottom: 1px;
+    }
+    .nudge-bottom--2-l {
+        position: relative;
+        bottom: 2px;
+    }
+    .nudge-bottom--3-l {
+        position: relative;
+        bottom: 3px;
+    }
+    .nudge-bottom--4-l {
+        position: relative;
+        bottom: 4px;
+    }
+    .nudge-bottom--5-l {
+        position: relative;
+        bottom: 5px;
+    }
+    .nudge-bottom--6-l {
+        position: relative;
+        bottom: 6px;
+    }
+    .nudge-bottom--7-l {
+        position: relative;
+        bottom: 7px;
+    }
+    .nudge-bottom--8-l {
+        position: relative;
+        bottom: 8px;
+    }
+    .nudge-bottom--9-l {
+        position: relative;
+        bottom: 9px;
+    }
+    .nudge-bottom--10-l {
+        position: relative;
+        bottom: 10px;
+    }
+
+    .nudge-left--1-l {
+        position: relative;
+        left: 1px;
+    }
+    .nudge-left--2-l {
+        position: relative;
+        left: 2px;
+    }
+    .nudge-left--3-l {
+        position: relative;
+        left: 3px;
+    }
+    .nudge-left--4-l {
+        position: relative;
+        left: 4px;
+    }
+    .nudge-left--5-l {
+        position: relative;
+        left: 5px;
+    }
+    .nudge-left--6-l {
+        position: relative;
+        left: 6px;
+    }
+    .nudge-left--7-l {
+        position: relative;
+        left: 7px;
+    }
+    .nudge-left--8-l {
+        position: relative;
+        left: 8px;
+    }
+    .nudge-left--9-l {
+        position: relative;
+        left: 9px;
+    }
+    .nudge-left--10-l {
+        position: relative;
+        left: 10px;
+    }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_opacity.css b/ghost/admin/app/styles/spirit-product/_opacity.css
new file mode 100644
index 0000000000..3f2a39bbcd
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_opacity.css
@@ -0,0 +1,20 @@
+/*
+
+    OPACITY
+    Docs: http://tachyons.io/docs/themes/opacity/
+
+*/
+
+.o-100 { opacity: 1;    }
+.o-90  { opacity: .9;   }
+.o-80  { opacity: .8;   }
+.o-70  { opacity: .7;   }
+.o-60  { opacity: .6;   }
+.o-50  { opacity: .5;   }
+.o-40  { opacity: .4;   }
+.o-30  { opacity: .3;   }
+.o-20  { opacity: .2;   }
+.o-10  { opacity: .1;   }
+.o-05  { opacity: .05;  }
+.o-025 { opacity: .025; }
+.o-0   { opacity: 0; }
diff --git a/ghost/admin/app/styles/spirit-product/_outlines.css b/ghost/admin/app/styles/spirit-product/_outlines.css
new file mode 100644
index 0000000000..e9b0ed996b
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_outlines.css
@@ -0,0 +1,32 @@
+/*
+
+   OUTLINES
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.outline { outline: 1px solid; }
+.outline-transparent { outline: 1px solid transparent; }
+.outline-0 { outline: 0; }
+
+@media (--breakpoint-not-small) {
+  .outline-ns { outline: 1px solid; }
+  .outline-transparent-ns { outline: 1px solid transparent; }
+  .outline-0-ns { outline: 0; }
+}
+
+@media (--breakpoint-medium) {
+  .outline-m { outline: 1px solid; }
+  .outline-transparent-m { outline: 1px solid transparent; }
+  .outline-0-m { outline: 0; }
+}
+
+@media (--breakpoint-large) {
+  .outline-l { outline: 1px solid; }
+  .outline-transparent-l { outline: 1px solid transparent; }
+  .outline-0-l { outline: 0; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_overflow.css b/ghost/admin/app/styles/spirit-product/_overflow.css
new file mode 100644
index 0000000000..82ca8ebbc4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_overflow.css
@@ -0,0 +1,75 @@
+/*
+
+    OVERFLOW
+
+    Media Query Extensions:
+      -ns = not-small
+      -m  = medium
+      -l  = large
+
+ */
+
+.overflow-visible { overflow: visible; }
+.overflow-hidden { overflow: hidden; }
+.overflow-scroll { overflow: scroll; }
+.overflow-auto { overflow: auto; }
+
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-scroll { overflow-x: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-scroll { overflow-y: scroll; }
+.overflow-y-auto { overflow-y: auto; }
+
+@media (--breakpoint-not-small) {
+  .overflow-visible-ns { overflow: visible; }
+  .overflow-hidden-ns { overflow: hidden; }
+  .overflow-scroll-ns { overflow: scroll; }
+  .overflow-auto-ns { overflow: auto; }
+  .overflow-x-visible-ns { overflow-x: visible; }
+  .overflow-x-hidden-ns { overflow-x: hidden; }
+  .overflow-x-scroll-ns { overflow-x: scroll; }
+  .overflow-x-auto-ns { overflow-x: auto; }
+
+  .overflow-y-visible-ns { overflow-y: visible; }
+  .overflow-y-hidden-ns { overflow-y: hidden; }
+  .overflow-y-scroll-ns { overflow-y: scroll; }
+  .overflow-y-auto-ns { overflow-y: auto; }
+}
+
+@media (--breakpoint-medium) {
+  .overflow-visible-m { overflow: visible; }
+  .overflow-hidden-m { overflow: hidden; }
+  .overflow-scroll-m { overflow: scroll; }
+  .overflow-auto-m { overflow: auto; }
+
+  .overflow-x-visible-m { overflow-x: visible; }
+  .overflow-x-hidden-m { overflow-x: hidden; }
+  .overflow-x-scroll-m { overflow-x: scroll; }
+  .overflow-x-auto-m { overflow-x: auto; }
+
+  .overflow-y-visible-m { overflow-y: visible; }
+  .overflow-y-hidden-m { overflow-y: hidden; }
+  .overflow-y-scroll-m { overflow-y: scroll; }
+  .overflow-y-auto-m { overflow-y: auto; }
+}
+
+@media (--breakpoint-large) {
+  .overflow-visible-l { overflow: visible; }
+  .overflow-hidden-l { overflow: hidden; }
+  .overflow-scroll-l { overflow: scroll; }
+  .overflow-auto-l { overflow: auto; }
+
+  .overflow-x-visible-l { overflow-x: visible; }
+  .overflow-x-hidden-l { overflow-x: hidden; }
+  .overflow-x-scroll-l { overflow-x: scroll; }
+  .overflow-x-auto-l { overflow-x: auto; }
+
+  .overflow-y-visible-l { overflow-y: visible; }
+  .overflow-y-hidden-l { overflow-y: hidden; }
+  .overflow-y-scroll-l { overflow-y: scroll; }
+  .overflow-y-auto-l { overflow-y: auto; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_position.css b/ghost/admin/app/styles/spirit-product/_position.css
new file mode 100644
index 0000000000..7e4a4685e4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_position.css
@@ -0,0 +1,41 @@
+/*
+
+   POSITIONING
+   Docs: http://tachyons.io/docs/layout/position/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.static { position: static; }
+.relative  { position: relative; }
+.absolute  { position: absolute; }
+.fixed  { position: fixed; }
+.sticky  { position: sticky; }
+
+@media (--breakpoint-not-small) {
+  .static-ns { position: static; }
+  .relative-ns  { position: relative; }
+  .absolute-ns  { position: absolute; }
+  .fixed-ns  { position: fixed; }
+  .sticky-ns  { position: sticky; }
+}
+
+@media (--breakpoint-medium) {
+  .static-m { position: static; }
+  .relative-m  { position: relative; }
+  .absolute-m  { position: absolute; }
+  .fixed-m  { position: fixed; }
+  .sticky-m  { position: sticky; }
+}
+
+@media (--breakpoint-large) {
+  .static-l { position: static; }
+  .relative-l  { position: relative; }
+  .absolute-l  { position: absolute; }
+  .fixed-l  { position: fixed; }
+  .sticky-l  { position: sticky; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_rotations.css b/ghost/admin/app/styles/spirit-product/_rotations.css
new file mode 100644
index 0000000000..5adf7aad28
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_rotations.css
@@ -0,0 +1,43 @@
+/*
+
+   ROTATIONS
+
+*/
+
+.rotate-45 { transform: rotate(45deg); }
+.rotate-90 { transform: rotate(90deg); }
+.rotate-135 { transform: rotate(135deg); }
+.rotate-180 { transform: rotate(180deg); }
+.rotate-225 { transform: rotate(225deg); }
+.rotate-270 { transform: rotate(270deg); }
+.rotate-315 { transform: rotate(315deg); }
+
+@media (--breakpoint-not-small){
+  .rotate-45-ns { transform: rotate(45deg); }
+  .rotate-90-ns { transform: rotate(90deg); }
+  .rotate-135-ns { transform: rotate(135deg); }
+  .rotate-180-ns { transform: rotate(180deg); }
+  .rotate-225-ns { transform: rotate(225deg); }
+  .rotate-270-ns { transform: rotate(270deg); }
+  .rotate-315-ns { transform: rotate(315deg); }
+}
+
+@media (--breakpoint-medium){
+  .rotate-45-m { transform: rotate(45deg); }
+  .rotate-90-m { transform: rotate(90deg); }
+  .rotate-135-m { transform: rotate(135deg); }
+  .rotate-180-m { transform: rotate(180deg); }
+  .rotate-225-m { transform: rotate(225deg); }
+  .rotate-270-m { transform: rotate(270deg); }
+  .rotate-315-m { transform: rotate(315deg); }
+}
+
+@media (--breakpoint-large){
+  .rotate-45-l { transform: rotate(45deg); }
+  .rotate-90-l { transform: rotate(90deg); }
+  .rotate-135-l { transform: rotate(135deg); }
+  .rotate-180-l { transform: rotate(180deg); }
+  .rotate-225-l { transform: rotate(225deg); }
+  .rotate-270-l { transform: rotate(270deg); }
+  .rotate-315-l { transform: rotate(315deg); }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_skins.css b/ghost/admin/app/styles/spirit-product/_skins.css
new file mode 100644
index 0000000000..380f7b54ef
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_skins.css
@@ -0,0 +1,232 @@
+/*
+
+   SKINS
+   Docs: http://tachyons.io/docs/themes/skins/
+
+   Classes for setting foreground and background colors on elements.
+   If you haven't declared a border color, but set border on an element, it will
+   be set to the current text color.
+
+*/
+
+/* Text colors */
+
+.blue           { color: var(--blue); }
+.green          { color: var(--green); }
+.purple          { color: var(--purple); }
+.yellow         { color: var(--yellow); }
+.red            { color: var(--red); }
+.pink           { color: var(--pink); }
+.white          { color: var(--white); }
+
+.white-10          { color: var(--white-10); }
+.white-20          { color: var(--white-20); }
+.white-30          { color: var(--white-30); }
+.white-40          { color: var(--white-40); }
+.white-50          { color: var(--white-50); }
+.white-60          { color: var(--white-60); }
+.white-70          { color: var(--white-70); }
+.white-80          { color: var(--white-80); }
+.white-90          { color: var(--white-90); }
+
+.black-10          { color: var(--black-10); }
+.black-20          { color: var(--black-20); }
+.black-30          { color: var(--black-30); }
+.black-40          { color: var(--black-40); }
+.black-50          { color: var(--black-50); }
+.black-60          { color: var(--black-60); }
+.black-70          { color: var(--black-70); }
+.black-80          { color: var(--black-80); }
+.black-90          { color: var(--black-90); }
+
+.darkgrey       { color: var(--darkgrey); }
+.middarkgrey    { color: var(--middarkgrey); }
+.midgrey        { color: var(--midgrey); }
+.midlightgrey   { color: var(--midlightgrey); }
+.lightgrey      { color: var(--lightgrey); }
+.whitegrey      { color: var(--whitegrey); }
+
+/* Shades */
+.blue-p3       { color: var(--blue-p3); }
+.blue-p2       { color: var(--blue-p2); }
+.blue-p1       { color: var(--blue-p1); }
+.blue-m1       { color: var(--blue-m1); }
+.blue-m2       { color: var(--blue-m2); }
+.blue-m3       { color: var(--blue-m3); }
+
+.green-p3       { color: var(--green-p3); }
+.green-p2       { color: var(--green-p2); }
+.green-p1       { color: var(--green-p1); }
+.green-m1       { color: var(--green-m1); }
+.green-m2       { color: var(--green-m2); }
+.green-m3       { color: var(--green-m3); }
+
+.purple-p3       { color: var(--purple-p3); }
+.purple-p2       { color: var(--purple-p2); }
+.purple-p1       { color: var(--purple-p1); }
+.purple-m1       { color: var(--purple-m1); }
+.purple-m2       { color: var(--purple-m2); }
+.purple-m3       { color: var(--purple-m3); }
+
+.yellow-p3       { color: var(--yellow-p3); }
+.yellow-p2       { color: var(--yellow-p2); }
+.yellow-p1       { color: var(--yellow-p1); }
+.yellow-m1       { color: var(--yellow-m1); }
+.yellow-m2       { color: var(--yellow-m2); }
+.yellow-m3       { color: var(--yellow-m3); }
+
+.red-p3       { color: var(--red-p3); }
+.red-p2       { color: var(--red-p2); }
+.red-p1       { color: var(--red-p1); }
+.red-m1       { color: var(--red-m1); }
+.red-m2       { color: var(--red-m2); }
+.red-m3       { color: var(--red-m3); }
+
+.pink-p3       { color: var(--pink-p3); }
+.pink-p2       { color: var(--pink-p2); }
+.pink-p1       { color: var(--pink-p1); }
+.pink-m1       { color: var(--pink-m1); }
+.pink-m2       { color: var(--pink-m2); }
+.pink-m3       { color: var(--pink-m3); }
+
+.darkgrey-p2       { color: var(--darkgrey-p2); }
+.darkgrey-p1       { color: var(--darkgrey-p1); }
+.darkgrey-m1       { color: var(--darkgrey-m1); }
+.darkgrey-m2       { color: var(--darkgrey-m2); }
+
+.middarkgrey-p2       { color: var(--middarkgrey-p2); }
+.middarkgrey-p1       { color: var(--middarkgrey-p1); }
+.middarkgrey-m1       { color: var(--middarkgrey-m1); }
+.middarkgrey-m2       { color: var(--middarkgrey-m2); }
+
+.midgrey-p2       { color: var(--midgrey-p2); }
+.midgrey-p1       { color: var(--midgrey-p1); }
+.midgrey-m1       { color: var(--midgrey-m1); }
+.midgrey-m2       { color: var(--midgrey-m2); }
+
+.midlightgrey-p2       { color: var(--midlightgrey-p2); }
+.midlightgrey-p1       { color: var(--midlightgrey-p1); }
+.midlightgrey-m1       { color: var(--midlightgrey-m1); }
+.midlightgrey-m2       { color: var(--midlightgrey-m2); }
+
+.lightgrey-p2       { color: var(--lightgrey-p2); }
+.lightgrey-p1       { color: var(--lightgrey-p1); }
+.lightgrey-m1       { color: var(--lightgrey-m1); }
+.lightgrey-m2       { color: var(--lightgrey-m2); }
+
+.whitegrey-p2       { color: var(--whitegrey-p2); }
+.whitegrey-p1       { color: var(--whitegrey-p1); }
+.whitegrey-m1       { color: var(--whitegrey-m1); }
+.whitegrey-m2       { color: var(--whitegrey-m2); }
+
+.color-inherit { color: inherit; }
+
+/* Background colors */
+.bg-blue           { background-color: var(--blue); }
+.bg-green          { background-color: var(--green); }
+.bg-purple          { background-color: var(--purple); }
+.bg-yellow         { background-color: var(--yellow); }
+.bg-red            { background-color: var(--red); }
+.bg-pink           { background-color: var(--pink); }
+.bg-white          { background-color: var(--white); }
+.bg-transparent     { background-color: transparent !important;}
+
+.bg-white-10          { background-color: var(--white-10); }
+.bg-white-20          { background-color: var(--white-20); }
+.bg-white-30          { background-color: var(--white-30); }
+.bg-white-40          { background-color: var(--white-40); }
+.bg-white-50          { background-color: var(--white-50); }
+.bg-white-60          { background-color: var(--white-60); }
+.bg-white-70          { background-color: var(--white-70); }
+.bg-white-80          { background-color: var(--white-80); }
+.bg-white-90          { background-color: var(--white-90); }
+
+.bg-black-10          { background-color: var(--black-10); }
+.bg-black-20          { background-color: var(--black-20); }
+.bg-black-30          { background-color: var(--black-30); }
+.bg-black-40          { background-color: var(--black-40); }
+.bg-black-50          { background-color: var(--black-50); }
+.bg-black-60          { background-color: var(--black-60); }
+.bg-black-70          { background-color: var(--black-70); }
+.bg-black-80          { background-color: var(--black-80); }
+.bg-black-90          { background-color: var(--black-90); }
+
+.bg-darkgrey       { background-color: var(--darkgrey); }
+.bg-middarkgrey    { background-color: var(--middarkgrey); }
+.bg-midgrey        { background-color: var(--midgrey); }
+.bg-midlightgrey   { background-color: var(--midlightgrey); }
+.bg-lightgrey      { background-color: var(--lightgrey); }
+.bg-whitegrey      { background-color: var(--whitegrey); }
+
+/* Shades */
+.bg-blue-p3       { background-color: var(--blue-p3); }
+.bg-blue-p2       { background-color: var(--blue-p2); }
+.bg-blue-p1       { background-color: var(--blue-p1); }
+.bg-blue-m1       { background-color: var(--blue-m1); }
+.bg-blue-m2       { background-color: var(--blue-m2); }
+.bg-blue-m3       { background-color: var(--blue-m3); }
+
+.bg-green-p3       { background-color: var(--green-p3); }
+.bg-green-p2       { background-color: var(--green-p2); }
+.bg-green-p1       { background-color: var(--green-p1); }
+.bg-green-m1       { background-color: var(--green-m1); }
+.bg-green-m2       { background-color: var(--green-m2); }
+.bg-green-m3       { background-color: var(--green-m3); }
+
+.bg-purple-p3       { background-color: var(--purple-p3); }
+.bg-purple-p2       { background-color: var(--purple-p2); }
+.bg-purple-p1       { background-color: var(--purple-p1); }
+.bg-purple-m1       { background-color: var(--purple-m1); }
+.bg-purple-m2       { background-color: var(--purple-m2); }
+.bg-purple-m3       { background-color: var(--purple-m3); }
+
+.bg-yellow-p3       { background-color: var(--yellow-p3); }
+.bg-yellow-p2       { background-color: var(--yellow-p2); }
+.bg-yellow-p1       { background-color: var(--yellow-p1); }
+.bg-yellow-m1       { background-color: var(--yellow-m1); }
+.bg-yellow-m2       { background-color: var(--yellow-m2); }
+.bg-yellow-m3       { background-color: var(--yellow-m3); }
+
+.bg-red-p3       { background-color: var(--red-p3); }
+.bg-red-p2       { background-color: var(--red-p2); }
+.bg-red-p1       { background-color: var(--red-p1); }
+.bg-red-m1       { background-color: var(--red-m1); }
+.bg-red-m2       { background-color: var(--red-m2); }
+.bg-red-m3       { background-color: var(--red-m3); }
+
+.bg-pink-p3       { background-color: var(--pink-p3); }
+.bg-pink-p2       { background-color: var(--pink-p2); }
+.bg-pink-p1       { background-color: var(--pink-p1); }
+.bg-pink-m1       { background-color: var(--pink-m1); }
+.bg-pink-m2       { background-color: var(--pink-m2); }
+.bg-pink-m3       { background-color: var(--pink-m3); }
+
+.bg-darkgrey-p2       { background-color: var(--darkgrey-p2); }
+.bg-darkgrey-p1       { background-color: var(--darkgrey-p1); }
+.bg-darkgrey-m1       { background-color: var(--darkgrey-m1); }
+.bg-darkgrey-m2       { background-color: var(--darkgrey-m2); }
+
+.bg-middarkgrey-p2       { background-color: var(--middarkgrey-p2); }
+.bg-middarkgrey-p1       { background-color: var(--middarkgrey-p1); }
+.bg-middarkgrey-m1       { background-color: var(--middarkgrey-m1); }
+.bg-middarkgrey-m2       { background-color: var(--middarkgrey-m2); }
+
+.bg-midgrey-p2       { background-color: var(--midgrey-p2); }
+.bg-midgrey-p1       { background-color: var(--midgrey-p1); }
+.bg-midgrey-m1       { background-color: var(--midgrey-m1); }
+.bg-midgrey-m2       { background-color: var(--midgrey-m2); }
+
+.bg-midlightgrey-p2       { background-color: var(--midlightgrey-p2); }
+.bg-midlightgrey-p1       { background-color: var(--midlightgrey-p1); }
+.bg-midlightgrey-m1       { background-color: var(--midlightgrey-m1); }
+.bg-midlightgrey-m2       { background-color: var(--midlightgrey-m2); }
+
+.bg-lightgrey-p2       { background-color: var(--lightgrey-p2); }
+.bg-lightgrey-p1       { background-color: var(--lightgrey-p1); }
+.bg-lightgrey-m1       { background-color: var(--lightgrey-m1); }
+.bg-lightgrey-m2       { background-color: var(--lightgrey-m2); }
+
+.bg-whitegrey-p2       { background-color: var(--whitegrey-p2); }
+.bg-whitegrey-p1       { background-color: var(--whitegrey-p1); }
+.bg-whitegrey-m1       { background-color: var(--whitegrey-m1); }
+.bg-whitegrey-m2       { background-color: var(--whitegrey-m2); }
diff --git a/ghost/admin/app/styles/spirit-product/_spacing-backup.css b/ghost/admin/app/styles/spirit-product/_spacing-backup.css
new file mode 100644
index 0000000000..3f6b2c4ec4
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_spacing-backup.css
@@ -0,0 +1,861 @@
+/*
+    Variables
+
+    Remember, these variables are set to work with a 62.5% font-size base on
+    the HTML element. That means 1rem = 10px;
+*/
+
+:root {
+  --spacing-none: 0;
+  --spacing-extra-small: .5rem;
+  --spacing-small: 1rem;
+  --spacing-medium: 2rem;
+  --spacing-large: 3rem;
+  --spacing-xl: 4rem;
+  --spacing-xxl: 5rem;
+  --spacing-xxxl: 6rem;
+  --spacing-xxxxl: 10rem;
+  --spacing-xxxxxl: 16rem;
+
+  --spacing-vw-extra-small: 2vw;
+  --spacing-vw-small: 3vw;
+  --spacing-vw-medium: 4vw;
+  --spacing-vw-large: 6vw;
+  --spacing-vw-xl: 8vw;
+  --spacing-vw-xxl: 12vw;
+  --spacing-vw-xxxl: 15vw;
+  --spacing-vw-xxxxl: 20vw;
+}
+
+/*
+
+
+   SPACING
+   Docs: http://tachyons.io/docs/layout/spacing/
+
+   An eight step powers of two scale ranging from 0 to 16rem.
+
+   Base:
+     p = padding
+     m = margin
+
+   Modifiers:
+     a = all
+     t = top
+     r = right
+     b = bottom
+     l = left
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+.pa0 { padding: var(--spacing-none); }
+.pa1 { padding: var(--spacing-extra-small); }
+.pa2 { padding: var(--spacing-small); }
+.pa3 { padding: var(--spacing-medium); }
+.pa4 { padding: var(--spacing-large); }
+.pa5 { padding: var(--spacing-xl); }
+.pa6 { padding: var(--spacing-xxl); }
+.pa7 { padding: var(--spacing-xxxl); }
+.pa8 { padding: var(--spacing-xxxxl); }
+.pa9 { padding: var(--spacing-xxxxxl); }
+
+.pa-vw1 { padding: var(--spacing-vw-extra-small); }
+.pa-vw2 { padding: var(--spacing-vw-small); }
+.pa-vw3 { padding: var(--spacing-vw-medium); }
+.pa-vw4 { padding: var(--spacing-vw-large); }
+.pa-vw5 { padding: var(--spacing-vw-xl); }
+.pa-vw6 { padding: var(--spacing-vw-xxl); }
+.pa-vw7 { padding: var(--spacing-vw-xxxl); }
+.pa-vw8 { padding: var(--spacing-vw-xxxxl); }
+
+.pl0 { padding-left: var(--spacing-none); }
+.pl1 { padding-left: var(--spacing-extra-small); }
+.pl2 { padding-left: var(--spacing-small); }
+.pl3 { padding-left: var(--spacing-medium); }
+.pl4 { padding-left: var(--spacing-large); }
+.pl5 { padding-left: var(--spacing-xl); }
+.pl6 { padding-left: var(--spacing-xxl); }
+.pl7 { padding-left: var(--spacing-xxxl); }
+.pl8 { padding-left: var(--spacing-xxxxl); }
+.pl9 { padding-left: var(--spacing-xxxxxl); }
+
+.pl-vw1 { padding-left: var(--spacing-vw-extra-small); }
+.pl-vw2 { padding-left: var(--spacing-vw-small); }
+.pl-vw3 { padding-left: var(--spacing-vw-medium); }
+.pl-vw4 { padding-left: var(--spacing-vw-large); }
+.pl-vw5 { padding-left: var(--spacing-vw-xl); }
+.pl-vw6 { padding-left: var(--spacing-vw-xxl); }
+.pl-vw7 { padding-left: var(--spacing-vw-xxxl); }
+.pl-vw8 { padding-left: var(--spacing-vw-xxxxl); }
+
+.pr0 { padding-right: var(--spacing-none); }
+.pr1 { padding-right: var(--spacing-extra-small); }
+.pr2 { padding-right: var(--spacing-small); }
+.pr3 { padding-right: var(--spacing-medium); }
+.pr4 { padding-right: var(--spacing-large); }
+.pr5 { padding-right: var(--spacing-xl); }
+.pr6 { padding-right: var(--spacing-xxl); }
+.pr7 { padding-right: var(--spacing-xxxl); }
+.pr8 { padding-right: var(--spacing-xxxxl); }
+.pr9 { padding-right: var(--spacing-xxxxxl); }
+
+.pr-vw1 { padding-right: var(--spacing-vw-extra-small); }
+.pr-vw2 { padding-right: var(--spacing-vw-small); }
+.pr-vw3 { padding-right: var(--spacing-vw-medium); }
+.pr-vw4 { padding-right: var(--spacing-vw-large); }
+.pr-vw5 { padding-right: var(--spacing-vw-xl); }
+.pr-vw6 { padding-right: var(--spacing-vw-xxl); }
+.pr-vw7 { padding-right: var(--spacing-vw-xxxl); }
+.pr-vw8 { padding-right: var(--spacing-vw-xxxxl); }
+
+.pb0 { padding-bottom: var(--spacing-none); }
+.pb1 { padding-bottom: var(--spacing-extra-small); }
+.pb2 { padding-bottom: var(--spacing-small); }
+.pb3 { padding-bottom: var(--spacing-medium); }
+.pb4 { padding-bottom: var(--spacing-large); }
+.pb5 { padding-bottom: var(--spacing-xl); }
+.pb6 { padding-bottom: var(--spacing-xxl); }
+.pb7 { padding-bottom: var(--spacing-xxxl); }
+.pb8 { padding-bottom: var(--spacing-xxxxl); }
+.pb9 { padding-bottom: var(--spacing-xxxxxl); }
+
+.pb-vw1 { padding-bottom: var(--spacing-vw-extra-small); }
+.pb-vw2 { padding-bottom: var(--spacing-vw-small); }
+.pb-vw3 { padding-bottom: var(--spacing-vw-medium); }
+.pb-vw4 { padding-bottom: var(--spacing-vw-large); }
+.pb-vw5 { padding-bottom: var(--spacing-vw-xl); }
+.pb-vw6 { padding-bottom: var(--spacing-vw-xxl); }
+.pb-vw7 { padding-bottom: var(--spacing-vw-xxxl); }
+.pb-vw8 { padding-bottom: var(--spacing-vw-xxxxl); }
+
+.pt0 { padding-top: var(--spacing-none); }
+.pt1 { padding-top: var(--spacing-extra-small); }
+.pt2 { padding-top: var(--spacing-small); }
+.pt3 { padding-top: var(--spacing-medium); }
+.pt4 { padding-top: var(--spacing-large); }
+.pt5 { padding-top: var(--spacing-xl); }
+.pt6 { padding-top: var(--spacing-xxl); }
+.pt7 { padding-top: var(--spacing-xxxl); }
+.pt8 { padding-top: var(--spacing-xxxxl); }
+.pt9 { padding-top: var(--spacing-xxxxxl); }
+
+.pt-vw1 { padding-top: var(--spacing-vw-extra-small); }
+.pt-vw2 { padding-top: var(--spacing-vw-small); }
+.pt-vw3 { padding-top: var(--spacing-vw-medium); }
+.pt-vw4 { padding-top: var(--spacing-vw-large); }
+.pt-vw5 { padding-top: var(--spacing-vw-xl); }
+.pt-vw6 { padding-top: var(--spacing-vw-xxl); }
+.pt-vw7 { padding-top: var(--spacing-vw-xxxl); }
+.pt-vw8 { padding-top: var(--spacing-vw-xxxxl); }
+
+.ma0 {  margin: var(--spacing-none); }
+.ma1 {  margin: var(--spacing-extra-small); }
+.ma2 {  margin: var(--spacing-small); }
+.ma3 {  margin: var(--spacing-medium); }
+.ma4 {  margin: var(--spacing-large); }
+.ma5 {  margin: var(--spacing-xl); }
+.ma6 {  margin: var(--spacing-xxl); }
+.ma7 { margin: var(--spacing-xxxl); }
+.ma8 {  margin: var(--spacing-xxxxl); }
+.ma9 { margin: var(--spacing-xxxxxl); }
+
+.ma-vw1 { margin: var(--spacing-vw-extra-small); }
+.ma-vw2 { margin: var(--spacing-vw-small); }
+.ma-vw3 { margin: var(--spacing-vw-medium); }
+.ma-vw4 { margin: var(--spacing-vw-large); }
+.ma-vw5 { margin: var(--spacing-vw-xl); }
+.ma-vw6 { margin: var(--spacing-vw-xxl); }
+.ma-vw7 { margin: var(--spacing-vw-xxxl); }
+.ma-vw8 { margin: var(--spacing-vw-xxxxl); }
+
+.ml0 {  margin-left: var(--spacing-none); }
+.ml1 {  margin-left: var(--spacing-extra-small); }
+.ml2 {  margin-left: var(--spacing-small); }
+.ml3 {  margin-left: var(--spacing-medium); }
+.ml4 {  margin-left: var(--spacing-large); }
+.ml5 {  margin-left: var(--spacing-xl); }
+.ml6 {  margin-left: var(--spacing-xxl); }
+.ml7 { margin-left: var(--spacing-xxxl); }
+.ml8 {  margin-left: var(--spacing-xxxxl); }
+.ml9 { margin-left: var(--spacing-xxxxxl); }
+
+.ml-vw1 { margin-left: var(--spacing-vw-extra-small); }
+.ml-vw2 { margin-left: var(--spacing-vw-small); }
+.ml-vw3 { margin-left: var(--spacing-vw-medium); }
+.ml-vw4 { margin-left: var(--spacing-vw-large); }
+.ml-vw5 { margin-left: var(--spacing-vw-xl); }
+.ml-vw6 { margin-left: var(--spacing-vw-xxl); }
+.ml-vw7 { margin-left: var(--spacing-vw-xxxl); }
+.ml-vw8 { margin-left: var(--spacing-vw-xxxxl); }
+
+.mr0 {  margin-right: var(--spacing-none); }
+.mr1 {  margin-right: var(--spacing-extra-small); }
+.mr2 {  margin-right: var(--spacing-small); }
+.mr3 {  margin-right: var(--spacing-medium); }
+.mr4 {  margin-right: var(--spacing-large); }
+.mr5 {  margin-right: var(--spacing-xl); }
+.mr6 {  margin-right: var(--spacing-xxl); }
+.mr7 { margin-right: var(--spacing-xxxl); }
+.mr8 {  margin-right: var(--spacing-xxxxl); }
+.mr9 { margin-right: var(--spacing-xxxxxl); }
+
+.mr-vw1 { margin-right: var(--spacing-vw-extra-small); }
+.mr-vw2 { margin-right: var(--spacing-vw-small); }
+.mr-vw3 { margin-right: var(--spacing-vw-medium); }
+.mr-vw4 { margin-right: var(--spacing-vw-large); }
+.mr-vw5 { margin-right: var(--spacing-vw-xl); }
+.mr-vw6 { margin-right: var(--spacing-vw-xxl); }
+.mr-vw7 { margin-right: var(--spacing-vw-xxxl); }
+.mr-vw8 { margin-right: var(--spacing-vw-xxxxl); }
+
+.mb0 {  margin-bottom: var(--spacing-none); }
+.mb1 {  margin-bottom: var(--spacing-extra-small); }
+.mb2 {  margin-bottom: var(--spacing-small); }
+.mb3 {  margin-bottom: var(--spacing-medium); }
+.mb4 {  margin-bottom: var(--spacing-large); }
+.mb5 {  margin-bottom: var(--spacing-xl); }
+.mb6 {  margin-bottom: var(--spacing-xxl); }
+.mb7 { margin-bottom: var(--spacing-xxxl); }
+.mb8 {  margin-bottom: var(--spacing-xxxxl); }
+.mb9 { margin-bottom: var(--spacing-xxxxxl); }
+
+.mb-vw1 { margin-bottom: var(--spacing-vw-extra-small); }
+.mb-vw2 { margin-bottom: var(--spacing-vw-small); }
+.mb-vw3 { margin-bottom: var(--spacing-vw-medium); }
+.mb-vw4 { margin-bottom: var(--spacing-vw-large); }
+.mb-vw5 { margin-bottom: var(--spacing-vw-xl); }
+.mb-vw6 { margin-bottom: var(--spacing-vw-xxl); }
+.mb-vw7 { margin-bottom: var(--spacing-vw-xxxl); }
+.mb-vw8 { margin-bottom: var(--spacing-vw-xxxxl); }
+
+.mt0 {  margin-top: var(--spacing-none); }
+.mt1 {  margin-top: var(--spacing-extra-small); }
+.mt2 {  margin-top: var(--spacing-small); }
+.mt3 {  margin-top: var(--spacing-medium); }
+.mt4 {  margin-top: var(--spacing-large); }
+.mt5 {  margin-top: var(--spacing-xl); }
+.mt6 {  margin-top: var(--spacing-xxl); }
+.mt7 { margin-top: var(--spacing-xxxl); }
+.mt8 {  margin-top: var(--spacing-xxxxl); }
+.mt9 { margin-top: var(--spacing-xxxxxl); }
+
+.mt-vw1 { margin-top: var(--spacing-vw-extra-small); }
+.mt-vw2 { margin-top: var(--spacing-vw-small); }
+.mt-vw3 { margin-top: var(--spacing-vw-medium); }
+.mt-vw4 { margin-top: var(--spacing-vw-large); }
+.mt-vw5 { margin-top: var(--spacing-vw-xl); }
+.mt-vw6 { margin-top: var(--spacing-vw-xxl); }
+.mt-vw7 { margin-top: var(--spacing-vw-xxxl); }
+.mt-vw8 { margin-top: var(--spacing-vw-xxxxl); }
+
+@media (--breakpoint-not-small) {
+    .pa0-ns { padding: var(--spacing-none); }
+    .pa1-ns { padding: var(--spacing-extra-small); }
+    .pa2-ns { padding: var(--spacing-small); }
+    .pa3-ns { padding: var(--spacing-medium); }
+    .pa4-ns { padding: var(--spacing-large); }
+    .pa5-ns { padding: var(--spacing-xl); }
+    .pa6-ns { padding: var(--spacing-xxl); }
+    .pa7-ns { padding: var(--spacing-xxxl); }
+    .pa8-ns { padding: var(--spacing-xxxxl); }
+    .pa9-ns { padding: var(--spacing-xxxxxl); }
+
+    .pr-vw1-ns { padding-right: var(--spacing-vw-extra-small); }
+    .pr-vw2-ns { padding-right: var(--spacing-vw-small); }
+    .pr-vw3-ns { padding-right: var(--spacing-vw-medium); }
+    .pr-vw4-ns { padding-right: var(--spacing-vw-large); }
+    .pr-vw5-ns { padding-right: var(--spacing-vw-xl); }
+    .pr-vw6-ns { padding-right: var(--spacing-vw-xxl); }
+    .pr-vw7-ns { padding-right: var(--spacing-vw-xxxl); }
+    .pr-vw8-ns { padding-right: var(--spacing-vw-xxxxl); }
+
+    .pl0-ns { padding-left: var(--spacing-none); }
+    .pl1-ns { padding-left: var(--spacing-extra-small); }
+    .pl2-ns { padding-left: var(--spacing-small); }
+    .pl3-ns { padding-left: var(--spacing-medium); }
+    .pl4-ns { padding-left: var(--spacing-large); }
+    .pl5-ns { padding-left: var(--spacing-xl); }
+    .pl6-ns { padding-left: var(--spacing-xxl); }
+    .pl7-ns { padding-left: var(--spacing-xxxl); }
+    .pl8-ns { padding-left: var(--spacing-xxxxl); }
+    .pl9-ns { padding-left: var(--spacing-xxxxxl); }
+
+    .pl-vw1-ns { padding-left: var(--spacing-vw-extra-small); }
+    .pl-vw2-ns { padding-left: var(--spacing-vw-small); }
+    .pl-vw3-ns { padding-left: var(--spacing-vw-medium); }
+    .pl-vw4-ns { padding-left: var(--spacing-vw-large); }
+    .pl-vw5-ns { padding-left: var(--spacing-vw-xl); }
+    .pl-vw6-ns { padding-left: var(--spacing-vw-xxl); }
+    .pl-vw7-ns { padding-left: var(--spacing-vw-xxxl); }
+    .pl-vw8-ns { padding-left: var(--spacing-vw-xxxxl); }
+
+    .pr0-ns { padding-right: var(--spacing-none); }
+    .pr1-ns { padding-right: var(--spacing-extra-small); }
+    .pr2-ns { padding-right: var(--spacing-small); }
+    .pr3-ns { padding-right: var(--spacing-medium); }
+    .pr4-ns { padding-right: var(--spacing-large); }
+    .pr5-ns { padding-right: var(--spacing-xl); }
+    .pr6-ns { padding-right: var(--spacing-xxl); }
+    .pr7-ns { padding-right: var(--spacing-xxxl); }
+    .pr8-ns { padding-right: var(--spacing-xxxxl); }
+    .pr9-ns { padding-right: var(--spacing-xxxxxl); }
+
+    .pr-vw1-ns { padding-right: var(--spacing-vw-extra-small); }
+    .pr-vw2-ns { padding-right: var(--spacing-vw-small); }
+    .pr-vw3-ns { padding-right: var(--spacing-vw-medium); }
+    .pr-vw4-ns { padding-right: var(--spacing-vw-large); }
+    .pr-vw5-ns { padding-right: var(--spacing-vw-xl); }
+    .pr-vw6-ns { padding-right: var(--spacing-vw-xxl); }
+    .pr-vw7-ns { padding-right: var(--spacing-vw-xxxl); }
+    .pr-vw8-ns { padding-right: var(--spacing-vw-xxxxl); }
+
+    .pb0-ns { padding-bottom: var(--spacing-none); }
+    .pb1-ns { padding-bottom: var(--spacing-extra-small); }
+    .pb2-ns { padding-bottom: var(--spacing-small); }
+    .pb3-ns { padding-bottom: var(--spacing-medium); }
+    .pb4-ns { padding-bottom: var(--spacing-large); }
+    .pb5-ns { padding-bottom: var(--spacing-xl); }
+    .pb6-ns { padding-bottom: var(--spacing-xxl); }
+    .pb7-ns { padding-bottom: var(--spacing-xxxl); }
+    .pb8-ns { padding-bottom: var(--spacing-xxxxl); }
+    .pb9-ns { padding-bottom: var(--spacing-xxxxxl); }
+
+    .pb-vw1-ns { padding-bottom: var(--spacing-vw-extra-small); }
+    .pb-vw2-ns { padding-bottom: var(--spacing-vw-small); }
+    .pb-vw3-ns { padding-bottom: var(--spacing-vw-medium); }
+    .pb-vw4-ns { padding-bottom: var(--spacing-vw-large); }
+    .pb-vw5-ns { padding-bottom: var(--spacing-vw-xl); }
+    .pb-vw6-ns { padding-bottom: var(--spacing-vw-xxl); }
+    .pb-vw7-ns { padding-bottom: var(--spacing-vw-xxxl); }
+    .pb-vw8-ns { padding-bottom: var(--spacing-vw-xxxxl); }
+
+    .pt0-ns { padding-top: var(--spacing-none); }
+    .pt1-ns { padding-top: var(--spacing-extra-small); }
+    .pt2-ns { padding-top: var(--spacing-small); }
+    .pt3-ns { padding-top: var(--spacing-medium); }
+    .pt4-ns { padding-top: var(--spacing-large); }
+    .pt5-ns { padding-top: var(--spacing-xl); }
+    .pt6-ns { padding-top: var(--spacing-xxl); }
+    .pt7-ns { padding-top: var(--spacing-xxxl); }
+    .pt8-ns { padding-top: var(--spacing-xxxxl); }
+    .pt9-ns { padding-top: var(--spacing-xxxxxl); }
+
+    .pt-vw1-ns { padding-top: var(--spacing-vw-extra-small); }
+    .pt-vw2-ns { padding-top: var(--spacing-vw-small); }
+    .pt-vw3-ns { padding-top: var(--spacing-vw-medium); }
+    .pt-vw4-ns { padding-top: var(--spacing-vw-large); }
+    .pt-vw5-ns { padding-top: var(--spacing-vw-xl); }
+    .pt-vw6-ns { padding-top: var(--spacing-vw-xxl); }
+    .pt-vw7-ns { padding-top: var(--spacing-vw-xxxl); }
+    .pt-vw8-ns { padding-top: var(--spacing-vw-xxxxl); }
+
+    .ma0-ns {  margin: var(--spacing-none); }
+    .ma1-ns {  margin: var(--spacing-extra-small); }
+    .ma2-ns {  margin: var(--spacing-small); }
+    .ma3-ns {  margin: var(--spacing-medium); }
+    .ma4-ns {  margin: var(--spacing-large); }
+    .ma5-ns {  margin: var(--spacing-xl); }
+    .ma6-ns {  margin: var(--spacing-xxl); }
+    .ma7-ns { margin: var(--spacing-xxxl); }
+    .ma8-ns {  margin: var(--spacing-xxxxl); }
+    .ma9-ns { margin: var(--spacing-xxxxxl); }
+
+    .ma-vw1-ns { margin: var(--spacing-vw-extra-small); }
+    .ma-vw2-ns { margin: var(--spacing-vw-small); }
+    .ma-vw3-ns { margin: var(--spacing-vw-medium); }
+    .ma-vw4-ns { margin: var(--spacing-vw-large); }
+    .ma-vw5-ns { margin: var(--spacing-vw-xl); }
+    .ma-vw6-ns { margin: var(--spacing-vw-xxl); }
+    .ma-vw7-ns { margin: var(--spacing-vw-xxxl); }
+    .ma-vw8-ns { margin: var(--spacing-vw-xxxxl); }
+
+    .ml0-ns {  margin-left: var(--spacing-none); }
+    .ml1-ns {  margin-left: var(--spacing-extra-small); }
+    .ml2-ns {  margin-left: var(--spacing-small); }
+    .ml3-ns {  margin-left: var(--spacing-medium); }
+    .ml4-ns {  margin-left: var(--spacing-large); }
+    .ml5-ns {  margin-left: var(--spacing-xl); }
+    .ml6-ns {  margin-left: var(--spacing-xxl); }
+    .ml7-ns { margin-left: var(--spacing-xxxl); }
+    .ml8-ns {  margin-left: var(--spacing-xxxxl); }
+    .ml9-ns { margin-left: var(--spacing-xxxxxl); }
+
+    .ml-vw1-ns { margin-left: var(--spacing-vw-extra-small); }
+    .ml-vw2-ns { margin-left: var(--spacing-vw-small); }
+    .ml-vw3-ns { margin-left: var(--spacing-vw-medium); }
+    .ml-vw4-ns { margin-left: var(--spacing-vw-large); }
+    .ml-vw5-ns { margin-left: var(--spacing-vw-xl); }
+    .ml-vw6-ns { margin-left: var(--spacing-vw-xxl); }
+    .ml-vw7-ns { margin-left: var(--spacing-vw-xxxl); }
+    .ml-vw8-ns { margin-left: var(--spacing-vw-xxxxl); }
+
+    .mr0-ns {  margin-right: var(--spacing-none); }
+    .mr1-ns {  margin-right: var(--spacing-extra-small); }
+    .mr2-ns {  margin-right: var(--spacing-small); }
+    .mr3-ns {  margin-right: var(--spacing-medium); }
+    .mr4-ns {  margin-right: var(--spacing-large); }
+    .mr5-ns {  margin-right: var(--spacing-xl); }
+    .mr6-ns {  margin-right: var(--spacing-xxl); }
+    .mr7-ns { margin-right: var(--spacing-xxxl); }
+    .mr8-ns {  margin-right: var(--spacing-xxxxl); }
+    .mr9-ns { margin-right: var(--spacing-xxxxxl); }
+
+    .mr-vw1-ns { margin-right: var(--spacing-vw-extra-small); }
+    .mr-vw2-ns { margin-right: var(--spacing-vw-small); }
+    .mr-vw3-ns { margin-right: var(--spacing-vw-medium); }
+    .mr-vw4-ns { margin-right: var(--spacing-vw-large); }
+    .mr-vw5-ns { margin-right: var(--spacing-vw-xl); }
+    .mr-vw6-ns { margin-right: var(--spacing-vw-xxl); }
+    .mr-vw7-ns { margin-right: var(--spacing-vw-xxxl); }
+    .mr-vw8-ns { margin-right: var(--spacing-vw-xxxxl); }
+
+    .mb0-ns {  margin-bottom: var(--spacing-none); }
+    .mb1-ns {  margin-bottom: var(--spacing-extra-small); }
+    .mb2-ns {  margin-bottom: var(--spacing-small); }
+    .mb3-ns {  margin-bottom: var(--spacing-medium); }
+    .mb4-ns {  margin-bottom: var(--spacing-large); }
+    .mb5-ns {  margin-bottom: var(--spacing-xl); }
+    .mb6-ns {  margin-bottom: var(--spacing-xxl); }
+    .mb7-ns { margin-bottom: var(--spacing-xxxl); }
+    .mb8-ns {  margin-bottom: var(--spacing-xxxxl); }
+    .mb9-ns { margin-bottom: var(--spacing-xxxxxl); }
+
+    .mb-vw1-ns { margin-bottom: var(--spacing-vw-extra-small); }
+    .mb-vw2-ns { margin-bottom: var(--spacing-vw-small); }
+    .mb-vw3-ns { margin-bottom: var(--spacing-vw-medium); }
+    .mb-vw4-ns { margin-bottom: var(--spacing-vw-large); }
+    .mb-vw5-ns { margin-bottom: var(--spacing-vw-xl); }
+    .mb-vw6-ns { margin-bottom: var(--spacing-vw-xxl); }
+    .mb-vw7-ns { margin-bottom: var(--spacing-vw-xxxl); }
+    .mb-vw8-ns { margin-bottom: var(--spacing-vw-xxxxl); }
+
+    .mt0-ns {  margin-top: var(--spacing-none); }
+    .mt1-ns {  margin-top: var(--spacing-extra-small); }
+    .mt2-ns {  margin-top: var(--spacing-small); }
+    .mt3-ns {  margin-top: var(--spacing-medium); }
+    .mt4-ns {  margin-top: var(--spacing-large); }
+    .mt5-ns {  margin-top: var(--spacing-xl); }
+    .mt6-ns {  margin-top: var(--spacing-xxl); }
+    .mt7-ns { margin-top: var(--spacing-xxxl); }
+    .mt8-ns {  margin-top: var(--spacing-xxxxl); }
+    .mt9-ns { margin-top: var(--spacing-xxxxxl); }
+
+    .mt-vw1-ns { margin-top: var(--spacing-vw-extra-small); }
+    .mt-vw2-ns { margin-top: var(--spacing-vw-small); }
+    .mt-vw3-ns { margin-top: var(--spacing-vw-medium); }
+    .mt-vw4-ns { margin-top: var(--spacing-vw-large); }
+    .mt-vw5-ns { margin-top: var(--spacing-vw-xl); }
+    .mt-vw6-ns { margin-top: var(--spacing-vw-xxl); }
+    .mt-vw7-ns { margin-top: var(--spacing-vw-xxxl); }
+    .mt-vw8-ns { margin-top: var(--spacing-vw-xxxxl); }
+}
+
+@media (--breakpoint-medium) {
+    .pa0-m { padding: var(--spacing-none); }
+    .pa1-m { padding: var(--spacing-extra-small); }
+    .pa2-m { padding: var(--spacing-small); }
+    .pa3-m { padding: var(--spacing-medium); }
+    .pa4-m { padding: var(--spacing-large); }
+    .pa5-m { padding: var(--spacing-xl); }
+    .pa6-m { padding: var(--spacing-xxl); }
+    .pa7-m { padding: var(--spacing-xxxl); }
+    .pa8-m { padding: var(--spacing-xxxxl); }
+    .pa9-m { padding: var(--spacing-xxxxxl); }
+
+    .pr-vw1-m { padding-right: var(--spacing-vw-extra-small); }
+    .pr-vw2-m { padding-right: var(--spacing-vw-small); }
+    .pr-vw3-m { padding-right: var(--spacing-vw-medium); }
+    .pr-vw4-m { padding-right: var(--spacing-vw-large); }
+    .pr-vw5-m { padding-right: var(--spacing-vw-xl); }
+    .pr-vw6-m { padding-right: var(--spacing-vw-xxl); }
+    .pr-vw7-m { padding-right: var(--spacing-vw-xxxl); }
+    .pr-vw8-m { padding-right: var(--spacing-vw-xxxxl); }
+
+    .pl0-m { padding-left: var(--spacing-none); }
+    .pl1-m { padding-left: var(--spacing-extra-small); }
+    .pl2-m { padding-left: var(--spacing-small); }
+    .pl3-m { padding-left: var(--spacing-medium); }
+    .pl4-m { padding-left: var(--spacing-large); }
+    .pl5-m { padding-left: var(--spacing-xl); }
+    .pl6-m { padding-left: var(--spacing-xxl); }
+    .pl7-m { padding-left: var(--spacing-xxxl); }
+    .pl8-m { padding-left: var(--spacing-xxxxl); }
+    .pl9-m { padding-left: var(--spacing-xxxxxl); }
+
+    .pl-vw1-m { padding-left: var(--spacing-vw-extra-small); }
+    .pl-vw2-m { padding-left: var(--spacing-vw-small); }
+    .pl-vw3-m { padding-left: var(--spacing-vw-medium); }
+    .pl-vw4-m { padding-left: var(--spacing-vw-large); }
+    .pl-vw5-m { padding-left: var(--spacing-vw-xl); }
+    .pl-vw6-m { padding-left: var(--spacing-vw-xxl); }
+    .pl-vw7-m { padding-left: var(--spacing-vw-xxxl); }
+    .pl-vw8-m { padding-left: var(--spacing-vw-xxxxl); }
+
+    .pr0-m { padding-right: var(--spacing-none); }
+    .pr1-m { padding-right: var(--spacing-extra-small); }
+    .pr2-m { padding-right: var(--spacing-small); }
+    .pr3-m { padding-right: var(--spacing-medium); }
+    .pr4-m { padding-right: var(--spacing-large); }
+    .pr5-m { padding-right: var(--spacing-xl); }
+    .pr6-m { padding-right: var(--spacing-xxl); }
+    .pr7-m { padding-right: var(--spacing-xxxl); }
+    .pr8-m { padding-right: var(--spacing-xxxxl); }
+    .pr9-m { padding-right: var(--spacing-xxxxxl); }
+
+    .pr-vw1-m { padding-right: var(--spacing-vw-extra-small); }
+    .pr-vw2-m { padding-right: var(--spacing-vw-small); }
+    .pr-vw3-m { padding-right: var(--spacing-vw-medium); }
+    .pr-vw4-m { padding-right: var(--spacing-vw-large); }
+    .pr-vw5-m { padding-right: var(--spacing-vw-xl); }
+    .pr-vw6-m { padding-right: var(--spacing-vw-xxl); }
+    .pr-vw7-m { padding-right: var(--spacing-vw-xxxl); }
+    .pr-vw8-m { padding-right: var(--spacing-vw-xxxxl); }
+
+    .pb0-m { padding-bottom: var(--spacing-none); }
+    .pb1-m { padding-bottom: var(--spacing-extra-small); }
+    .pb2-m { padding-bottom: var(--spacing-small); }
+    .pb3-m { padding-bottom: var(--spacing-medium); }
+    .pb4-m { padding-bottom: var(--spacing-large); }
+    .pb5-m { padding-bottom: var(--spacing-xl); }
+    .pb6-m { padding-bottom: var(--spacing-xxl); }
+    .pb7-m { padding-bottom: var(--spacing-xxxl); }
+    .pb8-m { padding-bottom: var(--spacing-xxxxl); }
+    .pb9-m { padding-bottom: var(--spacing-xxxxxl); }
+
+    .pb-vw1-m { padding-bottom: var(--spacing-vw-extra-small); }
+    .pb-vw2-m { padding-bottom: var(--spacing-vw-small); }
+    .pb-vw3-m { padding-bottom: var(--spacing-vw-medium); }
+    .pb-vw4-m { padding-bottom: var(--spacing-vw-large); }
+    .pb-vw5-m { padding-bottom: var(--spacing-vw-xl); }
+    .pb-vw6-m { padding-bottom: var(--spacing-vw-xxl); }
+    .pb-vw7-m { padding-bottom: var(--spacing-vw-xxxl); }
+    .pb-vw8-m { padding-bottom: var(--spacing-vw-xxxxl); }
+
+    .pt0-m { padding-top: var(--spacing-none); }
+    .pt1-m { padding-top: var(--spacing-extra-small); }
+    .pt2-m { padding-top: var(--spacing-small); }
+    .pt3-m { padding-top: var(--spacing-medium); }
+    .pt4-m { padding-top: var(--spacing-large); }
+    .pt5-m { padding-top: var(--spacing-xl); }
+    .pt6-m { padding-top: var(--spacing-xxl); }
+    .pt7-m { padding-top: var(--spacing-xxxl); }
+    .pt8-m { padding-top: var(--spacing-xxxxl); }
+    .pt9-m { padding-top: var(--spacing-xxxxxl); }
+
+    .pt-vw1-m { padding-top: var(--spacing-vw-extra-small); }
+    .pt-vw2-m { padding-top: var(--spacing-vw-small); }
+    .pt-vw3-m { padding-top: var(--spacing-vw-medium); }
+    .pt-vw4-m { padding-top: var(--spacing-vw-large); }
+    .pt-vw5-m { padding-top: var(--spacing-vw-xl); }
+    .pt-vw6-m { padding-top: var(--spacing-vw-xxl); }
+    .pt-vw7-m { padding-top: var(--spacing-vw-xxxl); }
+    .pt-vw8-m { padding-top: var(--spacing-vw-xxxxl); }
+
+    .ma0-m {  margin: var(--spacing-none); }
+    .ma1-m {  margin: var(--spacing-extra-small); }
+    .ma2-m {  margin: var(--spacing-small); }
+    .ma3-m {  margin: var(--spacing-medium); }
+    .ma4-m {  margin: var(--spacing-large); }
+    .ma5-m {  margin: var(--spacing-xl); }
+    .ma6-m {  margin: var(--spacing-xxl); }
+    .ma7-m { margin: var(--spacing-xxxl); }
+    .ma8-m {  margin: var(--spacing-xxxxl); }
+    .ma9-m { margin: var(--spacing-xxxxxl); }
+
+    .ma-vw1-m { margin: var(--spacing-vw-extra-small); }
+    .ma-vw2-m { margin: var(--spacing-vw-small); }
+    .ma-vw3-m { margin: var(--spacing-vw-medium); }
+    .ma-vw4-m { margin: var(--spacing-vw-large); }
+    .ma-vw5-m { margin: var(--spacing-vw-xl); }
+    .ma-vw6-m { margin: var(--spacing-vw-xxl); }
+    .ma-vw7-m { margin: var(--spacing-vw-xxxl); }
+    .ma-vw8-m { margin: var(--spacing-vw-xxxxl); }
+
+    .ml0-m {  margin-left: var(--spacing-none); }
+    .ml1-m {  margin-left: var(--spacing-extra-small); }
+    .ml2-m {  margin-left: var(--spacing-small); }
+    .ml3-m {  margin-left: var(--spacing-medium); }
+    .ml4-m {  margin-left: var(--spacing-large); }
+    .ml5-m {  margin-left: var(--spacing-xl); }
+    .ml6-m {  margin-left: var(--spacing-xxl); }
+    .ml7-m { margin-left: var(--spacing-xxxl); }
+    .ml8-m {  margin-left: var(--spacing-xxxxl); }
+    .ml9-m { margin-left: var(--spacing-xxxxxl); }
+
+    .ml-vw1-m { margin-left: var(--spacing-vw-extra-small); }
+    .ml-vw2-m { margin-left: var(--spacing-vw-small); }
+    .ml-vw3-m { margin-left: var(--spacing-vw-medium); }
+    .ml-vw4-m { margin-left: var(--spacing-vw-large); }
+    .ml-vw5-m { margin-left: var(--spacing-vw-xl); }
+    .ml-vw6-m { margin-left: var(--spacing-vw-xxl); }
+    .ml-vw7-m { margin-left: var(--spacing-vw-xxxl); }
+    .ml-vw8-m { margin-left: var(--spacing-vw-xxxxl); }
+
+    .mr0-m {  margin-right: var(--spacing-none); }
+    .mr1-m {  margin-right: var(--spacing-extra-small); }
+    .mr2-m {  margin-right: var(--spacing-small); }
+    .mr3-m {  margin-right: var(--spacing-medium); }
+    .mr4-m {  margin-right: var(--spacing-large); }
+    .mr5-m {  margin-right: var(--spacing-xl); }
+    .mr6-m {  margin-right: var(--spacing-xxl); }
+    .mr7-m { margin-right: var(--spacing-xxxl); }
+    .mr8-m {  margin-right: var(--spacing-xxxxl); }
+    .mr9-m { margin-right: var(--spacing-xxxxxl); }
+
+    .mr-vw1-m { margin-right: var(--spacing-vw-extra-small); }
+    .mr-vw2-m { margin-right: var(--spacing-vw-small); }
+    .mr-vw3-m { margin-right: var(--spacing-vw-medium); }
+    .mr-vw4-m { margin-right: var(--spacing-vw-large); }
+    .mr-vw5-m { margin-right: var(--spacing-vw-xl); }
+    .mr-vw6-m { margin-right: var(--spacing-vw-xxl); }
+    .mr-vw7-m { margin-right: var(--spacing-vw-xxxl); }
+    .mr-vw8-m { margin-right: var(--spacing-vw-xxxxl); }
+
+    .mb0-m {  margin-bottom: var(--spacing-none); }
+    .mb1-m {  margin-bottom: var(--spacing-extra-small); }
+    .mb2-m {  margin-bottom: var(--spacing-small); }
+    .mb3-m {  margin-bottom: var(--spacing-medium); }
+    .mb4-m {  margin-bottom: var(--spacing-large); }
+    .mb5-m {  margin-bottom: var(--spacing-xl); }
+    .mb6-m {  margin-bottom: var(--spacing-xxl); }
+    .mb7-m { margin-bottom: var(--spacing-xxxl); }
+    .mb8-m {  margin-bottom: var(--spacing-xxxxl); }
+    .mb9-m { margin-bottom: var(--spacing-xxxxxl); }
+
+    .mb-vw1-m { margin-bottom: var(--spacing-vw-extra-small); }
+    .mb-vw2-m { margin-bottom: var(--spacing-vw-small); }
+    .mb-vw3-m { margin-bottom: var(--spacing-vw-medium); }
+    .mb-vw4-m { margin-bottom: var(--spacing-vw-large); }
+    .mb-vw5-m { margin-bottom: var(--spacing-vw-xl); }
+    .mb-vw6-m { margin-bottom: var(--spacing-vw-xxl); }
+    .mb-vw7-m { margin-bottom: var(--spacing-vw-xxxl); }
+    .mb-vw8-m { margin-bottom: var(--spacing-vw-xxxxl); }
+
+    .mt0-m {  margin-top: var(--spacing-none); }
+    .mt1-m {  margin-top: var(--spacing-extra-small); }
+    .mt2-m {  margin-top: var(--spacing-small); }
+    .mt3-m {  margin-top: var(--spacing-medium); }
+    .mt4-m {  margin-top: var(--spacing-large); }
+    .mt5-m {  margin-top: var(--spacing-xl); }
+    .mt6-m {  margin-top: var(--spacing-xxl); }
+    .mt7-m { margin-top: var(--spacing-xxxl); }
+    .mt8-m {  margin-top: var(--spacing-xxxxl); }
+    .mt9-m { margin-top: var(--spacing-xxxxxl); }
+
+    .mt-vw1-m { margin-top: var(--spacing-vw-extra-small); }
+    .mt-vw2-m { margin-top: var(--spacing-vw-small); }
+    .mt-vw3-m { margin-top: var(--spacing-vw-medium); }
+    .mt-vw4-m { margin-top: var(--spacing-vw-large); }
+    .mt-vw5-m { margin-top: var(--spacing-vw-xl); }
+    .mt-vw6-m { margin-top: var(--spacing-vw-xxl); }
+    .mt-vw7-m { margin-top: var(--spacing-vw-xxxl); }
+    .mt-vw8-m { margin-top: var(--spacing-vw-xxxxl); }
+}
+
+@media (--breakpoint-large) {
+    .pa0-l { padding: var(--spacing-none); }
+    .pa1-l { padding: var(--spacing-extra-small); }
+    .pa2-l { padding: var(--spacing-small); }
+    .pa3-l { padding: var(--spacing-medium); }
+    .pa4-l { padding: var(--spacing-large); }
+    .pa5-l { padding: var(--spacing-xl); }
+    .pa6-l { padding: var(--spacing-xxl); }
+    .pa7-l { padding: var(--spacing-xxxl); }
+    .pa8-l { padding: var(--spacing-xxxxl); }
+    .pa9-l { padding: var(--spacing-xxxxxl); }
+
+    .pr-vw1-l { padding-right: var(--spacing-vw-extra-small); }
+    .pr-vw2-l { padding-right: var(--spacing-vw-small); }
+    .pr-vw3-l { padding-right: var(--spacing-vw-medium); }
+    .pr-vw4-l { padding-right: var(--spacing-vw-large); }
+    .pr-vw5-l { padding-right: var(--spacing-vw-xl); }
+    .pr-vw6-l { padding-right: var(--spacing-vw-xxl); }
+    .pr-vw7-l { padding-right: var(--spacing-vw-xxxl); }
+    .pr-vw8-l { padding-right: var(--spacing-vw-xxxxl); }
+
+    .pl0-l { padding-left: var(--spacing-none); }
+    .pl1-l { padding-left: var(--spacing-extra-small); }
+    .pl2-l { padding-left: var(--spacing-small); }
+    .pl3-l { padding-left: var(--spacing-medium); }
+    .pl4-l { padding-left: var(--spacing-large); }
+    .pl5-l { padding-left: var(--spacing-xl); }
+    .pl6-l { padding-left: var(--spacing-xxl); }
+    .pl7-l { padding-left: var(--spacing-xxxl); }
+    .pl8-l { padding-left: var(--spacing-xxxxl); }
+    .pl9-l { padding-left: var(--spacing-xxxxxl); }
+
+    .pl-vw1-l { padding-left: var(--spacing-vw-extra-small); }
+    .pl-vw2-l { padding-left: var(--spacing-vw-small); }
+    .pl-vw3-l { padding-left: var(--spacing-vw-medium); }
+    .pl-vw4-l { padding-left: var(--spacing-vw-large); }
+    .pl-vw5-l { padding-left: var(--spacing-vw-xl); }
+    .pl-vw6-l { padding-left: var(--spacing-vw-xxl); }
+    .pl-vw7-l { padding-left: var(--spacing-vw-xxxl); }
+    .pl-vw8-l { padding-left: var(--spacing-vw-xxxxl); }
+
+    .pr0-l { padding-right: var(--spacing-none); }
+    .pr1-l { padding-right: var(--spacing-extra-small); }
+    .pr2-l { padding-right: var(--spacing-small); }
+    .pr3-l { padding-right: var(--spacing-medium); }
+    .pr4-l { padding-right: var(--spacing-large); }
+    .pr5-l { padding-right: var(--spacing-xl); }
+    .pr6-l { padding-right: var(--spacing-xxl); }
+    .pr7-l { padding-right: var(--spacing-xxxl); }
+    .pr8-l { padding-right: var(--spacing-xxxxl); }
+    .pr9-l { padding-right: var(--spacing-xxxxxl); }
+
+    .pr-vw1-l { padding-right: var(--spacing-vw-extra-small); }
+    .pr-vw2-l { padding-right: var(--spacing-vw-small); }
+    .pr-vw3-l { padding-right: var(--spacing-vw-medium); }
+    .pr-vw4-l { padding-right: var(--spacing-vw-large); }
+    .pr-vw5-l { padding-right: var(--spacing-vw-xl); }
+    .pr-vw6-l { padding-right: var(--spacing-vw-xxl); }
+    .pr-vw7-l { padding-right: var(--spacing-vw-xxxl); }
+    .pr-vw8-l { padding-right: var(--spacing-vw-xxxxl); }
+
+    .pb0-l { padding-bottom: var(--spacing-none); }
+    .pb1-l { padding-bottom: var(--spacing-extra-small); }
+    .pb2-l { padding-bottom: var(--spacing-small); }
+    .pb3-l { padding-bottom: var(--spacing-medium); }
+    .pb4-l { padding-bottom: var(--spacing-large); }
+    .pb5-l { padding-bottom: var(--spacing-xl); }
+    .pb6-l { padding-bottom: var(--spacing-xxl); }
+    .pb7-l { padding-bottom: var(--spacing-xxxl); }
+    .pb8-l { padding-bottom: var(--spacing-xxxxl); }
+    .pb9-l { padding-bottom: var(--spacing-xxxxxl); }
+
+    .pb-vw1-l { padding-bottom: var(--spacing-vw-extra-small); }
+    .pb-vw2-l { padding-bottom: var(--spacing-vw-small); }
+    .pb-vw3-l { padding-bottom: var(--spacing-vw-medium); }
+    .pb-vw4-l { padding-bottom: var(--spacing-vw-large); }
+    .pb-vw5-l { padding-bottom: var(--spacing-vw-xl); }
+    .pb-vw6-l { padding-bottom: var(--spacing-vw-xxl); }
+    .pb-vw7-l { padding-bottom: var(--spacing-vw-xxxl); }
+    .pb-vw8-l { padding-bottom: var(--spacing-vw-xxxxl); }
+
+    .pt0-l { padding-top: var(--spacing-none); }
+    .pt1-l { padding-top: var(--spacing-extra-small); }
+    .pt2-l { padding-top: var(--spacing-small); }
+    .pt3-l { padding-top: var(--spacing-medium); }
+    .pt4-l { padding-top: var(--spacing-large); }
+    .pt5-l { padding-top: var(--spacing-xl); }
+    .pt6-l { padding-top: var(--spacing-xxl); }
+    .pt7-l { padding-top: var(--spacing-xxxl); }
+    .pt8-l { padding-top: var(--spacing-xxxxl); }
+    .pt9-l { padding-top: var(--spacing-xxxxxl); }
+
+    .pt-vw1-l { padding-top: var(--spacing-vw-extra-small); }
+    .pt-vw2-l { padding-top: var(--spacing-vw-small); }
+    .pt-vw3-l { padding-top: var(--spacing-vw-medium); }
+    .pt-vw4-l { padding-top: var(--spacing-vw-large); }
+    .pt-vw5-l { padding-top: var(--spacing-vw-xl); }
+    .pt-vw6-l { padding-top: var(--spacing-vw-xxl); }
+    .pt-vw7-l { padding-top: var(--spacing-vw-xxxl); }
+    .pt-vw8-l { padding-top: var(--spacing-vw-xxxxl); }
+
+    .ma0-l {  margin: var(--spacing-none); }
+    .ma1-l {  margin: var(--spacing-extra-small); }
+    .ma2-l {  margin: var(--spacing-small); }
+    .ma3-l {  margin: var(--spacing-medium); }
+    .ma4-l {  margin: var(--spacing-large); }
+    .ma5-l {  margin: var(--spacing-xl); }
+    .ma6-l {  margin: var(--spacing-xxl); }
+    .ma7-l { margin: var(--spacing-xxxl); }
+    .ma8-l {  margin: var(--spacing-xxxxl); }
+    .ma9-l { margin: var(--spacing-xxxxxl); }
+
+    .ma-vw1-l { margin: var(--spacing-vw-extra-small); }
+    .ma-vw2-l { margin: var(--spacing-vw-small); }
+    .ma-vw3-l { margin: var(--spacing-vw-medium); }
+    .ma-vw4-l { margin: var(--spacing-vw-large); }
+    .ma-vw5-l { margin: var(--spacing-vw-xl); }
+    .ma-vw6-l { margin: var(--spacing-vw-xxl); }
+    .ma-vw7-l { margin: var(--spacing-vw-xxxl); }
+    .ma-vw8-l { margin: var(--spacing-vw-xxxxl); }
+
+    .ml0-l {  margin-left: var(--spacing-none); }
+    .ml1-l {  margin-left: var(--spacing-extra-small); }
+    .ml2-l {  margin-left: var(--spacing-small); }
+    .ml3-l {  margin-left: var(--spacing-medium); }
+    .ml4-l {  margin-left: var(--spacing-large); }
+    .ml5-l {  margin-left: var(--spacing-xl); }
+    .ml6-l {  margin-left: var(--spacing-xxl); }
+    .ml7-l { margin-left: var(--spacing-xxxl); }
+    .ml8-l {  margin-left: var(--spacing-xxxxl); }
+    .ml9-l { margin-left: var(--spacing-xxxxxl); }
+
+    .ml-vw1-l { margin-left: var(--spacing-vw-extra-small); }
+    .ml-vw2-l { margin-left: var(--spacing-vw-small); }
+    .ml-vw3-l { margin-left: var(--spacing-vw-medium); }
+    .ml-vw4-l { margin-left: var(--spacing-vw-large); }
+    .ml-vw5-l { margin-left: var(--spacing-vw-xl); }
+    .ml-vw6-l { margin-left: var(--spacing-vw-xxl); }
+    .ml-vw7-l { margin-left: var(--spacing-vw-xxxl); }
+    .ml-vw8-l { margin-left: var(--spacing-vw-xxxxl); }
+
+    .mr0-l {  margin-right: var(--spacing-none); }
+    .mr1-l {  margin-right: var(--spacing-extra-small); }
+    .mr2-l {  margin-right: var(--spacing-small); }
+    .mr3-l {  margin-right: var(--spacing-medium); }
+    .mr4-l {  margin-right: var(--spacing-large); }
+    .mr5-l {  margin-right: var(--spacing-xl); }
+    .mr6-l {  margin-right: var(--spacing-xxl); }
+    .mr7-l { margin-right: var(--spacing-xxxl); }
+    .mr8-l {  margin-right: var(--spacing-xxxxl); }
+    .mr9-l { margin-right: var(--spacing-xxxxxl); }
+
+    .mr-vw1-l { margin-right: var(--spacing-vw-extra-small); }
+    .mr-vw2-l { margin-right: var(--spacing-vw-small); }
+    .mr-vw3-l { margin-right: var(--spacing-vw-medium); }
+    .mr-vw4-l { margin-right: var(--spacing-vw-large); }
+    .mr-vw5-l { margin-right: var(--spacing-vw-xl); }
+    .mr-vw6-l { margin-right: var(--spacing-vw-xxl); }
+    .mr-vw7-l { margin-right: var(--spacing-vw-xxxl); }
+    .mr-vw8-l { margin-right: var(--spacing-vw-xxxxl); }
+
+    .mb0-l {  margin-bottom: var(--spacing-none); }
+    .mb1-l {  margin-bottom: var(--spacing-extra-small); }
+    .mb2-l {  margin-bottom: var(--spacing-small); }
+    .mb3-l {  margin-bottom: var(--spacing-medium); }
+    .mb4-l {  margin-bottom: var(--spacing-large); }
+    .mb5-l {  margin-bottom: var(--spacing-xl); }
+    .mb6-l {  margin-bottom: var(--spacing-xxl); }
+    .mb7-l { margin-bottom: var(--spacing-xxxl); }
+    .mb8-l {  margin-bottom: var(--spacing-xxxxl); }
+    .mb9-l { margin-bottom: var(--spacing-xxxxxl); }
+
+    .mb-vw1-l { margin-bottom: var(--spacing-vw-extra-small); }
+    .mb-vw2-l { margin-bottom: var(--spacing-vw-small); }
+    .mb-vw3-l { margin-bottom: var(--spacing-vw-medium); }
+    .mb-vw4-l { margin-bottom: var(--spacing-vw-large); }
+    .mb-vw5-l { margin-bottom: var(--spacing-vw-xl); }
+    .mb-vw6-l { margin-bottom: var(--spacing-vw-xxl); }
+    .mb-vw7-l { margin-bottom: var(--spacing-vw-xxxl); }
+    .mb-vw8-l { margin-bottom: var(--spacing-vw-xxxxl); }
+
+    .mt0-l {  margin-top: var(--spacing-none); }
+    .mt1-l {  margin-top: var(--spacing-extra-small); }
+    .mt2-l {  margin-top: var(--spacing-small); }
+    .mt3-l {  margin-top: var(--spacing-medium); }
+    .mt4-l {  margin-top: var(--spacing-large); }
+    .mt5-l {  margin-top: var(--spacing-xl); }
+    .mt6-l {  margin-top: var(--spacing-xxl); }
+    .mt7-l { margin-top: var(--spacing-xxxl); }
+    .mt8-l {  margin-top: var(--spacing-xxxxl); }
+    .mt9-l { margin-top: var(--spacing-xxxxxl); }
+
+    .mt-vw1-l { margin-top: var(--spacing-vw-extra-small); }
+    .mt-vw2-l { margin-top: var(--spacing-vw-small); }
+    .mt-vw3-l { margin-top: var(--spacing-vw-medium); }
+    .mt-vw4-l { margin-top: var(--spacing-vw-large); }
+    .mt-vw5-l { margin-top: var(--spacing-vw-xl); }
+    .mt-vw6-l { margin-top: var(--spacing-vw-xxl); }
+    .mt-vw7-l { margin-top: var(--spacing-vw-xxxl); }
+    .mt-vw8-l { margin-top: var(--spacing-vw-xxxxl); }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_spacing.css b/ghost/admin/app/styles/spirit-product/_spacing.css
new file mode 100644
index 0000000000..7619b1e361
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_spacing.css
@@ -0,0 +1,271 @@
+:root {
+   --grid-size: .4rem;
+}
+
+.pa0 {    padding: 0; }
+.pa1 {    padding: calc(var(--grid-size) * 1); }
+.pa2 {    padding: calc(var(--grid-size) * 2); }
+.pa3 {    padding: calc(var(--grid-size) * 3); }
+.pa4 {    padding: calc(var(--grid-size) * 4); }
+.pa5 {    padding: calc(var(--grid-size) * 5); }
+.pa6 {    padding: calc(var(--grid-size) * 6); }
+.pa7 {    padding: calc(var(--grid-size) * 7); }
+.pa8 {    padding: calc(var(--grid-size) * 8); }
+.pa9 {    padding: calc(var(--grid-size) * 9); }
+.pa10 {    padding: calc(var(--grid-size) * 10); }
+.pa11 {    padding: calc(var(--grid-size) * 11); }
+.pa12 {    padding: calc(var(--grid-size) * 12); }
+.pa13 {    padding: calc(var(--grid-size) * 13); }
+.pa14 {    padding: calc(var(--grid-size) * 14); }
+.pa15 {    padding: calc(var(--grid-size) * 15); }
+.pa16 {    padding: calc(var(--grid-size) * 16); }
+.pa17 {    padding: calc(var(--grid-size) * 17); }
+.pa18 {    padding: calc(var(--grid-size) * 18); }
+.pa19 {    padding: calc(var(--grid-size) * 19); }
+.pa20 {    padding: calc(var(--grid-size) * 20); }
+.pa25 {    padding: calc(var(--grid-size) * 25); }
+.pa30 {    padding: calc(var(--grid-size) * 30); }
+.pa40 {    padding: calc(var(--grid-size) * 40); }
+.pa50 {    padding: calc(var(--grid-size) * 50); }
+
+.pr0 {    padding-right: 0; }
+.pr1 {    padding-right: calc(var(--grid-size) * 1); }
+.pr2 {    padding-right: calc(var(--grid-size) * 2); }
+.pr3 {    padding-right: calc(var(--grid-size) * 3); }
+.pr4 {    padding-right: calc(var(--grid-size) * 4); }
+.pr5 {    padding-right: calc(var(--grid-size) * 5); }
+.pr6 {    padding-right: calc(var(--grid-size) * 6); }
+.pr7 {    padding-right: calc(var(--grid-size) * 7); }
+.pr8 {    padding-right: calc(var(--grid-size) * 8); }
+.pr9 {    padding-right: calc(var(--grid-size) * 9); }
+.pr10 {    padding-right: calc(var(--grid-size) * 10); }
+.pr11 {    padding-right: calc(var(--grid-size) * 11); }
+.pr12 {    padding-right: calc(var(--grid-size) * 12); }
+.pr13 {    padding-right: calc(var(--grid-size) * 13); }
+.pr14 {    padding-right: calc(var(--grid-size) * 14); }
+.pr15 {    padding-right: calc(var(--grid-size) * 15); }
+.pr16 {    padding-right: calc(var(--grid-size) * 16); }
+.pr17 {    padding-right: calc(var(--grid-size) * 17); }
+.pr18 {    padding-right: calc(var(--grid-size) * 18); }
+.pr19 {    padding-right: calc(var(--grid-size) * 19); }
+.pr20 {    padding-right: calc(var(--grid-size) * 20); }
+.pr25 {    padding-right: calc(var(--grid-size) * 25); }
+.pr30 {    padding-right: calc(var(--grid-size) * 30); }
+.pr40 {    padding-right: calc(var(--grid-size) * 40); }
+.pr50 {    padding-right: calc(var(--grid-size) * 50); }
+
+.pb0 {    padding-bottom: 0; }
+.pb1 {    padding-bottom: calc(var(--grid-size) * 1); }
+.pb2 {    padding-bottom: calc(var(--grid-size) * 2); }
+.pb3 {    padding-bottom: calc(var(--grid-size) * 3); }
+.pb4 {    padding-bottom: calc(var(--grid-size) * 4); }
+.pb5 {    padding-bottom: calc(var(--grid-size) * 5); }
+.pb6 {    padding-bottom: calc(var(--grid-size) * 6); }
+.pb7 {    padding-bottom: calc(var(--grid-size) * 7); }
+.pb8 {    padding-bottom: calc(var(--grid-size) * 8); }
+.pb9 {    padding-bottom: calc(var(--grid-size) * 9); }
+.pb10 {    padding-bottom: calc(var(--grid-size) * 10); }
+.pb11 {    padding-bottom: calc(var(--grid-size) * 11); }
+.pb12 {    padding-bottom: calc(var(--grid-size) * 12); }
+.pb13 {    padding-bottom: calc(var(--grid-size) * 13); }
+.pb14 {    padding-bottom: calc(var(--grid-size) * 14); }
+.pb15 {    padding-bottom: calc(var(--grid-size) * 15); }
+.pb16 {    padding-bottom: calc(var(--grid-size) * 16); }
+.pb17 {    padding-bottom: calc(var(--grid-size) * 17); }
+.pb18 {    padding-bottom: calc(var(--grid-size) * 18); }
+.pb19 {    padding-bottom: calc(var(--grid-size) * 19); }
+.pb20 {    padding-bottom: calc(var(--grid-size) * 20); }
+.pb25 {    padding-bottom: calc(var(--grid-size) * 25); }
+.pb30 {    padding-bottom: calc(var(--grid-size) * 30); }
+.pb40 {    padding-bottom: calc(var(--grid-size) * 40); }
+.pb50 {    padding-bottom: calc(var(--grid-size) * 50); }
+
+.pl0 {    padding-left: 0; }
+.pl1 {    padding-left: calc(var(--grid-size) * 1); }
+.pl2 {    padding-left: calc(var(--grid-size) * 2); }
+.pl3 {    padding-left: calc(var(--grid-size) * 3); }
+.pl4 {    padding-left: calc(var(--grid-size) * 4); }
+.pl5 {    padding-left: calc(var(--grid-size) * 5); }
+.pl6 {    padding-left: calc(var(--grid-size) * 6); }
+.pl7 {    padding-left: calc(var(--grid-size) * 7); }
+.pl8 {    padding-left: calc(var(--grid-size) * 8); }
+.pl9 {    padding-left: calc(var(--grid-size) * 9); }
+.pl10 {    padding-left: calc(var(--grid-size) * 10); }
+.pl11 {    padding-left: calc(var(--grid-size) * 11); }
+.pl12 {    padding-left: calc(var(--grid-size) * 12); }
+.pl13 {    padding-left: calc(var(--grid-size) * 13); }
+.pl14 {    padding-left: calc(var(--grid-size) * 14); }
+.pl15 {    padding-left: calc(var(--grid-size) * 15); }
+.pl16 {    padding-left: calc(var(--grid-size) * 16); }
+.pl17 {    padding-left: calc(var(--grid-size) * 17); }
+.pl18 {    padding-left: calc(var(--grid-size) * 18); }
+.pl19 {    padding-left: calc(var(--grid-size) * 19); }
+.pl20 {    padding-left: calc(var(--grid-size) * 20); }
+.pl25 {    padding-left: calc(var(--grid-size) * 25); }
+.pl30 {    padding-left: calc(var(--grid-size) * 30); }
+.pl40 {    padding-left: calc(var(--grid-size) * 40); }
+.pl50 {    padding-left: calc(var(--grid-size) * 50); }
+
+.pt0 {    padding-top: 0; }
+.pt1 {    padding-top: calc(var(--grid-size) * 1); }
+.pt2 {    padding-top: calc(var(--grid-size) * 2); }
+.pt3 {    padding-top: calc(var(--grid-size) * 3); }
+.pt4 {    padding-top: calc(var(--grid-size) * 4); }
+.pt5 {    padding-top: calc(var(--grid-size) * 5); }
+.pt6 {    padding-top: calc(var(--grid-size) * 6); }
+.pt7 {    padding-top: calc(var(--grid-size) * 7); }
+.pt8 {    padding-top: calc(var(--grid-size) * 8); }
+.pt9 {    padding-top: calc(var(--grid-size) * 9); }
+.pt10 {    padding-top: calc(var(--grid-size) * 10); }
+.pt11 {    padding-top: calc(var(--grid-size) * 11); }
+.pt12 {    padding-top: calc(var(--grid-size) * 12); }
+.pt13 {    padding-top: calc(var(--grid-size) * 13); }
+.pt14 {    padding-top: calc(var(--grid-size) * 14); }
+.pt15 {    padding-top: calc(var(--grid-size) * 15); }
+.pt16 {    padding-top: calc(var(--grid-size) * 16); }
+.pt17 {    padding-top: calc(var(--grid-size) * 17); }
+.pt18 {    padding-top: calc(var(--grid-size) * 18); }
+.pt19 {    padding-top: calc(var(--grid-size) * 19); }
+.pt20 {    padding-top: calc(var(--grid-size) * 20); }
+.pt25 {    padding-top: calc(var(--grid-size) * 25); }
+.pt30 {    padding-top: calc(var(--grid-size) * 30); }
+.pt40 {    padding-top: calc(var(--grid-size) * 40); }
+.pt50 {    padding-top: calc(var(--grid-size) * 50); }
+
+.ma0 {    margin: 0; }
+.ma1 {    margin: calc(var(--grid-size) * 1); }
+.ma2 {    margin: calc(var(--grid-size) * 2); }
+.ma3 {    margin: calc(var(--grid-size) * 3); }
+.ma4 {    margin: calc(var(--grid-size) * 4); }
+.ma5 {    margin: calc(var(--grid-size) * 5); }
+.ma6 {    margin: calc(var(--grid-size) * 6); }
+.ma7 {    margin: calc(var(--grid-size) * 7); }
+.ma8 {    margin: calc(var(--grid-size) * 8); }
+.ma9 {    margin: calc(var(--grid-size) * 9); }
+.ma10 {    margin: calc(var(--grid-size) * 10); }
+.ma11 {    margin: calc(var(--grid-size) * 11); }
+.ma12 {    margin: calc(var(--grid-size) * 12); }
+.ma13 {    margin: calc(var(--grid-size) * 13); }
+.ma14 {    margin: calc(var(--grid-size) * 14); }
+.ma15 {    margin: calc(var(--grid-size) * 15); }
+.ma16 {    margin: calc(var(--grid-size) * 16); }
+.ma17 {    margin: calc(var(--grid-size) * 17); }
+.ma18 {    margin: calc(var(--grid-size) * 18); }
+.ma19 {    margin: calc(var(--grid-size) * 19); }
+.ma20 {    margin: calc(var(--grid-size) * 20); }
+.ma25 {    margin: calc(var(--grid-size) * 25); }
+.ma30 {    margin: calc(var(--grid-size) * 30); }
+.ma40 {    margin: calc(var(--grid-size) * 40); }
+.ma50 {    margin: calc(var(--grid-size) * 50); }
+
+.mr0 {    margin-right: 0; }
+.mr1 {    margin-right: calc(var(--grid-size) * 1); }
+.mr2 {    margin-right: calc(var(--grid-size) * 2); }
+.mr3 {    margin-right: calc(var(--grid-size) * 3); }
+.mr4 {    margin-right: calc(var(--grid-size) * 4); }
+.mr5 {    margin-right: calc(var(--grid-size) * 5); }
+.mr6 {    margin-right: calc(var(--grid-size) * 6); }
+.mr7 {    margin-right: calc(var(--grid-size) * 7); }
+.mr8 {    margin-right: calc(var(--grid-size) * 8); }
+.mr9 {    margin-right: calc(var(--grid-size) * 9); }
+.mr10 {    margin-right: calc(var(--grid-size) * 10); }
+.mr11 {    margin-right: calc(var(--grid-size) * 11); }
+.mr12 {    margin-right: calc(var(--grid-size) * 12); }
+.mr13 {    margin-right: calc(var(--grid-size) * 13); }
+.mr14 {    margin-right: calc(var(--grid-size) * 14); }
+.mr15 {    margin-right: calc(var(--grid-size) * 15); }
+.mr16 {    margin-right: calc(var(--grid-size) * 16); }
+.mr17 {    margin-right: calc(var(--grid-size) * 17); }
+.mr18 {    margin-right: calc(var(--grid-size) * 18); }
+.mr19 {    margin-right: calc(var(--grid-size) * 19); }
+.mr20 {    margin-right: calc(var(--grid-size) * 20); }
+.mr25 {    margin-right: calc(var(--grid-size) * 25); }
+.mr30 {    margin-right: calc(var(--grid-size) * 30); }
+.mr40 {    margin-right: calc(var(--grid-size) * 40); }
+.mr50 {    margin-right: calc(var(--grid-size) * 50); }
+
+.mb0 {    margin-bottom: 0; }
+.mb1 {    margin-bottom: calc(var(--grid-size) * 1); }
+.mb2 {    margin-bottom: calc(var(--grid-size) * 2); }
+.mb3 {    margin-bottom: calc(var(--grid-size) * 3); }
+.mb4 {    margin-bottom: calc(var(--grid-size) * 4); }
+.mb5 {    margin-bottom: calc(var(--grid-size) * 5); }
+.mb6 {    margin-bottom: calc(var(--grid-size) * 6); }
+.mb7 {    margin-bottom: calc(var(--grid-size) * 7); }
+.mb8 {    margin-bottom: calc(var(--grid-size) * 8); }
+.mb9 {    margin-bottom: calc(var(--grid-size) * 9); }
+.mb10 {    margin-bottom: calc(var(--grid-size) * 10); }
+.mb11 {    margin-bottom: calc(var(--grid-size) * 11); }
+.mb12 {    margin-bottom: calc(var(--grid-size) * 12); }
+.mb13 {    margin-bottom: calc(var(--grid-size) * 13); }
+.mb14 {    margin-bottom: calc(var(--grid-size) * 14); }
+.mb15 {    margin-bottom: calc(var(--grid-size) * 15); }
+.mb16 {    margin-bottom: calc(var(--grid-size) * 16); }
+.mb17 {    margin-bottom: calc(var(--grid-size) * 17); }
+.mb18 {    margin-bottom: calc(var(--grid-size) * 18); }
+.mb19 {    margin-bottom: calc(var(--grid-size) * 19); }
+.mb20 {    margin-bottom: calc(var(--grid-size) * 20); }
+.mb25 {    margin-bottom: calc(var(--grid-size) * 25); }
+.mb30 {    margin-bottom: calc(var(--grid-size) * 30); }
+.mb40 {    margin-bottom: calc(var(--grid-size) * 40); }
+.mb50 {    margin-bottom: calc(var(--grid-size) * 50); }
+
+.ml0 {    margin-left: 0; }
+.ml1 {    margin-left: calc(var(--grid-size) * 1); }
+.ml2 {    margin-left: calc(var(--grid-size) * 2); }
+.ml3 {    margin-left: calc(var(--grid-size) * 3); }
+.ml4 {    margin-left: calc(var(--grid-size) * 4); }
+.ml5 {    margin-left: calc(var(--grid-size) * 5); }
+.ml6 {    margin-left: calc(var(--grid-size) * 6); }
+.ml7 {    margin-left: calc(var(--grid-size) * 7); }
+.ml8 {    margin-left: calc(var(--grid-size) * 8); }
+.ml9 {    margin-left: calc(var(--grid-size) * 9); }
+.ml10 {    margin-left: calc(var(--grid-size) * 10); }
+.ml11 {    margin-left: calc(var(--grid-size) * 11); }
+.ml12 {    margin-left: calc(var(--grid-size) * 12); }
+.ml13 {    margin-left: calc(var(--grid-size) * 13); }
+.ml14 {    margin-left: calc(var(--grid-size) * 14); }
+.ml15 {    margin-left: calc(var(--grid-size) * 15); }
+.ml16 {    margin-left: calc(var(--grid-size) * 16); }
+.ml17 {    margin-left: calc(var(--grid-size) * 17); }
+.ml18 {    margin-left: calc(var(--grid-size) * 18); }
+.ml19 {    margin-left: calc(var(--grid-size) * 19); }
+.ml20 {    margin-left: calc(var(--grid-size) * 20); }
+.ml25 {    margin-left: calc(var(--grid-size) * 25); }
+.ml30 {    margin-left: calc(var(--grid-size) * 30); }
+.ml40 {    margin-left: calc(var(--grid-size) * 40); }
+.ml50 {    margin-left: calc(var(--grid-size) * 50); }
+
+.mt0 {    margin-top: 0; }
+.mt1 {    margin-top: calc(var(--grid-size) * 1); }
+.mt2 {    margin-top: calc(var(--grid-size) * 2); }
+.mt3 {    margin-top: calc(var(--grid-size) * 3); }
+.mt4 {    margin-top: calc(var(--grid-size) * 4); }
+.mt5 {    margin-top: calc(var(--grid-size) * 5); }
+.mt6 {    margin-top: calc(var(--grid-size) * 6); }
+.mt7 {    margin-top: calc(var(--grid-size) * 7); }
+.mt8 {    margin-top: calc(var(--grid-size) * 8); }
+.mt9 {    margin-top: calc(var(--grid-size) * 9); }
+.mt10 {    margin-top: calc(var(--grid-size) * 10); }
+.mt11 {    margin-top: calc(var(--grid-size) * 11); }
+.mt12 {    margin-top: calc(var(--grid-size) * 12); }
+.mt13 {    margin-top: calc(var(--grid-size) * 13); }
+.mt14 {    margin-top: calc(var(--grid-size) * 14); }
+.mt15 {    margin-top: calc(var(--grid-size) * 15); }
+.mt16 {    margin-top: calc(var(--grid-size) * 16); }
+.mt17 {    margin-top: calc(var(--grid-size) * 17); }
+.mt18 {    margin-top: calc(var(--grid-size) * 18); }
+.mt19 {    margin-top: calc(var(--grid-size) * 19); }
+.mt20 {    margin-top: calc(var(--grid-size) * 20); }
+.mt25 {    margin-top: calc(var(--grid-size) * 25); }
+.mt30 {    margin-top: calc(var(--grid-size) * 30); }
+.mt40 {    margin-top: calc(var(--grid-size) * 40); }
+.mt50 {    margin-top: calc(var(--grid-size) * 50); }
+
+@media (--breakpoint-not-small) {
+
+}
+
+@media (--breakpoint-medium) {
+
+}
diff --git a/ghost/admin/app/styles/spirit-product/_tables.css b/ghost/admin/app/styles/spirit-product/_tables.css
new file mode 100644
index 0000000000..dbe4e31767
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_tables.css
@@ -0,0 +1,24 @@
+/*
+
+  TABLES
+  Docs: http://tachyons.io/docs/elements/tables/
+
+*/
+
+.collapse {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.striped:nth-child(odd) {
+    border-bottom: 1px solid var(--whitegrey);
+}
+
+.striped:nth-child(even) {
+    background-color: var(--whitegrey-p2);
+    border-bottom: 1px solid var(--whitegrey);
+}
+
+th, td {
+    vertical-align: top;
+}
diff --git a/ghost/admin/app/styles/spirit-product/_text-align.css b/ghost/admin/app/styles/spirit-product/_text-align.css
new file mode 100644
index 0000000000..48211fb879
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_text-align.css
@@ -0,0 +1,47 @@
+/*
+
+  TEXT ALIGN
+  Docs: http://tachyons.io/docs/typography/text-align/
+
+  Base
+    t = text-align
+
+  Modifiers
+    l = left
+    r = right
+    c = center
+    j = justify
+
+  Media Query Extensions:
+    -ns = not-small
+    -m  = medium
+    -l  = large
+
+*/
+
+.tl  { text-align: left; }
+.tr  { text-align: right; }
+.tc  { text-align: center; }
+.tj  { text-align: justify; }
+
+@media (--breakpoint-not-small) {
+  .tl-ns  { text-align: left; }
+  .tr-ns  { text-align: right; }
+  .tc-ns  { text-align: center; }
+  .tj-ns  { text-align: justify; }
+}
+
+@media (--breakpoint-medium) {
+  .tl-m  { text-align: left; }
+  .tr-m  { text-align: right; }
+  .tc-m  { text-align: center; }
+  .tj-m  { text-align: justify; }
+}
+
+@media (--breakpoint-large) {
+  .tl-l  { text-align: left; }
+  .tr-l  { text-align: right; }
+  .tc-l  { text-align: center; }
+  .tj-l  { text-align: justify; }
+}
+
diff --git a/ghost/admin/app/styles/spirit-product/_text-block-spacings.css b/ghost/admin/app/styles/spirit-product/_text-block-spacings.css
new file mode 100644
index 0000000000..119b9eab40
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_text-block-spacings.css
@@ -0,0 +1,53 @@
+:root {
+  --baseline-grid: 1.6rem;
+}
+
+.tmb { margin: 0 0 calc(var(--baseline-grid)); }
+.tmb--0 { margin: 0; }
+.tmb--0-25x { margin: 0 0 calc(var(--baseline-grid) * 0.25); }
+.tmb--0-5x { margin: 0 0 calc(var(--baseline-grid) * 0.5); }
+.tmb--0-75x { margin: 0 0 calc(var(--baseline-grid) * 0.75); }
+.tmb--1-25x { margin: 0 0 calc(var(--baseline-grid) * 1.25); }
+.tmb--1-5x { margin: 0 0 calc(var(--baseline-grid) * 1.5); }
+.tmb--2-0x { margin: 0 0 calc(var(--baseline-grid) * 2.0); }
+.tmb--2-5x { margin: 0 0 calc(var(--baseline-grid) * 2.5); }
+.tmb--3-0x { margin: 0 0 calc(var(--baseline-grid) * 3.0); }
+
+@media (--breakpoint-not-small) {
+    .tmb-ns { margin: 0 0 calc(var(--baseline-grid)); }
+    .tmb--0-ns { margin: 0; }
+    .tmb--0-25x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.25); }
+    .tmb--0-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.5); }
+    .tmb--0-75x-ns { margin: 0 0 calc(var(--baseline-grid) * 0.75); }
+    .tmb--1-25x-ns { margin: 0 0 calc(var(--baseline-grid) * 1.25); }
+    .tmb--1-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 1.5); }
+    .tmb--2-0x-ns { margin: 0 0 calc(var(--baseline-grid) * 2.0); }
+    .tmb--2-5x-ns { margin: 0 0 calc(var(--baseline-grid) * 2.5); }
+    .tmb--3-0x-ns { margin: 0 0 calc(var(--baseline-grid) * 3.0); }
+}
+
+@media (--breakpoint-medium) {
+    .tmb-m { margin: 0 0 calc(var(--baseline-grid)); }
+    .tmb--0-m { margin: 0; }
+    .tmb--0-25x-m { margin: 0 0 calc(var(--baseline-grid) * 0.25); }
+    .tmb--0-5x-m { margin: 0 0 calc(var(--baseline-grid) * 0.5); }
+    .tmb--0-75x-m { margin: 0 0 calc(var(--baseline-grid) * 0.75); }
+    .tmb--1-25x-m { margin: 0 0 calc(var(--baseline-grid) * 1.25); }
+    .tmb--1-5x-m { margin: 0 0 calc(var(--baseline-grid) * 1.5); }
+    .tmb--2-0x-m { margin: 0 0 calc(var(--baseline-grid) * 2.0); }
+    .tmb--2-5x-m { margin: 0 0 calc(var(--baseline-grid) * 2.5); }
+    .tmb--3-0x-m { margin: 0 0 calc(var(--baseline-grid) * 3.0); }
+}
+
+@media (--breakpoint-large) {
+    .tmb-l { margin: 0 0 calc(var(--baseline-grid)); }
+    .tmb--0-l { margin: 0; }
+    .tmb--0-25x-l { margin: 0 0 calc(var(--baseline-grid) * 0.25); }
+    .tmb--0-5x-l { margin: 0 0 calc(var(--baseline-grid) * 0.5); }
+    .tmb--0-75x-l { margin: 0 0 calc(var(--baseline-grid) * 0.75); }
+    .tmb--1-25x-l { margin: 0 0 calc(var(--baseline-grid) * 1.25); }
+    .tmb--1-5x-l { margin: 0 0 calc(var(--baseline-grid) * 1.5); }
+    .tmb--2-0x-l { margin: 0 0 calc(var(--baseline-grid) * 2.0); }
+    .tmb--2-5x-l { margin: 0 0 calc(var(--baseline-grid) * 2.5); }
+    .tmb--3-0x-l { margin: 0 0 calc(var(--baseline-grid) * 3.0); }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_text-decoration.css b/ghost/admin/app/styles/spirit-product/_text-decoration.css
new file mode 100644
index 0000000000..574de27640
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_text-decoration.css
@@ -0,0 +1,35 @@
+/*
+
+   TEXT DECORATION
+   Docs: http://tachyons.io/docs/typography/text-decoration/
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.strike       { text-decoration: line-through; }
+.underline    { text-decoration: underline; }
+.no-underline { text-decoration: none; }
+
+
+@media (--breakpoint-not-small) {
+  .strike-ns       { text-decoration: line-through; }
+  .underline-ns    { text-decoration: underline; }
+  .no-underline-ns { text-decoration: none; }
+}
+
+@media (--breakpoint-medium) {
+  .strike-m       { text-decoration: line-through; }
+  .underline-m    { text-decoration: underline; }
+  .no-underline-m { text-decoration: none; }
+}
+
+@media (--breakpoint-large) {
+  .strike-l       { text-decoration: line-through; }
+  .underline-l {    text-decoration: underline; }
+  .no-underline-l { text-decoration: none; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_text-transform.css b/ghost/admin/app/styles/spirit-product/_text-transform.css
new file mode 100644
index 0000000000..50ae73e796
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_text-transform.css
@@ -0,0 +1,46 @@
+/*
+
+   TEXT TRANSFORM
+   Docs: http://tachyons.io/docs/typography/text-transform/
+
+   Base:
+     tt = text-transform
+
+   Modifiers
+     c = capitalize
+     l = lowercase
+     u = uppercase
+     n = none
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.ttc { text-transform: capitalize; }
+.ttl { text-transform: lowercase; }
+.ttu { text-transform: uppercase; }
+.ttn { text-transform: none; }
+
+@media (--breakpoint-not-small) {
+  .ttc-ns { text-transform: capitalize; }
+  .ttl-ns { text-transform: lowercase; }
+  .ttu-ns { text-transform: uppercase; }
+  .ttn-ns { text-transform: none; }
+}
+
+@media (--breakpoint-medium) {
+  .ttc-m { text-transform: capitalize; }
+  .ttl-m { text-transform: lowercase; }
+  .ttu-m { text-transform: uppercase; }
+  .ttn-m { text-transform: none; }
+}
+
+@media (--breakpoint-large) {
+  .ttc-l { text-transform: capitalize; }
+  .ttl-l { text-transform: lowercase; }
+  .ttu-l { text-transform: uppercase; }
+  .ttn-l { text-transform: none; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_type-scale.css b/ghost/admin/app/styles/spirit-product/_type-scale.css
new file mode 100644
index 0000000000..5512881c11
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_type-scale.css
@@ -0,0 +1,76 @@
+ :root {
+    --ts-base-fontsize: 62.5%;
+
+    --ts-headline: 3.6rem;
+    --ts-subheadline: 2.8rem;
+
+    --ts-1: 2.3rem;
+    --ts-2: 2.1rem;
+    --ts-3: 2.0rem;
+    --ts-4: 1.9rem;
+    --ts-5: 1.75rem;
+    --ts-6: 1.4rem;
+    --ts-7: 1.3rem;
+    --ts-8: 1.2rem;
+    --ts-supersmall: 1.1rem;
+ }
+
+/* Rhythm = 1.15 */
+.fs-base        { font-size: var(--ts-base-fontsize); }
+.f-headline     { font-size: var(--ts-headline); }
+.f-subheadline  { font-size: var(--ts-subheadline); }
+.f1             { font-size: var(--ts-1); }
+.f2             { font-size: var(--ts-2); }
+.f3             { font-size: var(--ts-3); }
+.f4             { font-size: var(--ts-4); }
+.f5             { font-size: var(--ts-5); }
+.f6             { font-size: var(--ts-6); }
+.f7, .f-default { font-size: var(--ts-7); }
+.f8             { font-size: var(--ts-8); }
+.f-supersmall   { font-size: var(--ts-supersmall); }
+
+
+@media (--breakpoint-not-small){
+    .fs-base-ns             {  font-size: var(--ts-base-fontsize); }
+    .f-headline-ns          { font-size: var(--ts-headline); }
+    .f-subheadline-ns       { font-size: var(--ts-subheadline); }
+    .f1-ns                  { font-size: var(--ts-1); }
+    .f2-ns                  { font-size: var(--ts-2); }
+    .f3-ns                  { font-size: var(--ts-3); }
+    .f4-ns                  { font-size: var(--ts-4); }
+    .f5-ns                  { font-size: var(--ts-5); }
+    .f6-ns                  { font-size: var(--ts-6); }
+    .f7-ns, .f-default-ns   { font-size: var(--ts-7); }
+    .f8-ns                  { font-size: var(--ts-8); }
+    .f-supersmall-ns        { font-size: var(--ts-supersmall); }
+}
+
+@media (--breakpoint-medium) {
+    .fs-base-m             {  font-size: var(--ts-base-fontsize); }
+    .f-headline-m          { font-size: var(--ts-headline); }
+    .f-subheadline-m       { font-size: var(--ts-subheadline); }
+    .f1-m                  { font-size: var(--ts-1); }
+    .f2-m                  { font-size: var(--ts-2); }
+    .f3-m                  { font-size: var(--ts-3); }
+    .f4-m                  { font-size: var(--ts-4); }
+    .f5-m                  { font-size: var(--ts-5); }
+    .f6-m                  { font-size: var(--ts-6); }
+    .f7-m, .f-default-m   { font-size: var(--ts-7); }
+    .f8-m                  { font-size: var(--ts-8); }
+    .f-supersmall-m        { font-size: var(--ts-supersmall); }
+}
+
+@media (--breakpoint-large) {
+    .fs-base-l             {  font-size: var(--ts-base-fontsize); }
+    .f-headline-l          { font-size: var(--ts-headline); }
+    .f-subheadline-l       { font-size: var(--ts-subheadline); }
+    .f1-l                  { font-size: var(--ts-1); }
+    .f2-l                  { font-size: var(--ts-2); }
+    .f3-l                  { font-size: var(--ts-3); }
+    .f4-l                  { font-size: var(--ts-4); }
+    .f5-l                  { font-size: var(--ts-5); }
+    .f6-l                  { font-size: var(--ts-6); }
+    .f7-l, .f-default-l   { font-size: var(--ts-7); }
+    .f8-l                  { font-size: var(--ts-8); }
+    .f-supersmall-l        { font-size: var(--ts-supersmall); }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_typography.css b/ghost/admin/app/styles/spirit-product/_typography.css
new file mode 100644
index 0000000000..398ef03d96
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_typography.css
@@ -0,0 +1,147 @@
+/*
+
+   TYPOGRAPHY
+   http://tachyons.io/docs/typography/measure/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+
+/* Measure is limited to ~66 characters */
+.measure {
+  max-width: 30em;
+}
+
+/* Measure is limited to ~80 characters */
+.measure-wide {
+  max-width: 42em;
+}
+
+/* Measure is limited to ~45 characters */
+.measure-narrow {
+  max-width: 20em;
+}
+
+/* Book paragraph style - paragraphs are indented with no vertical spacing. */
+.indent {
+  text-indent: 1em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.small-caps {
+  font-variant: small-caps;
+}
+
+/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.readability {
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: "liga" on;
+}
+
+@media (--breakpoint-not-small) {
+  .measure-ns  {
+    max-width: 30em;
+  }
+  .measure-wide-ns {
+    max-width: 34em;
+  }
+  .measure-narrow-ns {
+    max-width: 20em;
+  }
+  .indent-ns {
+    text-indent: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .small-caps-ns {
+    font-variant: small-caps;
+  }
+  .truncate-ns {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .readability-ns {
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -moz-font-feature-settings: "liga" on;
+  }
+}
+
+@media (--breakpoint-medium) {
+  .measure-m {
+    max-width: 30em;
+  }
+  .measure-wide-m {
+    max-width: 34em;
+  }
+  .measure-narrow-m {
+    max-width: 20em;
+  }
+  .indent-m {
+    text-indent: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .small-caps-m {
+    font-variant: small-caps;
+  }
+  .truncate-m {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .readability-m {
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -moz-font-feature-settings: "liga" on;
+  }
+}
+
+@media (--breakpoint-large) {
+  .measure-l {
+    max-width: 30em;
+  }
+  .measure-wide-l {
+    max-width: 34em;
+  }
+  .measure-narrow-l {
+    max-width: 20em;
+  }
+  .indent-l {
+    text-indent: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .small-caps-l {
+    font-variant: small-caps;
+  }
+  .truncate-l {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .readability-l {
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -moz-font-feature-settings: "liga" on;
+  }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_utilities.css b/ghost/admin/app/styles/spirit-product/_utilities.css
new file mode 100644
index 0000000000..6dc7c55fe3
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_utilities.css
@@ -0,0 +1,50 @@
+/*
+
+   UTILITIES
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/* Equivalent to .overflow-y-scroll */
+.overflow-container {
+  overflow-y: scroll;
+}
+
+.center {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left:  auto; }
+
+@media (--breakpoint-not-small){
+  .center-ns {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-ns { margin-right: auto; }
+  .ml-auto-ns { margin-left:  auto; }
+}
+
+@media (--breakpoint-medium){
+  .center-m {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-m { margin-right: auto; }
+  .ml-auto-m { margin-left:  auto; }
+}
+
+@media (--breakpoint-large){
+  .center-l {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-l { margin-right: auto; }
+  .ml-auto-l { margin-left:  auto; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_vertical-align.css b/ghost/admin/app/styles/spirit-product/_vertical-align.css
new file mode 100644
index 0000000000..83f9114842
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_vertical-align.css
@@ -0,0 +1,36 @@
+/*
+
+   VERTICAL ALIGN
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.v-base     { vertical-align: baseline; }
+.v-mid      { vertical-align: middle; }
+.v-top      { vertical-align: top; }
+.v-btm      { vertical-align: bottom; }
+
+@media (--breakpoint-not-small) {
+  .v-base-ns     { vertical-align: baseline; }
+  .v-mid-ns      { vertical-align: middle; }
+  .v-top-ns      { vertical-align: top; }
+  .v-btm-ns      { vertical-align: bottom; }
+}
+
+@media (--breakpoint-medium) {
+  .v-base-m     { vertical-align: baseline; }
+  .v-mid-m      { vertical-align: middle; }
+  .v-top-m      { vertical-align: top; }
+  .v-btm-m      { vertical-align: bottom; }
+}
+
+@media (--breakpoint-large) {
+  .v-base-l     { vertical-align: baseline; }
+  .v-mid-l      { vertical-align: middle; }
+  .v-top-l      { vertical-align: top; }
+  .v-btm-l      { vertical-align: bottom; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_visibility.css b/ghost/admin/app/styles/spirit-product/_visibility.css
new file mode 100644
index 0000000000..f5a8c44b6e
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_visibility.css
@@ -0,0 +1,51 @@
+/*
+
+   VISIBILITY
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+/*
+    Text that is hidden but accessible
+    Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+*/
+
+.clip {
+  position: fixed !important;
+  _position: absolute !important;
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media (--breakpoint-not-small) {
+  .clip-ns {
+    position: fixed !important;
+    _position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+}
+
+@media (--breakpoint-medium) {
+  .clip-m {
+    position: fixed !important;
+    _position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+}
+
+@media (--breakpoint-large) {
+  .clip-l {
+    position: fixed !important;
+    _position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+}
+
diff --git a/ghost/admin/app/styles/spirit-product/_white-space.css b/ghost/admin/app/styles/spirit-product/_white-space.css
new file mode 100644
index 0000000000..3902f1f7c1
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_white-space.css
@@ -0,0 +1,34 @@
+/*
+
+   WHITE SPACE
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+.ws-normal { white-space: normal; }
+.nowrap { white-space: nowrap; }
+.pre { white-space: pre; }
+
+@media (--breakpoint-not-small) {
+  .ws-normal-ns { white-space: normal; }
+  .nowrap-ns { white-space: nowrap; }
+  .pre-ns { white-space: pre; }
+}
+
+@media (--breakpoint-medium) {
+  .ws-normal-m { white-space: normal; }
+  .nowrap-m { white-space: nowrap; }
+  .pre-m { white-space: pre; }
+}
+
+@media (--breakpoint-large) {
+  .ws-normal-l { white-space: normal; }
+  .nowrap-l { white-space: nowrap; }
+  .pre-l { white-space: pre; }
+}
+
diff --git a/ghost/admin/app/styles/spirit-product/_widths.css b/ghost/admin/app/styles/spirit-product/_widths.css
new file mode 100644
index 0000000000..cea04ff5f0
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_widths.css
@@ -0,0 +1,135 @@
+.w1 {    width: calc(var(--grid-size) * 1); }
+.w2 {    width: calc(var(--grid-size) * 2); }
+.w3 {    width: calc(var(--grid-size) * 3); }
+.w4 {    width: calc(var(--grid-size) * 4); }
+.w5 {    width: calc(var(--grid-size) * 5); }
+.w6 {    width: calc(var(--grid-size) * 6); }
+.w7 {    width: calc(var(--grid-size) * 7); }
+.w8 {    width: calc(var(--grid-size) * 8); }
+.w9 {    width: calc(var(--grid-size) * 9); }
+.w10 {    width: calc(var(--grid-size) * 10); }
+.w11 {    width: calc(var(--grid-size) * 11); }
+.w12 {    width: calc(var(--grid-size) * 12); }
+.w13 {    width: calc(var(--grid-size) * 13); }
+.w14 {    width: calc(var(--grid-size) * 14); }
+.w15 {    width: calc(var(--grid-size) * 15); }
+.w16 {    width: calc(var(--grid-size) * 16); }
+.w17 {    width: calc(var(--grid-size) * 17); }
+.w18 {    width: calc(var(--grid-size) * 18); }
+.w19 {    width: calc(var(--grid-size) * 19); }
+.w20 {    width: calc(var(--grid-size) * 20); }
+.w25 {    width: calc(var(--grid-size) * 25); }
+.w30 {    width: calc(var(--grid-size) * 30); }
+.w40 {    width: calc(var(--grid-size) * 40); }
+.w50 {    width: calc(var(--grid-size) * 50); }
+.w70 {    width: calc(var(--grid-size) * 70); }
+.w88 {    width: calc(var(--grid-size) * 88); }
+
+.w-10 {  width:  10%; }
+.w-20 {  width:  20%; }
+.w-25 {  width:  25%; }
+.w-30 {  width:  30%; }
+.w-33 {  width:  33%; }
+.w-34 {  width:  34%; }
+.w-40 {  width:  40%; }
+.w-50 {  width:  50%; }
+.w-60 {  width:  60%; }
+.w-70 {  width:  70%; }
+.w-75 {  width:  75%; }
+.w-80 {  width:  80%; }
+.w-90 {  width:  90%; }
+.w-100 { width: 100%; }
+
+.w-third { width: calc(100% / 3); }
+.w-two-thirds { width: calc(100% / 1.5); }
+.w-auto { width: auto; }
+
+@media (--breakpoint-not-small) {
+    .w1-ns { width: .5rem; }
+    .w2-ns { width: 1rem; }
+    .w3-ns { width: 2rem; }
+    .w4-ns { width: 3rem; }
+    .w5-ns { width: 4rem; }
+    .w6-ns { width: 5rem; }
+    .w7-ns { width: 6rem; }
+    .w8-ns { width: 10rem; }
+    .w9-ns { width: 16rem; }
+    .w10-ns { width: 24rem; }
+    .w-10-ns { width:  10%; }
+    .w-20-ns { width:  20%; }
+    .w-25-ns { width:  25%; }
+    .w-30-ns { width:  30%; }
+    .w-33-ns { width:  33%; }
+    .w-34-ns { width:  34%; }
+    .w-40-ns { width:  40%; }
+    .w-50-ns { width:  50%; }
+    .w-60-ns { width:  60%; }
+    .w-70-ns { width:  70%; }
+    .w-75-ns { width:  75%; }
+    .w-80-ns { width:  80%; }
+    .w-90-ns { width:  90%; }
+    .w-100-ns { width: 100%; }
+    .w-third-ns { width: calc(100% / 3); }
+    .w-two-thirds-ns { width: calc(100% / 1.5); }
+    .w-auto-ns { width: auto; }
+}
+
+@media (--breakpoint-medium) {
+    .w1-m { width: .5rem; }
+    .w2-m { width: 1rem; }
+    .w3-m { width: 2rem; }
+    .w4-m { width: 3rem; }
+    .w5-m { width: 4rem; }
+    .w6-m { width: 5rem; }
+    .w7-m { width: 6rem; }
+    .w8-m { width: 10rem; }
+    .w9-m { width: 16rem; }
+    .w10-m { width: 24rem; }
+    .w-10-m { width:  10%; }
+    .w-20-m { width:  20%; }
+    .w-25-m { width:  25%; }
+    .w-30-m { width:  30%; }
+    .w-33-m { width:  33%; }
+    .w-34-m { width:  34%; }
+    .w-40-m { width:  40%; }
+    .w-50-m { width:  50%; }
+    .w-60-m { width:  60%; }
+    .w-70-m { width:  70%; }
+    .w-75-m { width:  75%; }
+    .w-80-m { width:  80%; }
+    .w-90-m { width:  90%; }
+    .w-100-m { width: 100%; }
+    .w-third-m { width: calc(100% / 3); }
+    .w-two-thirds-m { width: calc(100% / 1.5); }
+    .w-auto-m {    width: auto; }
+}
+
+@media (--breakpoint-large) {
+    .w1-l { width: .5rem; }
+    .w2-l { width: 1rem; }
+    .w3-l { width: 2rem; }
+    .w4-l { width: 3rem; }
+    .w5-l { width: 4rem; }
+    .w6-l { width: 5rem; }
+    .w7-l { width: 6rem; }
+    .w8-l { width: 10rem; }
+    .w9-l { width: 16rem; }
+    .w10-l { width: 24rem; }
+    .w-10-l {    width:  10%; }
+    .w-20-l {    width:  20%; }
+    .w-25-l {    width:  25%; }
+    .w-30-l {    width:  30%; }
+    .w-33-l {    width:  33%; }
+    .w-34-l {    width:  34%; }
+    .w-40-l {    width:  40%; }
+    .w-50-l {    width:  50%; }
+    .w-60-l {    width:  60%; }
+    .w-70-l {    width:  70%; }
+    .w-75-l {    width:  75%; }
+    .w-80-l {    width:  80%; }
+    .w-90-l {    width:  90%; }
+    .w-100-l {   width: 100%; }
+    .w-third-l { width: calc(100% / 3); }
+    .w-two-thirds-l { width: calc(100% / 1.5); }
+    .w-auto-l {    width: auto; }
+}
diff --git a/ghost/admin/app/styles/spirit-product/_word-break.css b/ghost/admin/app/styles/spirit-product/_word-break.css
new file mode 100644
index 0000000000..bc88931a0d
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_word-break.css
@@ -0,0 +1,36 @@
+/*
+
+  WORD BREAK
+
+   Base:
+     word = word-break
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.word-normal { word-break: normal; }
+.word-wrap { word-break: break-all; }
+.word-nowrap { word-break: keep-all; }
+
+@media (--breakpoint-not-small) {
+  .word-normal-ns { word-break: normal; }
+  .word-wrap-ns { word-break: break-all; }
+  .word-nowrap-ns { word-break: keep-all; }
+}
+
+@media (--breakpoint-medium) {
+  .word-normal-m { word-break: normal; }
+  .word-wrap-m { word-break: break-all; }
+  .word-nowrap-m { word-break: keep-all; }
+}
+
+@media (--breakpoint-large) {
+  .word-normal-l { word-break: normal; }
+  .word-wrap-l { word-break: break-all; }
+  .word-nowrap-l { word-break: keep-all; }
+}
+
diff --git a/ghost/admin/app/styles/spirit-product/_z-index.css b/ghost/admin/app/styles/spirit-product/_z-index.css
new file mode 100644
index 0000000000..9f4d863f7b
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/_z-index.css
@@ -0,0 +1,53 @@
+/*
+
+  Z-INDEX
+
+  Base
+    z = z-index
+
+  Modifiers
+    -0 = literal value 0
+    -1 = literal value 1
+    -2 = literal value 2
+    -3 = literal value 3
+    -4 = literal value 4
+    -5 = literal value 5
+    -999 = literal value 999
+    -9999 = literal value 9999
+
+    -max = largest accepted z-index value as integer
+
+    -inherit = string value inherit
+    -initial = string value initial
+    -unset = string value unset
+
+  MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
+  Spec: http://www.w3.org/TR/CSS2/zindex.html
+  Articles:
+    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+
+  Tips on extending:
+  There might be a time worth using negative z-index values.
+  Or if you are using tachyons with another project, you might need to
+  adjust these values to suit your needs.
+
+*/
+
+.z-0 { z-index: 0; }
+.z-1 { z-index: 1; }
+.z-2 { z-index: 2; }
+.z-3 { z-index: 3; }
+.z-4 { z-index: 4; }
+.z-5 { z-index: 5; }
+
+.z-999 { z-index: 999; }
+.z-9999 { z-index: 9999; }
+
+.z-max {
+  z-index: 2147483647;
+}
+
+.z-inherit { z-index: inherit; }
+.z-initial { z-index: initial; }
+.z-unset { z-index: unset; }
+
diff --git a/ghost/admin/app/styles/spirit-product/spirit-product.css b/ghost/admin/app/styles/spirit-product/spirit-product.css
new file mode 100644
index 0000000000..f66d5a1e31
--- /dev/null
+++ b/ghost/admin/app/styles/spirit-product/spirit-product.css
@@ -0,0 +1,75 @@
+/* External Library Includes */
+/* Ghost-Admin's existing CSS already has normalization */
+/* @import './_normalize'; */
+
+/* Modules */
+@import './_spacing';
+@import './_box-sizing';
+@import './_aspect-ratios';
+@import './_images';
+@import './_background-size';
+@import './_background-position';
+@import './_outlines';
+@import './_borders';
+@import './_border-colors';
+@import './_border-radius';
+@import './_border-style';
+@import './_border-widths';
+@import './_box-shadow';
+@import './_code';
+@import './_coordinates';
+@import './_clears';
+@import './_display';
+@import './_flexbox';
+@import './_floats';
+@import './_font-family';
+@import './_font-style';
+@import './_font-weight';
+@import './_forms';
+@import './_heights';
+@import './_letter-spacing';
+@import './_line-height';
+@import './_links';
+@import './_lists';
+@import './_max-widths';
+@import './_min-widths';
+@import './_widths';
+@import './_overflow';
+@import './_position';
+@import './_opacity';
+@import './_rotations';
+@import './_skins';
+@import './_gradients';
+@import './_hovers';
+@import './_text-block-spacings';
+@import './_negative-margins';
+@import './_tables';
+@import './_text-decoration';
+@import './_text-align';
+@import './_text-transform';
+@import './_type-scale';
+@import './_typography';
+@import './_utilities';
+@import './_visibility';
+@import './_white-space';
+@import './_vertical-align';
+@import './_hovers';
+@import './_z-index';
+@import './_nested';
+@import './_dropdown';
+@import './_nudge';
+@import './_icons';
+@import './_animations';
+
+/* Variables */
+/* Importing here will allow you to override any variables in the modules */
+@import './_colors';
+@import './_media-queries';
+
+/* Debugging */
+@import './_debug-children';
+@import './_debug-grid';
+
+/* Uncomment out the line below to help debug layout issues */
+/* @import './_debug'; */
+@import './_custom-styles';
diff --git a/ghost/admin/app/styles/spirit.css b/ghost/admin/app/styles/spirit.css
new file mode 100644
index 0000000000..b1754516d8
--- /dev/null
+++ b/ghost/admin/app/styles/spirit.css
@@ -0,0 +1 @@
+@import "spirit-product/spirit-product.css";
diff --git a/ghost/admin/ember-cli-build.js b/ghost/admin/ember-cli-build.js
index 112083f09d..02107a2dff 100644
--- a/ghost/admin/ember-cli-build.js
+++ b/ghost/admin/ember-cli-build.js
@@ -115,6 +115,7 @@ module.exports = function (defaults) {
                 js: assetLocation('ghost.js'),
                 css: {
                     app: assetLocation('ghost.css'),
+                    spirit: assetLocation('spirit.css'),
                     // TODO: find a way to use the .min file with the lazyLoader
                     'app-dark': 'assets/ghost-dark.css'
                 }
diff --git a/ghost/admin/lib/asset-delivery/index.js b/ghost/admin/lib/asset-delivery/index.js
index 764bb98559..b49390b862 100644
--- a/ghost/admin/lib/asset-delivery/index.js
+++ b/ghost/admin/lib/asset-delivery/index.js
@@ -15,6 +15,7 @@ module.exports = {
             return `
                 <link rel="stylesheet" href="assets/vendor${min}.css">
                 <link rel="stylesheet" href="assets/ghost${min}.css" title="light">
+                <link rel="stylesheet" href="assets/spirit${min}.css">
             `;
         }
 
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
index b6cf4433cc..d62cbf0f5e 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
@@ -8,11 +8,12 @@ const TICK_HEIGHT = 8;
 
 export default Component.extend({
     layout,
-    classNames: ['koenig-card'],
-    classNameBindings: ['isSelected:koenig-card--selected'],
+    attributeBindings: ['style'],
+    classNameBindings: ['isSelected:kg-card-selected'],
 
     // attrs
     icon: null,
+    iconClass: 'ih2 absolute fill-lightgrey mt2 nl10 kg-icon',
     toolbar: null,
     isSelected: false,
     isEditing: false,
@@ -31,6 +32,13 @@ export default Component.extend({
     onEnterEdit() {},
     onLeaveEdit() {},
 
+    // TODO: replace with Spirit classes
+    style: computed(function () {
+        let baseStyles = 'min-height: calc(.4rem * 10); cursor: default; caret-color: auto;';
+
+        return htmlSafe(baseStyles);
+    }),
+
     toolbarStyle: computed('toolbarWidth', 'toolbarHeight', function () {
         let width = this.get('toolbarWidth');
         let height = this.get('toolbarHeight');
diff --git a/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js b/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js
new file mode 100644
index 0000000000..37bc94e434
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/addon/helpers/kg-style.js
@@ -0,0 +1,326 @@
+import {helper} from '@ember/component/helper';
+import {htmlSafe} from '@ember/string';
+
+export function kgStyle(params/*, hash*/) {
+    let [style] = params;
+    let cssClass = '';
+
+    let atFontStyle = 'sans-serif f-headline fw7 tracked-2 lh-heading darkgrey-m2';
+    let h1FontStyle = 'sans-serif f-subheadline fw7 tracked-2 lh-heading darkgrey-m2';
+    let h2FontStyle = 'sans-serif f1 fw7 tracked-2 lh-title darkgrey-m2';
+    let h3FontStyle = 'sans-serif f2 fw7 tracked-2 lh-title darkgrey-m2';
+    let h4FontStyle = 'sans-serif f3 fw7 tracked-3 lh-title darkgrey-m2';
+    let h5FontStyle = 'sans-serif f4 fw7 tracked-2 lh-copy darkgrey-m2';
+    let h6FontStyle = 'sans-serif f5 fw7 tracked-3 lh-copy darkgrey-m2';
+    let pFontStyle = 'f3 fw3 lh-copy tracked-1 serif';
+
+    let cardBorderStyle = 'pt1 pb1 pl14 nl14 pr2 nr2 ba b--whitegrey br3 relative kg-card-hover';
+
+    switch (style) {
+    // Article title
+    case 'at':
+        cssClass = atFontStyle + ' tmb--2-0x';
+        break;
+    case 'at-0':
+        cssClass = atFontStyle + ' tmb--0';
+        break;
+    case 'at-p':
+        cssClass = atFontStyle + ' tmb';
+        break;
+    case 'at-h':
+        cssClass = atFontStyle + ' tmb--2-5x';
+        break;
+
+    // Heading 1
+    case 'h1':
+    case 'h1-p':
+        cssClass = h1FontStyle + ' tmb--0-5x';
+        break;
+    case 'h1-h':
+        cssClass = h1FontStyle + ' tmb';
+        break;
+    case 'h1-media':
+        cssClass = h1FontStyle + ' tmb--2-0x';
+        break;
+    case 'h1-hr':
+        cssClass = h1FontStyle + ' tmb--3-0x';
+        break;
+    case 'h1-list':
+        cssClass = h1FontStyle + ' tmb';
+        break;
+    case 'h1-0':
+        cssClass = h1FontStyle + ' tmb--0';
+        break;
+    case 'h1-2':
+        cssClass = h1FontStyle + ' tmb--2-0x';
+        break;
+
+    // Heading 2
+    case 'h2':
+    case 'h2-p':
+        cssClass = h2FontStyle + ' tmb--0-25x';
+        break;
+    case 'h2-h':
+        cssClass = h2FontStyle + ' tmb--0-75x';
+        break;
+    case 'h2-media':
+        cssClass = h2FontStyle + ' tmb--2-0x';
+        break;
+    case 'h2-hr':
+        cssClass = h2FontStyle + ' tmb--3-0x';
+        break;
+    case 'h2-list':
+        cssClass = h2FontStyle + ' tmb';
+        break;
+    case 'h2-0':
+        cssClass = h2FontStyle + ' tmb--0';
+        break;
+    case 'h2-2':
+        cssClass = h2FontStyle + ' tmb--2-0x';
+        break;
+
+    // Heading 3
+    case 'h3':
+    case 'h3-p':
+        cssClass = h3FontStyle + ' tmb--0-25x';
+        break;
+    case 'h3-h':
+        cssClass = h3FontStyle + ' tmb--0-5x';
+        break;
+    case 'h3-media':
+        cssClass = h3FontStyle + ' tmb--1-5x';
+        break;
+    case 'h3-hr':
+        cssClass = h3FontStyle + ' tmb--3-0x';
+        break;
+    case 'h3-list':
+        cssClass = h3FontStyle + ' tmb';
+        break;
+    case 'h3-0':
+        cssClass = h3FontStyle + ' tmb--0';
+        break;
+    case 'h3-2':
+        cssClass = h3FontStyle + ' tmb--2-0x';
+        break;
+
+    // Heading 4
+    case 'h4':
+    case 'h4-p':
+        cssClass = h4FontStyle + ' tmb--0-25x';
+        break;
+    case 'h4-h':
+        cssClass = h4FontStyle + ' tmb--0-25x';
+        break;
+    case 'h4-media':
+        cssClass = h4FontStyle + ' tmb--1-5x';
+        break;
+    case 'h4-hr':
+        cssClass = h4FontStyle + ' tmb--3-0x';
+        break;
+    case 'h4-list':
+        cssClass = h4FontStyle + ' tmb';
+        break;
+    case 'h4-0':
+        cssClass = h4FontStyle + ' tmb--0';
+        break;
+    case 'h4-2':
+        cssClass = h4FontStyle + ' tmb--2-0x';
+        break;
+
+    // Heading 5
+    case 'h5':
+    case 'h5-p':
+        cssClass = h5FontStyle + ' tmb--0-25x';
+        break;
+    case 'h5-h':
+        cssClass = h5FontStyle + ' tmb--0-25x';
+        break;
+    case 'h5-media':
+        cssClass = h5FontStyle + ' tmb--1-5x';
+        break;
+    case 'h5-hr':
+        cssClass = h5FontStyle + ' tmb--3-0x';
+        break;
+    case 'h5-list':
+        cssClass = h5FontStyle + ' tmb';
+        break;
+    case 'h5-0':
+        cssClass = h5FontStyle + ' tmb--0';
+        break;
+    case 'h5-2':
+        cssClass = h5FontStyle + ' tmb--2-0x';
+        break;
+
+    // Heading 6
+    case 'h6':
+    case 'h6-p':
+        cssClass = h6FontStyle + ' tmb--0-25x';
+        break;
+    case 'h6-h':
+        cssClass = h6FontStyle + ' tmb--0-25x';
+        break;
+    case 'h6-media':
+        cssClass = h6FontStyle + ' tmb--1-5x';
+        break;
+    case 'h6-hr':
+        cssClass = h6FontStyle + ' tmb--3-0x';
+        break;
+    case 'h6-list':
+        cssClass = h6FontStyle + ' tmb';
+        break;
+    case 'h6-0':
+        cssClass = h6FontStyle + ' tmb--0';
+        break;
+    case 'h6-2':
+        cssClass = h6FontStyle + ' tmb--2-0x';
+        break;
+
+    // Paragraphs
+    case 'p':
+    case 'p-p':
+        cssClass = pFontStyle + ' tmb--2-0x';
+        break;
+    case 'p-h':
+        cssClass = pFontStyle + ' tmb--3-0x';
+        break;
+    case 'p-media':
+        cssClass = pFontStyle + ' tmb--2-0x';
+        break;
+    case 'p-hr':
+        cssClass = pFontStyle + ' tmb--3-0x';
+        break;
+    case 'p-list':
+        cssClass = pFontStyle + ' tmb--1-5x';
+        break;
+    case 'p-0':
+        cssClass = pFontStyle + ' tmb--0';
+        break;
+
+    // Lists
+    case 'list':
+    case 'list-p':
+        cssClass = pFontStyle + ' tmb--1-25x';
+        break;
+    case 'list-h':
+        cssClass = pFontStyle + ' tmb--3-0x';
+        break;
+    case 'list-hr':
+        cssClass = pFontStyle + ' tmb--3-0x';
+        break;
+    case 'list-item':
+        cssClass = 'lh-list';
+        break;
+
+    /* Component styles
+    /* ------------------------------------------ */
+
+    // links
+    case 'link':
+        cssClass = 'link darkgrey miw-100-m2 hover-blue kg-link';
+        break;
+
+    // More typography
+    case 'strong':
+        cssClass = 'darkgrey miw-100-m2';
+        break;
+    case 'em':
+        cssClass = 'darkgrey miw-100-m2';
+        break;
+    case 'underline':
+        cssClass = 'underline';
+        break;
+    case 'var':
+        cssClass = 'fs-normal';
+        break;
+    case 'strike':
+        cssClass = 'strike';
+        break;
+    case 'code-inline':
+        cssClass = 'f5 fw3 bg-whitegrey br2 kg-code-inline';
+        break;
+    case 'code-block':
+        cssClass = 'f6 lh-code fw3 bg-darkgrey-m2 pa3 white br3 tmb--2-0x';
+        break;
+    case 'mark':
+        cssClass = 'mark';
+        break;
+
+    // Blockquotes
+    case 'blockquote':
+    case 'blockquote-p':
+        cssClass = pFontStyle + ' bl bw2 b--blue pt1 pb1 pl5 i tmb--2-0x';
+        break;
+    case 'blockquote-h':
+        cssClass = pFontStyle + ' bl bw2 b--blue pt1 pb1 pl5 i tmb--3-0x';
+        break;
+    case 'blockquote-media':
+        cssClass = pFontStyle + ' bl bw2 b--blue pt1 pb1 pl5 i tmb--2-0x';
+        break;
+    case 'blockquote-hr':
+        cssClass = pFontStyle + ' bl bw2 b--blue pt1 pb1 pl5 i tmb--3-0x';
+        break;
+    case 'blockquote-list':
+        cssClass = pFontStyle + ' bl bw2 b--blue pt1 pb1 pl5 i tmb--1-5x';
+        break;
+
+    // Container cards
+    case 'container-card':
+    case 'container-card-p':
+        cssClass = cardBorderStyle + ' tmb--2-0x';
+        break;
+
+    // Generic media card
+    case 'media-card':
+    case 'media-card-p':
+        cssClass = pFontStyle + ' nt2 nr2 nl2 pa2 ba b--transparent kg-card-hover tmb--2-0x';
+        break;
+    case 'media-card-h':
+        cssClass = pFontStyle + ' nt2 nr2 nl2 pa2 ba b--transparent kg-card-hover tmb--3-0x';
+        break;
+    case 'media-card-media':
+        cssClass = pFontStyle + ' nt2 nr2 nl2 pa2 ba b--transparent kg-card-hover tmb--2-0x';
+        break;
+    case 'media-card-hr':
+        cssClass = pFontStyle + ' nt2 nr2 nl2 pa2 ba b--transparent kg-card-hover tmb--3-0x';
+        break;
+    case 'media-card-list':
+        cssClass = pFontStyle + ' nt2 nr2 nl2 pa2 ba b--transparent kg-card-hover tmb--1-5x';
+        break;
+
+    // Media styles & figure caption
+    case 'image-wide':
+        cssClass = 'mw10 center db';
+        break;
+    case 'image-normal':
+        cssClass = 'center db';
+        break;
+    case 'figcaption':
+        cssClass = 'db pa2 pb0 mw7 center lh-title sans-serif fw4 f6 middarkgrey tracked-2 tc';
+        break;
+
+    // Forms
+    case 'form-fieldset':
+        cssClass = pFontStyle + ' tmb--2-0x';
+        break;
+
+    // Horizontal ruler
+    case 'hr':
+        cssClass = 'bb bw1 bt-0 bl-0 br-0 b--lightgrey tmb--3-0x';
+        break;
+
+    // Tables
+    case 'table':
+        cssClass = 'collapse serif f5 lh-copy tmb--3-0x';
+        break;
+    case 'table-row':
+        cssClass = 'bb b--whitegrey';
+        break;
+    case 'table-cell':
+        cssClass = 'pa2';
+        break;
+    }
+
+    return htmlSafe(cssClass);
+}
+
+export default helper(kgStyle);
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
index ad6596da4e..2bb669bef7 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
@@ -1,5 +1,5 @@
 {{#koenig-card
-    icon="koenig/embed"
+    class=(concat (kg-style "media-card") " miw-100 tc")
     isSelected=isSelected
     isEditing=isEditing
     selectCard=(action selectCard)
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
index df60439927..e1c65ee9e2 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs
@@ -1,5 +1,6 @@
 {{#koenig-card
     icon="koenig/markdown"
+    class=(kg-style "container-card")
     isSelected=isSelected
     isEditing=isEditing
     onEnterEdit=(action "enterEditMode")
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
index 8736b8d87a..8784b8915d 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs
@@ -1,7 +1,6 @@
-<div class="koenig-card-icon">{{inline-svg icon}}</div>
-<div class="koenig-card-content">
-    {{yield}}
-</div>
+{{#if icon}}{{inline-svg icon class=iconClass}}{{/if}}
+
+{{yield}}
 
 {{#if toolbar}}
     <div class="koenig-card-toolbar koenig-toolbar {{if showToolbar "koenig-toolbar--visible"}}" style={{toolbarStyle}}>
diff --git a/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js b/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js
new file mode 100644
index 0000000000..205755b994
--- /dev/null
+++ b/ghost/admin/lib/koenig-editor/app/helpers/kg-style.js
@@ -0,0 +1 @@
+export { default, kgStyle } from 'koenig-editor/helpers/kg-style';
diff --git a/ghost/admin/lib/koenig-editor/public/icons/koenig/markdown.svg b/ghost/admin/lib/koenig-editor/public/icons/koenig/markdown.svg
index 3ab5c7b8bb..01e421fc67 100644
--- a/ghost/admin/lib/koenig-editor/public/icons/koenig/markdown.svg
+++ b/ghost/admin/lib/koenig-editor/public/icons/koenig/markdown.svg
@@ -1 +1 @@
-<svg viewBox="0 0 43 34" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect stroke="#000" stroke-width="2" x="2" y="2" width="39" height="30" rx="2"></rect><path fill="#000" d="M19.566 12.613l-.049-.01L14.917 24h-1.279l-4.6-11.387-.048.01.195 5.752v4.121l1.592.274V24H5.669v-1.23l1.592-.274V11.295L5.67 11.02v-1.24h4.053l4.531 11.553h.059l4.521-11.553h4.063v1.24l-1.592.274v11.201l1.592.274V24h-5.107v-1.23l1.591-.274v-4.121z"></path><path d="M36.077 18.501l-5.039 5.039L26 18.5m5.038 5.039v-13.1" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
+<svg viewBox="0 0 25 11" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="M.039.2h3.326L5.88 7.628h.03L8.287.201h3.327V11H9.401V3.347h-.03L6.737 11H4.916L2.28 3.422h-.03V11H.04zM20.895 5.5H25L19.526 11l-5.473-5.5h4.105V0h2.737v5.5z"/></g></svg>