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 orange 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.
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 — which anchors it cleanly on the paper-cream page surface. Keep the plate treatment consistent wherever the mark appears in a light-mode context.
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
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.