diff --git a/docs/_plugins/tokens.cjs b/docs/_plugins/tokens.cjs
index c829cfd6ff..33b89e22c1 100644
--- a/docs/_plugins/tokens.cjs
+++ b/docs/_plugins/tokens.cjs
@@ -67,7 +67,7 @@ function table({ tokens, name = '', docs, options } = {}) {
               ${isColor && token.path.includes('text') ? 'Aa'
               : isFont ? (docs?.example ?? token.attributes?.aliases?.[0] ?? 'Aa')
               : name === 'breakpoint' ? `
-                <img src="assets/device-${token.name}.svg" role="presentation">`
+                <img src="/assets/breakpoints/device-${token.name}.svg" role="presentation">`
               : docs?.example ?? ''}
               </samp>
             </td>
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-2xl.svg b/docs/assets/breakpoints/device-rh-breakpoint-2xl.svg
new file mode 100644
index 0000000000..950c4ff4f3
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-2xl.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 1468 1143.05" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(534.2 -521.42)">
+        <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="1368" height="800" x="-484.21" y="571.42" ry="12.83"/>
+        <rect fill="#000" width="297.09" height="202.29" x="51.25" y="1397.37" ry="12.17"/>
+        <rect fill="#000" width="706.06" height="69.01" x="-153.24" y="1595.47" ry="12.17"/>
+    </g>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-2xs-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-2xs-max.svg
new file mode 100644
index 0000000000..02a4986574
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-2xs-max.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 420 708" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="82" ry="6.82"/>
+    <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="50" ry="6.82"/>
+    <circle fill="#fff" cx="215" cy="666" r="25"/>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-lg-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-lg-max.svg
new file mode 100644
index 0000000000..3c9c4d61d7
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-lg-max.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 1292.24 1100.76" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(536.97 -518.66)">
+        <rect fill="#fff" stroke="#000" stroke-width="92.2352" paint-order="stroke markers fill" width="1200" height="768" x="-490.85" y="564.78" ry="11.21"/>
+        <rect fill="#000" width="297.09" height="202.29" x="-39.4" y="1352.32" ry="12.17"/>
+        <rect fill="#000" width="706.06" height="69.01" x="-243.88" y="1550.42" ry="12.17"/>
+    </g>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-lg.svg b/docs/assets/breakpoints/device-rh-breakpoint-lg.svg
new file mode 100644
index 0000000000..470570a732
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-lg.svg
@@ -0,0 +1,18 @@
+<svg viewBox="0 0 1144 868" xmlns="http://www.w3.org/2000/svg">
+    <g transform="rotate(90 572 572)">
+        <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="102" ry="12.17"/>
+        <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="50" ry="12.17"/>
+        <g transform="rotate(-90 603.2 725.35) scale(2.43045)">
+            <path fill="#020202" d="M157.29 163.47h60.27a8.66 8.66 0 0 0 8.66-8.66v-51.24a8.66 8.66 0 0 0-8.66-8.66h-60.27a8.66 8.66 0 0 0-8.67 8.66v51.24a8.66 8.66 0 0 0 8.67 8.66zm179.61 63.5h-54.71a8.66 8.66 0 0 0-8.66 8.66V355.6a8.66 8.66 0 0 0 8.66 8.66h54.7a8.66 8.66 0 0 0 8.67-8.66V235.63a8.66 8.66 0 0 0-8.67-8.66z"/>
+            <path fill="#020202" d="M341.4 87.59h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.65h91.53a8.32 8.32 0 1 0 0-16.65zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm-99.85 66.57h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.65z"/>
+            <path fill="#020202" d="M241.55 320.58h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm99.85-166.42H148.62a8.32 8.32 0 1 0 0 16.64H341.4a8.32 8.32 0 1 0 0-16.64z"/>
+        </g>
+        <circle fill="#fff" cx="430.46" cy="1092" r="30"/>
+        <path fill="#020202" stroke-width="2.63288" d="M90.8 113.92v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73S90.8 100.8 90.8 113.92zm80.48 0v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.49 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
+        <path fill="#020202" stroke-width="2.63288" d="M332.25 113.92v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.49 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
+        <path fill="#020202" stroke-width="2.63288" d="M493.22 113.92v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.48 0v261.06c0 13.12 9.05 23.74 20.23 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
+        <path fill="#020202" stroke-width="2.63288" d="M654.2 113.92v261.06c0 13.12 9.04 23.74 20.22 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.48 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
+        <path fill="#fff" stroke="#000" stroke-width="10" paint-order="stroke markers fill" d="M759.62 440.3H103.06"/>
+    </g>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-md-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-md-max.svg
new file mode 100644
index 0000000000..470570a732
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-md-max.svg
@@ -0,0 +1,18 @@
+<svg viewBox="0 0 1144 868" xmlns="http://www.w3.org/2000/svg">
+    <g transform="rotate(90 572 572)">
+        <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="102" ry="12.17"/>
+        <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="50" ry="12.17"/>
+        <g transform="rotate(-90 603.2 725.35) scale(2.43045)">
+            <path fill="#020202" d="M157.29 163.47h60.27a8.66 8.66 0 0 0 8.66-8.66v-51.24a8.66 8.66 0 0 0-8.66-8.66h-60.27a8.66 8.66 0 0 0-8.67 8.66v51.24a8.66 8.66 0 0 0 8.67 8.66zm179.61 63.5h-54.71a8.66 8.66 0 0 0-8.66 8.66V355.6a8.66 8.66 0 0 0 8.66 8.66h54.7a8.66 8.66 0 0 0 8.67-8.66V235.63a8.66 8.66 0 0 0-8.67-8.66z"/>
+            <path fill="#020202" d="M341.4 87.59h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.65h91.53a8.32 8.32 0 1 0 0-16.65zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm-99.85 66.57h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.65z"/>
+            <path fill="#020202" d="M241.55 320.58h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm99.85-166.42H148.62a8.32 8.32 0 1 0 0 16.64H341.4a8.32 8.32 0 1 0 0-16.64z"/>
+        </g>
+        <circle fill="#fff" cx="430.46" cy="1092" r="30"/>
+        <path fill="#020202" stroke-width="2.63288" d="M90.8 113.92v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73S90.8 100.8 90.8 113.92zm80.48 0v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.49 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
+        <path fill="#020202" stroke-width="2.63288" d="M332.25 113.92v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.49 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
+        <path fill="#020202" stroke-width="2.63288" d="M493.22 113.92v261.06c0 13.12 9.05 23.74 20.23 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.48 0v261.06c0 13.12 9.05 23.74 20.23 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
+        <path fill="#020202" stroke-width="2.63288" d="M654.2 113.92v261.06c0 13.12 9.04 23.74 20.22 23.74s20.22-10.62 20.22-23.74V113.92c0-13.11-9.04-23.73-20.22-23.73s-20.23 10.62-20.23 23.73zm80.48 0v261.06c0 13.12 9.04 23.74 20.22 23.74s20.23-10.62 20.23-23.74V113.92c0-13.11-9.05-23.73-20.23-23.73s-20.22 10.62-20.22 23.73z"/>
+        <path fill="#fff" stroke="#000" stroke-width="10" paint-order="stroke markers fill" d="M759.62 440.3H103.06"/>
+    </g>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-md.svg b/docs/assets/breakpoints/device-rh-breakpoint-md.svg
new file mode 100644
index 0000000000..53cf1a4406
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-md.svg
@@ -0,0 +1,11 @@
+<svg viewBox="0 0 868 1143.3" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="102" ry="12.17"/>
+    <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="50" ry="12.17"/>
+    <g transform="translate(-351.27 -189.13) scale(3.19053)">
+        <path fill="#020202" d="M157.29 163.47h60.27a8.66 8.66 0 0 0 8.66-8.66v-51.24a8.66 8.66 0 0 0-8.66-8.66h-60.27a8.66 8.66 0 0 0-8.67 8.66v51.24a8.66 8.66 0 0 0 8.67 8.66zm179.61 63.5h-54.71a8.66 8.66 0 0 0-8.66 8.66V355.6a8.66 8.66 0 0 0 8.66 8.66h54.7a8.66 8.66 0 0 0 8.67-8.66V235.63a8.66 8.66 0 0 0-8.67-8.66z"/>
+        <path fill="#020202" d="M341.4 87.59h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.65h91.53a8.32 8.32 0 1 0 0-16.65zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm-99.85 66.57h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.65z"/>
+        <path fill="#020202" d="M241.55 320.58h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm99.85-166.42H148.62a8.32 8.32 0 1 0 0 16.64H341.4a8.32 8.32 0 1 0 0-16.64z"/>
+    </g>
+    <circle fill="#fff" cx="430.46" cy="1092" r="30"/>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-sm-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-sm-max.svg
new file mode 100644
index 0000000000..53cf1a4406
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-sm-max.svg
@@ -0,0 +1,11 @@
+<svg viewBox="0 0 868 1143.3" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="102" ry="12.17"/>
+    <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="768" height="992" x="50" y="50" ry="12.17"/>
+    <g transform="translate(-351.27 -189.13) scale(3.19053)">
+        <path fill="#020202" d="M157.29 163.47h60.27a8.66 8.66 0 0 0 8.66-8.66v-51.24a8.66 8.66 0 0 0-8.66-8.66h-60.27a8.66 8.66 0 0 0-8.67 8.66v51.24a8.66 8.66 0 0 0 8.67 8.66zm179.61 63.5h-54.71a8.66 8.66 0 0 0-8.66 8.66V355.6a8.66 8.66 0 0 0 8.66 8.66h54.7a8.66 8.66 0 0 0 8.67-8.66V235.63a8.66 8.66 0 0 0-8.67-8.66z"/>
+        <path fill="#020202" d="M341.4 87.59h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.65h91.53a8.32 8.32 0 1 0 0-16.65zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm-99.85 66.57h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.29h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.65z"/>
+        <path fill="#020202" d="M241.55 320.58h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm0 33.28h-91.53a8.32 8.32 0 1 0 0 16.64h91.53a8.32 8.32 0 1 0 0-16.64zm99.85-166.42H148.62a8.32 8.32 0 1 0 0 16.64H341.4a8.32 8.32 0 1 0 0-16.64z"/>
+    </g>
+    <circle fill="#fff" cx="430.46" cy="1092" r="30"/>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-sm.svg b/docs/assets/breakpoints/device-rh-breakpoint-sm.svg
new file mode 100644
index 0000000000..1c510eca5f
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-sm.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 708 420" xmlns="http://www.w3.org/2000/svg">
+    <g transform="rotate(90 354 354)">
+        <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="82" ry="6.82"/>
+        <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="50" ry="6.82"/>
+        <circle fill="#fff" paint-order="stroke markers fill" cx="215" cy="666" r="25"/>
+    </g>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-xl-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-xl-max.svg
new file mode 100644
index 0000000000..950c4ff4f3
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-xl-max.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 1468 1143.05" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(534.2 -521.42)">
+        <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="1368" height="800" x="-484.21" y="571.42" ry="12.83"/>
+        <rect fill="#000" width="297.09" height="202.29" x="51.25" y="1397.37" ry="12.17"/>
+        <rect fill="#000" width="706.06" height="69.01" x="-153.24" y="1595.47" ry="12.17"/>
+    </g>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-xl.svg b/docs/assets/breakpoints/device-rh-breakpoint-xl.svg
new file mode 100644
index 0000000000..3c9c4d61d7
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-xl.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 1292.24 1100.76" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(536.97 -518.66)">
+        <rect fill="#fff" stroke="#000" stroke-width="92.2352" paint-order="stroke markers fill" width="1200" height="768" x="-490.85" y="564.78" ry="11.21"/>
+        <rect fill="#000" width="297.09" height="202.29" x="-39.4" y="1352.32" ry="12.17"/>
+        <rect fill="#000" width="706.06" height="69.01" x="-243.88" y="1550.42" ry="12.17"/>
+    </g>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-xs-max.svg b/docs/assets/breakpoints/device-rh-breakpoint-xs-max.svg
new file mode 100644
index 0000000000..1c510eca5f
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-xs-max.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 708 420" xmlns="http://www.w3.org/2000/svg">
+    <g transform="rotate(90 354 354)">
+        <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="82" ry="6.82"/>
+        <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="50" ry="6.82"/>
+        <circle fill="#fff" paint-order="stroke markers fill" cx="215" cy="666" r="25"/>
+    </g>
+</svg>
+
diff --git a/docs/assets/breakpoints/device-rh-breakpoint-xs.svg b/docs/assets/breakpoints/device-rh-breakpoint-xs.svg
new file mode 100644
index 0000000000..02a4986574
--- /dev/null
+++ b/docs/assets/breakpoints/device-rh-breakpoint-xs.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 420 708" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="#000" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="82" ry="6.82"/>
+    <rect fill="#fff" stroke="#000" stroke-width="100" paint-order="stroke markers fill" width="320" height="576" x="50" y="50" ry="6.82"/>
+    <circle fill="#fff" cx="215" cy="666" r="25"/>
+</svg>
+