A soft, bouncy design system made for little ones who love popping bubbles
01
Color Palette
Soft, iridescent colors inspired by the shimmer of soap bubbles floating through sunshine.
Bubble Colors
Pink
#F2A1C7
Blue
#7EC8E3
Purple
#C9A0DC
Mint
#98E4C8
Sunshine
#FFE066
Peach
#FFCBA8
Lavender
#D4B3FF
Backgrounds & Surfaces
Sky
#E8F4FD
Surface
rgba 255,255,255
Text
Primary
#2D1B4E
Secondary
#5B4A7A
Muted
#8B7AAA
Semantic
Success
#6ECB8B
Warning
#FFD166
Danger
#FF7EB3
Info
#7EC8E3
02
Typography
Rounded, friendly typefaces that feel as soft and approachable as a bubble wand.
Display — Baloo 2
Pop! Pop! Pop!
Baloo 2 · 48px · Weight 800 · Line-height 1.2
Bubbles 400 Regular
Bubbles 600 SemiBold
Bubbles 800 ExtraBold
Heading — Baloo 2
Shimmery, Floaty, Wonderful
Baloo 2 · 32px · Weight 700 · Line-height 1.3
Body — Quicksand
Blow gently through the wand and watch the bubbles appear. Big ones, tiny ones, wobbly ones that drift and dance in the breeze. Each one catches the sunlight and sparkles with all the colors of the rainbow before it goes pop!
Quicksand · 18px · Weight 500 · Line-height 1.7
Accent — Comfortaa
Comfortaa feels perfectly round and bubbly, just right for labels, tags, and small details that need a touch of playfulness.
Comfortaa · 16px · Weight 400 · Line-height 1.6
Caption
Tiny text for little notes, like how many bubbles you popped today.
Quicksand · 14px · Weight 400 · Line-height 1.5
03
Spacing
A gentle 4px base scale that keeps everything feeling airy and light, like the space between floating bubbles.
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px
4xl
96px
04
Buttons
Pill-shaped, bouncy buttons that are fun to tap. They wiggle when you hover and squish when you press!
Primary
Secondary
Outline
Ghost
Disabled
05
Forms
Soft, rounded inputs that feel friendly to tap. Big touch targets and gentle focus glows make filling things in feel easy-peasy.
06
Cards & Panels
Floaty containers with soft glass edges. Perfect for holding little bits of content like bubbles hold air.
Soap Bubbles
Mix dish soap with water and glycerin for the stretchiest, most rainbow-shimmer bubbles ever.
Recipe
Featured
Giant Bubble Wand
Two sticks, some string, and a bucket of solution. That is all you need to make bubbles bigger than you!
Project
Bubble Science
Why are bubbles always round? It is because the soap film pulls itself into the smallest possible shape.
Learn
07
Alerts & Notifications
Friendly little pill-shaped messages that pop up to tell you something. Each one has its own bubble color!
Hooray! You blew the biggest bubble ever! It floated all the way to the clouds.
Careful! That bubble is getting really big. It might pop any second now!
Oh no! The bubble popped before it could fly away. Try blowing more gently next time.
Did you know? A bubble is actually a thin film of soapy water filled with air. Science is cool!
08
Bubble Playground
Click or tap to pop the floating bubbles! How many can you pop?
Popped: 0
09
Design Principles
The four guiding ideas behind every bubbly decision in this design system.
◯
Round & Soft
No sharp edges, everything flows. Pill shapes, circles, and generous border-radius create a world where corners do not exist.
☆
Playful & Joyful
Bouncy animations, bright colors, and whimsical language. Every interaction should make you smile and want to do it again.
✨
Iridescent & Magical
Shimmer effects, rainbow highlights, and glassmorphism that captures the magical quality of real soap bubbles in sunlight.
✋
Touch-Friendly
Big targets (44px minimum), satisfying feedback on every tap, and generous spacing. Designed for little fingers and big imaginations.