diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js
index 377dc7dd32a..80bdc6f5d3a 100644
--- a/packages/freesewing.shared/components/layouts/default.js
+++ b/packages/freesewing.shared/components/layouts/default.js
@@ -20,8 +20,9 @@ const Breadcrumbs = ({ app, slug=false, title }) => {
   const crumbs = []
   const chunks = slug.split('/')
   for (const i in chunks) {
-    const page = get(app.navigation, chunks.slice(0,i+1))
-    crumbs.push([page.__linktitle, '/'+chunks.slice(0,i+1).join('/'), (i+1 < chunks.length)])
+    const j = parseInt(i)+parseInt(1)
+    const page = get(app.navigation, chunks.slice(0,j))
+    crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
   }
 
   return (
diff --git a/packages/freesewing.shared/components/logos/freesewing.js b/packages/freesewing.shared/components/logos/freesewing.js
index 8a7b44ba6fd..2ebfec737d7 100644
--- a/packages/freesewing.shared/components/logos/freesewing.js
+++ b/packages/freesewing.shared/components/logos/freesewing.js
@@ -31,9 +31,9 @@ const fill = {
     <linearGradient id="hax0r" x1="0%" y1="0%" x2="50%" y2="100%">
       {[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].map( i => (
         <>
-          <stop offset={`${i*5}%`} stopColor={colors.lime[900]} stopOpacity="1.0" />
-          <stop offset={`${i*5+1}%`} stopColor={colors.lime[800]} stopOpacity="1.0" />
-          <stop offset={`${i*5+2}%`} stopColor={colors.lime[900]} stopOpacity="1.0" />
+          <stop key={i} offset={`${i*5}%`} stopColor={colors.lime[900]} stopOpacity="1.0" />
+          <stop key={i} offset={`${i*5+1}%`} stopColor={colors.lime[800]} stopOpacity="1.0" />
+          <stop key={i} offset={`${i*5+2}%`} stopColor={colors.lime[900]} stopOpacity="1.0" />
         </>
       ))}
     </linearGradient>
@@ -42,7 +42,7 @@ const fill = {
     <linearGradient id="lgbtq" x1="0%" y1="0%" x2="0%" y2="100%">
       {['red', 'orange', 'yellow', 'green', 'blue', 'violet'].map(c => {
         let next = step + 100/6
-        let stop = <>
+        const stop = <>
           <stop offset={`${step}%`} stopColor={colors[c][500]} stopOpacity="1.0" />
           <stop offset={`${next}%`} stopColor={colors[c][500]} stopOpacity="1.0" />
         </>
diff --git a/packages/freesewing.shared/components/mdx/example.js b/packages/freesewing.shared/components/mdx/example.js
index 04d9a046dab..a0dda15acca 100644
--- a/packages/freesewing.shared/components/mdx/example.js
+++ b/packages/freesewing.shared/components/mdx/example.js
@@ -1,4 +1,103 @@
-const Example = props => <p>FIXME: Example still todo</p>
+import React, { useState } from 'react'
+import examples from '@freesewing/examples'
+import rendertest from '@freesewing/rendertest'
+import tutorial from '@freesewing/tutorial'
+import Draft from '@freesewing/components/Draft'
+import Icon from 'shared/components/icon'
+//import Design from '../Workbench/Design'
+
+const Example = ({
+  pattern = 'examples',
+  design = true,
+  children=null,
+  options = {},
+  settings,
+  part = '',
+  sample
+}) => {
+  const [designMode, setDesignMode] = useState(false)
+  const [focus, setFocus] = useState(null)
+
+  const raiseEvent = (type, data) => {
+    if (type === 'clearFocusAll') return setFocus(null)
+    let f = {}
+    if (focus !== null) f = { ...focus }
+    if (typeof f[data.part] === 'undefined') f[data.part] = { paths: [], points: [], coords: [] }
+    if (type === 'point') f[data.part].points.push(data.name)
+    else if (type === 'path') f[data.part].paths.push(data.name)
+    else if (type === 'coords') f[data.part].coords.push(data.coords)
+    else if (type === 'clearFocus') {
+      let i = focus[data.part][data.type].indexOf(data.name)
+      f[data.part][data.type].splice(i, 1)
+    }
+
+    setFocus(f)
+  }
+
+  let focusCount = 0
+  if (focus !== null) {
+    for (let p of Object.keys(focus)) {
+      for (let i in focus[p].points) focusCount++
+      for (let i in focus[p].paths) focusCount++
+      for (let i in focus[p].coords) focusCount++
+    }
+  }
+
+  const patterns = {
+    examples,
+    rendertest,
+    tutorial
+  }
+  settings = {
+    options: { ...options },
+    measurements: { head: 390 },
+    ...settings
+  }
+  if (part !== '') settings.only = [part]
+  const patternInstance = new patterns[pattern](settings)
+  if (sample) patternInstance.sample()
+  else patternInstance.draft()
+  const patternProps = patternInstance.getRenderProps()
+  return (
+    <figure className={designMode ? 'design example' : 'example'}>
+      <div className="example">
+        <div className="actions">
+          <button
+            disabled={!designMode}
+            color="primary"
+            onClick={() => raiseEvent('clearFocusAll', null)}
+          >
+            <Icon icon='settings' />
+          </button>
+          <div className="p-6 card bordered">
+            <div className="form-control">
+              <label className="cursor-pointer label">
+                <span className="label-text">Design mode</span>
+                <input
+                  type="checkbox"
+                  checked={designMode}
+                  className="toggle toggle-primary"
+                  onChange={() => setDesignMode(!designMode)}
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+        <Draft {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
+      </div>
+      <figcaption>{children}</figcaption>
+      {designMode && (
+        <div className="design">
+          <Design
+            focus={focus}
+            design={designMode}
+            raiseEvent={raiseEvent}
+            parts={patternProps.parts}
+          />
+        </div>
+      )}
+    </figure>
+  )
+}
 
 export default Example
-
diff --git a/packages/freesewing.shared/components/mdx/highlight.js b/packages/freesewing.shared/components/mdx/highlight.js
index 9dead92249b..b9b138fc464 100644
--- a/packages/freesewing.shared/components/mdx/highlight.js
+++ b/packages/freesewing.shared/components/mdx/highlight.js
@@ -14,7 +14,7 @@ const Highlight = ({
 
   return (
     <div className="hljs my-4">
-      <div className={`text-xs uppercase font-bold text-info mt-1 text-center border-b border-info border-opacity-20 py-1 mb-2 lg:text-sm`}>
+      <div className={`text-xs uppercase font-bold text-neutral-content mt-1 text-center border-b border-neutral-content border-opacity-25 py-1 mb-2 lg:text-sm`}>
         {names[language] ? names[language] : language}
       </div>
       <pre className="language-js hljs text-base lg:text-lg">{children}</pre>
diff --git a/packages/freesewing.shared/components/navigation/primary.js b/packages/freesewing.shared/components/navigation/primary.js
index 20675d0fb3c..9275f41b05c 100644
--- a/packages/freesewing.shared/components/navigation/primary.js
+++ b/packages/freesewing.shared/components/navigation/primary.js
@@ -34,12 +34,10 @@ const howActive = (slug) => {
 }
 
 // Shared classes for links
-const linkClasses = "text-lg lg:text-xl py-1 text-base-content hover:cursor-pointer hover:text-secondary bg-opacity-50"
-
-
+const linkClasses = "text-lg lg:text-xl py-1 hover:cursor-pointer hover:text-secondary bg-opacity-50"
 
 // Component that renders a sublevel of navigation
-const SubLevel = ({ nodes={}, level=1 }) => (
+const SubLevel = ({ nodes={}, active }) => (
   <ul className="pl-5 list-inside">
     {currentChildren(nodes).map(child => (Object.keys(child).length > 4)
       ? (
@@ -53,20 +51,30 @@ const SubLevel = ({ nodes={}, level=1 }) => (
               items-center
             `}>
               <Link href={child.__slug}>
-                <a title={child.__title} className={`grow pl-2 border-l-2 ${linkClasses} hover:border-secondary`}>
+                <a title={child.__title} className={`
+                  grow pl-2 border-l-2
+                  hover:border-secondary
+                  ${linkClasses}
+                  ${child.__slug === active ? 'text-secondary border-secondary' : 'text-base-content'}
+                `}>
                 <Icon icon="middot" size="24" className="text-secondary inline" />
                   { child?.__linktitle || child.__title }
                 </a>
               </Link>
               <Chevron w={6} m={3}/>
             </summary>
-            <SubLevel nodes={child} level={level+1} />
+            <SubLevel nodes={child} active={active} />
           </details>
         </li>
       ) : (
         <li className='pl-2 flex flex-row items-center'>
           <Link href={child.__slug} title={child.__title}>
-            <a className={`pl-2 border-l-2 ${linkClasses} grow hover:border-secondary`}>
+            <a className={`
+              pl-2 border-l-2
+              grow hover:border-secondary
+              ${linkClasses}
+              ${child.__slug === active ? 'text-secondary border-secondary' : 'text-base-content'}
+            `}>
               <Icon icon="middot" size="24" className="text-secondary inline" />
               {child.__linktitle}
             </a>
@@ -89,14 +97,14 @@ const TopLevel = ({ icon, title, nav, current, slug, hasChildren=false, active }
       items-center
     `}>
       {icon}
-      <Link href={`/${current.__slug}/`}>
-        <a className={`grow ${linkClasses}`}>
-          {title} {active}
+      <Link href={`/${slug}`}>
+        <a className={`grow ${linkClasses} ${slug === active ? 'text-secondary' : ''}`}>
+          {title}
         </a>
       </Link>
     {hasChildren && <Chevron />}
     </summary>
-    {hasChildren && <SubLevel nodes={current} />}
+    {hasChildren && <SubLevel nodes={current} active={active} />}
   </details>
 )
 
@@ -157,7 +165,7 @@ const Navigation = ({ app, active }) => {
       key={key}
       hasChildren={keepClosed.indexOf(key) === -1}
       nav={app.navigation}
-      current={orderBy(app.navigation[key], ['order', 'title'], ['asc', 'asc'])}
+      current={orderBy(app.navigation[key], ['__order', '__title'], ['asc', 'asc'])}
       active={active}
     />)
   }
diff --git a/packages/freesewing.shared/components/wrappers/mdx.js b/packages/freesewing.shared/components/wrappers/mdx.js
index c211568b648..7ae447d0208 100644
--- a/packages/freesewing.shared/components/wrappers/mdx.js
+++ b/packages/freesewing.shared/components/wrappers/mdx.js
@@ -37,7 +37,7 @@ const MdxWrapper = ({mdx, app, components={}}) => {
 
   return (
     <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-lg lg:text-xl">
-      <MdxContent components={allComponents}/>
+      {mdxModule && <MdxContent components={allComponents}/>}
     </div>
   )
 }
diff --git a/packages/freesewing.shared/config/postcss.config.js b/packages/freesewing.shared/config/postcss.config.js
index a5d9ba0ca16..39e4ec28260 100644
--- a/packages/freesewing.shared/config/postcss.config.js
+++ b/packages/freesewing.shared/config/postcss.config.js
@@ -1,8 +1,9 @@
 // Can't seem to make this work as ESM
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: [
+    'tailwindcss/nesting',
+    'tailwindcss',
+    'autoprefixer',
+  ],
 }
 
diff --git a/packages/freesewing.shared/config/tailwind.config.js b/packages/freesewing.shared/config/tailwind.config.js
index 8399d3504fe..dab4b22f8af 100644
--- a/packages/freesewing.shared/config/tailwind.config.js
+++ b/packages/freesewing.shared/config/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
   ],
   plugins: [
     require('daisyui'),
-    //require('@tailwindcss/typography'),
+    require('tailwindcss/nesting'),
   ],
   daisyui: {
     styled: true,
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index 3b7e9294e0d..dc6fcbd3ec7 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/packages/freesewing.shared/styles/globals.css
@@ -3,6 +3,7 @@
 @tailwind utilities;
 
 @import './code.css';
+@import './svg-freesewing-draft.css';
 
 /* Applied styles for common HTML tags */
 @layer components {
diff --git a/packages/freesewing.shared/styles/svg-freesewing-draft.css b/packages/freesewing.shared/styles/svg-freesewing-draft.css
new file mode 100644
index 00000000000..2f7932548de
--- /dev/null
+++ b/packages/freesewing.shared/styles/svg-freesewing-draft.css
@@ -0,0 +1,395 @@
+svg.freesewing.draft {
+  max-width: 100%;
+  /* Reset */
+  path,
+  circle {
+    fill: none;
+    stroke: none;
+  }
+
+  /* Defaults */
+  path,
+  circle {
+    stroke-opacity: 1;
+    stroke-width: 0.7;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Stroke classes */
+  .stroke-xs {
+    stroke-width: 0.1;
+  }
+  .stroke-sm {
+    stroke-width: 0.4;
+  }
+  .stroke-lg {
+    stroke-width: 1.3;
+  }
+  .stroke-xl {
+    stroke-width: 2;
+  }
+  .stroke-xxl {
+    stroke-width: 4;
+  }
+
+  .sa {
+    stroke-dasharray: 1, 3;
+  }
+  .help {
+    stroke-width: 0.6;
+    stroke-dasharray: 15, 5, 2, 5;
+  }
+  .dotted {
+    stroke-dasharray: 0.5, 1;
+  }
+  .dashed {
+    stroke-dasharray: 2, 2;
+  }
+  .lashed {
+    stroke-dasharray: 8, 3;
+  }
+  .hidden {
+    stroke: none !important;
+    fill: none !important;
+  }
+
+  /* Text */
+  text {
+    font-size: 6px;
+    @include title-font;
+    text-anchor: start;
+    font-weight: 400;
+    dominant-baseline: ideographic;
+  }
+  .text-xs {
+    font-size: 4px;
+  }
+  .text-sm {
+    font-size: 5px;
+  }
+  .text-l {
+    font-size: 8px;
+  }
+  .text-xl {
+    font-size: 10px;
+  }
+  .text-xxl {
+    font-size: 13px;
+  }
+
+  .center {
+    text-anchor: middle;
+  }
+  .right {
+    text-anchor: end;
+  }
+
+  .scribble {
+    @include scribble-font;
+  }
+
+  /* Plugins */
+  text.title-nr {
+    font-size: 32px;
+    @include title-font;
+    font-weight: 700;
+    stroke: none;
+  }
+  /* New style for sampled sizes */
+  path.size-3XS,
+  path.size-2XS,
+  path.size-XS,
+  path.size-S,
+  path.size-M {
+    stroke-width: 0.5;
+    stroke-dasharray: 0.25 0.75;
+  }
+  path.made-to-measure,
+  path.size-L,
+  path.size-XL,
+  path.size-2XL,
+  path.size-3XL,
+  path.size-4XL {
+    stroke-width: 0.5;
+  }
+}
+
+svg.freesewing.draft text {
+  fill: currentColor;
+}
+.theme-wrapper.light svg.freesewing.draft {
+  /* Stroke classes */
+  path,
+  circle {
+    stroke: $fc-draft-fabric-light;
+  }
+  .fabric {
+    stroke: $fc-draft-fabric-light;
+  }
+  .lining {
+    stroke: $fc-draft-lining-light;
+  }
+  .interfacing {
+    stroke: $fc-draft-interfacing-light;
+  }
+  .canvas {
+    stroke: $fc-draft-canvas-light;
+  }
+  .various {
+    stroke: $fc-draft-various-light;
+  }
+  .mark {
+    stroke: $fc-draft-mark-light;
+  }
+  .contrast {
+    stroke: $fc-draft-contrast-light;
+  }
+  .note {
+    stroke: $fc-draft-note-light;
+  }
+  /* Fill classes */
+  .fill-fabric {
+    fill: $fc-draft-fabric-light;
+  }
+  .fill-lining {
+    fill: $fc-draft-lining-light;
+  }
+  .fill-interfacing {
+    fill: $fc-draft-interfacing-light;
+  }
+  .fill-canvas {
+    fill: $fc-draft-canvas-light;
+  }
+  .fill-various {
+    fill: $fc-draft-various-light;
+  }
+  .fill-mark {
+    fill: $fc-draft-mark-light;
+  }
+  .fill-contrast {
+    fill: $fc-draft-contrast-light;
+  }
+  .fill-note {
+    fill: $fc-draft-note-light;
+  }
+  .fill-bg {
+    fill: $fc-bg-light;
+  }
+  path.sample-focus {
+    fill: #000;
+  }
+  /* scalebox plugin */
+  path.scalebox.metric {
+    stroke: none;
+    fill: $fc-bg-light;
+  }
+  path.scalebox.imperial {
+    stroke: none;
+    fill: $fc-bg-dark;
+  }
+  path.bartack {
+    stroke: $fc-draft-mark-light;
+  }
+  path.logo {
+    fill: currentColor;
+    stroke: none;
+  }
+  /* New style for sampled sizes */
+  path.made-to-measure {
+    stroke: #212529;
+  }
+  path.size-3XS {
+    stroke: $oc-lime-6;
+  }
+  path.size-2XS {
+    stroke: $oc-orange-6;
+  }
+  path.size-XS {
+    stroke: $oc-grape-6;
+  }
+  path.size-S {
+    stroke: $oc-indigo-6;
+  }
+  path.size-M {
+    stroke: $oc-cyan-6;
+  }
+  path.size-L {
+    stroke: $oc-indigo-6;
+  }
+  path.size-XL {
+    stroke: $oc-grape-6;
+  }
+  path.size-2XL {
+    stroke: $oc-orange-6;
+  }
+  path.size-3XL {
+    stroke: $oc-lime-6;
+  }
+  path.size-4XL {
+    stroke: $oc-teal-6;
+  }
+}
+.theme-wrapper.dark svg.freesewing.draft {
+  /* Stroke classes */
+  path,
+  circle {
+    stroke: $fc-draft-fabric-dark;
+  }
+  .fabric {
+    stroke: $fc-draft-fabric-dark;
+  }
+  .lining {
+    stroke: $fc-draft-lining-dark;
+  }
+  .interfacing {
+    stroke: $fc-draft-interfacing-dark;
+  }
+  .canvas {
+    stroke: $fc-draft-canvas-dark;
+  }
+  .various {
+    stroke: $fc-draft-various-dark;
+  }
+  .mark {
+    stroke: $fc-draft-mark-dark;
+  }
+  .contrast {
+    stroke: $fc-draft-contrast-dark;
+  }
+  .note {
+    stroke: $fc-draft-note-dark;
+  }
+  /* Fill classes */
+  .fill-fabric {
+    fill: $fc-draft-fabric-dark;
+  }
+  .fill-lining {
+    fill: $fc-draft-lining-dark;
+  }
+  .fill-interfacing {
+    fill: $fc-draft-interfacing-dark;
+  }
+  .fill-canvas {
+    fill: $fc-draft-canvas-dark;
+  }
+  .fill-various {
+    fill: $fc-draft-various-dark;
+  }
+  .fill-mark {
+    fill: $fc-draft-mark-dark;
+  }
+  .fill-contrast {
+    fill: $fc-draft-contrast-dark;
+  }
+  .fill-note {
+    fill: $fc-draft-note-dark;
+  }
+  .fill-bg {
+    fill: $fc-bg-dark;
+  }
+  path.sample-focus {
+    fill: #fff;
+  }
+  /* scalebox plugin */
+  path.scalebox.metric {
+    stroke: none;
+    fill: $fc-bg-dark;
+  }
+  path.scalebox.imperial {
+    stroke: none;
+    fill: $fc-bg-light;
+  }
+  path.bartack {
+    stroke: $fc-draft-mark-dark;
+  }
+  path.logo {
+    fill: currentColor;
+    stroke: none;
+  }
+  /* New style for sampled sizes */
+  path.made-to-measure {
+    stroke: #f8f9fa;
+  }
+  path.size-3XS {
+    stroke: $oc-lime-3;
+  }
+  path.size-2XS {
+    stroke: $oc-orange-3;
+  }
+  path.size-XS {
+    stroke: $oc-grape-3;
+  }
+  path.size-S {
+    stroke: $oc-indigo-3;
+  }
+  path.size-M {
+    stroke: $oc-cyan-3;
+  }
+  path.size-L {
+    stroke: $oc-indigo-3;
+  }
+  path.size-XL {
+    stroke: $oc-grape-3;
+  }
+  path.size-2XL {
+    stroke: $oc-orange-3;
+  }
+  path.size-3XL {
+    stroke: $oc-lime-3;
+  }
+  path.size-4XL {
+    stroke: $oc-teal-3;
+  }
+}
+
+/* SVG defs (snippets) are in the shadow DOM */
+g.snippet.notch > circle,
+g.snippet.button > circle,
+g.snippet.buttonhole > path {
+  color: $fc-draft-mark-light;
+}
+g.snippet.bnotch > circle,
+g.snippet.bnotch > path {
+  color: $fc-draft-note-light;
+}
+/* Same for paperless grid, also in shadow DOM */
+rect.grid {
+  stroke-width: 1;
+  stroke: currentColor;
+}
+path.gridline {
+  stroke-linecap: butt;
+  stroke-width: 0.3 !important;
+  stroke-dasharray: none;
+}
+path.gridline.sm {
+  stroke-width: 0.15 !important;
+}
+path.gridline.xs {
+  stroke-width: 0.1 !important;
+}
+path.gridline.metric.sm {
+  stroke-dasharray: 3 1;
+}
+path.gridline.metric.xs {
+  stroke-dasharray: 1 1;
+}
+path.gridline.imperial {
+  stroke-dasharray: 5 5;
+}
+path.gridline.imperial.sm {
+  stroke-dasharray: 2 2;
+}
+.light {
+  rect.grid,
+  path.gridline {
+    color: $oc-gray-5 !important;
+  }
+}
+.dark {
+  rect.grid,
+  path.gridline {
+    color: $oc-gray-6 !important;
+  }
+}
diff --git a/packages/freesewing.shared/themes/light/index.js b/packages/freesewing.shared/themes/light/index.js
index 82317197a44..54c927e947b 100644
--- a/packages/freesewing.shared/themes/light/index.js
+++ b/packages/freesewing.shared/themes/light/index.js
@@ -129,9 +129,9 @@ module.exports = {
     * the highlighted code.
     * The names should (hopefully) speak for themselves
     */
-    '--code-background-color': colors.neutral['100'],
-    '--code-border-color': colors.neutral['300'],
-    '--code-color': colors.neutral['900'],
+    '--code-background-color': colors.neutral['800'],
+    '--code-border-color': colors.neutral['900'],
+    '--code-color': colors.neutral['100'],
     '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
     '--code-border-radius': '0.5rem',
     '--code-border-style': 'solid',
@@ -141,16 +141,16 @@ module.exports = {
     /*
      * These variables are used to style the highlighted tokesn themselves
      */
-    '--code-color-keyword': colors.pink['500'],
+    '--code-color-keyword': colors.pink['400'],
     '--code-font-weight-keyword': 'bold',
-    '--code-color-entity': colors.violet['500'],
+    '--code-color-entity': colors.violet['400'],
     '--code-font-weight-entity': 'bold',
-    '--code-color-constant': colors.lime['600'],
-    '--code-color-string': colors.sky['600'],
+    '--code-color-constant': colors.lime['400'],
+    '--code-color-string': colors.sky['400'],
     '--code-font-style-string': 'italic',
-    '--code-color-variable': colors.indigo['600'],
-    '--code-color-comment': colors.neutral['600'],
-    '--code-color-tag': colors.green['600'],
+    '--code-color-variable': colors.indigo['400'],
+    '--code-color-comment': colors.neutral['400'],
+    '--code-color-tag': colors.green['400'],
     '--code-color-property': 'inherit',
     '--code-font-weight-property': 'bold',