The Percentage Clear Space Component documents the minimum clear space required around a logo or brand mark. By combining automatically generated diagrams with optional custom illustrations, it helps communicate one of the most important rules in any visual identity system.
Use this component whenever your brand guidelines need to demonstrate how much space should surround a logo to maintain clarity, recognition, and visual impact.
The Percentage Clear Space Component is ideal for:
Multiple diagrams can be displayed together, making it easy to document different logo variations or spacing requirements in a single section.
Customize the information displayed above your collection of clear space diagrams.
Introduce the section with a descriptive heading.
Examples include:
Provide additional guidance or explain why the spacing requirements are important.
Display a label above each diagram to identify the logo variation being documented.
Examples include:
Choose how many diagrams appear on each row.
Fewer cards create larger, more detailed illustrations, while additional columns provide a more compact overview of multiple logo variations.
Each diagram is displayed as an individual card.
You can create as many cards as needed and arrange them in any order.
Cards can be reordered using drag-and-drop to present your logo standards in a logical sequence.
Each card supports one of two display modes.
Generate a clear space diagram directly within MyStyleGuide.io.
Configure:
The system automatically creates a clean, consistent diagram based on your specifications.
This is ideal when documenting standardized spacing rules across multiple logos.
Upload your own completed illustration instead.
This option is useful when:
You can also include a description explaining the rule shown in the illustration.
Customize the appearance of the section using optional theme-aware colors.
Available options include:
If no colors are selected, the component automatically inherits your brand's default styling.
The Percentage Clear Space Component integrates directly with your brand theme.
You can:
This keeps your logo standards visually consistent with the rest of your brand guide.
Click Save Component to apply your updates.
Your diagrams are immediately reflected in the live preview, allowing you to verify your logo standards before publishing.
The Percentage Clear Space Component provides a clear, visual way to document logo spacing requirements.
Whether you're generating diagrams automatically or using custom illustrations, it helps communicate the rules that protect your brand's identity while keeping your documentation professional, consistent, and easy to understand.
