Responsive logo systems: choose the right lockup for each placement

1. Start with real placements, not a ladder of logo sizes

Collect the difficult applications before drawing more variants: a narrow website header, square account avatar, sponsor strip, vertical label and small physical object. Record the available shape, surrounding content and viewing conditions. A wide but shallow header and a tall package panel create different problems even if both are called small.

Build a placement board with the real constraints. Show the logo at its intended visible size, alongside navigation, neighboring brands or product information. A neatly arranged identity presentation can hide failures that become obvious in a crowded interface. Test the context the recipient will actually use.

This is separate from exporting larger PNGs. More pixels cannot rescue a composition whose wordmark is unreadable at its displayed size. Likewise, a vector file preserves geometry when scaled but does not automatically preserve recognition. The question here is which approved composition belongs in the available space.

Continue with: Set raster dimensions after choosing the composition

2. Define a small family of approved compositions

List the variants the identity genuinely needs: perhaps a horizontal signature, stacked signature and standalone symbol. A wordmark-only identity may not have a usable symbol at all. Do not manufacture one by cropping a letter merely to complete a familiar presentation template.

Decide which elements are mandatory. A legal or organizational qualifier, parent-brand endorsement or product name may be essential even when a tagline is optional. If a compact variant removes information, record where that is allowed and how the missing identity is supplied by the surrounding application.

UCLA Health’s published system distinguishes horizontal and stacked logos and recommends the stacked version for vertical or tight spaces. That is a useful example of an explicit selection rule, not a universal rule for every brand. Your own system must follow its own approved constructions and hierarchy.

Further reading: UCLA Health: logo variants and usage

3. Specify what triggers a different lockup

Use the table as a design-review worksheet. The fallback is not automatically a smaller logo. It may be a different layout, more allocated space or a request for an additional approved asset. Preserve proportions and do not squeeze a mark to make a specification appear satisfied.

4. Test switch points in the component

Do not prescribe a universal breakpoint such as “all logos change at 768 pixels.” The available space may be determined by a navigation component, a long translated label or a sidebar rather than the browser width. Work with the developer to identify the constraint that actually makes the current lockup fail.

Resize the real layout gradually and note the last comfortable state for each candidate. Test the switch itself, including whether the mark jumps in perceived weight or alignment. Preserve the intended identity of the link or control when the image changes. An asset swap should not create two competing clickable logos.

Record tested conditions rather than claiming certainty everywhere: component dimensions, approved variant, relevant background and any exceptional layouts. Retest when navigation, language or surrounding content changes. A breakpoint that worked in the original mockup is not permanent evidence that the new layout works.

5. Separate responsive behavior from unauthorized editing

The delivery should contain complete variants, not a kit of parts inviting recipients to improvise. Lockup relationships, spacing and lettering should remain intact. If the brand has an official compact construction, deliver that artwork rather than telling the developer to hide selected paths from a complex SVG.

Brand manuals demonstrate why permission matters. Hexure’s published guidelines specify a horizontal logo and restrict the symbol’s standalone uses to particular contexts. A generic recommendation to supply every possible lockup would contradict that identity. More variants are not automatically a better system.

Use the existing minimum-size and clear-space specification when evaluating each variant, but also judge recognition and context. A symbol may technically fit and still fail to tell a new audience whose communication they are seeing. If the name is necessary, change the layout rather than assume familiarity.

Continue with: Document variant-specific spacing and size limits

Further reading: Hexure brand guidelines: horizontal logo and symbol usage

6. Deliver selection rules with the assets

Give each approved composition a stable name and include examples of permitted and unsuitable placements. Identify the default variant, the conditions for an alternative and who approves an exception. Send the same rule to designers and developers so the website does not become a separate, unofficial identity system.

After approving the artwork and naming system, use logopack.app to prepare an organized export package, then review the result against your release list. A free account exports the supplied demo with its SVG artwork unchanged; exporting your own artwork requires a paid plan. Packaging does not approve new variants or repair a design.

Further reading: Open the generator · View current plans

Responsive system checklist

• ✓The placement board uses actual proportions and context.
• ✓Every delivered variant is approved, not improvised from a crop.
• ✓Mandatory identifying information survives each permitted switch.
• ✓The smallest state remains recognizable in its real application.
• ✓Switch conditions were tested in the component, not guessed from device labels.
• ✓The delivery explains default, alternative and exception handling.
• ✓New content or layout changes trigger another placement review.