diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 8d4d8b2..5e14834 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,10 +1,10 @@
-export const INKCLIP_VID = 0x1209
-export const INKCLIP_PID = 0xc9c9
+export const DEVICE_VID = 0x1209
+export const DEVICE_PID = 0xc9c9
 
-export const INKCLIP_WIDTH = 200 // px
-export const INKCLIP_HEIGHT = 200 // px
+export const DEVICE_WIDTH = 200 // px
+export const DEVICE_HEIGHT = 200 // px
 
-export const INKCLIP_ASPECT_RATIO = INKCLIP_WIDTH / INKCLIP_HEIGHT
-export const BYTES_IN_A_ROW = INKCLIP_WIDTH / 8
+export const DEVICE_ASPECT_RATIO = DEVICE_WIDTH / DEVICE_HEIGHT
+export const BYTES_IN_A_ROW = DEVICE_WIDTH / 8
 
 export const WRITE_TIME = 2000 // ms
diff --git a/src/lib/contexts/device.svelte.ts b/src/lib/contexts/device.svelte.ts
index 0241c1c..164d8e2 100644
--- a/src/lib/contexts/device.svelte.ts
+++ b/src/lib/contexts/device.svelte.ts
@@ -1,9 +1,9 @@
-import { INKCLIP_PID, INKCLIP_VID } from '$lib/constants'
+import { DEVICE_PID, DEVICE_VID } from '$lib/constants'
 import { getContext, setContext } from 'svelte'
 import { toast } from 'svelte-sonner'
 
 function isInkclip(dev: HIDDevice) {
-  return dev.vendorId == INKCLIP_VID && dev.productId == INKCLIP_PID
+  return dev.vendorId == DEVICE_VID && dev.productId == DEVICE_PID
 }
 
 export interface DeviceContext {
diff --git a/src/lib/contexts/image.svelte.ts b/src/lib/contexts/image.svelte.ts
index 4b9434f..7f3e570 100644
--- a/src/lib/contexts/image.svelte.ts
+++ b/src/lib/contexts/image.svelte.ts
@@ -1,7 +1,7 @@
 import { getContext, setContext } from 'svelte'
 import type { FilesContext } from './files.svelte'
 import { toast } from 'svelte-sonner'
-import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
+import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
 
 export interface ImageContext {
   image: ImageBitmap | null
@@ -43,5 +43,5 @@ export function createImageContext(filesCtx: FilesContext): Readonly<ImageContex
 
 export function imageIsCorrectRatio(imageCtx: ImageContext): boolean {
   if (imageCtx.image === null) return true
-  return imageCtx.image.height * INKCLIP_WIDTH === imageCtx.image.width * INKCLIP_HEIGHT
+  return imageCtx.image.height * DEVICE_WIDTH === imageCtx.image.width * DEVICE_HEIGHT
 }
diff --git a/src/lib/contexts/rendered.svelte.ts b/src/lib/contexts/rendered.svelte.ts
index 34fc423..ee2c2f8 100644
--- a/src/lib/contexts/rendered.svelte.ts
+++ b/src/lib/contexts/rendered.svelte.ts
@@ -4,7 +4,7 @@ import { withTransform } from '$lib/image/transform'
 import type { ConversionConfig } from './config.svelte'
 import { Scaler } from '$lib/image/scaler'
 import { Quantizer } from '$lib/image/quantizer'
-import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
+import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
 
 export interface RenderedContext {
   rendered: number[] | null
@@ -16,7 +16,7 @@ export function getRenderedContext(): Readonly<RenderedContext> {
   return getContext(RenderedContextToken)
 }
 
-const scaler = new Scaler(INKCLIP_WIDTH, INKCLIP_HEIGHT)
+const scaler = new Scaler(DEVICE_WIDTH, DEVICE_HEIGHT)
 
 export function createRenderedContext(
   imageCtx: Readonly<ImageContext>,
@@ -34,7 +34,7 @@ export function createRenderedContext(
     })
   )
 
-  const canvas = new OffscreenCanvas(INKCLIP_WIDTH, INKCLIP_HEIGHT)
+  const canvas = new OffscreenCanvas(DEVICE_WIDTH, DEVICE_HEIGHT)
   const canvasCtx = canvas.getContext('2d', {
     willReadFrequently: true,
   })!
@@ -50,7 +50,7 @@ export function createRenderedContext(
     withTransform(canvasCtx, config.transform, () => {
       const bg = config.backgroundColor
       canvasCtx.fillStyle = `rgb(${bg} ${bg} ${bg})`
-      canvasCtx.fillRect(0, 0, INKCLIP_WIDTH, INKCLIP_HEIGHT)
+      canvasCtx.fillRect(0, 0, DEVICE_WIDTH, DEVICE_HEIGHT)
       const { dx, dy, dWidth, dHeight } = scaler.scale(config.scaleMode, bitmap)
       canvasCtx.drawImage(bitmap, dx, dy, dWidth, dHeight)
     })
diff --git a/src/lib/image/transform.ts b/src/lib/image/transform.ts
index 20c25b9..84f335e 100644
--- a/src/lib/image/transform.ts
+++ b/src/lib/image/transform.ts
@@ -1,4 +1,4 @@
-import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
+import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
 
 export type Rotation = 0 | 90 | 180 | 270
 export type Side = 'obverse' | 'reverse'
@@ -54,8 +54,8 @@ function withCtx<T>(ctx: Context2D, pre: () => void, action: () => T): T {
 }
 
 export function withTransform<T>(ctx: Context2D, transform: Transform, action: () => T): T {
-  const centerX = INKCLIP_WIDTH / 2
-  const centerY = INKCLIP_HEIGHT / 2
+  const centerX = DEVICE_WIDTH / 2
+  const centerY = DEVICE_HEIGHT / 2
 
   return withCtx(
     ctx,
diff --git a/src/lib/layouts/Main.svelte b/src/lib/layouts/Main.svelte
index 044c859..78fceeb 100644
--- a/src/lib/layouts/Main.svelte
+++ b/src/lib/layouts/Main.svelte
@@ -17,8 +17,8 @@
   createRenderedContext(imageCtx, config)
 </script>
 
-<main class="grow w-full stack gap-4" aria-labelledby="main-label">
-  <h1 class="sr-only" id="main-label">Write to Inkclip</h1>
+<main class="grow w-full stack gap-4">
+  <h1 class="sr-only">Write to Inkclip</h1>
 
   <ConnectSection />
 
diff --git a/src/lib/layouts/connect/ConnectButton.svelte b/src/lib/layouts/connect/ConnectButton.svelte
index 4cad155..0c8a952 100644
--- a/src/lib/layouts/connect/ConnectButton.svelte
+++ b/src/lib/layouts/connect/ConnectButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Button } from '$lib/components/ui/button'
 
-  import { INKCLIP_PID, INKCLIP_VID } from '$lib/constants'
+  import { DEVICE_PID, DEVICE_VID } from '$lib/constants'
   import { getDeviceContext } from '$lib/contexts/device.svelte'
 
   const deviceCtx = getDeviceContext()
@@ -10,8 +10,8 @@
     const devs = await navigator.hid.requestDevice({
       filters: [
         {
-          vendorId: INKCLIP_VID,
-          productId: INKCLIP_PID,
+          vendorId: DEVICE_VID,
+          productId: DEVICE_PID,
         },
       ],
     })
diff --git a/src/lib/layouts/edit/controls/dimensions/AspectRatioAlert.svelte b/src/lib/layouts/edit/controls/dimensions/AspectRatioAlert.svelte
index 699bc76..9e30e9b 100644
--- a/src/lib/layouts/edit/controls/dimensions/AspectRatioAlert.svelte
+++ b/src/lib/layouts/edit/controls/dimensions/AspectRatioAlert.svelte
@@ -2,11 +2,11 @@
   import * as Alert from '$lib/components/ui/alert'
   import IconAspectRatio from '~icons/material-symbols/aspect-ratio-outline'
 
-  import { INKCLIP_ASPECT_RATIO } from '$lib/constants'
+  import { DEVICE_ASPECT_RATIO } from '$lib/constants'
 </script>
 
 <Alert.Root>
   <IconAspectRatio aria-hidden />
-  <Alert.Title>Image is not {String(Math.round(INKCLIP_ASPECT_RATIO * 100) / 100)}:1 ratio</Alert.Title>
+  <Alert.Title>Image is not {String(Math.round(DEVICE_ASPECT_RATIO * 100) / 100)}:1 ratio</Alert.Title>
   <Alert.Description>You need to choose how to scale your image.</Alert.Description>
 </Alert.Root>
diff --git a/src/lib/layouts/edit/preview/PreviewCanvas1x.svelte b/src/lib/layouts/edit/preview/PreviewCanvas1x.svelte
index 2ac5c37..790cb7f 100644
--- a/src/lib/layouts/edit/preview/PreviewCanvas1x.svelte
+++ b/src/lib/layouts/edit/preview/PreviewCanvas1x.svelte
@@ -5,7 +5,7 @@
   import { cn } from '$lib/utils'
   import { drawQuantizedData, freshContext, makeAltText } from './common.svelte'
   import { getRenderedContext } from '$lib/contexts/rendered.svelte'
-  import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
+  import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
   import { getFilesContext } from '$lib/contexts/files.svelte'
   import { getConversionConfig } from '$lib/contexts/config.svelte'
   import { getImageContext } from '$lib/contexts/image.svelte'
@@ -33,14 +33,14 @@
         <canvas
           class={cn(hasRendered || 'hidden')}
           style:image-rendering="pixelated"
-          style:width="{INKCLIP_WIDTH}px"
-          style:height="{INKCLIP_HEIGHT}px"
+          style:width="{DEVICE_WIDTH}px"
+          style:height="{DEVICE_HEIGHT}px"
           bind:this={canvasEl}
-          height={INKCLIP_HEIGHT}
-          width={INKCLIP_WIDTH}
+          height={DEVICE_HEIGHT}
+          width={DEVICE_WIDTH}
         ></canvas>
       {:else}
-        <div class="col justify-center text-[#333]" style:width="{INKCLIP_WIDTH}px" style:height="{INKCLIP_HEIGHT}px">
+        <div class="col justify-center text-[#333]" style:width="{DEVICE_WIDTH}px" style:height="{DEVICE_HEIGHT}px">
           <IconHideImage class="text-3xl" aria-label="No image" />
         </div>
       {/if}
diff --git a/src/lib/layouts/edit/preview/PreviewCanvas2x.svelte b/src/lib/layouts/edit/preview/PreviewCanvas2x.svelte
index 487f926..b4f47ad 100644
--- a/src/lib/layouts/edit/preview/PreviewCanvas2x.svelte
+++ b/src/lib/layouts/edit/preview/PreviewCanvas2x.svelte
@@ -5,7 +5,7 @@
   import { cn } from '$lib/utils'
   import { drawQuantizedData, freshContext, makeAltText } from './common.svelte'
   import { getRenderedContext } from '$lib/contexts/rendered.svelte'
-  import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
+  import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
   import { getFilesContext } from '$lib/contexts/files.svelte'
   import { getConversionConfig } from '$lib/contexts/config.svelte'
   import { getImageContext } from '$lib/contexts/image.svelte'
@@ -33,17 +33,17 @@
         <canvas
           class={cn(hasRendered || 'hidden')}
           style:image-rendering="pixelated"
-          style:width="{INKCLIP_WIDTH * 2}px"
-          style:height="{INKCLIP_HEIGHT * 2}px"
+          style:width="{DEVICE_WIDTH * 2}px"
+          style:height="{DEVICE_HEIGHT * 2}px"
           bind:this={canvasEl}
-          height={INKCLIP_HEIGHT}
-          width={INKCLIP_WIDTH}
+          height={DEVICE_HEIGHT}
+          width={DEVICE_WIDTH}
         ></canvas>
       {:else}
         <div
           class="col justify-center text-[#333]"
-          style:width="{INKCLIP_WIDTH * 2}px"
-          style:height="{INKCLIP_HEIGHT * 2}px"
+          style:width="{DEVICE_WIDTH * 2}px"
+          style:height="{DEVICE_HEIGHT * 2}px"
         >
           <IconHideImage class="text-6xl" aria-label="No image" />
         </div>
diff --git a/src/lib/layouts/edit/preview/common.svelte.ts b/src/lib/layouts/edit/preview/common.svelte.ts
index 88676cc..a83995b 100644
--- a/src/lib/layouts/edit/preview/common.svelte.ts
+++ b/src/lib/layouts/edit/preview/common.svelte.ts
@@ -1,4 +1,4 @@
-import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
+import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
 import type { ConversionConfig } from '$lib/contexts/config.svelte'
 import type { FilesContext } from '$lib/contexts/files.svelte'
 import { imageIsCorrectRatio, type ImageContext } from '$lib/contexts/image.svelte'
@@ -14,7 +14,7 @@ export function makeAltText(filesCtx: FilesContext, imageCtx: ImageContext, conf
 
   const file = filesCtx.files[0]
 
-  const output = [`${INKCLIP_WIDTH}-by-${INKCLIP_HEIGHT}-pixels e-paper preview of "${file.name}"`]
+  const output = [`${DEVICE_WIDTH}-by-${DEVICE_HEIGHT}-pixels e-paper preview of "${file.name}"`]
 
   if (!imageIsCorrectRatio(imageCtx)) {
     if (config.scaleMode === 'fit') output.push('letterboxed')
@@ -51,11 +51,11 @@ export function makeAltText(filesCtx: FilesContext, imageCtx: ImageContext, conf
 }
 
 export function drawQuantizedData(ctx: CanvasRenderingContext2D, data: number[]) {
-  const imageData = ctx.createImageData(INKCLIP_WIDTH, INKCLIP_HEIGHT)
+  const imageData = ctx.createImageData(DEVICE_WIDTH, DEVICE_HEIGHT)
 
-  for (let y = 0; y < INKCLIP_HEIGHT; y++) {
-    for (let x = 0; x < INKCLIP_WIDTH; x++) {
-      const dataIx = y * INKCLIP_WIDTH + x
+  for (let y = 0; y < DEVICE_HEIGHT; y++) {
+    for (let x = 0; x < DEVICE_WIDTH; x++) {
+      const dataIx = y * DEVICE_WIDTH + x
       const bitmapIx = dataIx * 4
       const colorIx = data.at(dataIx)
       const color = colorIx === 0 ? 0xcc : 0x11
diff --git a/src/lib/layouts/write/WriteButton.svelte b/src/lib/layouts/write/WriteButton.svelte
index f72a5e7..79b12ef 100644
--- a/src/lib/layouts/write/WriteButton.svelte
+++ b/src/lib/layouts/write/WriteButton.svelte
@@ -4,7 +4,7 @@
   import { toast } from 'svelte-sonner'
   import { getDeviceContext } from '$lib/contexts/device.svelte'
   import { getRenderedContext } from '$lib/contexts/rendered.svelte'
-  import { BYTES_IN_A_ROW, INKCLIP_HEIGHT, INKCLIP_WIDTH, WRITE_TIME } from '$lib/constants'
+  import { BYTES_IN_A_ROW, DEVICE_HEIGHT, DEVICE_WIDTH, WRITE_TIME } from '$lib/constants'
 
   interface Props {
     onprogress: (inPropgress: boolean) => void
@@ -32,12 +32,12 @@
       }
     }
 
-    const buffer = new Uint8Array(INKCLIP_HEIGHT * BYTES_IN_A_ROW)
-    for (let y = 0; y < INKCLIP_HEIGHT; y++) {
+    const buffer = new Uint8Array(DEVICE_HEIGHT * BYTES_IN_A_ROW)
+    for (let y = 0; y < DEVICE_HEIGHT; y++) {
       for (let xStride = 0; xStride < BYTES_IN_A_ROW; xStride++) {
         let cell = 0x0
         for (let xStroll = 0; xStroll < 8; xStroll++) {
-          const index = y * INKCLIP_WIDTH + xStride * 8 + xStroll
+          const index = y * DEVICE_WIDTH + xStride * 8 + xStroll
           cell |= renderedCtx.rendered[index] << xStroll
         }
         buffer[y * BYTES_IN_A_ROW + xStride] = cell