diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..743c617
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2023-10-24 - Explicit ARIA Labels for Responsive Text
+**Learning:** When using responsive buttons or links where visible text is hidden on smaller screens via Tailwind classes (e.g., `hidden lg:inline`), the interactive element loses its accessible name on those viewports, causing screen reader confusion. Additionally, raw material icons inside these elements are read out if not masked.
+**Action:** Always add an explicit `aria-label` attribute to the parent interactive element (`<button>` or `<a>`) to maintain consistent screen reader accessibility across all viewport sizes, and add `aria-hidden="true"` to the inner icon element to prevent it from being read.
diff --git a/code.html b/code.html
index 802d964..8e1f987 100644
--- a/code.html
+++ b/code.html
@@ -59,8 +59,8 @@ <h2 class="text-white text-xl font-bold leading-tight tracking-tight">MerchFlow
 <span class="text-xs text-primary/60 font-medium uppercase tracking-wider">Enterprise Edition</span>
 </div>
 </div>
-<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary-hover transition-colors text-white text-sm font-bold leading-normal tracking-[0.015em]">
-<span class="material-symbols-outlined mr-2 text-lg">rocket_launch</span>
+<button aria-label="Deploy" class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary-hover transition-colors text-white text-sm font-bold leading-normal tracking-[0.015em]">
+<span aria-hidden="true" class="material-symbols-outlined mr-2 text-lg">rocket_launch</span>
 <span class="truncate">Deploy</span>
 </button>
 </header>
@@ -116,11 +116,11 @@ <h2 class="text-white tracking-light text-[28px] font-bold leading-tight">Input
 <div class="flex items-center justify-between">
 <h2 class="text-white tracking-light text-[28px] font-bold leading-tight">Generated Output</h2>
 <div class="flex gap-2">
-<button class="p-2 hover:bg-surface-dark rounded-lg text-slate-400 hover:text-white transition-colors">
-<span class="material-symbols-outlined text-xl">content_copy</span>
+<button aria-label="Copy JSON" class="p-2 hover:bg-surface-dark rounded-lg text-slate-400 hover:text-white transition-colors">
+<span aria-hidden="true" class="material-symbols-outlined text-xl">content_copy</span>
 </button>
-<button class="p-2 hover:bg-surface-dark rounded-lg text-slate-400 hover:text-white transition-colors">
-<span class="material-symbols-outlined text-xl">download</span>
+<button aria-label="Download JSON" class="p-2 hover:bg-surface-dark rounded-lg text-slate-400 hover:text-white transition-colors">
+<span aria-hidden="true" class="material-symbols-outlined text-xl">download</span>
 </button>
 </div>
 </div>
diff --git a/dashboard.html b/dashboard.html
index a73dccc..a1ae9e9 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -147,13 +147,13 @@ <h2 class="text-white text-base lg:text-xl font-bold leading-tight tracking-tigh
 </div>
 </div>
 </div>
-<a class="hidden sm:inline-flex flex-none items-center justify-center rounded-full h-9 lg:h-10 px-4 lg:px-5 bg-white/5 hover:bg-white/10 border border-white/10 text-white text-xs lg:text-sm font-bold transition-all" href="/">
-<span class="material-symbols-outlined text-lg lg:mr-2">arrow_back</span>
+<a aria-label="Back to Home" class="hidden sm:inline-flex flex-none items-center justify-center rounded-full h-9 lg:h-10 px-4 lg:px-5 bg-white/5 hover:bg-white/10 border border-white/10 text-white text-xs lg:text-sm font-bold transition-all" href="/">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:mr-2">arrow_back</span>
 <span class="hidden lg:inline">Back to Home</span>
 </a>
-<button class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
+<button aria-label="Deploy" class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
 <div class="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
-<span class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
+<span aria-hidden="true" class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
 <span class="hidden lg:inline truncate text-sm font-bold tracking-wide relative z-10">Deploy</span>
 </button>
 </div>
@@ -210,11 +210,11 @@ <h2 class="text-white text-xl lg:text-3xl font-bold tracking-tight">Generated Ou
 <div class="flex items-center gap-2">
 <span class="hidden xs:inline-block bg-white/5 text-amber-200 px-2.5 py-1 rounded-full text-[10px] lg:text-xs font-semibold border border-white/10 backdrop-blur-sm">Step 2 of 2</span>
 <div class="hidden xs:block h-6 w-px bg-white/10 mx-1"></div>
-<button class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-all duration-300 border border-transparent" id="copyBtn" title="Copy JSON">
-<span class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon">content_copy</span>
+<button aria-label="Copy JSON" class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-all duration-300 border border-transparent" id="copyBtn" title="Copy JSON">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon">content_copy</span>
 </button>
-<button class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-colors" id="downloadBtn" title="Download JSON">
-<span class="material-symbols-outlined text-lg lg:text-xl">download</span>
+<button aria-label="Download JSON" class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-colors" id="downloadBtn" title="Download JSON">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:text-xl">download</span>
 </button>
 </div>
 </div>
diff --git a/glassui.html b/glassui.html
index 700dc49..18f82d3 100644
--- a/glassui.html
+++ b/glassui.html
@@ -147,9 +147,9 @@ <h2 class="text-white text-base lg:text-xl font-bold leading-tight tracking-tigh
 </div>
 </div>
 </div>
-<button class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
+<button aria-label="Deploy" class="group relative flex-none flex cursor-pointer items-center justify-center overflow-hidden rounded-full h-9 lg:h-10 px-4 lg:px-6 bg-gradient-to-r from-amber-600 to-amber-800 hover:from-amber-500 hover:to-amber-700 border border-white/10 shadow-[0_0_15px_rgba(245,158,11,0.3)] transition-all" id="deployBtn">
 <div class="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
-<span class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
+<span aria-hidden="true" class="material-symbols-outlined lg:mr-2 text-lg relative z-10">rocket_launch</span>
 <span class="hidden lg:inline truncate text-sm font-bold tracking-wide relative z-10">Deploy</span>
 </button>
 </div>
@@ -206,11 +206,11 @@ <h2 class="text-white text-xl lg:text-3xl font-bold tracking-tight">Generated Ou
 <div class="flex items-center gap-2">
 <span class="hidden xs:inline-block bg-white/5 text-amber-200 px-2.5 py-1 rounded-full text-[10px] lg:text-xs font-semibold border border-white/10 backdrop-blur-sm">Step 2 of 2</span>
 <div class="hidden xs:block h-6 w-px bg-white/10 mx-1"></div>
-<button class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-all duration-300 border border-transparent" id="copyBtn" title="Copy JSON">
-<span class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon">content_copy</span>
+<button aria-label="Copy JSON" class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-all duration-300 border border-transparent" id="copyBtn" title="Copy JSON">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon">content_copy</span>
 </button>
-<button class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-colors" id="downloadBtn" title="Download JSON">
-<span class="material-symbols-outlined text-lg lg:text-xl">download</span>
+<button aria-label="Download JSON" class="size-8 lg:size-9 flex items-center justify-center hover:bg-white/10 rounded-lg text-neutral-500 hover:text-amber-400 transition-colors" id="downloadBtn" title="Download JSON">
+<span aria-hidden="true" class="material-symbols-outlined text-lg lg:text-xl">download</span>
 </button>
 </div>
 </div>