Design System

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

Design principles

The Storybook Soft language is built for parents — warm without being childish, editorial without being precious. It borrows the visual register of beloved children's publishers (Candlewick, Phaidon, Nobrow): rich paper tones, generous rounded forms, saturated-but-muted colour chips, and an all-serif content hierarchy. Deliberately distinct from Yoto's own brand: all-serif where they're sans, arch shapes and plate layouts where they use photo grids, and a cooler botanical green foreground against a warmer parchment background.

• Warm, not cute — parents are the audience; the palette signals taste, not toys
• Serif-led — Fraunces + Literata in content; system-ui confined to tight UI chrome
• Pills + soft shadows — generous radii up to --radius-full and diffuse warm-tinted shadows throughout
• Pastel section identities — sage, dusty blue, butter, blush give distinct colour to each major area without competing with coral CTAs
• Yoto-resonant, deliberately distinct — coral #E8654A echoes Yoto's orange at a softer saturation; peach #FDB07A echoes their accent without copying it

Brand identity

Colors: Paper-cream #F5F0E8 background, botanical green #2D4A35 foreground, coral #E8654A primary accent, peach #FDB07A display accent. Four pastel families (sage, dusty blue, butter, blush) as section/chip identities. Never pure gray — everything leans warm.

Typography: Fraunces (display serif) + Literata (body serif) + IBM Plex Mono + --font-ui (system-ui for tight controls). Fully-serif content hierarchy; the warmth comes from the type stack as much as the palette.

Radii & shadows: Large radii throughout — --radius-lg (16px) as the standard card shape, --radius-full for pill badges and nav items, --radius-3xl (32px) for hero backdrop panels. Shadows are soft and warm-tinted, never cold grey. --shadow-glow-coral adds a warm glow on primary accent elements.

What's in this section

• Colors — coral primary, peach accent, paper-cream neutrals, pastel section families, semantic, and sidebar palettes
• Typography — Fraunces/Literata/IBM Plex Mono/system-ui roles, type scale, weights, and specimens
• Spacing — 4px-base scale with visual bars
• Components — live demos of Button, Card, Badge, Input, Dialog, Callout, Carousel
• Logo — pixel-art mark, hero banner, favicons, and usage guidelines
• Process — how the logo was created and how to iterate it
• Integration — how to consume tokens and components in your project