diff --git a/packages/rendertest/config/index.js b/packages/rendertest/config/index.js
index 02ed5478255..89ae13f163b 100644
--- a/packages/rendertest/config/index.js
+++ b/packages/rendertest/config/index.js
@@ -16,11 +16,13 @@ export default {
   parts: ['test'],
   options: {
     width: { mm: 200, min: 50, max: 500, testIgnore: true },
-    colors: { bool: true },
+    strokeColors: { bool: true },
+    strokeWidths: { bool: true },
+    strokeStyles: { bool: true },
+    strokeCombos: { bool: true },
     circles: { bool: true },
     text: { bool: true },
     snippets: { bool: true },
     macros: { bool: true },
-    widthHd: { bool: true },
   },
 }
diff --git a/packages/rendertest/src/circles.js b/packages/rendertest/src/circles.js
index 5ac2a6a2cfb..bbaa0ff4e24 100644
--- a/packages/rendertest/src/circles.js
+++ b/packages/rendertest/src/circles.js
@@ -1,20 +1,23 @@
 export default function (part) {
-  let { Point, Path, points, paths, store } = part.shorthand()
+  const { Point, Path, points, paths, store } = part.shorthand()
 
   let y = store.get('y')
-  let w = store.get('w')
+  const w = store.get('w')
   let colors = store.get('colors')
 
-  points.crl = new Point(0, y)
-  points.crr = new Point(w, y)
-  paths.circles = new Path().move(points.crl).line(points.crr).attr('data-text', 'circles')
-  y += w / 2
-  for (let i = 1; i < 50; i++) {
-    points['cr' + i] = new Point(w / 2, y)
-      .attr('data-circle', i * (w / 100))
-      .attr('data-circle-class', colors[i % colors.length])
+  y += w/8 + 5
+  for (let i=1; i<6;i++) {
+    points[`circles1-${i}`] = new Point(w/3 - w/6, y)
+      .attr('data-circle', i * (w / 50))
+      .attr('data-circle-class', store.get('colors')[i])
+    points[`circles2-${i}`] = new Point(w/3*2 - w/6, y)
+      .attr('data-circle', i * (w / 50))
+      .attr('data-circle-class', 'fabric ' + store.get('styles')[i] + ' ' + store.get('colors')[i])
+    points[`circles3-${i}`] = new Point(w - w/6, y)
+      .attr('data-circle', i * (w / 50))
+      .attr('data-circle-class', 'fabric ' + store.get('widths')[i] + ' ' + store.get('styles')[i] + ' ' + store.get('colors')[i])
   }
-  y += w / 2
+  y += w/8
   store.set('y', y)
 
   return part
diff --git a/packages/rendertest/src/colors.js b/packages/rendertest/src/colors.js
deleted file mode 100644
index 695b20f5082..00000000000
--- a/packages/rendertest/src/colors.js
+++ /dev/null
@@ -1,71 +0,0 @@
-export default function (part) {
-  let { Point, Path, points, paths, store } = part.shorthand()
-
-  let y = store.get('y')
-  let w = store.get('w')
-  let colors = store.get('colors')
-  let sizes = ['xs', 'sm', '', 'l', 'xl']
-  let utility = ['dotted', 'dashed', 'lashed', 'sa', 'help', 'hidden']
-
-  for (let i = 0; i < utility.length; i++) {
-    y += 15
-    points['l' + i] = new Point(0, y)
-    points['r' + i] = new Point(w, y)
-    paths['heading' + i] = new Path()
-      .move(points['l' + i])
-      .line(points['r' + i])
-      .attr('class', colors[i])
-      .attr('data-text', colors[i])
-    for (let j = 0; j < sizes.length; j++) {
-      y += 10
-      points['sl' + i + j] = new Point(0, y)
-      points['sr' + i + j] = new Point(w, y)
-      paths['size' + i + j] = new Path()
-        .move(points['sl' + i + j])
-        .line(points['sr' + i + j])
-        .attr('class', colors[i])
-        .attr('class', 'stroke-' + sizes[j])
-        .attr('data-text', 'path.' + colors[i] + (sizes[j] === '' ? '' : '.stroke-' + sizes[j]))
-        .attr('data-text-class', 'center')
-    }
-    for (let j = 0; j < utility.length; j++) {
-      y += 10
-      points['ul' + i + j] = new Point(0, y)
-      points['ur' + i + j] = new Point(w, y)
-      paths['util' + i + j] = new Path()
-        .move(points['ul' + i + j])
-        .line(points['ur' + i + j])
-        .attr('class', colors[i])
-        .attr('class', utility[j])
-        .attr('data-text', 'path.' + colors[i] + '.' + utility[j])
-        .attr('data-text-class', 'center')
-    }
-  }
-
-  y += 10
-  points.ftl = new Point(0, y)
-  points.ftr = new Point(w, y)
-  paths.snip = new Path().move(points.ftl).line(points.ftr).attr('data-text', 'fill')
-  y += 15
-  for (let i of colors) {
-    let h = 10
-    points['_bl' + i] = new Point(0, y)
-    points['_br' + i] = new Point(w, y)
-    points['_tr' + i] = new Point(w, y - h)
-    points['_tl' + i] = new Point(0, y - h)
-    paths['box' + i] = new Path()
-      .move(points['_bl' + i])
-      .line(points['_br' + i])
-      .line(points['_tr' + i])
-      .line(points['_tl' + i])
-      .close()
-      .attr('class', i)
-      .attr('class', 'fill-' + i)
-      .attr('data-text', '.fill-' + i)
-    if (i === 'fabric') paths['box' + i].attr('data-text-class', 'fill-mark')
-    y += h * 1.2
-  }
-  store.set('y', y)
-
-  return part
-}
diff --git a/packages/rendertest/src/macros.js b/packages/rendertest/src/macros.js
index 8832997b720..421fb7a6ab6 100644
--- a/packages/rendertest/src/macros.js
+++ b/packages/rendertest/src/macros.js
@@ -1,33 +1,46 @@
 export default function (part) {
-  let { macro, Point, Path, points, paths, store } = part.shorthand()
+  const { macro, Point, Path, points, paths, store } = part.shorthand()
 
   let y = store.get('y')
-  let w = store.get('w')
+  const w = store.get('w')
   y += 10
-  points.ml = new Point(0, y)
-  points.mr = new Point(w, y)
-  paths.macros = new Path().move(points.ml).line(points.mr).attr('data-text', 'macros')
+  points.macros = new Point(0,y)
+    .attr('data-text', 'Macros')
+    .attr('data-text-class', 'text-lg bold')
 
-  y += 40
+  // title
+  y += 60
   macro('title', {
     at: new Point(w / 2, y),
     nr: 5,
     title: 'title',
   })
 
+  // grainline
   y += 40
   macro('grainline', {
     from: new Point(0, y),
     to: new Point(w, y),
   })
 
-  y += 20
+  // cutonfold
+  y += 35
   macro('cutonfold', {
-    from: new Point(w, y),
-    to: new Point(0, y),
+    from: new Point(0, y),
+    to: new Point(w, y),
   })
 
-  y += 70
+  // cutonfold * grainline
+  y += 30
+  macro('cutonfold', {
+    from: new Point(0, y),
+    to: new Point(w, y),
+    grainline: true,
+    prefix: 'combo'
+  })
+
+  // hd, vd, ld, and pd
+  y += 30
   points.dimf = new Point(20, y)
   points.dimt = new Point(w - 20, y + 120)
   points.dimv = new Point(20, y + 80)
@@ -55,10 +68,18 @@ export default function (part) {
     d: 10,
   })
 
+  // scalebox
   y += 170
   macro('scalebox', {
     at: new Point(w / 2, y),
   })
+
+  // miniscale
+  y += 45
+  macro('miniscale', {
+    at: new Point(w / 2, y),
+  })
+
   store.set('y', y)
 
   return part
diff --git a/packages/rendertest/src/snippets.js b/packages/rendertest/src/snippets.js
index 3d4f196b12c..c9dd112ad71 100644
--- a/packages/rendertest/src/snippets.js
+++ b/packages/rendertest/src/snippets.js
@@ -4,40 +4,44 @@ export default function (part) {
   let y = store.get('y')
   let w = store.get('w')
 
-  let snips = {
-    logo: 25,
+  const snips = {
+    logo: 75,
     notch: 15,
     bnotch: 15,
     button: 15,
-    buttonhole: 15,
+    buttonhole: 25,
+    "buttonhole-start": 15,
+    "buttonhole-end": 25,
+    "snap-socket": 25,
+    "snap-stud": 15,
   }
-  y += 10
-  points.tl = new Point(0, y)
-  points.tr = new Point(w, y)
-  paths.texts = new Path().move(points.tl).line(points.tr).attr('data-text', 'snippets')
+  y += 20
+  points.snippets = new Point(0,y)
+    .attr('data-text', 'Snippets')
+    .attr('data-text-class', 'text-lg bold')
   y += 10
   points['sl1'] = new Point(w * 0.25, y)
   points['sl2'] = new Point(w * 0.5, y)
   points['sl3'] = new Point(w * 0.75, y)
   points['sl1']
     .attr('data-text', 'data-scale: 1\ndata-rotate: 0')
-    .attr('data-text-class', 'center text-sm')
-    .attr('data-text-lineheight', 5)
+    .attr('data-text-class', 'center text')
+    .attr('data-text-lineheight', 7)
   points['sl2']
     .attr('data-text', 'data-scale: 1.25\ndata-rotate: 0')
-    .attr('data-text-class', 'center text-sm')
-    .attr('data-text-lineheight', 5)
+    .attr('data-text-class', 'center text')
+    .attr('data-text-lineheight', 7)
   points['sl3']
     .attr('data-text', 'data-scale: 0.75\ndata-rotate: 90')
-    .attr('data-text-class', 'center text-sm')
-    .attr('data-text-lineheight', 5)
+    .attr('data-text-class', 'center text')
+    .attr('data-text-lineheight', 7)
   y += 55
   for (let i in snips) {
     points['snt' + i] = new Point(0, y)
     points['snt' + i].attr('data-text', i)
-    points['sn1' + i] = new Point(w * 0.25, y)
-    points['sn2' + i] = new Point(w * 0.5, y)
-    points['sn3' + i] = new Point(w * 0.75, y)
+    points['sn1' + i] = new Point(w * 0.3, y)
+    points['sn2' + i] = new Point(w * 0.55, y)
+    points['sn3' + i] = new Point(w * 0.8, y)
     snippets['sn1' + i] = new Snippet(i, points['sn1' + i])
     snippets['sn2' + i] = new Snippet(i, points['sn2' + i])
     snippets['sn2' + i].attr('data-scale', 1.25)
diff --git a/packages/rendertest/src/stroke-colors.js b/packages/rendertest/src/stroke-colors.js
new file mode 100644
index 00000000000..82a3845662d
--- /dev/null
+++ b/packages/rendertest/src/stroke-colors.js
@@ -0,0 +1,27 @@
+export default function (part) {
+  const { Point, Path, points, paths, store } = part.shorthand()
+
+  let y = store.get('y')
+  const w = store.get('w')
+
+  // Stroke colors
+  y += 10
+  points.colors = new Point(0,y)
+    .attr('data-text', 'Stroke colors')
+    .attr('data-text-class', 'text-lg bold')
+  for (const color of store.get('colors').sort()) {
+    y += 12
+    points[`l-${color}`] = new Point(0,y)
+    points[`r-${color}`] = new Point(w,y)
+    paths[`color${color}`] = new Path()
+      .move(points[`l-${color}`])
+      .line(points[`r-${color}`])
+      .attr('class', color)
+      .attr('data-text', `.${color}`)
+  }
+
+  // Update y
+  store.set('y', y)
+
+  return part
+}
diff --git a/packages/rendertest/src/stroke-combos.js b/packages/rendertest/src/stroke-combos.js
new file mode 100644
index 00000000000..bd1b73e42e9
--- /dev/null
+++ b/packages/rendertest/src/stroke-combos.js
@@ -0,0 +1,35 @@
+export default function (part) {
+  const { Point, Path, points, paths, store } = part.shorthand()
+
+  let y = store.get('y')
+  const w = store.get('w')
+
+  // Stroke combos
+  y += 25
+  points.combos = new Point(0,y)
+    .attr('data-text', 'Combining stroke classes')
+    .attr('data-text-class', 'text-lg bold')
+
+  y += 12
+  points.combo1l = new Point(0,y)
+  points.combo1r = new Point(w,y)
+  paths.combo1 = new Path()
+    .move(points.combo1l)
+    .line(points.combo1r)
+    .attr('class', 'lining sa')
+    .attr('data-text', `.lining.sa`)
+
+  y += 12
+  points.combo2l = new Point(0,y)
+  points.combo2r = new Point(w,y)
+  paths.combo2 = new Path()
+    .move(points.combo2l)
+    .line(points.combo2r)
+    .attr('class', 'stroke-lg various help')
+    .attr('data-text', `.stroke-lg various help`)
+
+  // Update y
+  store.set('y', y)
+
+  return part
+}
diff --git a/packages/rendertest/src/stroke-styles.js b/packages/rendertest/src/stroke-styles.js
new file mode 100644
index 00000000000..615ba27c5df
--- /dev/null
+++ b/packages/rendertest/src/stroke-styles.js
@@ -0,0 +1,27 @@
+export default function (part) {
+  const { Point, Path, points, paths, store } = part.shorthand()
+
+  let y = store.get('y')
+  const w = store.get('w')
+
+  // Stroke styles
+  y += 25
+  points.styles = new Point(0,y)
+    .attr('data-text', 'Stroke styles')
+    .attr('data-text-class', 'text-lg bold')
+  for (const style of store.get('styles')) {
+    y += 12
+    points[`l-${style}`] = new Point(0,y)
+    points[`r-${style}`] = new Point(w,y)
+    paths[`color${style}`] = new Path()
+      .move(points[`l-${style}`])
+      .line(points[`r-${style}`])
+      .attr('class', `fabric ${style}`)
+      .attr('data-text', style === 'default-style' ? '' : `.${style}`)
+  }
+
+  // Update y
+  store.set('y', y)
+
+  return part
+}
diff --git a/packages/rendertest/src/stroke-widths.js b/packages/rendertest/src/stroke-widths.js
new file mode 100644
index 00000000000..b760ba31d88
--- /dev/null
+++ b/packages/rendertest/src/stroke-widths.js
@@ -0,0 +1,27 @@
+export default function (part) {
+  const { Point, Path, points, paths, store } = part.shorthand()
+
+  let y = store.get('y')
+  const w = store.get('w')
+
+  // Stroke widths
+  y += 25
+  points.widths = new Point(0,y)
+    .attr('data-text', 'Stroke widths')
+    .attr('data-text-class', 'text-lg bold')
+  for (const width of store.get('widths')) {
+    y += 12
+    points[`l-${width}`] = new Point(0,y)
+    points[`r-${width}`] = new Point(w,y)
+    paths[`color${width}`] = new Path()
+      .move(points[`l-${width}`])
+      .line(points[`r-${width}`])
+      .attr('class', `fabric ${width}`)
+      .attr('data-text', width === 'default-width' ? '' : `.${width}`)
+  }
+
+  // Update y
+  store.set('y', y)
+
+  return part
+}
diff --git a/packages/rendertest/src/test.js b/packages/rendertest/src/test.js
index 800d9e4e8dc..d5d4967cc56 100644
--- a/packages/rendertest/src/test.js
+++ b/packages/rendertest/src/test.js
@@ -1,21 +1,49 @@
-import colors from './colors'
+import strokeColors from './stroke-colors'
+import strokeWidths from './stroke-widths'
+import strokeStyles from './stroke-styles'
+import strokeCombos from './stroke-combos'
 import circles from './circles'
 import text from './text'
 import snippets from './snippets'
 import macros from './macros'
 
 export default function (part) {
-  let { macro, store, options, Path, paths, Point } = part.shorthand()
+  const { macro, store, options, Path, paths, Point } = part.shorthand()
+
+  // Keep things in store
   store.set('y', 0)
   store.set('w', options.width)
-  let color = ['fabric', 'lining', 'interfacing', 'canvas', 'various', 'mark', 'contrast', 'note']
-  store.set('colors', color)
-  if (options.widthHd)
-    macro('hd', {
-      from: new Point(0, 0),
-      to: new Point(options.width, 0),
-    })
-  if (options.colors) colors(part)
+  store.set('colors', [
+    'fabric',
+    'lining',
+    'interfacing',
+    'canvas',
+    'various',
+    'mark',
+    'contrast',
+    'note',
+  ])
+  store.set('widths', [
+    'stroke-xs',
+    'stroke-sm',
+    'default-width',
+    'stroke-lg',
+    'stroke-xl',
+    'stroke-2xl',
+  ])
+  store.set('styles', [
+    'default-style',
+    'dotted',
+    'dashed',
+    'lashed',
+    'sa',
+    'help',
+    'hidden',
+  ])
+  if (options.strokeColors) strokeColors(part)
+  if (options.strokeWidths) strokeWidths(part)
+  if (options.strokeStyles) strokeStyles(part)
+  if (options.strokeCombos) strokeCombos(part)
   if (options.circles) circles(part)
   if (options.text) text(part)
   if (options.snippets) snippets(part)
@@ -23,8 +51,8 @@ export default function (part) {
 
   // Make sure no text is cut off
   paths.box = new Path()
-    .move(new Point(0, -10))
-    .line(new Point(store.get('w'), store.get('y')))
+    .move(new Point(-10, -10))
+    .line(new Point(store.get('w')+10, store.get('y')))
     .attr('class', 'hidden')
 
   return part
diff --git a/packages/rendertest/src/text.js b/packages/rendertest/src/text.js
index 2fe8316c8d5..1bb7f3d9389 100644
--- a/packages/rendertest/src/text.js
+++ b/packages/rendertest/src/text.js
@@ -1,14 +1,41 @@
 export default function (part) {
-  let { Point, Path, points, paths, store } = part.shorthand()
+  const { Point, Path, points, paths, store } = part.shorthand()
 
   let y = store.get('y')
-  let w = store.get('w')
-  let text = ['xs', 'sm', '', 'l', 'xl', 'xxl']
+  const w = store.get('w')
+
+  // Text sizes
+  y += 15
+  points.textsize = new Point(0,y)
+    .attr('data-text', 'Text sizes')
+    .attr('data-text-class', 'text-lg bold')
+  const sizes = {
+    'text-xs': 3,
+    'text-sm': 5,
+    'text': 8,
+    'text-lg': 10,
+    'text-xl': 14,
+    'text-2xl': 22,
+    'text-3xl': 28,
+    'text-4xl': 42,
+  }
+  for (const [size, shift] of Object.entries(sizes)) {
+    y += shift
+    points['t' + size] = new Point(0, y)
+      .attr('data-text', size)
+      .attr('data-text-class', `text ${size}`)
+  }
+  // Text alignment
+  y += 15
+  points.textalign = new Point(0,y)
+    .attr('data-text', 'Text alignment')
+    .attr('data-text-class', 'text-lg bold')
   y += 10
   points.tl = new Point(0, y)
   points.tr = new Point(w, y)
   paths.text = new Path().move(points.tl).line(points.tr).attr('data-text', 'text')
-  y += 10
+
+  // Align center
   points.tlc = new Point(0, y)
   points.trc = new Point(w, y)
   paths.textc = new Path()
@@ -16,7 +43,7 @@ export default function (part) {
     .line(points.trc)
     .attr('data-text', 'text.center')
     .attr('data-text-class', 'center')
-  y += 10
+  // Align right
   points.tlr = new Point(0, y)
   points.trr = new Point(w, y)
   paths.textr = new Path()
@@ -24,12 +51,21 @@ export default function (part) {
     .line(points.trr)
     .attr('data-text', 'text.right')
     .attr('data-text-class', 'right')
-  for (let i = 0; i < text.length; i++) {
-    y += 15
-    points['t' + i] = new Point(0, y)
-      .attr('data-text', 'text' + (text[i] === '' ? '' : '.text-' + text[i]))
-      .attr('data-text-class', 'text-' + text[i])
-  }
+
+  // Text style
+  y += 20
+  points.textstyle = new Point(0,y)
+    .attr('data-text', 'Text style')
+    .attr('data-text-class', 'text-lg bold')
+  y += 10
+  points.titalic = new Point(0, y)
+    .attr('data-text', '.italic')
+    .attr('data-text-class', 'italic')
+  y += 10
+  points.tbold = new Point(0, y)
+    .attr('data-text', '.bold')
+    .attr('data-text-class', 'bold')
+
   store.set('y', y)
 
   return part