Logo of MyStyleGuide.io, a platform for sharing style guides and branding resources.

Logo Minimum Size Component

Define and display the minimum allowable size for your brand’s logos.

The Logo Minimum Size Component is designed for brand guidelines that need to specify how small a logo can be reproduced.
It allows you to create multiple “cards,” each showing a logo and its minimum size requirement — perfect for print, digital, and small‑scale usage rules.

This component is essential for maintaining legibility and brand integrity.

🌟 What You Can Do with the Logo Minimum Size Component

Inside this component, you can:

  • Add a title, subtitle, and category label
  • Choose how many cards appear per row
  • Customize background and text colors
  • Create multiple minimum‑size cards
  • Select logo images from your uploads
  • Add a custom minimum size label (e.g., “24px”, “0.5 inches”, “12mm”)
  • Reorder cards with drag‑and‑drop

It’s a clean, structured way to communicate logo size requirements.

🧭 Component Overview

When you open the Logo Minimum Size Component in the Component Editor, you’ll see four main sections:

1. Text Settings

These fields control the text that appears above the card grid.

Title

A large heading for the section.
Examples:

  • “Minimum Logo Size”
  • “Small‑Scale Usage”

Subtitle

A smaller supporting line.
Examples:

  • “Ensure the logo remains legible at all sizes”
  • “Do not reproduce the logo below these minimums”

Category Label

A label that appears above each card.
Examples:

  • “Primary Logo”
  • “Horizontal Lockup”
  • “Icon Mark”

2. Layout Settings

Cards Per Row

Choose how many minimum‑size cards appear in each row:

  • 1–6 per row
  • Wider cards for detailed diagrams
  • More cards per row for compact layouts

This gives you flexibility depending on how many logos you need to show.

3. Color Settings

You can customize:

Background Color

Sets the background behind the entire component.

Text Color

Controls the color of titles, subtitles, and labels.

Both fields support:

  • HEX values
  • Theme color presets
  • Leaving blank to use default styling

This ensures your minimum‑size section stays visually consistent with your brand.

4. Logo Cards

This is where you define each minimum‑size rule.

Each card includes:

Logo Image

Choose a logo from your uploaded images.
Supported formats include:

  • PNG
  • JPG
  • WEBP
  • SVG

If you don’t see the logo you need, upload it through the Media Upload button in the Component Editor.

Minimum Size Label

Enter the minimum size requirement for this logo.

Examples:

  • “24px”
  • “0.5 in”
  • “12mm”
  • “40pt”

This label appears directly under the logo in the final layout.

🔁 Reordering Cards

Cards can be reordered using drag‑and‑drop:

  • Grab the ⋮⋮ handle
  • Drag the card to a new position
  • The order updates instantly

This makes it easy to group related logos or arrange them by importance.

➕ Adding & Removing Cards

Add Card

Click + Create Card to add a new minimum‑size rule.

Delete Card

Each card includes a Delete Card button inside its panel.

🎨 Theme‑Aware Color Options

All color pickers automatically pull from your brand’s theme colors, including:

  • Light / dark backgrounds
  • Highlight colors
  • Typography colors

This ensures your minimum‑size section stays visually consistent with your brand.

💾 Saving Your Changes

As you edit:

  • Fields update the component’s JSON automatically
  • The preview refreshes in real time
  • Click Save Component to finalize your changes

Your minimum‑size cards will now appear on the page exactly as configured.

🎯 Summary

The Logo Minimum Size Component helps you:

  • Communicate minimum reproduction sizes clearly
  • Display multiple logo variations with their size rules
  • Customize layout and colors
  • Maintain brand consistency
  • Build a professional, standards‑based brand guide

It’s an essential component for any brand identity system.

More Tutorials

See All Tutorials
Modern, colorful MyStyleGuide.io logo with a sleek "M" design.

Sharing your brand just got easier

MyStyleGuide.io helps teams prevent off‑brand mistakes by giving everyone a single, reliable place to access your brand assets and guidelines. Built with thoughtful design and real‑world branding experience, it makes communicating your identity simple, consistent, and effortless
© 2023 - 2026 MyStyleGuide.io
  |  
Website Design by: 
Graphic Finesse