Logo
The YotoShelf logo is a pixel-art shelf scene. Two formats: a 1:1 mark and a 3:1 hero banner.
Hero Banner (3:1)
Three staggered shelves connected by glowing network lines with cards in transit. Represents the multi-estate value prop: home, classroom, family.
Mark (1:1)
A single cozy home shelf with a Yoto Mini, headphones, and cards. Used for project avatars, sidebar icons, and favicons.
Wordmark
"YotoShelf" is set in Nunito at weight 800 (--font-weight-display) with --tracking-tight. On a light surface the wordmark is the accent #E8654A; on the accent nav band it is white. It is never set in another face, and never in --color-primary-deep — the wordmark is a brand shape, not running text.
YotoShelf
Usage
The logo is a dark-background-baked pixel-art scene. On the site it appears inside a rounded plate (a border-radius: var(--radius-xl) container with the dark background colour #1C1714) that anchors it cleanly on the page surface. Keep the plate treatment consistent wherever the mark appears.
Do
- Place inside a rounded dark plate on light backgrounds
- Use the SVG versions for web and print
- Use the 48px PNG for sidebar icons
- Use the JPG for GitLab project avatars
- Resize with nearest-neighbor to keep pixels crisp
Don't
- Place directly on a light background without the dark plate
- Stretch or distort the aspect ratio
- Resize with bilinear/bicubic filtering
- Add extra effects, outer shadows, or borders on top of the plate
- Recolor the pixels to the accent token — the mark's orange is baked in from the original generation pass and is deliberately not
--color-primary
Files
| File | Format | Size | Use |
|---|---|---|---|
| mark.svg | SVG | 235x235 grid | Profile, sidebar, general use |
| hero.svg | SVG | 512x169 grid | README headers, banners |
| favicon-16.svg | SVG | 16x16 grid | Browser favicon |
| favicon-32.svg | SVG | 32x32 grid | Browser favicon (retina) |
| mark-48.png | PNG | 48x48 px | Sidebar icon |
| mark-512.jpg | JPG | 512x512 px | GitLab project avatar |
For how the logo was generated and how to reproduce or iterate it, see the Process page.