FutureFuel — AI-Built Energy Drink Storefront

A complete four-page storefront for FutureFuel, a concept energy-drink brand engineered for builders — designed and built in a single afternoon using a bound design system and browser-based iteration.

Scope delivered:

- Four pages — Home, Shop, Ingredients, and About
- A working cart drawer with live line items, quantities, and product imagery
- A full design system driving every color, type step, and component
- A one-time / subscribe purchase toggle on the shop grid

How it was built:

- Design-system-first — a night-navy palette, a single electric-blue accent, and a strict three-way type split (display / body / mono) were defined up front. Every screen was composed from real, reusable components (NavBar, ProductCard, IngredientRow, CartDrawer) rather than one-off layouts.
- Browser-native iteration — each round followed a build → review → correct loop driven by screenshots and small, specific notes, keeping the design tight without long briefs.
- Interactive ingredients page — the product spec sheet became an interactive experience: numbered nodes on the can swap a detail card on tap, reinforcing the brand's "specs over vibes" positioning.
- Automated verification — browser-level checks caught a clipped "Add to Cart" button at narrow widths, an upscaled product render, and an empty grid cell on wrap — all fixed before review.

The result demonstrates a repeatable production pipeline: a real design system plus tight feedback loops compresses a week of frontend work into an afternoon of decisions.

Stack & approach: design-system-driven UI, responsive layout (390 / 820 / 1440), component-based architecture, automated frontend verification.