diff --git a/studio/frontend/src/features/profile/utils/avatar-initials.ts b/studio/frontend/src/features/profile/utils/avatar-initials.ts
index 254a50719b..2683b52a37 100644
--- a/studio/frontend/src/features/profile/utils/avatar-initials.ts
+++ b/studio/frontend/src/features/profile/utils/avatar-initials.ts
@@ -7,7 +7,19 @@ export function initialsFromName(name: string): string {
   return trimmed[0]!.toUpperCase();
 }
 
-/** Default Unsloth-green background for avatar fallback (readable white text). */
+/**
+ * Default Unsloth-brand background for the avatar fallback (readable white text).
+ *
+ * Uses the shared `--primary` design token instead of a one-off hardcoded
+ * shade, so the avatar always matches the app's general brand green (send
+ * button, primary buttons, etc.). It previously hardcoded a slightly different
+ * `#14b789`, which looked inconsistent next to primary-colored UI such as the
+ * artifact preview/code panel.
+ *
+ * The literal fallback (the current `--primary` value) only applies if this
+ * reusable avatar is ever rendered outside the theme root, where `--primary`
+ * is undefined -- it keeps the avatar branded instead of transparent.
+ */
 export function avatarBgStyle(): { backgroundColor: string } {
-  return { backgroundColor: "#14b789" };
+  return { backgroundColor: "var(--primary, #17b88b)" };
 }