CUPRA is much more than a car brand. This collection is born in a garage from the passion of a few believers who sought to reinvent the principles of the automotive world and represent a way of understanding life. It is responsible for giving visibility and selling the brand's merchandising line.

CUPRA Collection represents fashion and lifestyle. It includes special editions born from collaborations with artists and designers, licenses from other brands and a permanent collection of accesories and clothing.

For reasons of confidentiality, texts and some images are placeholders.

︎︎︎ Creative direction & design system

CUPRA Collection is a brand with very defined values: elegance, fashion, character, quality and essence.

The creative direction revolves around these characteristics represented through its thin typography, clear backgrounds, elegant colors, prominence in the images and simple and usable design.

The design system is made up of design atoms to be able to articulate any page that is needed. Here are specified the use of the grid, the color palette, the typography, the buttons, the icons and all those elements & components that create the web.

︎︎︎ Homepage

The main page has a user centric & modular design, adaptable to the type of content strategy that appears in the roadmap.

The modules can occupy 12 columns, 6 columns, or 3 columns of the grid and redirect to a specific product section or to the product detail page with direct purchase of that product. They can also redirect to the stories section.

︎︎︎ Menu

The menu appears with the hover in the header.

It shows all the sections of the e-commerce with specific links as well as links by content groups to facilitate user usability.

︎︎︎ Grid product page

This page has an editorial and modular design thanks to the visual game that can be made with the products. Above we have some thumbnails that serve as a shortcut to other sections and thus facilitate the user's search for other products.

︎︎︎ Filters

In the product grid we have some filters available throughout the navigation with which the content can be filtered by color, size, material, price... depending on the characteristics of the products in that grid. The selected filters are fixed as 'tags', so they can be easily deleted.

︎︎︎ Hover effect

When the user navigates over each product, another view of the product is shown with the hover, this allows us to show more details or relevant characteristics of the product without having to go to the product detail page.

︎︎︎ Product detail page

The detail of each product consists of a gallery of images and videos on the left and a fixed part on the right with the customization options and the purchase CTA. When the user reaches the end of the gallery with the scroll, the descriptive content below pushes the fixed part and show the carousel of related articles.

︎︎︎ Story page

These pages show, with an editorial design, the stories of collaborations with designers, giving importance to the work and process behind each collection or limited edition.