KidLearn Design System

KidLearn Design System mockup preview
Click to expand

KidLearn is a bright, chunky, and friendly design system built for children's educational apps targeting ages 5-12. Every element uses rounded, approachable shapes with generous sizing to ensure comfort and accessibility for young learners. The system prioritizes large touch targets, clear visual hierarchy, reward-oriented feedback, and COPPA-compliant patterns. Colors are vivid but carefully balanced to avoid sensory overload.

Color Primary#EF4444
Color Secondary#3B82F6
Color Tertiary#FACC15
Surface Base#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

text-heroFredoka · 48px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h1Fredoka · 36px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h2Fredoka · 28px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h3Fredoka · 22px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-body-lgNunito · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-bodyNunito · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-captionNunito · 14px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-monoRoboto Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

KidLearn is a bright, chunky, and friendly design system built for children's educational apps targeting ages 5-12. Every element uses rounded, approachable shapes with generous sizing to ensure comfort and accessibility for young learners. The system prioritizes large touch targets, clear visual hierarchy, reward-oriented feedback, and COPPA-compliant patterns. Colors are vivid but carefully balanced to avoid sensory overload.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

DefaultSelectedHoverCompleteLockedActiveNew

Elevation & Depth

shadow-sm
shadow-md
shadow-lg
shadow-playful
shadow-focus

Do's & Don'ts

Do

Use simple, age-appropriate language for a 2nd-grade reading level.
Ensure all interactive elements meet a minimum 48px touch target.
Provide generous padding and spacing between interactive elements.
Incorporate reward animations (stars, confetti, bounce) for correct answers and milestones.
Use Fredoka for headlines and Nunito for body text.

Don't

Avoid time pressure or countdown mechanics that might cause anxiety.
Use more than three bright colors in a single view.
Rely on text alone for navigation — pair labels with icons.
Use thin fonts, low-contrast text, or small UI elements.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.0 KB
Downloads 0
bold education light mobile-app playful

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/kidlearn and implement it in my code

Don't have the MCP? Install it here