diff --git a/sites/shared/components/designs/linedrawings/benjamin.mjs b/sites/shared/components/designs/linedrawings/benjamin.mjs
new file mode 100644
index 00000000000..663eda366a2
--- /dev/null
+++ b/sites/shared/components/designs/linedrawings/benjamin.mjs
@@ -0,0 +1,51 @@
+import { LineDrawingWrapper } from './shared.mjs'
+
+const strokeScale = 0.5
+
+export const Benjamin = ({
+ className = 'w-64', // CSS classes to apply
+ stroke = 1, // Stroke width to use
+}) => {
+ // Normalize stroke across designs
+ stroke = stroke * strokeScale
+
+ return (
+
+
+
+ )
+}
+
+/*
+ * React component for the front
+ */
+export const BenjaminFront = ({
+ className = 'w-64', // CSS classes to apply
+ stroke = 1, // Stroke width to use
+}) => {
+ // Normalize stroke across designs
+ stroke = stroke * strokeScale
+
+ return (
+
+
+
+ )
+}
+
+/*
+ * SVG elements for the front
+ */
+export const Front = ({ stroke }) => (
+ <>
+
+
+ >
+)
diff --git a/sites/shared/components/designs/linedrawings/bent.mjs b/sites/shared/components/designs/linedrawings/bent.mjs
new file mode 100644
index 00000000000..e3a40f1a82d
--- /dev/null
+++ b/sites/shared/components/designs/linedrawings/bent.mjs
@@ -0,0 +1,98 @@
+import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
+
+const strokeScale = 0.5
+
+export const Bent = ({
+ className = 'w-64', // CSS classes to apply
+ stroke = 1, // Stroke width to use
+}) => {
+ // Normalize stroke across designs
+ stroke = stroke * strokeScale
+
+ return (
+
+
+
+
+ )
+}
+
+/*
+ * React component for the front
+ */
+export const BentFront = ({
+ className = 'w-64', // CSS classes to apply
+ stroke = 1, // Stroke width to use
+}) => {
+ // Normalize stroke across designs
+ stroke = stroke * strokeScale
+
+ return (
+
+
+
+ )
+}
+
+/*
+ * React component for the back
+ */
+export const BentBack = ({
+ className = 'w-64', // CSS classes to apply
+ stroke = 1, // Stroke width to use
+}) => {
+ // Normalize stroke across designs
+ stroke = stroke * strokeScale
+
+ return (
+
+
+
+ )
+}
+
+/*
+ * SVG elements for the front
+ */
+export const Front = ({ stroke }) => (
+ <>
+
+
+
+ >
+)
+
+/*
+ * SVG elements for the back
+ */
+const Back = ({ stroke }) => (
+ <>
+
+
+
+ >
+)
diff --git a/sites/shared/components/designs/linedrawings/bob.mjs b/sites/shared/components/designs/linedrawings/bob.mjs
new file mode 100644
index 00000000000..a7cc9de29f4
--- /dev/null
+++ b/sites/shared/components/designs/linedrawings/bob.mjs
@@ -0,0 +1,88 @@
+import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
+
+const strokeScale = 0.5
+
+export const Bob = ({
+ className = 'w-64', // CSS classes to apply
+ stroke = 1, // Stroke width to use
+}) => {
+ // Normalize stroke across designs
+ stroke = stroke * strokeScale
+
+ return (
+
+
+
+
+ )
+}
+
+/*
+ * React component for the front
+ */
+export const BobFront = ({
+ className = 'w-64', // CSS classes to apply
+ stroke = 1, // Stroke width to use
+}) => {
+ // Normalize stroke across designs
+ stroke = stroke * strokeScale
+
+ return (
+
+
+
+ )
+}
+
+/*
+ * React component for the back
+ */
+export const BobBack = ({
+ className = 'w-64', // CSS classes to apply
+ stroke = 1, // Stroke width to use
+}) => {
+ // Normalize stroke across designs
+ stroke = stroke * strokeScale
+
+ return (
+
+
+
+ )
+}
+
+/*
+ * SVG elements for the front
+ */
+export const Front = ({ stroke }) => (
+ <>
+
+
+ >
+)
+
+/*
+ * SVG elements for the back
+ */
+const Back = ({ stroke }) => (
+ <>
+
+
+ >
+)
diff --git a/sites/shared/components/designs/linedrawings/index.mjs b/sites/shared/components/designs/linedrawings/index.mjs
index bb1b3e441d8..927a1862ccb 100644
--- a/sites/shared/components/designs/linedrawings/index.mjs
+++ b/sites/shared/components/designs/linedrawings/index.mjs
@@ -1,6 +1,9 @@
import { Aaron, AaronFront, AaronBack } from 'shared/components/designs/linedrawings/aaron.mjs'
import { Albert, AlbertFront } from 'shared/components/designs/linedrawings/albert.mjs'
import { Bella, BellaFront, BellaBack } from 'shared/components/designs/linedrawings/bella.mjs'
+import { Benjamin, BenjaminFront } from 'shared/components/designs/linedrawings/benjamin.mjs'
+import { Bent, BentFront, BentBack } from 'shared/components/designs/linedrawings/bent.mjs'
+import { Bob, BobFront, BobBack } from 'shared/components/designs/linedrawings/bob.mjs'
import { Bruce, BruceFront, BruceBack } from 'shared/components/designs/linedrawings/bruce.mjs'
import { Simon, SimonFront, SimonBack } from 'shared/components/designs/linedrawings/simon.mjs'
import { Wahid, WahidFront, WahidBack } from 'shared/components/designs/linedrawings/wahid.mjs'
@@ -9,6 +12,9 @@ export const lineDrawingsFront = {
aaron: AaronFront,
albert: AlbertFront,
bella: BellaFront,
+ benjamin: BenjaminFront,
+ bent: BentFront,
+ bob: BobFront,
bruce: BruceFront,
simon: SimonFront,
wahid: WahidFront,
@@ -17,6 +23,8 @@ export const lineDrawingsFront = {
export const lineDrawingsBack = {
aaron: AaronBack,
bella: BellaBack,
+ bent: BentBack,
+ bob: BobBack,
bruce: BruceBack,
simon: SimonBack,
wahid: WahidBack,
@@ -26,6 +34,9 @@ export const lineDrawings = {
aaron: Aaron,
albert: Albert,
bella: Bella,
+ benjamin: Benjamin,
+ bent: Bent,
+ bob: Bob,
bruce: Bruce,
simon: Simon,
wahid: Wahid,