Elasticshop Gaming Top-Up

A dark, yellow-accented design system for an automated game top-up platform, covering four full screen flows from product selection to confirmation.

ph-akin.dev/elasticshop-gaming.html
Elasticshop Gaming Top-Up live page screenshot.
Elasticshop Gaming Top-Up on desktop
The game catalogue — a weekly deal card and a starting price per title on the dark, yellow-accented UI.
Elasticshop Gaming Top-Up at 375px phone width
At 375px the side menu folds away and the game cards reflow to a narrow grid, each keeping its starting price.

Project overview

Elasticshop needed more than one hero screen — it needed a coherent system across four flows: browsing games, selecting a top-up package, checkout, and confirmation. The dark, high-contrast yellow palette borrows gaming UI conventions so it feels native to its audience rather than generic e-commerce.

Design System Gaming UI Figma Full Stack

The 30-second version

  • Four complete screen flows designed as one system
  • Gaming-native dark UI with high-contrast yellow accents
  • Built first in Figma, then implemented full-stack
  • Consistent component system across every screen

Who this project fits

This approach works for gaming, esports, and other niche digital platforms where a generic SaaS look would feel out of place, and where the product genuinely needs more than one screen to design properly.

Want something like this?

Adapt this build to your own business

Tell me what your business does, what you want the site to achieve, and roughly what budget you’re working with — I’ll design and build it to fit.

Pricing starts at ฿3,900, depending on scope — see all three packages

Start a project on Fastwork Email me

View the live site All projects