diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..60ac8d7b
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-13 - Focus Visible on Custom Filter Pills
+**Learning:** For custom toggle buttons (like filter pills) that use `framer-motion` and conditional styling, relying on browser default focus states is often insufficient against dark backgrounds (e.g. `bg-neutral-800`). Explicitly adding `focus-visible:ring-2`, an offset, and `aria-pressed` drastically improves keyboard navigation clarity. Additionally, icon-only "Clear" buttons inside these filter groups frequently lack `aria-label`s.
+**Action:** Always check custom filter/toggle components for `aria-pressed` and robust `focus-visible` states, especially against dark themes.
diff --git a/src/components/dashboard/filter-pills.tsx b/src/components/dashboard/filter-pills.tsx
index d09effbe..7943739a 100644
--- a/src/components/dashboard/filter-pills.tsx
+++ b/src/components/dashboard/filter-pills.tsx
@@ -34,9 +34,10 @@ export function FilterPills({ options, selected, onToggle, onClear, className }:
           <motion.button
             key={option.id}
             onClick={() => onToggle(option.id)}
+            aria-pressed={isSelected}
             transition={{ duration: 0.15 }}
             className={cn(
-              'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-all',
+              'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4C8BF5] focus-visible:ring-offset-2 focus-visible:ring-offset-black',
               isSelected
                 ? 'bg-[#4C8BF5] text-white shadow-sm'
                 : 'bg-neutral-800 text-neutral-300 hover:bg-neutral-700'
@@ -60,9 +61,10 @@ export function FilterPills({ options, selected, onToggle, onClear, className }:
       {hasSelection && onClear && (
         <button
           onClick={onClear}
-          className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-300 transition-colors"
+          aria-label="Clear all filters"
+          className="inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-300 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#4C8BF5] focus-visible:ring-offset-2 focus-visible:ring-offset-black"
         >
-          <X className="size-3" />
+          <X className="size-3" aria-hidden="true" />
           Clear
         </button>
       )}