diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..93a6568
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-29 - Accessible Icon-Only and Responsive Ligature Buttons
+**Learning:** Structural icon elements (like `<span class="material-symbols-outlined">`) must include `aria-hidden="true"` to prevent screen readers from reading raw ligatures. When buttons or links contain these icons and their visible text is hidden responsively (e.g., via `hidden lg:inline` Tailwind classes) or absent entirely, the parent interactive element must have an explicit `aria-label` attribute. Otherwise, it becomes an empty button to screen readers on smaller viewports.
+**Action:** Always add `aria-label` to interactive elements containing icons where visible text may be hidden or missing, and apply `aria-hidden="true"` directly to the ligature/icon span.
diff --git a/code.html b/code.html
index 802d964..61ac1d8 100644
--- a/code.html
+++ b/code.html
@@ -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 class="p-2 hover:bg-surface-dark rounded-lg text-slate-400 hover:text-white transition-colors" title="Copy Output" aria-label="Copy Output">
+<span class="material-symbols-outlined text-xl" aria-hidden="true">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 class="p-2 hover:bg-surface-dark rounded-lg text-slate-400 hover:text-white transition-colors" title="Download Output" aria-label="Download Output">
+<span class="material-symbols-outlined text-xl" aria-hidden="true">download</span>
 </button>
 </div>
 </div>
diff --git a/dashboard.html b/dashboard.html
index a73dccc..3cc5ebc 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 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="/" aria-label="Back to Home">
+<span class="material-symbols-outlined text-lg lg:mr-2" aria-hidden="true">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 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" aria-label="Deploy">
 <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 class="material-symbols-outlined lg:mr-2 text-lg relative z-10" aria-hidden="true">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 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" aria-label="Copy JSON">
+<span class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon" aria-hidden="true">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 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" aria-label="Download JSON">
+<span class="material-symbols-outlined text-lg lg:text-xl" aria-hidden="true">download</span>
 </button>
 </div>
 </div>
diff --git a/glassui.html b/glassui.html
index 700dc49..c09cc12 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 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" aria-label="Deploy">
 <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 class="material-symbols-outlined lg:mr-2 text-lg relative z-10" aria-hidden="true">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 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" aria-label="Copy JSON">
+<span class="material-symbols-outlined text-lg lg:text-xl transition-all duration-300" id="copyIcon" aria-hidden="true">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 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" aria-label="Download JSON">
+<span class="material-symbols-outlined text-lg lg:text-xl" aria-hidden="true">download</span>
 </button>
 </div>
 </div>