Bubble & Boba — Bubble Tea Shop Website
Playful site for Bubble & Boba, an Irvine boba shop — a pure-CSS boba cup hero, signature drinks, and an order-ahead flow for the after-school rush.
Challenge
Bubble & Boba is an Irvine tea shop with a cult student following, hourly-cooked boba, and thirty-plus drink combinations — but its website was a generic page that captured none of the fun. The shop needed a site as playful as the product: colorful, bubbly, and built around customization, while handling the practical after-school order-ahead rush. The design had to feel youthful without feeling childish.
Approach
We built a playful-rounded site in pure CSS/SVG: lavender-milk backgrounds, taro-purple accents, Quicksand typography, and a hand-built boba cup hero — gradient taro cup, lid, angled straw, floating pearls, and a "Taro Cloud" tag. Signature drinks get bold gradient cards with pearl decorations. The customization story (sweetness, ice, toppings) is woven through the copy, and the four-step freshness process ("Boba has a two-hour prime. Ours never sees hour three.") makes the quality claim memorable. Every radius is round; every color is cheerful. The customization story — sweetness, ice, toppings — is woven through every section, because personalization is the product as much as the tea. A dedicated order-ahead flow handles the after-school rush without cluttering the playful design.
Design highlights
The hero centers the pure-CSS boba cup — twelve individual pearl divs, a tilted straw, floating boba orbs, and trust chips ("Boba cooked hourly," "Tea brewed fresh"). Six signature drinks get full-bleed gradient cards (taro purple, strawberry pink, matcha green, brown sugar amber, butterfly-pea blue, grape violet) with pearl-dot decorations. The process uses gradient numbered badges, and the deep-purple CTA band ("Craving boba? You know what to do.") speaks the audience's language. The whole system feels like the drink: sweet, layered, and fun.
Outcome
The site is now the shop's best employee: it shows the drinks, explains the customization, and funnels the after-school crowd to order-ahead. The pure-CSS cup is instantly recognizable and endlessly shareable — exactly what a student-favorite boba shop needs. Playful, fast, and completely ownable.
Bubble & Boba is a fictional brand created by WebStackRank to demonstrate a bubble tea shop website concept. It is a design concept, not a client project.
