StarChart Design System

StarChart Design System mockup preview
Click to expand

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.

Surface Base#1E1B4B
Nebula#A78BFA
Star#FDE047
Success#4ADE80
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Fredoka · 36px · Bold

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

h2Fredoka · 28px · Bold

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

h3Fredoka · 22px · SemiBold

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

h4Fredoka · 18px · SemiBold

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

bodyDM Sans · 16px · Regular

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

smallDM Sans · 14px · Regular

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

tinyDM Sans · 12px · Medium

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

monoSpace 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

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.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

defaultactivecompletedpendingmissedlocked

List Item

default

hover

Checkbox

default

checked

Radio

default

selected

Tooltip

default

Elevation & Depth

glow-nebula-sm
glow-nebula-md
glow-nebula-lg
glow-star-sm
glow-star-md
glow-star-lg
glow-error-sm
glow-error-md

Do's & Don'ts

Do

Use star-yellow sparingly for achievements and primary CTAs only; overuse dilutes reward feeling.
Keep text large and readable -- this is for kids; minimum 14px body text.
Use nebula-purple glow to guide attention to interactive elements.
Animate achievement moments (star burst, glow pulse) to reinforce accomplishment.
Pair every icon with a text label for early readers.
Test all text against the dark background for sufficient contrast (minimum 4.5:1).

Don't

Use pure white backgrounds; always maintain the deep space theme.
Combine star-glow and nebula-glow on the same element -- choose one.
Use small, dense layouts; kids need generous tap targets (minimum 44px).
Use the destructive red for anything other than truly irreversible actions.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 6.7 KB
Downloads 0

Use with MCP

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

Don't have the MCP? Install it here