StarChart Design System
StarChart is a space-themed, achievement-driven design system built with wonder at its core. It transforms everyday chores and learning milestones into cosmic adventures for kids. The dark deep-space backdrop provides contrast for vibrant nebula purples and glowing star yellows, creating an immersive environment that rewards exploration and accomplishment.
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: 8pxStarChart is a space-themed, achievement-driven design system built with wonder at its core. It transforms everyday chores and learning milestones into cosmic adventures for kids. The dark deep-space backdrop provides contrast for vibrant nebula purples and glowing star yellows, creating an immersive environment that rewards exploration and accomplishment.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
List Item
default
hover
Checkbox
default
checked
Radio
default
selected
Tooltip
default
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here