LearnFlow Design System
LearnFlow is a bright, encouraging, and progress-driven design system built for online learning platforms and learning management systems. Every element is crafted to motivate learners, celebrate milestones, and make educational journeys feel rewarding. The visual language uses warm orange energy paired with trustworthy blue and success green to guide students from lesson to lesson with clarity and confidence.
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.
Spacing
Base: 8pxLearnFlow is a bright, encouraging, and progress-driven design system built for online learning platforms and learning management systems. Every element is crafted to motivate learners, celebrate milestones, and make educational journeys feel rewarding. The visual language uses warm orange energy paired with trustworthy blue and success green to guide students from lesson to lesson with clarity and confidence.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Chips
Checkbox
Checked
Elevation & Depth
Do's & Don'ts
Do
Use with MCP
Don't have the MCP? Install it here