Katerina Michael
Back to Level 5

Level – 5

Game Store UI

A storefront landing page, built twice — once light and once dark. Two themes rather than one because a store is where a colour system is tested hardest: every product image on the page is fighting the background for attention.

Discipline
Storefront UI
Year
2024
Tools
Figma
Themes
Light and dark

Landing page

Storefront

The landing page carries featured titles, a browsing grid and the promotional slots that pay for the page. Building both themes from the same layout forced the contrast decisions to be made in the system rather than per element, which is the only way the dark version avoids becoming a separate design.

  • Landing page
  • Light theme
  • Dark theme
  • Product grid
  • Game store landing page in a light lavender theme: left navigation, search bar, a featured offers banner with a character illustration, and a row of game cards

    Light theme

  • The same game store landing page rebuilt as a dark theme, with green accent icons and a deep charcoal panel

    Dark theme

Button variants

Designed as potential future button variants for the store UI — eight actions, each drawn in three states so the set could be dropped in without redrawing the interaction: default, hover, and pressed.

  • Button variant sheet: eight pill-shaped actions — Back, Next, Add, Edit, More, Cancel, Delete and Enter — each with a circular icon and drawn in three columns for default, hover and pressed states

    Eight actions × three states