Logo of UI Challenges
Sign in

Gallery

See what others have created

Lockups
M

mootpullback

@mootpullback

MediumSaaS

Lockups

Design a brand lockup component: a fixed grouping of logo, brand name, tagline, and optional URL or contact line. Treat it as a reusable unit, not a one-off composition. The core job is to keep the brand mark and supporting text visually tied together while still reading cleanly at a glance.

Create at least two layouts: a horizontal lockup for wide spaces and a stacked version for tighter containers. Define how the component behaves when the tagline is missing, when the brand name is long, and when the metadata line is optional. The mark should stay dominant; supporting text should step down clearly in size and weight.

Show spacing, alignment, and scale rules in the component itself. Use examples on both light and dark backgrounds so contrast and edge spacing are explicit. If you include a usage preview, make it clear where the lockup can sit in a header, footer, or marketing panel without breaking its proportions.

What to deliver

  • Design a lockup component with logo, supporting text, and optional metadata.
  • Define horizontal and stacked variants for different container widths.
  • Specify spacing, alignment, and scale rules between elements.
  • Show states for missing tagline, missing metadata, and long brand names.
  • Include a usage example for light and dark backgrounds.

Experiment with the negative space! It can be as impactful as the lockup elements themselves, defining the balance and focus of your design.