Preview image. Unlock full-res
Avatar construction page defining clear space as 40% of the mark's scale, shown with the black avatar centred in a 3x3 grid and grey avatars marking the exclusion margins.
Summary
A construction page setting the avatar's clear space at 40% of its scale, illustrated by the black mark centred in a 3x3 grid with grey avatars used to measure the surrounding margin.
Visual description
Standard layout: cream left column with section number "2.4.5 Clear space" and three short paragraphs explaining the rule and encouraging more room where possible; navigation list lower-left with Avatar bolded. The white panel centres a 3x3 square grid with the solid black avatar filling the middle cell. Greyed avatars are placed at the top, bottom-left, and right edges as measuring units, each annotated "The clear space is determined by 40% the scale of the avatar". A middle annotation explains that 40% equals the distance from the top of the avatar to the bottom of the "c" and can be used as a visual guide. The cream footer carries copyright, title, and "Version 01".
Key takeaway
Defining the exclusion zone with a self-referential unit (a scaled-down copy of the mark itself, plus a feature-of-the-mark measurement) rather than an abstract X-height. Using greyed clones of the avatar as the spacing ruler keeps the rule visual and tied to the mark. The 3x3 grid frames the centre clearly.
Reuse notes
A reusable clear-space template for an avatar or icon. The "use a scaled copy of the mark as the spacing unit" approach is widely applicable and avoids inventing a separate measurement token. Most useful for marks placed near other elements in tight UI or signage. Pairs with the minimum-size and frame-space pages around it.
From this deck: Avatar clear space
View deck
