diff --git a/packages/create-freesewing-pattern/template/freesewing/example/src/layout.css b/packages/create-freesewing-pattern/template/freesewing/example/src/layout.css
index 94c9ddf0649..f600593f6ed 100644
--- a/packages/create-freesewing-pattern/template/freesewing/example/src/layout.css
+++ b/packages/create-freesewing-pattern/template/freesewing/example/src/layout.css
@@ -2,141 +2,82 @@ div.layout-wrapper {
   width: 100%;
   margin: 0;
   padding: 0;
-  background-color: red;
   background: #f8f9fa;
-  background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%);
-}
-div.layout-wrapper div.layout {
-  display: flex;
-  max-width: 1600px;
-  margin: auto;
-  padding: 0;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  background-color: #f8f9fa;
-  min-height: calc(100vh - 64px);
-}
-div.layout-wrapper div.layout > aside {
-  width: 33%;
-  background: #f1f3f5;
-  border-right: 2px solid #dee2e6;
-}
-div.layout-wrapper div.layout > section {
-  margin: 0;
-  padding: 1rem;
-}
-div.layout-wrapper div.layout > section > div.content {
-  max-width: 66ch;
-  min-width: 340px;
-}
-div.layout-wrapper div.layout > section > div.content.wide {
-  max-width: 100%;
-  margin: auto;
-}
+  background: linear-gradient(90deg, #f1f3f5 0%, #f1f3f5 25%, #f8f9fa 26%, #f8f9fa 100%); }
+  div.layout-wrapper div.layout {
+    display: flex;
+    max-width: 1600px;
+    margin: auto;
+    padding: 0;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    background-color: #f8f9fa;
+    min-height: calc(100vh - 64px); }
+    div.layout-wrapper div.layout > aside {
+      width: 33%;
+      background: #f1f3f5;
+      border-right: 2px solid #dee2e6; }
+    div.layout-wrapper div.layout > section {
+      margin: 0;
+      padding: 1rem; }
+      div.layout-wrapper div.layout > section > div.content {
+        max-width: 66ch;
+        min-width: 340px; }
+      div.layout-wrapper div.layout > section > div.content.wide {
+        max-width: 100%;
+        margin: auto; }
 
 .theme-wrapper.dark header {
-  background-color: #1a1d21;
-}
+  background-color: #1a1d21; }
 
 .theme-wrapper.dark div.layout-wrapper {
   background: #f8f9fa;
-  background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%);
-}
-.theme-wrapper.dark div.layout-wrapper div.layout {
-  background-color: #212529;
-}
-.theme-wrapper.dark div.layout-wrapper div.layout > aside {
-  background-color: #1a1d21;
-  border-right: 2px solid #343a40;
-}
-
-header a svg {
-  color: #ced4da;
-}
-
-header a:first-of-type svg {
-  color: #f8f9fa;
-}
-
-header a:hover svg {
-  color: #b197fc;
-}
-
-header a span,
-header button span {
-  color: #ced4da;
-}
-header a span svg,
-header button span svg {
-  color: #dee2e6;
-}
-
-header a:hover span,
-header button:hover span {
-  color: #f8f9fa;
-}
-header a:hover span svg,
-header button:hover span svg {
-  color: #b197fc;
-}
-
-header a,
-header button {
-  padding: 0 1vw !important;
-}
+  background: linear-gradient(90deg, #1a1d21 0%, #1a1d21 25%, #212529 26%, #212529 100%); }
+  .theme-wrapper.dark div.layout-wrapper div.layout {
+    background-color: #212529; }
+    .theme-wrapper.dark div.layout-wrapper div.layout > aside {
+      background-color: #1a1d21;
+      border-right: 2px solid #343a40; }
 
 /* monitor */
 @media (min-width: 1200px) {
   div.layout > section {
-    width: 63%;
-  }
-}
+    width: 63%; } }
 
 /* slate */
 @media (max-width: 1199px) and (min-width: 960px) {
   div.layout > aside {
-    width: 298px;
-  }
+    width: 298px; }
   div.layout > section {
     width: calc(100% - 300px - 4rem);
     max-width: none;
-    margin: 0 1rem 0 3rem;
-  }
-}
+    margin: 0 1rem 0 3rem; } }
 
 /* tablet */
 @media (max-width: 959px) {
   div.layout > aside {
-    width: 218px;
-  }
+    width: 218px; }
   div.layout > section {
     width: calc(100% - 220px - 4rem);
     max-width: none;
     margin: 0;
-    padding: 0 2rem;
-  }
-  div.layout > section div.content {
-    min-width: inherit;
-  }
-}
+    padding: 0 2rem; }
+    div.layout > section div.content {
+      min-width: inherit; } }
 
 /* mobile */
 @media (max-width: 599px) {
   div.layout > aside {
-    display: none;
-  }
+    display: none; }
   div.layout > section {
     width: calc(100%);
     margin: 0 auto;
     padding: 0 1.5rem;
-    max-width: none;
-  }
-}
+    max-width: none; } }
 
 div.gatsby-highlight {
-  margin-bottom: 1rem;
-}
+  margin-bottom: 1rem; }
 
 @media (max-width: 599px) {
   #mobile-menu {
@@ -150,154 +91,117 @@ div.gatsby-highlight {
     z-index: -10;
     transition: opacity 0.25s ease 0s;
     opacity: 0;
-    overflow: scroll;
-  }
-  #mobile-menu > ul,
-  #mobile-menu > div {
-    transform: translate(0px, 10px);
-    transition: transform 0.25s ease 0s;
-  }
+    overflow: scroll; }
+    #mobile-menu > ul,
+    #mobile-menu > div {
+      transform: translate(0px, 10px);
+      transition: transform 0.25s ease 0s; }
   .theme-wrapper.show-menu #mobile-menu {
     opacity: 1;
-    z-index: 10;
-  }
-  .theme-wrapper.show-menu #mobile-menu > div {
-    transform: translate(0px, 0px);
-  }
-}
+    z-index: 10; }
+    .theme-wrapper.show-menu #mobile-menu > div {
+      transform: translate(0px, 0px); } }
 
 .theme-wrapper.light div.draft-ui-menu,
 .theme-wrapper.light div.menu {
-  background: #f1f3f5;
-}
+  background: #f1f3f5; }
 
 .theme-wrapper.dark div.draft-ui-menu,
 .theme-wrapper.dark div.menu {
-  background: #343a40;
-}
+  background: #343a40; }
 
 .theme-wrapper.show-menu div.menu {
   opacity: 1;
-  z-index: 10;
-}
-.theme-wrapper.show-menu div.menu > div {
-  transform: translate(0px, 0px);
-}
+  z-index: 10; }
+  .theme-wrapper.show-menu div.menu > div {
+    transform: translate(0px, 0px); }
 
 div.spaced-buttons > button {
-  margin: 0 0.5rem 0.5rem 0;
-}
+  margin: 0 0.5rem 0.5rem 0; }
 
 div.spaced > * {
-  margin: 0 0.5rem 0.5rem 0;
-}
+  margin: 0 0.5rem 0.5rem 0; }
 
 ul#pre-main-menu {
   margin: 0;
-  padding: 0;
-}
+  padding: 0; }
 
 .boldish {
-  font-weight: 500;
-}
+  font-weight: 500; }
 
 .freesewing.draft {
-  padding: 1rem;
-}
+  padding: 1rem; }
 
 li.action {
-  clear: both;
-}
+  clear: both; }
 
 li.action span.MuiSwitch-root {
-  float: right;
-}
+  float: right; }
 
 .theme-wrapper.light ul#draft-config li.action.toggle.off,
 .theme-wrapper.dark ul#draft-config li.action.toggle.off {
-  color: #868e96;
-}
-.theme-wrapper.light ul#draft-config li.action.toggle.off > span svg,
-.theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg {
-  color: #868e96;
-}
+  color: #868e96; }
+  .theme-wrapper.light ul#draft-config li.action.toggle.off > span svg,
+  .theme-wrapper.dark ul#draft-config li.action.toggle.off > span svg {
+    color: #868e96; }
 
 footer {
   background-color: #1a1d21;
   color: #adb5bd;
-  padding: 3rem 0 6rem;
-}
-footer a {
-  color: #dee2e6 !important;
-  font-weight: 400;
-}
-footer a:hover {
-  color: #d0bfff !important;
-}
-footer div.cols {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  max-width: 1600px;
-  margin: auto;
-  padding: 0 1.5rem;
-}
-footer div.cols > div {
-  min-width: 150px;
-  max-width: calc(20% - 4rem);
-  padding: 0 2rem 0 0;
-  width: 100%;
-}
-footer ul {
-  text-align: left;
-  font-size: 1.1rem;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
-footer ul li:first-of-type {
-  padding: 0.35rem 0.75rem;
-}
-footer ul li {
-  display: block;
-}
-footer ul li a:hover {
-  text-decoration: none !important;
-}
-footer ul li.heading {
-  font-weight: bold;
-  border-bottom: 3px solid #adb5bd;
-  margin-bottom: 0.5rem;
-}
+  padding: 3rem 0 6rem; }
+  footer a {
+    color: #dee2e6 !important;
+    font-weight: 400; }
+  footer a:hover {
+    color: #d0bfff !important; }
+  footer div.cols {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 1600px;
+    margin: auto;
+    padding: 0 1.5rem; }
+    footer div.cols > div {
+      min-width: 150px;
+      max-width: calc(20% - 4rem);
+      padding: 0 2rem 0 0;
+      width: 100%; }
+  footer ul {
+    text-align: left;
+    font-size: 1.1rem;
+    margin: 0;
+    padding: 0;
+    width: 100%; }
+    footer ul li:first-of-type {
+      padding: 0.35rem 0.75rem; }
+    footer ul li {
+      display: block; }
+      footer ul li a:hover {
+        text-decoration: none !important; }
+    footer ul li.heading {
+      font-weight: bold;
+      border-bottom: 3px solid #adb5bd;
+      margin-bottom: 0.5rem; }
 
 /* XL screens */
 @media (min-width: 1200px) {
   footer div.cols > div:last-of-type {
-    min-width: 350px;
-  }
-}
+    min-width: 350px; } }
 
 /* SM screens */
 @media (min-width: 600px) and (max-width: 959px) {
   footer div.cols {
-    flex-wrap: wrap;
-  }
-  footer div.cols > div {
-    width: calc(30% - 4rem);
-    padding: 0 1rem;
-  }
-}
+    flex-wrap: wrap; }
+    footer div.cols > div {
+      width: calc(30% - 4rem);
+      padding: 0 1rem; } }
 
 /* XS screens */
 @media (max-width: 599px) {
   footer div.cols {
-    display: block;
-  }
-  footer div.cols > div {
-    margin: 2rem auto 0;
-    max-width: calc(100% - 4rem);
-  }
-  footer div.cols > div:first-of-type {
-    margin-top: 0;
-  }
-}
+    display: block; }
+    footer div.cols > div {
+      margin: 2rem auto 0;
+      max-width: calc(100% - 4rem); }
+    footer div.cols > div:first-of-type {
+      margin-top: 0; } }
diff --git a/packages/create-freesewing-pattern/template/freesewing/example/src/layout.scss b/packages/create-freesewing-pattern/template/freesewing/example/src/layout.scss
index d249e272a37..5428b50c851 100644
--- a/packages/create-freesewing-pattern/template/freesewing/example/src/layout.scss
+++ b/packages/create-freesewing-pattern/template/freesewing/example/src/layout.scss
@@ -5,7 +5,6 @@ div.layout-wrapper {
   width: 100%;
   margin: 0;
   padding: 0;
-  background-color: red;
   background: $oc-gray-0;
   background: linear-gradient(
     90deg,
@@ -65,33 +64,6 @@ div.layout-wrapper {
     }
   }
 }
-header a svg {
-  color: $oc-gray-4;
-}
-header a:first-of-type svg {
-  color: $oc-gray-0;
-}
-header a:hover svg {
-  color: $oc-violet-3;
-}
-header a span,
-header button span {
-  color: $oc-gray-4;
-  svg {
-    color: $oc-gray-3;
-  }
-}
-header a:hover span,
-header button:hover span {
-  color: $oc-gray-0;
-  svg {
-    color: $oc-violet-3;
-  }
-}
-header a,
-header button {
-  padding: 0 1vw !important;
-}
 
 /* monitor */
 @media (min-width: 1200px) {