# Logo

Mark, hero banner, favicons, and usage guidelines.

## The mark

The YotoShelf mark is a pixel-art illustration of three cozy shelves connected by glowing network lines — a visual metaphor for "a shared library, connected". It is hand-crafted at small resolution and scaled up with `image-rendering: pixelated`.

The mark is available in two variants:
- `/logo/mark.svg` — compact mark, used in the topbar (24×24)
- `/logo/hero.svg` — full hero illustration (520px wide), used on the landing page

## Favicon

The favicon is derived from the mark at 32×32 and 16×16. Provided as:
- `/favicon.svg` — SVG favicon (modern browsers)
- `/favicon.ico` — ICO fallback

## Background requirement

The mark is designed for dark backgrounds. The pixel art has a dark background baked in (`#1c1714`). When placed on a light background, wrap it in a container with `background: #1c1714` or use the `topbar-mark` CSS class which applies this.

## Usage guidelines

- Do not recolor the mark. The orange accent is the only brand color in the pixel art.
- Do not crop the mark. The surrounding pixels are part of the illustration.
- Do not place the mark on a white background without the dark wrapper.
- The wordmark "YotoShelf" uses Fraunces Bold. Do not use a different font.

## File locations

All logo assets live in `/public/logo/` in this repository. The design system submodule (`frontend/design/`) contains the canonical source files.