# Process

How the YotoShelf logo was created and how to iterate it.

## Creation

The mark was created in [Aseprite](https://www.aseprite.org/) at 32×32 pixels. The brief was: "three shelves of Yoto cards, connected by glowing network lines, warm and cozy, dark background, library feel."

The final illustration went through three rounds of iteration:
1. Initial concept — shelves only, no network lines
2. Added network lines and warm glow effects
3. Refined card sizes and spacing for legibility at small sizes

## The constraint

Pixel art at 32×32 forces every design decision to matter. There is no room for decorative elements that do not communicate something. The three shelves = card library; the network lines = self-hosted sharing; the warm glow = home/cozy. All three brand values in 1024 pixels.

## Iterating the mark

If the mark needs to be updated:

1. Open `mark.aseprite` in Aseprite (source file in the design system repo)
2. Make changes at 32×32. Export as PNG.
3. Convert to SVG using a pixel-art-preserving tool (e.g. `png2svg` with no path simplification, or hand-trace in Inkscape)
4. Test at 24×24 (topbar) and 32×32 (hero). The mark must read clearly at both sizes.
5. Update `/public/logo/mark.svg` and regenerate the favicon.

## What not to change

- The three-shelf structure — this is the core metaphor
- The warm dark background — this defines the "cozy" brand feel
- The orange accent — this is the Yoto brand tie-in

Changes to the number of shelves or the removal of network lines would require a new design brief and full stakeholder alignment.