Live demo — an original page built in the Bubble style. Open in new tab
Bubble
A playful, minimal interface where bright candy colors, pillowy rounded shapes, and tactile 3D borders make every element feel pressable and friendly.
Install via CLI
$ npx staqd add bubbleRequires Pro — after subscribing, run npx staqd login to authenticate.
Pro skill
from $12/mo
$20/mo, or $12/mo billed yearly · 7-day money-back guarantee.
Inside this skill
Bubble is a playful, minimal aesthetic built around pillowy rounded shapes, bright candy colors, and tactile 3D edges that make every control feel like a physical button you want to press. It pairs the cheerful energy of a sticker sheet with disciplined restraint so the interface stays clean rather than chaotic. Reach for Bubble when you want a product to feel approachable, joyful, and low-stakes, where delight matters as much as utility.
Design principles
- Everything is pressable: controls use hard offset bottom borders that compress on click, simulating physical depth.
- Generous corner radii (20px on cards, fully rounded on pills) keep shapes soft and inviting.
- Bright, saturated accents on warm near-white surfaces create energy without overwhelming.
- Friendly geometric illustrations and emoji-scale icons reinforce the welcoming tone.
- Whitespace stays generous so the playful color never reads as cluttered.
- One dark ink color anchors all borders and text, giving the candy palette a clean structural skeleton.
Color
The canvas is a warm blush white (#FFF6F9) with pure white surfaces (#FFFFFF) floating on top.
Primary actions use candy pink (#FF5DA2); the secondary energy color is electric violet (#7C5CFC).
All text and structural borders share a single deep ink (#2B2540) so the bright accents read against a consistent dark frame.
Muted text and metadata use #8E879E.
Supporting swatches add sunshine yellow (#FFD43B), aqua (#4DD0E1), and warm coral (#FF8A5C) for tags, illustrations, and status moments.
Treat accent colors as spotlights: one dominant accent per view, with the others reserved for small chips, icons, and incidental highlights.
Status colors map cleanly: aqua for informational, yellow for caution, coral for errors that should still feel gentle, and a soft mint (#4ADE80) for success.
In dark mode, flip the canvas to a deep plum (#241F33), keep surfaces at #332B47, and lighten borders to #FFFFFF.
Slightly desaturate accents (pink to #FF7FB6, violet to #9B82FF) so they glow without buzzing on the dark field.
Bubble is a Pro skill
Unlock the full Bubble spec — design tokens, component coverage, motion, and accessibility — plus the entire library of design skills and Pro prompts.
- Every design skill, growing weekly
- Full Pro prompt library
- Commercial-use rights on skill output
$20/mo, or $12/mo billed yearly · 7-day money-back guarantee.
Use it with these prompts
Friendly dashboard
FreeBuild a home dashboard in the Bubble style: pillowy white cards with 20px radius, dark hard-offset bottom borders, bright pink and violet accents, and a chunky rounded greeting header with a small friendly illustration slot.
Reward modal
ProOnboarding carousel
ProMore aesthetic skills
Neumorphism
aestheticA soft, extruded interface where elements appear to push out of or press into a single continuous surface using paired light and dark shadows.
Artistic
aestheticAn expressive, hand-made style blending organic blobs, playful illustration, and unconventional layouts into interfaces that feel like a living sketchbook.
Perspective
aestheticA spatial design system that uses angled planes, layered depth, and foreshortening to give flat screens a dynamic, three-dimensional sense of direction.