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.

The canonical entry for this system is Reference → Design System: it names the files that define the system and how a consumer pins it. The pages here document those files, one concern per page.

Design principles

• One accent, two weights: #E8654A for shapes, #B84A33 for text. There is no second brand hue and no display accent
• Two faces: Nunito Variable for everything readable, IBM Plex Mono for meta lines and code. Hierarchy comes from weight (800 against 400), not from mixing faces
• Controls are pills, surfaces are tight: buttons, badges, and chips are fully rounded; cards sit at 8px and never grow
• Cards do not float: a hairline border and the page background do the separating. The only brand-shaped shadow belongs to the button
• Contrast is computed, not eyeballed: every accent pairing on the colors page carries its ratio and what it clears

Brand identity

Colors: A pinkish near-white #FBF9F9 background with forest green #003C1F text (12.02:1), and a single coral accent #E8654A. The accent ships as two tokens: --color-primary for fills, borders, and focus rings, and --color-primary-deep #B84A33 for inline text, which clears AA where the raw accent does not. Never pure gray; everything leans warm.

Typography: Nunito Variable across --font-display, --font-body, and --font-ui; IBM Plex Mono for card meta lines and code. Headings are 44px at weight 800 with −0.01em tracking; body is 400.

Shape: Buttons are 52px pills with a 16px/22px label at weight 600, lifted by a warm accent-tinted shadow. Cards are 8px, white, one hairline #E8E3E3 border, and no shadow at rest. Badges and chips are pills.

Wordmark: "YotoShelf" set in Nunito at weight 800. On a light surface it is the accent; on the accent nav band it is white.

What's in this section

• Colors: the accent in two weights, the contrast table, neutrals, semantic, and sidebar palettes
• Typography: Nunito Variable and IBM Plex Mono roles, the measured type scale, weights, line heights, and specimens
• Spacing: 4px-base scale, the radius split, and the shadow scale
• 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