Below are drop-in additions (small, surgical). You don’t need to change your Domain page—your /domains?search= hook already works perfectly.

1) Add shared palettes (new file)

Create src/components/brand/palettes.ts:

// src/components/brand/palettes.ts
export type Palette = { name: string; bg: string; fg: string };

export const PALETTES: Palette[] = [
  { name: 'Obsidian', bg: '#0f172a', fg: '#e2e8f0' },   // slate/ice
  { name: 'Aurora',   bg: '#111827', fg: '#a7f3d0' },   // near-black / mint
  { name: 'Sunbeam',  bg: '#fde68a', fg: '#1f2937' },   // butter / charcoal
  { name: 'Canvas',   bg: '#ffffff', fg: '#111827' },   // white / almost black
  { name: 'Fog',      bg: '#f1f5f9', fg: '#0f172a' },   // zinc / navy
  { name: 'Citrus',   bg: '#f59e0b', fg: '#111827' },   // amber / charcoal
  { name: 'Berry',    bg: '#7c3aed', fg: '#f5f3ff' },   // violet / lilac
  { name: 'Coral',    bg: '#fb7185', fg: '#111827' },   // rose / charcoal
];

2) Mini palette picker (new file)

Create src/components/brand/PalettePicker.tsx:

// src/components/brand/PalettePicker.tsx
import React from 'react';
import { PALETTES } from './palettes';

export function PalettePicker({
  value,
  onChange,
  size = 18,
}: {
  value: number;
  onChange: (index: number) => void;
  size?: number;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {PALETTES.map((p, i) => (
        <button
          key={p.name}
          aria-label={p.name}
          title={p.name}
          onClick={() => onChange(i)}
          className={`rounded-full border transition-transform focus:outline-none ${value === i ? 'ring-2 ring-offset-2 ring-primary' : 'border-border hover:scale-105'}`}
          style={{
            width: size + 6,
            height: size + 6,
            background: `linear-gradient(135deg, ${p.bg} 60%, ${p.fg} 60%)`,
          }}
        />
      ))}
    </div>
  );
}

3) Update LogoPreview to accept palette + font

Edit src/components/brand/LogoPreview.tsx:

// ...existing imports
import { PALETTES } from './palettes';

export function LogoPreview({
  name,
  paletteIndex = 0,
  fontFamily,
}: {
  name: string;
  paletteIndex?: number;
  fontFamily?: string; // optional, still cycles fonts by default
}) {
  useEffect(() => loadGoogleFonts(), []);
  const pal = PALETTES[paletteIndex % PALETTES.length];

  const fonts = fontFamily
    ? [{ family: fontFamily, weight: 700 }]
    : FONTS.slice(0, 4); // keep multiple previews when no font chosen

  return (
    <div className="grid grid-cols-2 gap-3">
      {fonts.map((font, i) => (
        <div
          key={`${font.family}-${i}`}
          className="rounded-lg p-5 flex items-center justify-center"
          style={{ backgroundColor: pal.bg }}
        >
          <span
            style={{
              fontFamily: `'${font.family}', system-ui, sans-serif`,
              fontWeight: font.weight as any,
              color: pal.fg,
              letterSpacing: '0.3px',
              fontSize: '1.25rem',
            }}
          >
            {name}
          </span>
        </div>
      ))}
    </div>
  );
}

4) Wire palettes into the Name Wizard cards

Edit your BusinessName.tsx (the upgraded one I gave you). Add local state + handlers and pass palette choice into Brand Kit handoff.

a) Add imports & local types (top of file)
import { LogoPreview } from '@/components/brand/LogoPreview';
import { PalettePicker } from '@/components/brand/PalettePicker';
import { PALETTES } from '@/components/brand/palettes';

// Attach brand meta to each card selection (persist in localStorage alongside saved names)
type BrandChoice = {
  paletteIndex?: number;
  fontFamily?: string;
};

b) Add state to track per-card palette (near your other useStates)
// index → BrandChoice (palette/font per generated name card)
const [cardChoices, setCardChoices] = useState<Record<number, BrandChoice>>({});

c) Default palette cycling

When rendering cards, compute a default palette using the card index (classic Canva vibe):

const defaultPalette = (i: number) => i % PALETTES.length;

d) Update “Send to Brand Kit” to include palette/font

Replace your existing sendToBrandKit with:

const sendToBrandKit = (businessName: string, index?: number) => {
  const choice = (index != null ? cardChoices[index] : undefined) || {};
  const params = new URLSearchParams({
    name: businessName,
    // pass palette/font if chosen; brand-kit page can read and apply defaults
    palette: choice.paletteIndex != null ? String(choice.paletteIndex) : '',
    font: choice.fontFamily || '',
  });
  setLocation(`/brand-kit?${params.toString()}`);
};

e) In each Generated Name card, add picker + preview

Inside the generatedNames.map((nameData, index) => ...) block:

const open = expandedPreview === index;
const paletteIndex = cardChoices[index]?.paletteIndex ?? defaultPalette(index);
const fontFamily = cardChoices[index]?.fontFamily;

...

{/* Domain badges ... */}

{/* Quick logo previews + palette picker */}
{open && (
  <div className="mt-4 space-y-3">
    {/* Mini palette picker */}
    <div className="flex items-center justify-between">
      <div className="text-sm font-medium">Palette</div>
      <PalettePicker
        value={paletteIndex}
        onChange={(i) =>
          setCardChoices((s) => ({ ...s, [index]: { ...(s[index] || {}), paletteIndex: i } }))
        }
      />
    </div>

    <LogoPreview name={nameData.name} paletteIndex={paletteIndex} fontFamily={fontFamily} />

    <div className="mt-3 flex gap-2">
      <Button size="sm" variant="outline" onClick={() => goToDomains(nameData.name)}>
        Check Domains
      </Button>
      <Button size="sm" onClick={() => sendToBrandKit(nameData.name, index)}>
        Use in Brand Kit
      </Button>
    </div>
  </div>
)}


(Optional) If you also want a simple “Font” chooser, you can add a small select above the preview. Ping me and I’ll drop it in—the LogoPreview already accepts fontFamily.

5) Persist palette choice with Saved Names (optional)

If you want the Saved Names section to remember chosen palettes, store the BrandChoice keyed by the name:

Add another state:

const [savedChoices, setSavedChoices] = useState<Record<string, BrandChoice>>({});


When toggling save, merge cardChoices[index] into savedChoices[nameData.name] and persist under a new localStorage key (similar to saved names).

When rendering saved cards, use savedChoices[nameData.name]?.paletteIndex to drive LogoPreview + pass to sendToBrandKit.

(Keeping this optional so your page doesn’t balloon; I can paste the exact code if you want it now.)

6) Domain search page

No change needed. Your page already:

Reads ?search= from the URL

Normalizes to .com if no TLD

Queries your /api/domains/search

“Buy Now” deep-link opens GoDaddy

This plays perfectly with the “Check Domains” button on each name card.

What you’ll see

Each generated name card cycles through palettes by default (index-based).

Clicking the eye opens a tray with:

Palette picker (tiny swatches, Canva-style)

Instant logo previews in the chosen palette

Buttons: Check Domains / Use in Brand Kit

Clicking Use in Brand Kit carries ?name=…&palette=…&font=… so Brand Kit opens pre-styled.