Logo Clearspace

Show the protected space around your logo with a labeled measurement diagram.

<LogoClearspace mark="brandmark" />

Usage

Display the configured logotype’s clearspace. Configure the artwork and logo.clearspace in Logos.

<LogoClearspace />

Examples

Show the brandmark

The opening preview uses mark="brandmark". Both marks share the same configured clearspace rule; choose the artwork needed for the current section.

<LogoClearspace mark="brandmark" />

Show the logotype

The opening preview uses the brandmark. Omit mark to show the wider logotype with the same configured clearspace rule.

<LogoClearspace />

Configure the protected space

Set this property inside brand.logo in brandtree.config.ts to update both mark diagrams. The ratio controls the diagram padding; the unit provides the human-readable measurement in its caption. Keep both aligned with your rule.

clearspace: { ratio: 0.5, unit: "the height of the lowercase b" },

Clearspace behavior

The diagram uses brand.logo.clearspace.ratio for its padding and brand.logo.clearspace.unit in the localized caption. There is no per-instance spacing override. Measurement ticks are hidden at viewport widths up to 34rem; the protected zone and caption remain visible.

API reference