Responsive (adaptive) logo
One logo drawn at several levels of detail, so the tiny version drops ornament instead of shrinking into a smudge.
See it
What it is
A responsive logo is one mark drawn at several levels of detail instead of one mark scaled up and down. The usual ladder has three or four rungs: full lockup (symbol, name, descriptor), symbol plus name, symbol alone, then a reduced glyph or single initial. You swap rungs at set sizes, so the small version loses ornament rather than losing legibility. Joe Harrison's 'Responsive Logos' project, which stepped Disney, Coca-Cola, and Nike down to their simplest recognizable forms, is the reference everyone points at.
Reach for it when the same identity has to live on a billboard and a favicon: app icons, watch faces, browser tabs, embroidered polos, sponsor walls, video bugs. On the web the swap is a container query or breakpoint that shows a different SVG, not a CSS transform.
Gotcha: every rung has to keep at least one signature cue, silhouette, color, or a distinctive curve, or you have quietly designed two unrelated logos and split your recognition in half. Tie the switch points to the logo's rendered width, not the viewport width, since a small logo in a wide header is still a small logo.
Ask AI for it
Using the attached logo variants and these measured legibility thresholds [WIDTHS], build a four-rung responsive ladder: (1) full lockup with symbol, name, and descriptor, (2) symbol plus name, (3) symbol only, (4) a single reduced glyph or initial that still holds the signature shape. Preserve the signature silhouette, color, and one distinctive detail across all four so they read as one identity, but allow optical stroke and spacing adjustments at the smaller rungs instead of forcing one stroke weight across every scale. Assign each supplied threshold as a switch point measured on the logo's rendered width, and show every rung at its intended rendered size rather than scaled to match.