Skip to content
staqd

Bubble

Bounces bright, rounded shapes and tactile 3D borders into playful UIs.

$9
Version
v1.0.0 · Updated Jul 18, 2026
Context
1,487 tokens
Security
✓ scanned
License
Single seat
Works with
Claude Code, Cursor, Codex
Get notified at launch

Checkout opens soon · launches at $9

staqd.ai/previews/bubble
Open

≈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
v1.0.0Jul 18, 2026sha256: 79c824d18519
staqdMember since Jul 2026 · 69 listings · 5 installsView profile →