diff --git a/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css b/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
index a2561504..55991cc7 100644
--- a/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
+++ b/frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css
@@ -181,7 +181,9 @@
   stroke: var(--green);
 }
 
-.notify-box:focus {
+/* A click leaves no ring; keyboard focus keeps the browser's own, so a
+   focused box does not look like a selected one. */
+.notify-box:focus:not(:focus-visible) {
   outline: none;
 }
 
diff --git a/frontend/packages/swarm-ui/src/ui/card/Card.css b/frontend/packages/swarm-ui/src/ui/card/Card.css
index 72abb806..d6d55aad 100644
--- a/frontend/packages/swarm-ui/src/ui/card/Card.css
+++ b/frontend/packages/swarm-ui/src/ui/card/Card.css
@@ -15,7 +15,11 @@
 [role="button"].ui-card:hover,
 [role="button"].ui-card:focus-visible {
   border-color: var(--purple);
-  outline: none;
+}
+/* Keyboard focus needs more than the hover tint, so it keeps a real ring. */
+[role="button"].ui-card:focus-visible {
+  outline: 2px solid var(--purple);
+  outline-offset: 2px;
 }
 /* A solid border (not just the hover tint above, which needs to keep
    meaning "hovering", not double as "selected") plus a faint fill so a