1.1 Logo lockup
The full lockup pairs the block icon with the wordmark. Four variants — light, dark, mono black, mono white — cover every surface.
1.2 Icon only
Use the icon alone where the wordmark would be too small — app icons, social avatars, favicons, UI chrome.
1.3 Clear space
Keep a margin equal to one block width (≈ the height of the lowercase “m” in the wordmark) on every side. More is fine. Less is a don't.
Clear space · 1× block width
1.4 Minimum sizes
Below these thresholds, the quad stops reading as four distinct blocks. Switch to the icon-only mark, or give the logo more room.
120px
Full lockup
Digital minimum
24px
Icon
App / favicon floor
30mm
Full lockup
Print minimum
8mm
Icon
Print minimum
1.5 Don'ts
The colour quad, the proportions, and the contrast all carry information. Don't break them.
Don't stretch or squash.
Don't rotate or skew.
Don't add drop-shadow.
Don't recolour the cubes.
Don't overlay gradients or filters.
Don't place the colour icon on low-contrast brand pink.
1.6 Anatomy & notes
Every file here is a native SVG. PNGs are exported at 2× for email and situations where SVG isn't supported.
- The full lockup uses 12% clear space proportional to icon width — built into the SVG viewBox.
- The wordmark alone is available in
03-wordmark/for situations where the icon is already present in context. - Favicons & app icons (16px through 1024px) live in
04-favicon-app-icon/with safe-area padding baked in. - The quad always reads pink → yellow → green → blue left-to-right, top-to-bottom. Don't reorder.