# Design System

Brand identity, design tokens, shared components, and logo assets for the YotoShelf ecosystem.

YotoShelf is a power tool for parents and teachers who manage Yoto audio cards across multiple homes, classrooms, and families. The design language balances **operational density** with **emotional warmth**.

## Design direction

Three references shaped the visual language:

- **Linear** — precision, keyboard-first UX, crisp task states. Every click does one thing efficiently.
- **Plex** — media library ownership, cover art grids. "My library, my rules."
- **Are.na** — warm curation, personal collections. A digital bookshelf that reflects taste.

## Brand identity

**Colors:** Yoto Orange `#F45436` as the primary accent, warm neutrals throughout. Never pure gray — everything leans warm.

**Typography:** Fraunces (display serif) + DM Sans (body sans) + IBM Plex Mono. The serif/sans contrast says "curated library" — editorial warmth meets operational precision.

## What's in this section

- [Colors](/design/colors) — brand, semantic, neutral, and sidebar palettes with interactive swatches
- [Typography](/design/typography) — font families, type scale, weights, and specimens
- [Spacing](/design/spacing) — 4px-base scale with visual bars
- [Components](/design/components) — live demos of Button, Card, Badge, Input, Dialog
- [Logo](/design/logo) — mark, hero banner, favicons, and usage guidelines
- [Process](/design/process) — how the logo was created and how to iterate it
- [Integration](/design/integration) — how to consume tokens and components in your project