TLDR: Before wiring in a third-party logo, open the image and read what it asserts. A badge baked into the pixels is a claim — and in financial UI, an unearned claim is a liability.

what we were building

I'm building a co-branded referral page for my cancer-patient directory (a cancer education business) and a viatical-settlement provider — they buy life insurance policies from people who need cash now, often cancer patients who need to fund treatment.

The deal with my contact at the settlement provider: one shared page, the cancer education business's voice, the settlement provider's financial engine, a single unified navy+gold palette.

Co-branded 50/50 — but not a literal split-down-the-middle. One product.

the logo sourcing situation

The settlement provider owes me a brand guide and logo assets under the agreement.

They haven't landed yet.

I needed to ship.

So I did what any builder would do: I opened their website and pulled their assets directly.

the trap I almost walked into

Here's where it gets interesting.

Their site has TWO horizontal logo variants. One is their clean white wordmark — the footer wordmark file. Simple. No frills.

The other is their header logo.

That second one has their NYSE ticker badge baked right into the pixels. That stock ticker is a financial credential claim. And alongside that, the settlement provider's feature set includes BBB trust marks and a "6–8x your policy value" headline, all of which were deliberately gated behind NEXT_PUBLIC_PARTNER_CREDENTIALS_ENABLED=false until we get written approval from the settlement provider.

Here's the thing: if I had just grabbed the header logo — the one right at the top of their page, the obvious one — I would have wired that ticker badge straight onto the page.

Through an image file.

The flag system I built to gate financial claims would have meant nothing.

I would have smuggled the credential in through the design layer.

the fix

Grabbed the clean footer wordmark instead.

For the dark footer: drop it in as-is — white on navy, no changes needed.

For the light header: I needed navy-on-cream, not white-on-cream (invisible). The usual move here is CSS brightness-0 which recolors to pure black. Clean enough, but harsh — it fights the brand palette.

Better move: PIL (Python Imaging Library) recolor. Walk the opaque pixels, swap them to brand navy hsl(210 52% 16%) while preserving the alpha channel. You get a crisp, on-palette logo that looks like it was designed for the light background — because now it was.

Result: public/logos/partner-white-horizontal.webp for footer, public/logos/partner-navy-horizontal.png for the light header. Both render per-tone in the CoBrandLockup component in src/components/Brand.tsx.

why this matters to me

A logo isn't just a picture. It can assert a claim.

In financial UI especially — where trust signals have legal weight — you have to open the asset and ask: what does this image say? Does it make a promise? Does it carry a credential we haven't earned the right to display?

The guardrail I almost missed wasn't a code problem. It was a design decision that had compliance consequences.

Now I check every third-party asset before it goes in: badges, tickers, taglines, certifications. If any of those are gated, the whole image might need to be.

Design and compliance aren't separate tracks. Sometimes they're the same pixel.