Marketplace logos on a dark UI —
three treatments, decided visually
Third-party recipe logos arrive inconsistent: transparent PNGs, all-black marks that vanish on dark, no padding, baked-in shadows, wild bounding boxes. Below, the same ten hard cases rendered three ways on the real dark recipe-card surface — the do-nothing case, the white-plates proposal, and the standardized LogoTile. Scan any row across all three columns.
The same ten logos, three ways
each row is one hard case · verdicts per column
1 · Raw on dark
logos placed directly on the card2 · White plates
each logo on its own white patch3 · LogoTile
one standardized chip quarantines the messLogoTile — the component spec
option 3, defined precisely enough to build
tile 1em = size · radius 10px @48
dashed = 62% content box
logo contain + centered inside it
dashed = 62% content box
logo contain + centered inside it
sizes32 (dense list rows) · 48 (marketplace cards — shown above) · 64 (recipe detail header — shipped in morpheus.html)
radius10px at 48 (the --radius-input tier; scale proportionally: 8 @32, 10 @64)
background
--surface2 — one neutral for every logo, both themes (#33333D-range dark / warm gray light). Never hardcoded, never per-logo.border1px
--line hairline — separates the tile from the card without adding a second visual voicecontent box62% of tile per axis (≈30px inside 48) — the inner-padding ratio every logo respects, so optical size is uniform regardless of each mark's own bounding box
fit
object-fit: contain, centered on both axes, aspect preserved. Wordmarks fill the content-box width and stay vertically centered. Rasters never upscale past intrinsic size.- R1Monochrome-dark marks auto-invert. If a mark is effectively single-color and dark (luminance below threshold), render it inverted on the dark tile — see Corvid and HexKit in column 3. Colored marks are left alone.
- R2Baked-in backgrounds are tolerated, not fixed. A logo that ships its own colored plate (Forge) sits inside the tile — the inconsistency is quarantined to 30px instead of shouting from the card. Prefer a transparent variant when the vendor offers one.
- R3Baked shadows and off-center bounding boxes are neutralized by geometry. The 62% content box + contain centering re-centers lopsided artwork; a baked shadow reads as part of the mark instead of a smudge on a white plate.
- R4No exceptions. No per-logo tile colors, no size overrides, no white plates for "just this one." The moment one logo escapes the tile, the card is back to arbitrating every vendor's brand kit.