diff --git a/packages/create-freesewing-pattern/template/default/example/src/App.js b/packages/create-freesewing-pattern/template/default/example/src/App.js
index 502fa7ad989..3d1d9bcccfb 100644
--- a/packages/create-freesewing-pattern/template/default/example/src/App.js
+++ b/packages/create-freesewing-pattern/template/default/example/src/App.js
@@ -1,9 +1,8 @@
 import React from 'react'
 import freesewing from '@freesewing/core'
 import Workbench from '@freesewing/components/Workbench'
-import 'typeface-roboto-condensed'
-import 'typeface-raleway'
 import '@freesewing/css-theme'
+import './layout.scss'
 
 import Pattern from 'pattern'
 
diff --git a/packages/create-freesewing-pattern/template/default/example/src/layout.scss b/packages/create-freesewing-pattern/template/default/example/src/layout.scss
new file mode 100644
index 00000000000..061731c5489
--- /dev/null
+++ b/packages/create-freesewing-pattern/template/default/example/src/layout.scss
@@ -0,0 +1,305 @@
+@import '../../../node_modules/open-color/open-color.scss';
+
+// Main page content layout
+div.layout-wrapper {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: red;
+  background: $oc-gray-0;
+  background: linear-gradient(
+    90deg,
+    $oc-gray-1 0%,
+    $oc-gray-1 25%,
+    $oc-gray-0 26%,
+    $oc-gray-0 100%
+  );
+  div.layout {
+    display: flex;
+    max-width: 1600px;
+    margin: auto;
+    padding: 0;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    background-color: $oc-gray-0;
+    min-height: calc(100vh - 64px);
+    > aside {
+      width: 33%;
+      background: $oc-gray-1;
+      border-right: 2px solid $oc-gray-3;
+    }
+    > section {
+      margin: 0;
+      padding: 1rem;
+      > div.content {
+        max-width: 66ch;
+        min-width: 340px;
+      }
+      > div.content.wide {
+        max-width: 100%;
+        margin: auto;
+      }
+    }
+  }
+}
+.theme-wrapper.dark {
+  header {
+    background-color: darken($oc-gray-9, 3);
+  }
+  div.layout-wrapper {
+    background: $oc-gray-0;
+    background: linear-gradient(
+      90deg,
+      darken($oc-gray-9, 3) 0%,
+      darken($oc-gray-9, 3) 25%,
+      $oc-gray-9 26%,
+      $oc-gray-9 100%
+    );
+    div.layout {
+      background-color: $oc-gray-9;
+      > aside {
+        background-color: darken($oc-gray-9, 3);
+        border-right: 2px solid $oc-gray-8;
+      }
+    }
+  }
+}
+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) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout {
+    > aside {
+      width: 298px; // 2px border
+    }
+    > section {
+      width: calc(100% - 300px - 4rem);
+      max-width: none;
+      margin: 0 1rem 0 3rem;
+    }
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout {
+    > aside {
+      width: 218px; // 2px border
+    }
+    > section {
+      width: calc(100% - 220px - 4rem);
+      max-width: none;
+      margin: 0;
+      padding: 0 2rem;
+      div.content {
+        min-width: inherit;
+      }
+    }
+  }
+}
+/* mobile */
+@media (max-width: 599px) {
+  div.layout {
+    > aside {
+      display: none;
+    }
+    > section {
+      width: calc(100%);
+      margin: 0 auto;
+      padding: 0 1.5rem;
+      max-width: none;
+    }
+  }
+}
+
+// Candidates for theme inclusion
+div.gatsby-highlight {
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 599px) {
+  #mobile-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    padding: 0 0 1rem;
+    max-width: 600px;
+    z-index: -10;
+    transition: opacity 0.25s ease 0s;
+    opacity: 0;
+    overflow: scroll;
+    > ul,
+    > div {
+      transform: translate(0px, 10px);
+      transition: transform 0.25s ease 0s;
+    }
+  }
+  .theme-wrapper.show-menu #mobile-menu {
+    opacity: 1;
+    z-index: 10;
+    > div {
+      transform: translate(0px, 0px);
+    }
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: $oc-gray-1;
+}
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: $oc-gray-8;
+}
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  z-index: 10;
+  > div {
+    transform: translate(0px, 0px);
+  }
+}
+
+div.spaced-buttons > button {
+  margin: 0 0.5rem 0.5rem 0;
+}
+div.spaced > * {
+  margin: 0 0.5rem 0.5rem 0;
+}
+
+ul#pre-main-menu {
+  margin: 0;
+  padding: 0;
+}
+.boldish {
+  font-weight: 500;
+}
+.freesewing.draft {
+  padding: 1rem;
+}
+li.action {
+  clear: both;
+}
+li.action span.MuiSwitch-root {
+  float: right;
+}
+.theme-wrapper.light ul#draft-config li.action.toggle.off,
+.theme-wrapper.dark ul#draft-config li.action.toggle.off {
+  color: $oc-gray-6;
+  > span svg {
+    color: $oc-gray-6;
+  }
+}
+
+
+footer {
+  background-color: #1a1d21;
+  color: #adb5bd;
+  padding: 3rem 0 6rem;
+  a {
+    color: #dee2e6 !important;
+    font-weight: 400;
+  }
+  a:hover {
+    color: #d0bfff !important;
+  }
+  div.cols {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 1600px;
+    margin: auto;
+    padding: 0 1.5rem;
+    > div {
+      min-width: 150px;
+      max-width: calc(20% - 4rem);
+      padding: 0 2rem 0 0;
+      width: 100%;
+    }
+  }
+  ul {
+    text-align: left;
+    font-size: 1.1rem;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    li:first-of-type {
+      padding: 0.35rem 0.75rem;
+    }
+    li {
+      display: block;
+      a:hover {
+        text-decoration: none !important;
+      }
+    }
+    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;
+  }
+}
+/* SM screens */
+@media (min-width: 600px) and (max-width: 959px) {
+  footer div.cols {
+    flex-wrap: wrap;
+    > div {
+      width: calc(30% - 4rem);
+      padding: 0 1rem;
+    }
+  }
+}
+/* XS screens */
+@media (max-width: 599px) {
+  footer div.cols {
+    display: block;
+    > div {
+      margin: 2rem auto 0;
+      max-width: calc(100% - 4rem);
+    }
+    > div:first-of-type {
+      margin-top: 0;
+    }
+  }
+}