Chapter 17 / 29 · Brand assets
Logos. The marks.
Three lockups. Five variants each (color, dark, light, mono-black, mono-white). SVG masters plus @1x / @2x / @3x PNG renderings — pick the variant that works on your background, pick the format your platform supports.
17.1 Full lockup
The icon + wordmark together. Use this anywhere the mark needs to read as 'MagicBlocks' at first glance.
All shipped variants
5 variants × 4 file formatsSVG master + @1x / @2x / @3x PNG renderings per variant. Click url to copy the canonical CDN URL, <img> for a ready-to-paste image tag, react for the JSX snippet.
Protection rules
minimum 120px · 30mm printBelow the registered floor, the mark stops reading as a brand and starts reading as clutter. Always allow at least 38px of clear space on every side.
Minimum size
120px · 30mm print
Do · at minimum Below floor — don't
60px (too small)
Don't · sub-minimum Clear space
≥ 38px on every side
17.2 Icon
The icon alone. App tile, avatar, favicon, or anywhere a square mark reads better than a horizontal lockup.
All shipped variants
3 variants × 4 file formatsSVG master + @1x / @2x / @3x PNG renderings per variant. Click url to copy the canonical CDN URL, <img> for a ready-to-paste image tag, react for the JSX snippet.
Protection rules
minimum 24px · 8mm printBelow the registered floor, the mark stops reading as a brand and starts reading as clutter. Always allow at least 51px of clear space on every side.
Minimum size
24px · 8mm print
Do · at minimum Below floor — don't
12px (too small)
Don't · sub-minimum Clear space
≥ 51px on every side
17.3 Wordmark
The word “MagicBlocks” standalone. Use when the icon would crowd or duplicate (e.g. inside an icon-led card).
All shipped variants
2 variants × 4 file formatsSVG master + @1x / @2x / @3x PNG renderings per variant. Click url to copy the canonical CDN URL, <img> for a ready-to-paste image tag, react for the JSX snippet.
Protection rules
minimum 90pxBelow the registered floor, the mark stops reading as a brand and starts reading as clutter. Always allow at least 26px of clear space on every side.
Minimum size
90px
Do · at minimum Below floor — don't
45px (too small)
Don't · sub-minimum Clear space
≥ 26px on every side
17.4 Misuse — don't
The shapes ship pre-treated. If your design needs a stretched, recoloured, or rotated mark, you don't need our mark — you need your own.
- Don't stretch
Scale uniformly. The lockup proportions are locked.
- Don't recolour
Use only the registered variants — color, dark, light, mono-black, mono-white.
- Don't rotate
The mark sits horizontally. Vertical or angled placements break recognition.
- Don't add effects
No drop shadows, glows, gradients, or strokes — the file already carries the canonical treatment.
- Don't crop
The shapes have intentional padding. Cropping breaks the silhouette.
- Don't outline
Don't trace a stroke around the mark. Use the mono variants if you need a single-colour treatment.