let’s let you pick the logo text color from Black + your 8-color palette. I’ll add a tiny color selector in Step 3, and use that both in the font preview and the Combine step.

Here are the drop-ins for BrandKitPage.tsx:

1) Add a type + state + resolver (near your other useStates)
// Allow choosing text color from "black" OR any palette key
type TextColorChoice = "black" | PaletteKey;

const [textColor, setTextColor] = useState<TextColorChoice>("primary");

const resolveTextColor = () =>
  textColor === "black" ? "#000000" : palette[textColor];

2) In the “1) Choose your font” card, add a color picker UI

Put this under your <FontPicker … /> (or under the font dropdown if you’re not using the visual picker):

{/* Text color selector */}
<div className="mt-3">
  <div className="text-xs text-neutral-600 mb-2">Logo text color</div>
  <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
    {[
      { key: "black", label: "Black", hex: "#000000" },
      { key: "primary", label: "Primary", hex: palette.primary },
      { key: "secondary", label: "Secondary", hex: palette.secondary },
      { key: "accent", label: "Accent", hex: palette.accent },
      { key: "highlight", label: "Highlight", hex: palette.highlight },
      { key: "neutral", label: "Neutral", hex: palette.neutral },
      { key: "surface", label: "Surface", hex: palette.surface },
      { key: "textLight", label: "Text (Light)", hex: palette.textLight },
      { key: "textDark", label: "Text (Dark)", hex: palette.textDark },
    ].map((c) => {
      const active = textColor === (c.key as TextColorChoice);
      return (
        <button
          key={c.key}
          onClick={() => setTextColor(c.key as TextColorChoice)}
          className={`rounded-lg border p-2 text-left hover:bg-neutral-50 ${
            active ? "border-neutral-900" : "border-neutral-200"
          }`}
          title={c.label}
          type="button"
        >
          <div className="h-6 w-full rounded" style={{ background: c.hex }} />
          <div className="text-[11px] mt-1 text-neutral-600">{c.label}</div>
        </button>
      );
    })}
  </div>
</div>

3) Use the chosen color in the live preview

Change your preview block’s color from palette.primary to resolveTextColor():

<div
  style={{
    fontFamily,
    color: resolveTextColor(), // <-- use chosen color
    fontWeight: 700,
    fontSize: 42,
    lineHeight: 1.2,
  }}
>
  {name}
</div>
<div className="text-xs text-neutral-500 mt-2">
  Preview shown in your selected text color ({resolveTextColor()}).
</div>

4) Use the chosen color in the Combine step

When composing the final PNG, pass the selected color:

const combined = await composeIconWithText({
  iconUrl,
  name,
  fontFamily,
  color: resolveTextColor(),  // <-- use chosen color
  layout: combineLayout,
  gap: 28,
  maxWidth: 1024,
  maxHeight: 512,
});


That’s it — you can now pick Black or any of your 8 palette colors for the logo text, and it will reflect instantly in the preview and in the final combined logo.