frontend/app/trees/[id]/tree/chart.css

@@ -1,7 +1,10 @@
 .f3 {
   --female-color: rgb(196, 138, 146);
   --male-color: rgb(120, 159, 172);
-  --genderless-color: lightgray;
+  /* Warm mid-gray for unset-sex / redacted "Living person" cards — matches the
+     muted male/female tone weight and the brand palette, instead of the library's
+     washed-out lightgray. */
+  --genderless-color: rgb(156, 150, 143);
   --background-color: rgb(33, 33, 33);
   --text-color: #fff;
 

frontend/app/trees/[id]/tree/page.tsx

@@ -185,7 +185,9 @@ export default function TreePage() {
             "first name": fn || "Unnamed",
             "last name": ln,
             birthday: years.get(pp.id) ?? "",
-            gender: pp.gender === "female" ? "F" : "M",
+            // male → blue, female → pink, unset → genderless (gray). Unset sex no
+            // longer defaults to male/blue (which was misleading).
+            gender: pp.gender === "male" ? "M" : pp.gender === "female" ? "F" : null,
           },
           rels: {
             spouses: ok(partnersOf(pp.id), pp.id),

frontend/components/public-tree-chart.tsx

@@ -120,7 +120,10 @@ export function PublicTreeChart({
             "first name": fn || "Unnamed",
             "last name": ln,
             birthday: years.get(pp.id) ?? "",
-            gender: pp.gender === "female" ? "F" : "M",
+            // male → blue, female → pink, unset/redacted → genderless (gray).
+            // Redacted living people have null gender, so they render gray rather
+            // than defaulting to male/blue (and never imply a real person's sex).
+            gender: pp.gender === "male" ? "M" : pp.gender === "female" ? "F" : null,
           },
           rels: {
             spouses: ok(partnersOf(pp.id), pp.id),