Petal & Stem
An artisan floral e-commerce concept for a Portland studio, built with vanilla HTML, CSS, and JavaScript around a full design token system, responsive shopping paths, accessible interactions, and a warm editorial world.
- Focus
- E-Commerce / Brand Website
- Client
- Petal & Stem (Fictional)
- Tools & disciplines
- HTML, CSS, Vanilla JavaScript, Design Systems, Accessibility
Context
Design and develop a refined e-commerce experience for an artisan floral studio that conveys craftsmanship and elegance while providing a seamless shopping experience across devices.
The site needed to communicate an intentional floral practice, present signature arrangements in a curated way, tell the founder's story, build trust through testimonials and social proof, and create clear purchase and inquiry paths without aggressive sales pressure.
Approach
I built the project from a design-system foundation: warm cream surfaces, rose, sage, and gold accents, a 4px spacing scale, fluid typography, and carefully defined motion curves.
The implementation uses semantic HTML, responsive grids, skip links, focus-visible states, ARIA labels, reduced-motion support, and vanilla JavaScript for cart states, toast feedback, form validation, animated counters, scroll-aware navigation, and micro-interactions.
No external JavaScript framework was used. The goal was to prove that a careful, refined e-commerce experience can still be fast, accessible, and maintainable with native browser primitives.
Outcome
The final concept balances aesthetic refinement with functional clarity. It feels handcrafted and editorial while still supporting discovery, trust, and gentle inquiry paths.
Technically, the project demonstrates a zero-dependency front end, responsive behavior from mobile to desktop, accessible interaction patterns, and performance-minded animation choices using transforms, passive listeners, and IntersectionObserver.
Project details
- External JS dependencies
- 0
- Built a full design token system for color, spacing, typography, shadows, and motion
- Created a responsive floral e-commerce experience without external JavaScript frameworks
- Implemented product cards with wishlist, cart states, toast notifications, and inquiry flows
- Added accessibility details including skip links, focus states, ARIA labels, and reduced motion support
- Used IntersectionObserver, passive listeners, and transform-based animation for smooth rendering
- Designed a warm editorial visual language around artisan florals and founder storytelling