SkylearnLegacy format
A design system for kids' edtech platforms, K-8 learning apps, and family-friendly tutoring products. The aesthetic is warmly bright with a friendly sky blue anchor, sun-yellow for achievements, and leaf-green for progress. The system targets children (5-14) and their parents/teachers.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxA design system for kids' edtech platforms, K-8 learning apps, and family-friendly tutoring products. The aesthetic is warmly bright with a friendly sky blue anchor, sun-yellow for achievements, and leaf-green for progress. The system targets children (5-14) and their parents/teachers.
Components
Cards
Card Title
Sample body text for the card component.
Buttons
Inputs
Star Badge
default
default
default
Elevation & Depth
Do's & Don'ts
Do
Don't
Icons
Font AwesomeLibrary: Font Awesome · Style: light · Size: 24px
Motion
Motion in Skylearn is playful and rewarding without being distracting. Standard duration is 240ms with cubic-bezier(0.34, 1.56, 0.64, 1) easing (gentle spring overshoot). Correct-answer feedback uses a 320ms leaf burst with a small confetti sparkle (3-4 particles, never more). Incorrect answers shake the tile briefly (4px horizontal, 240ms, two cycles) and never use harsh red flashes. Progress bars fill with ease-out over 480ms. Star badges scale-in from 0 to full size over 480ms with overshoot. Confetti completion celebrations are 1.6 seconds. The system respects prefers-reduced-motion: confetti reduces to a single static star burst, transitions shorten to 120ms.
Accessibility
Accessibility is a first-class concern in Skylearn, not an afterthought. Contrast ratios target WCAG-AAA (7:1) on body text, AA-large (4.5:1) on large display. Atkinson Hyperlegible is the body face specifically for dyslexia accessibility. Tap targets are 56px minimum. Color is never the sole signal — correct/incorrect states always pair color with icon (checkmark/x), pattern (border style), and copy. A "Read to me" button is available on every reading passage. A reading-ruler toggle highlights the current line. A high-contrast mode swaps surfaces to background-white with ink-black text and removes decorative illustration. A reduced-motion mode disables confetti and animation flourishes.
Voice and Tone
• Friendly but not babyish. "Let's try again!" not "Oopsie wopsie!"
• Curious and encouraging. "What do you notice about this number?"
• Specific praise over generic. "You spelled 'because' right — that's a tricky one." Not "Great job!"
• Errors are framed as learning, never failure: "Not quite — try multiplying first," "Let's look again."
• Parent-facing copy is clear and direct, no jargon: "Maya spent 18 minutes on multiplication today. She got 14 of 16 correct on the quiz."
• Empty states are inviting: "Nothing here yet — pick a lesson to start!"
Use with MCP
Don't have the MCP? Install it here