diff --git a/packages/freesewing.shared/components/mdx/example.js b/packages/freesewing.shared/components/mdx/example.js
index 940af054e2e..367c518a925 100644
--- a/packages/freesewing.shared/components/mdx/example.js
+++ b/packages/freesewing.shared/components/mdx/example.js
@@ -4,6 +4,7 @@ import rendertest from '@freesewing/rendertest'
 import tutorial from '@freesewing/tutorial'
 import Draft from '@freesewing/components/Draft'
 import Icon from 'shared/components/icon'
+import Pattern from '../../../react-pattern/dist/index.mjs'
 //import Design from '../Workbench/Design'
 //
 const Design = props => <p>TODO: Design</p>
@@ -84,7 +85,7 @@ const Example = ({
           </div>
         </div>
         <div className="shadow rounded border border-base-200">
-          <Draft {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
+          <Pattern {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
         </div>
       </div>
       <figcaption className="text-base-content text-center text-base lg:text-lg italic">{children}</figcaption>
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index 658e5b15c0c..823761f710f 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/packages/freesewing.shared/styles/globals.css
@@ -3,7 +3,6 @@
 @tailwind utilities;
 
 @import './code.css';
-@import './svg-freesewing-draft.css';
 
 @layer components {
 
@@ -31,22 +30,22 @@
   .fs-stroke-mark        { stroke: var(--pattern-mark); }
   .fs-stroke-contrast    { stroke: var(--pattern-contrast); }
   .fs-stroke-note        { stroke: var(--pattern-note); }
-  svg.freesewing.draft path.fabric,
-  svg.freesewing.draft circle.fabric { @apply fs-stroke-fabric }
-  svg.freesewing.draft path.lining,
-  svg.freesewing.draft circle.lining { @apply fs-stroke-lining }
-  svg.freesewing.draft path.interfacing,
-  svg.freesewing.draft circle.interfacing { @apply fs-stroke-interfacing }
-  svg.freesewing.draft path.canvas,
-  svg.freesewing.draft circle.canvas { @apply fs-stroke-canvas }
-  svg.freesewing.draft path.various,
-  svg.freesewing.draft circle.various { @apply fs-stroke-various }
-  svg.freesewing.draft path.mark,
-  svg.freesewing.draft circle.mark { @apply fs-stroke-mark }
-  svg.freesewing.draft path.contrast,
-  svg.freesewing.draft circle.contrast { @apply fs-stroke-contrast }
-  svg.freesewing.draft path.note,
-  svg.freesewing.draft circle.note { @apply fs-stroke-note }
+  svg.freesewing.pattern path.fabric,
+  svg.freesewing.pattern circle.fabric { @apply fs-stroke-fabric }
+  svg.freesewing.pattern path.lining,
+  svg.freesewing.pattern circle.lining { @apply fs-stroke-lining }
+  svg.freesewing.pattern path.interfacing,
+  svg.freesewing.pattern circle.interfacing { @apply fs-stroke-interfacing }
+  svg.freesewing.pattern path.canvas,
+  svg.freesewing.pattern circle.canvas { @apply fs-stroke-canvas }
+  svg.freesewing.pattern path.various,
+  svg.freesewing.pattern circle.various { @apply fs-stroke-various }
+  svg.freesewing.pattern path.mark,
+  svg.freesewing.pattern circle.mark { @apply fs-stroke-mark }
+  svg.freesewing.pattern path.contrast,
+  svg.freesewing.pattern circle.contrast { @apply fs-stroke-contrast }
+  svg.freesewing.pattern path.note,
+  svg.freesewing.pattern circle.note { @apply fs-stroke-note }
   .fs-fill-fabric      { fill: var(--pattern-fabric); }
   .fs-fill-lining      { fill: var(--pattern-lining); }
   .fs-fill-interfacing { fill: var(--pattern-interfacing); }
@@ -55,47 +54,47 @@
   .fs-fill-mark        { fill: var(--pattern-mark); }
   .fs-fill-contrast    { fill: var(--pattern-contrast); }
   .fs-fill-note        { fill: var(--pattern-note); }
-  svg.freesewing.draft path.fill-fabric,
-  svg.freesewing.draft text.fill-fabric,
-  svg.freesewing.draft tspan.fill-fabric,
-  svg.freesewing.draft circle.fill-fabric { @apply fs-fill-fabric }
-  svg.freesewing.draft text.fill-lining,
-  svg.freesewing.draft tspan.fill-lining,
-  svg.freesewing.draft path.fill-lining,
-  svg.freesewing.draft circle.fill-lining { @apply fs-fill-lining }
-  svg.freesewing.draft text.fill-interfacing,
-  svg.freesewing.draft tspan.fill-interfacing,
-  svg.freesewing.draft path.fill-interfacing,
-  svg.freesewing.draft circle.fill-interfacing { @apply fs-fill-interfacing }
-  svg.freesewing.draft text.fill-canvas,
-  svg.freesewing.draft tspan.fill-canvas,
-  svg.freesewing.draft path.fill-canvas,
-  svg.freesewing.draft circle.fill-canvas { @apply fs-fill-canvas }
-  svg.freesewing.draft text.fill-various,
-  svg.freesewing.draft tspan.fill-various,
-  svg.freesewing.draft path.fill-various,
-  svg.freesewing.draft circle.fill-various { @apply fs-fill-various }
-  svg.freesewing.draft path.fill-mark,
-  svg.freesewing.draft text.fill-mark,
-  svg.freesewing.draft tspan.fill-mark,
-  svg.freesewing.draft circle.fill-mark { @apply fs-fill-mark }
-  svg.freesewing.draft text.fill-contrast,
-  svg.freesewing.draft tspan.fill-contrast,
-  svg.freesewing.draft path.fill-contrast,
-  svg.freesewing.draft circle.fill-contrast { @apply fs-fill-contrast }
-  svg.freesewing.draft text.fill-note,
-  svg.freesewing.draft tspan.fill-note,
-  svg.freesewing.draft path.fill-note,
-  svg.freesewing.draft circle.fill-note { @apply fs-fill-note }
+  svg.freesewing.pattern path.fill-fabric,
+  svg.freesewing.pattern text.fill-fabric,
+  svg.freesewing.pattern tspan.fill-fabric,
+  svg.freesewing.pattern circle.fill-fabric { @apply fs-fill-fabric }
+  svg.freesewing.pattern text.fill-lining,
+  svg.freesewing.pattern tspan.fill-lining,
+  svg.freesewing.pattern path.fill-lining,
+  svg.freesewing.pattern circle.fill-lining { @apply fs-fill-lining }
+  svg.freesewing.pattern text.fill-interfacing,
+  svg.freesewing.pattern tspan.fill-interfacing,
+  svg.freesewing.pattern path.fill-interfacing,
+  svg.freesewing.pattern circle.fill-interfacing { @apply fs-fill-interfacing }
+  svg.freesewing.pattern text.fill-canvas,
+  svg.freesewing.pattern tspan.fill-canvas,
+  svg.freesewing.pattern path.fill-canvas,
+  svg.freesewing.pattern circle.fill-canvas { @apply fs-fill-canvas }
+  svg.freesewing.pattern text.fill-various,
+  svg.freesewing.pattern tspan.fill-various,
+  svg.freesewing.pattern path.fill-various,
+  svg.freesewing.pattern circle.fill-various { @apply fs-fill-various }
+  svg.freesewing.pattern path.fill-mark,
+  svg.freesewing.pattern text.fill-mark,
+  svg.freesewing.pattern tspan.fill-mark,
+  svg.freesewing.pattern circle.fill-mark { @apply fs-fill-mark }
+  svg.freesewing.pattern text.fill-contrast,
+  svg.freesewing.pattern tspan.fill-contrast,
+  svg.freesewing.pattern path.fill-contrast,
+  svg.freesewing.pattern circle.fill-contrast { @apply fs-fill-contrast }
+  svg.freesewing.pattern text.fill-note,
+  svg.freesewing.pattern tspan.fill-note,
+  svg.freesewing.pattern path.fill-note,
+  svg.freesewing.pattern circle.fill-note { @apply fs-fill-note }
 
   .fs-fill-bg { fill: var(--pattern-bg); }
   .fs-fill-current { fill: currentColor; }
-  svg.freesewing.draft .fill-bg { @apply fs-fill-bg }
-  svg.freesewing.draft .fill-current { @apply fs-fill-current }
+  svg.freesewing.pattern .fill-bg { @apply fs-fill-bg }
+  svg.freesewing.pattern .fill-current { @apply fs-fill-current }
 }
 
 
-
+/* Style for navigation */
 details { user-select: none; }
 details > summary > svg.details-toggle {
   transform: rotate(90deg);
@@ -114,4 +113,6 @@ summary::-webkit-details-marker {
   display: none;
 }
 
+/* Style for patterns */
+@import './svg-freesewing-draft.css';
 
diff --git a/packages/freesewing.shared/styles/svg-freesewing-draft.css b/packages/freesewing.shared/styles/svg-freesewing-draft.css
index 2f7932548de..099b126518e 100644
--- a/packages/freesewing.shared/styles/svg-freesewing-draft.css
+++ b/packages/freesewing.shared/styles/svg-freesewing-draft.css
@@ -1,101 +1,58 @@
-svg.freesewing.draft {
+svg.freesewing.pattern {
+
+  /* Don't let the SVG surpass the parent container */
   max-width: 100%;
+
   /* Reset */
-  path,
-  circle {
-    fill: none;
-    stroke: none;
-  }
+  path, circle { fill: none; stroke: none; }
 
   /* Defaults */
   path,
   circle {
     stroke-opacity: 1;
-    stroke-width: 0.7;
+    stroke-width: calc(var(--pattern-stroke) * var(--pattern-scale));
     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;
-  }
+  /* Stroke width utility classes */
+  .stroke-xs { stroke-width: calc(var(--pattern-stroke-xs) * var(--pattern-scale)); }
+  .stroke-sm { stroke-width: calc(var(--pattern-stroke-sm) * var(--pattern-scale)); }
+  .stroke-lg { stroke-width: calc(var(--pattern-stroke-lg) * var(--pattern-scale)); }
+  .stroke-xl { stroke-width: calc(var(--pattern-stroke-xl) * var(--pattern-scale)); }
+  .stroke-2xl { stroke-width: calc(var(--pattern-stroke-2xl) * var(--pattern-scale)); }
 
-  .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;
-  }
+  /* Stroke dasharray utility classes */
+  .sa { stroke-dasharray: 1, 3; }
+  .help { stroke-dasharray: 15, 5, 2, 5; }
+  .dotted { stroke-dasharray: 0.5, 1; }
+  .dashed { stroke-dasharray: 2, 2; }
+  .lashed { stroke-dasharray: 8, 3; }
+
+  /* Hidden */
+  .hidden { stroke: none !important; fill: none !important; }
 
   /* Text */
   text {
-    font-size: 6px;
-    @include title-font;
+    font-size: calc(var(--pattern-text) * var(--pattern-scale));
     text-anchor: start;
-    font-weight: 400;
+    font-weight: normal;
+    fill: currentColor;
     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;
-  }
+  .text-xs { font-size: calc(var(--pattern-text-xs) * var(--pattern-scale)); }
+  .text-sm { font-size: calc(var(--pattern-text-sm) * var(--pattern-scale)); }
+  .text-lg { font-size: calc(var(--pattern-text-lg) * var(--pattern-scale)); }
+  .text-xl { font-size: calc(var(--pattern-text-xl) * var(--pattern-scale)); }
+  .text-2xl { font-size: calc(var(--pattern-text-2xl) * var(--pattern-scale)); }
+  .text-3xl { font-size: calc(var(--pattern-text-3xl) * var(--pattern-scale)); }
+  .text-4xl { font-size: calc(var(--pattern-text-4xl) * var(--pattern-scale)); }
+  .text-5xl { font-size: calc(var(--pattern-text-5xl) * var(--pattern-scale)); }
+  .bold { font-weight: bold; }
 
-  .center {
-    text-anchor: middle;
-  }
-  .right {
-    text-anchor: end;
-  }
+  .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,
@@ -115,244 +72,20 @@ svg.freesewing.draft {
   }
 }
 
-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;
-  }
-}
+/* Styling the shadow DOM is hard to do
+ * This is for styling FreeSewing snippets
+ * TODO: Update snippets to use inline styles with CSS vars
+ */
+g#buttonhole path.note,
+g#notch circle.note,
+g#bnotch path.note,
+g#bnotch circle.note {
+  stroke: var(--pattern-note);
+  fill: none;
+ }
+g#notch circle.fill-note,
+g#bnotch circle.fill-note { fill: var(--pattern-note); }
 
-/* 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;
@@ -381,15 +114,3 @@ path.gridline.imperial {
 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/dark/index.js b/packages/freesewing.shared/themes/dark/index.js
index 1bb621d1e59..741f69a716c 100644
--- a/packages/freesewing.shared/themes/dark/index.js
+++ b/packages/freesewing.shared/themes/dark/index.js
@@ -61,4 +61,11 @@ module.exports = {
   '--pattern-contrast': colors.pink['600'],
   '--pattern-note': colors.violet['600'],
 
+  '--pattern-scale': 1,
+  '--pattern-stroke-xs': "0.2",
+  '--pattern-stroke-sm': "0.4",
+  '--pattern-stroke': "0.7",
+  '--pattern-stroke-lg': "1.3",
+  '--pattern-stroke-xl': "2",
+  '--pattern-stroke-xxl': "4",
 }
diff --git a/packages/freesewing.shared/themes/hax0r/index.js b/packages/freesewing.shared/themes/hax0r/index.js
index a5fdf6486a2..065c380c703 100644
--- a/packages/freesewing.shared/themes/hax0r/index.js
+++ b/packages/freesewing.shared/themes/hax0r/index.js
@@ -70,4 +70,11 @@ module.exports = {
   '--pattern-contrast': colors.pink['500'],
   '--pattern-note': colors.violet['500'],
 
+  '--pattern-scale': 1,
+  '--pattern-stroke-xs': "0.2",
+  '--pattern-stroke-sm': "0.4",
+  '--pattern-stroke': "0.7",
+  '--pattern-stroke-lg': "1.3",
+  '--pattern-stroke-xl': "2",
+  '--pattern-stroke-xxl': "4",
 }
diff --git a/packages/freesewing.shared/themes/lgbtq/index.js b/packages/freesewing.shared/themes/lgbtq/index.js
index c7aae0ed8d0..21a19ad1dbf 100644
--- a/packages/freesewing.shared/themes/lgbtq/index.js
+++ b/packages/freesewing.shared/themes/lgbtq/index.js
@@ -60,5 +60,13 @@ module.exports = {
   '--pattern-mark': colors.blue['500'],
   '--pattern-contrast': colors.pink['500'],
   '--pattern-note': colors.violet['500'],
+
+  '--pattern-scale': 1,
+  '--pattern-stroke-xs': "0.2",
+  '--pattern-stroke-sm': "0.4",
+  '--pattern-stroke': "0.7",
+  '--pattern-stroke-lg': "1.3",
+  '--pattern-stroke-xl': "2",
+  '--pattern-stroke-xxl': "4",
 }
 
diff --git a/packages/freesewing.shared/themes/light/index.js b/packages/freesewing.shared/themes/light/index.js
index 23f199c4958..093af234198 100644
--- a/packages/freesewing.shared/themes/light/index.js
+++ b/packages/freesewing.shared/themes/light/index.js
@@ -152,7 +152,7 @@ module.exports = {
   '--code-color-property': 'inherit',
   '--code-font-weight-property': 'bold',
 
-  /* FREESEWING PATTERN COLORS
+  /* FREESEWING PATTERN THEMEING
   *
   * These are variables to style FreeSewing SVG output (drafts, examples, and so on)
   */
@@ -176,4 +176,36 @@ module.exports = {
   // Color for noting things on a pattern
   '--pattern-note': colors.violet['500'],
 
+  // Pattern xs text size
+  '--pattern-text-xs': '0.2rem',
+  // Pattern sm text size
+  '--pattern-text-sm': '0.3rem',
+  // Pattern default text size
+  '--pattern-text': '0.4rem',
+  // Pattern lg text size
+  '--pattern-text-lg': '0.6rem',
+  // Pattern xl text size
+  '--pattern-text-xl': '0.8rem',
+  // Pattern 2xl text size
+  '--pattern-text-2xl': '1.5rem',
+  // Pattern 3xl text size
+  '--pattern-text-3xl': '2rem',
+  // Pattern 4xl text size
+  '--pattern-text-4xl': '3rem',
+
+  // Pattern overal scale for strokes and text sizes
+  '--pattern-scale': '1',
+  // Pattern xs stroke width
+  '--pattern-stroke-xs': "0.2px",
+  // Pattern sm stroke width
+  '--pattern-stroke-sm': "0.4px",
+  // Pattern default stroke width
+  '--pattern-stroke': "0.7px",
+  // Pattern lg stroke width
+  '--pattern-stroke-lg': "1.3px",
+  // Pattern xl stroke width
+  '--pattern-stroke-xl': "2px",
+  // Pattern xxl stroke width
+  '--pattern-stroke-2xl': "4px",
+
 }
diff --git a/packages/freesewing.shared/themes/trans/index.js b/packages/freesewing.shared/themes/trans/index.js
index c7aae0ed8d0..21a19ad1dbf 100644
--- a/packages/freesewing.shared/themes/trans/index.js
+++ b/packages/freesewing.shared/themes/trans/index.js
@@ -60,5 +60,13 @@ module.exports = {
   '--pattern-mark': colors.blue['500'],
   '--pattern-contrast': colors.pink['500'],
   '--pattern-note': colors.violet['500'],
+
+  '--pattern-scale': 1,
+  '--pattern-stroke-xs': "0.2",
+  '--pattern-stroke-sm': "0.4",
+  '--pattern-stroke': "0.7",
+  '--pattern-stroke-lg': "1.3",
+  '--pattern-stroke-xl': "2",
+  '--pattern-stroke-xxl': "4",
 }