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
+      <span className={`hex-avatar hex-avatar-${size}`}>
-      <img className={`hex-avatar hex-avatar-${size}`} src={pictureUrl} alt="" width={width} height={height} />
+        {/* 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">
+    <span className={`hex-avatar hex-avatar-${size}`} aria-hidden="true">
-      {initials(name)}
+      <span className={`hex-avatar-face hex-avatar-initials hex-avatar-${toneFor(name)}`}>{initials(name)}</span>
     </span>
   );
 }

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%);