Bubble
Bounces bright, rounded shapes and tactile 3D borders into playful UIs.
- Version
- v1.0.0 · Updated Jul 18, 2026
- Context
- ≈1,487 tokens
- Security
- ✓ scanned
- License
- Single seat
- Works with
- Claude Code, Cursor, Codex
Checkout opens soon · launches at $9
≈1,487 tokens · v1.0.0
Live demo — an original page built in the Bubble style. Open in new tab
About this skill
Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces. Its live demo renders a mobile app landing page — phone mockups, feature tiles, mini charts, and app-store CTAs.
The skill file
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.
- Typography
- Layout & spacing
- Components
- Motion
- Accessibility
- Use it with your AI tool
Preview ends here
Typography, Layout & spacing, Components, Motion, Accessibility & Use it with your AI tool unlock when checkout opens. Get notified
What's inside
- SKILL.md5.9 KB
More in Design
View allEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.
More from @staqd
View profileEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.