diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e69550513c..995f1a6e73b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,16 @@
 
  - Inital release of the Charlie Chinos pattern
 
+### components
+
+#### Changed
+
+ - Show raised info above pattern in workbench
+
+#### Fixed
+
+ - Always show design mode switch
+
 ### core
 
 #### Changed
@@ -33,6 +43,24 @@
 
  - Added the path.bartack class
 
+#### Changed
+
+ - Removed old bartack styling for new plugin
+ - Better example styling to prevent UI jumping
+
+### examples
+
+#### Added
+
+ - Added examples for bartack plugin
+ - Added examples for new buttonhole-start/end snippets
+
+### i18n
+
+#### Added
+
+ - Added translation for new Titan options
+
 ### paco
 
 #### Changed
diff --git a/packages/aaron/example/src/layout.css b/packages/aaron/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/aaron/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/albert/example/src/layout.css b/packages/albert/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/albert/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/bella/example/src/layout.css b/packages/bella/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/bella/example/src/layout.css
+++ b/packages/bella/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/benjamin/example/src/layout.css b/packages/benjamin/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/benjamin/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/bent/example/src/layout.css b/packages/bent/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/bent/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/breanna/example/src/layout.css b/packages/breanna/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/breanna/example/src/layout.css
+++ b/packages/breanna/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/brian/example/src/layout.css b/packages/brian/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/brian/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/bruce/example/src/layout.css b/packages/bruce/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/bruce/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/carlita/example/src/layout.css b/packages/carlita/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/carlita/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/carlton/example/src/layout.css b/packages/carlton/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/carlton/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/cathrin/example/src/layout.css b/packages/cathrin/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/cathrin/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index ef45d75883e..7527bc7d9bc 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -7,6 +7,10 @@
 
  - Show raised info above pattern in workbench
 
+### Fixed
+
+ - Always show design mode switch
+
 ## 2.14.0 (2021-03-07)
 
 ### Added
diff --git a/packages/css-theme/CHANGELOG.md b/packages/css-theme/CHANGELOG.md
index 525a7d6d7c1..a01827b8c2a 100644
--- a/packages/css-theme/CHANGELOG.md
+++ b/packages/css-theme/CHANGELOG.md
@@ -7,6 +7,11 @@
 
  - Added the path.bartack class
 
+### Changed
+
+ - Removed old bartack styling for new plugin
+ - Better example styling to prevent UI jumping
+
 ## 2.11.0 (2021-01-10)
 
 ### Added
diff --git a/packages/diana/example/src/layout.css b/packages/diana/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/diana/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/examples/CHANGELOG.md b/packages/examples/CHANGELOG.md
index 0ece520e638..ec474f2eb3b 100644
--- a/packages/examples/CHANGELOG.md
+++ b/packages/examples/CHANGELOG.md
@@ -1,6 +1,13 @@
 # Change log for: @freesewing/examples
 
 
+## 2.15.0 (NaN-NaN-NaN)
+
+### Added
+
+ - Added examples for bartack plugin
+ - Added examples for new buttonhole-start/end snippets
+
 ## 2.0.0 (2019-08-25)
 
 ### Added
diff --git a/packages/florence/example/src/layout.css b/packages/florence/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/florence/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/florent/example/src/layout.css b/packages/florent/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/florent/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/holmes/example/src/layout.css b/packages/holmes/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/holmes/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/hortensia/example/src/layout.css b/packages/hortensia/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/hortensia/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/huey/example/src/layout.css b/packages/huey/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/huey/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/hugo/example/src/layout.css b/packages/hugo/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/hugo/example/src/layout.css
+++ b/packages/hugo/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index c436a0ad9aa..45e25413046 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -1,6 +1,12 @@
 # Change log for: @freesewing/i18n
 
 
+## 2.15.0 (NaN-NaN-NaN)
+
+### Added
+
+ - Added translation for new Titan options
+
 ## 2.14.0 (2021-03-07)
 
 ### Added
diff --git a/packages/jaeger/example/src/layout.css b/packages/jaeger/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/jaeger/example/src/layout.css
+++ b/packages/jaeger/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/legend/example/src/layout.css b/packages/legend/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/legend/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/paco/example/src/layout.css b/packages/paco/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/paco/example/src/layout.css
+++ b/packages/paco/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/penelope/example/src/layout.css b/packages/penelope/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/penelope/example/src/layout.css
+++ b/packages/penelope/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/rendertest/example/src/layout.css b/packages/rendertest/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/rendertest/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/sandy/example/src/layout.css b/packages/sandy/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/sandy/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/shin/example/src/layout.css b/packages/shin/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/shin/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/simon/example/src/layout.css b/packages/simon/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/simon/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/simone/example/src/layout.css b/packages/simone/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/simone/example/src/layout.css
+++ b/packages/simone/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/sven/example/src/layout.css b/packages/sven/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/sven/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/teagan/example/src/layout.css b/packages/teagan/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/teagan/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/theo/example/src/layout.css b/packages/theo/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/theo/example/src/layout.css
+++ b/packages/theo/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/titan/example/src/layout.css b/packages/titan/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/titan/example/src/layout.css
+++ b/packages/titan/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/trayvon/example/src/layout.css b/packages/trayvon/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/trayvon/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/tutorial/example/src/layout.css b/packages/tutorial/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/tutorial/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}
diff --git a/packages/wahid/example/src/layout.css b/packages/wahid/example/src/layout.css
index 564f3cd2862..94c9ddf0649 100644
--- a/packages/wahid/example/src/layout.css
+++ b/packages/wahid/example/src/layout.css
@@ -4,108 +4,139 @@ div.layout-wrapper {
   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; }
+  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; }
+  color: #ced4da;
+}
 
 header a:first-of-type svg {
-  color: #f8f9fa; }
+  color: #f8f9fa;
+}
 
 header a:hover svg {
-  color: #b197fc; }
+  color: #b197fc;
+}
 
 header a span,
 header button span {
-  color: #ced4da; }
-  header a span svg,
-  header button span svg {
-    color: #dee2e6; }
+  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; }
+  color: #f8f9fa;
+}
+header a:hover span svg,
+header button:hover span svg {
+  color: #b197fc;
+}
 
 header a,
 header button {
-  padding: 0 1vw !important; }
+  padding: 0 1vw !important;
+}
 
 /* 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 {
@@ -119,117 +150,154 @@ 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/waralee/example/src/layout.css b/packages/waralee/example/src/layout.css
new file mode 100644
index 00000000000..94c9ddf0649
--- /dev/null
+++ b/packages/waralee/example/src/layout.css
@@ -0,0 +1,303 @@
+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;
+}
+
+.theme-wrapper.dark header {
+  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;
+}
+
+/* monitor */
+@media (min-width: 1200px) {
+  div.layout > section {
+    width: 63%;
+  }
+}
+
+/* slate */
+@media (max-width: 1199px) and (min-width: 960px) {
+  div.layout > aside {
+    width: 298px;
+  }
+  div.layout > section {
+    width: calc(100% - 300px - 4rem);
+    max-width: none;
+    margin: 0 1rem 0 3rem;
+  }
+}
+
+/* tablet */
+@media (max-width: 959px) {
+  div.layout > aside {
+    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;
+  }
+}
+
+/* mobile */
+@media (max-width: 599px) {
+  div.layout > aside {
+    display: none;
+  }
+  div.layout > section {
+    width: calc(100%);
+    margin: 0 auto;
+    padding: 0 1.5rem;
+    max-width: none;
+  }
+}
+
+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;
+  }
+  #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);
+  }
+}
+
+.theme-wrapper.light div.draft-ui-menu,
+.theme-wrapper.light div.menu {
+  background: #f1f3f5;
+}
+
+.theme-wrapper.dark div.draft-ui-menu,
+.theme-wrapper.dark div.menu {
+  background: #343a40;
+}
+
+.theme-wrapper.show-menu div.menu {
+  opacity: 1;
+  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;
+}
+
+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: #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;
+}
+
+/* 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;
+  }
+  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;
+  }
+}