diff --git a/docs/static/hardware/.gitignore b/docs/static/hardware/.gitignore
new file mode 100644
index 00000000..3f724c25
--- /dev/null
+++ b/docs/static/hardware/.gitignore
@@ -0,0 +1,4 @@
+# don't check in until OSS request is approved
+neopixel-black-60-vert.svg 
+sparkfun-*
+raspberrypi-*
\ No newline at end of file
diff --git a/docs/static/hardware/arduino-zero-outline.svg b/docs/static/hardware/arduino-zero-outline.svg
new file mode 100644
index 00000000..b5aef4d8
--- /dev/null
+++ b/docs/static/hardware/arduino-zero-outline.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 1000 762" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="pattern-1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
+      <path d="M 0 0 L 50 0 L 50 100 L 0 100 Z" style="fill: black;"/>
+    </pattern>
+  </defs>
+  <path d="M 35.991 584.105 L 34.935 502.071 L 13.194 501.812 C 10.347 491.977 2.323 491.459 2.323 491.459 L 2.323 401.648 C 13.193 401.39 12.677 389.743 12.677 389.743 L 31.053 389.743 L 30.535 276.897 L 10.605 276.638 C 9.57 267.579 2.582 266.803 2.582 266.803 L 2.323 175.18 C 10.346 173.109 10.088 164.309 10.088 164.309 L 30.004 164.836 L 28.286 17.052 C 28.286 17.052 27.984 3.546 40.07 3.236 C 52.156 2.926 940.008 1.377 940.008 1.377 L 961.701 22.759 L 962.011 185.455 L 997.649 222.022 L 999.818 688.106 L 965.109 722.814 L 964.8 747.296 C 964.8 747.296 965.419 756.903 955.813 758.142 C 946.207 759.381 49.987 760.002 49.987 760.002 C 49.987 760.002 41 759.692 38.831 751.015 L 38.211 715.687 L 13.639 715.75 L 12.145 584.429 L 35.991 584.105 Z" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255); stroke-width: 5; stroke-linejoin: round; fill-rule: nonzero; fill-opacity: 1;"/>
+</svg>
\ No newline at end of file
diff --git a/docs/static/hardware/arduino-zero.png b/docs/static/hardware/arduino-zero.png
new file mode 100644
index 00000000..a88dbfc0
Binary files /dev/null and b/docs/static/hardware/arduino-zero.png differ
diff --git a/docs/static/hardware/speaker.svg b/docs/static/hardware/speaker.svg
new file mode 100644
index 00000000..6a03638b
--- /dev/null
+++ b/docs/static/hardware/speaker.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1, 0, 0, 1, -0.00023, -58.230297)">
+    <ellipse style="fill: rgb(70, 70, 70);" cx="250.58" cy="308.81" rx="215" ry="215"/>
+    <ellipse style="fill: rgb(0, 0, 0);" transform="matrix(1, 0, 0, 1.000001, -232.069031, 248.780606)" cx="482.069" cy="198.188" rx="23.028" ry="23.028"/>
+    <ellipse style="fill: rgb(0, 0, 0);" transform="matrix(1, 0, 0, 0.999999, -232.067871, 110.041956)" cx="482.067" cy="198.188" rx="23.028" ry="23.028"/>
+    <ellipse style="fill: rgb(0, 0, 0);" cx="389.12" cy="308.23" rx="23.028" ry="23.028"/>
+    <ellipse style="fill: rgb(0, 0, 0);" cx="110.88" cy="308.23" rx="23.028" ry="23.028"/>
+    <ellipse style="fill: rgb(0, 0, 0);" cx="250" cy="169.393" rx="23.028" ry="23.028"/>
+    <g transform="matrix(1, 0, 0, 1, -0.000009, 0.000015)">
+      <ellipse style="fill: rgb(0, 0, 0);" cx="250" cy="238.513" rx="23.028" ry="23.028" transform="matrix(1.000001, 0, 0, 0.999999, 69.996739, 69.71816)"/>
+      <ellipse style="fill: rgb(0, 0, 0);" transform="matrix(1, 0, 0, 0.999999, -302.064453, 110.043115)" cx="482.064" cy="198.188" rx="23.028" ry="23.028"/>
+    </g>
+    <g transform="matrix(0.866026, 0.5, -0.5, 0.866026, 7.386552, -105.261086)">
+      <ellipse style="fill: rgb(0, 0, 0);" transform="matrix(0.999999, 0, 0, 0.999999, -65.212313, 177.387415)" cx="482.068" cy="198.188" rx="23.028" ry="23.028"/>
+      <ellipse style="fill: rgb(0, 0, 0);" cx="555.975" cy="236.836" rx="23.028" ry="23.028"/>
+      <ellipse style="fill: rgb(0, 0, 0);" cx="277.735" cy="236.836" rx="23.028" ry="23.028"/>
+      <ellipse style="fill: rgb(0, 0, 0);" cx="416.855" cy="97.999" rx="23.028" ry="23.028"/>
+    </g>
+    <g transform="matrix(0.5, 0.866026, -0.866026, 0.5, 246.635941, -171.170502)">
+      <ellipse style="fill: rgb(0, 0, 0);" transform="matrix(0.999999, 0, 0, 0.999999, -65.212313, 177.387415)" cx="482.068" cy="198.188" rx="23.028" ry="23.028"/>
+      <ellipse style="fill: rgb(0, 0, 0);" cx="555.975" cy="236.836" rx="23.028" ry="23.028"/>
+      <ellipse style="fill: rgb(0, 0, 0);" cx="277.735" cy="236.836" rx="23.028" ry="23.028"/>
+      <ellipse style="fill: rgb(0, 0, 0);" cx="416.855" cy="97.999" rx="23.028" ry="23.028"/>
+    </g>
+    <g transform="matrix(-0.5, 0.866026, -0.866026, -0.5, 641.934998, 245.84082)">
+      <ellipse style="fill: rgb(0, 0, 0);" cx="250" cy="238.513" rx="23.028" ry="23.028" transform="matrix(1.000001, 0, 0, 0.999999, 69.996739, 69.71816)"/>
+      <ellipse style="fill: rgb(0, 0, 0);" transform="matrix(1, 0, 0, 0.999999, -302.064453, 110.043115)" cx="482.064" cy="198.188" rx="23.028" ry="23.028"/>
+    </g>
+    <g transform="matrix(-0.500001, -0.866026, 0.866026, -0.500001, 108.063393, 678.85083)">
+      <ellipse style="fill: rgb(0, 0, 0);" cx="250" cy="238.513" rx="23.028" ry="23.028" transform="matrix(1.000001, 0, 0, 0.999999, 69.996739, 69.71816)"/>
+      <ellipse style="fill: rgb(0, 0, 0);" transform="matrix(1, 0, 0, 0.999999, -302.064453, 110.043115)" cx="482.064" cy="198.188" rx="23.028" ry="23.028"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file