From 159ef5a7502710b4e5a82b3457e1a6a68672491d Mon Sep 17 00:00:00 2001
From: Cesar Alcazar <calcazar@dasnuve.com>
Date: Wed, 21 Oct 2026 13:10:50 -0600
Subject: [PATCH] Give every hex avatar a red ring so it stands out over busy
 media

---
 src/components/HexAvatar.tsx | 11 +++++++----
 src/styles/avatar.css        | 16 +++++++++++++---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/HexAvatar.tsx b/src/components/HexAvatar.tsx
index 7106516..485d91c 100644
--- a/src/components/HexAvatar.tsx
+++ b/src/components/HexAvatar.tsx
@@ -27,15 +27,18 @@ export interface HexAvatarProps {
 
 export function HexAvatar({ name, pictureUrl, size = "md" }: HexAvatarProps) {
   const { width, height } = HEX_SIZES[size];
+  // The outer hexagon is the red ring; the face sits inside it, inset by the ring width.
   if (pictureUrl) {
     return (
-      // eslint-disable-next-line @next/next/no-img-element
-      <img className={`hex-avatar hex-avatar-${size}`} src={pictureUrl} alt="" width={width} height={height} />
+      <span className={`hex-avatar hex-avatar-${size}`}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img className="hex-avatar-face" src={pictureUrl} alt="" width={width} height={height} />
+      </span>
     );
   }
   return (
-    <span className={`hex-avatar hex-avatar-${size} hex-avatar-initials hex-avatar-${toneFor(name)}`} aria-hidden="true">
-      {initials(name)}
+    <span className={`hex-avatar hex-avatar-${size}`} aria-hidden="true">
+      <span className={`hex-avatar-face hex-avatar-initials hex-avatar-${toneFor(name)}`}>{initials(name)}</span>
     </span>
   );
 }
diff --git a/src/styles/avatar.css b/src/styles/avatar.css
index c050b97..1f6e9e9 100644
--- a/src/styles/avatar.css
+++ b/src/styles/avatar.css
@@ -1,7 +1,17 @@
 /* HexAvatar (ADR 0001, section 6). Pointy-top hexagon, width to height 0.866. */
+/* The outer hexagon is a red ring (clip-path hides a real border); the face is inset inside it. */
 .hex-avatar {
   display: block;
   flex: none;
+  box-sizing: border-box;
+  padding: 2px;
+  background: var(--accent);
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+}
+.hex-avatar-face {
+  display: block;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
   background: var(--tile-3);
   clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
@@ -17,9 +27,9 @@
   font-weight: 600;
   letter-spacing: .02em;
 }
-.hex-avatar-lg.hex-avatar-initials { font-size: 16px; }
-.hex-avatar-md.hex-avatar-initials { font-size: 14px; }
-.hex-avatar-sm.hex-avatar-initials { font-size: 11px; }
+.hex-avatar-lg .hex-avatar-initials { font-size: 16px; }
+.hex-avatar-md .hex-avatar-initials { font-size: 14px; }
+.hex-avatar-sm .hex-avatar-initials { font-size: 11px; }
 .hex-avatar-oxblood { background: var(--hex-oxblood); }
 .hex-avatar-navy { background: var(--hex-navy); }
 .hex-avatar-forest { background: var(--hex-forest); }