diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts
index ab9dc30..5cc139a 100644
--- a/src/app/api/orders/[id]/design-spec/route.ts
+++ b/src/app/api/orders/[id]/design-spec/route.ts
@@ -78,6 +78,21 @@ export async function GET(req: Request, { params }: { params: { id: string } })
             <div style="position: relative; display: inline-block; margin: 15px 0;">
               <img src="${placement}" alt="${side} design placement" class="mockup-image" style="max-height: 400px; width: auto; display: block; border: 1px solid #ddd;">
               <svg viewBox="-60 -60 680 680" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;" preserveAspectRatio="xMidYMid meet">
+                <!-- Ruler marks every 2cm -->
+                ${Array.from({ length: Math.ceil((DISPLAY / (10 * (printAreaWidthMm / 100)))) }).map((_, i) => {
+                  const cm = i * 2;
+                  const px = (cm * DISPLAY) / (printAreaWidthMm / 10);
+                  if (px > DISPLAY) return '';
+                  return `
+                    <!-- Horizontal ruler tick at ${cm}cm -->
+                    <line x1="${px}" y1="-5" x2="${px}" y2="0" stroke="#ddd" stroke-width="1"/>
+                    <text x="${px}" y="-8" font-size="10" fill="#999" text-anchor="middle">${cm}cm</text>
+
+                    <!-- Vertical ruler tick at ${cm}cm -->
+                    <line x1="-5" y1="${px}" x2="0" y2="${px}" stroke="#ddd" stroke-width="1"/>
+                    <text x="-8" y="${px + 3}" font-size="10" fill="#999" text-anchor="end">${cm}</text>
+                  `;
+                }).join('')}
                 <!-- Print area border -->
                 <rect x="${printAreaStartX}" y="${printAreaStartY}" width="${printAreaWidthPx}" height="${printAreaHeightPx}"
                   fill="none" stroke="red" stroke-width="2" stroke-dasharray="5,5" opacity="0.8"/>