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) is the standard card shape, --radius-full covers pill badges and nav items, and --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