RaiaDrogasil

Tokens and components:

The product cards that make up the showcase were created from an 8-pixel grid, with all measurements and spacing respecting multiples of 8 to maintain the visual consistency of the mobile and desktop grids. The title text box has a slightly higher height (72px) due to the size of most product names that exist on the site, which range from 3 to 4 lines.

A set of icons was created for the shortcuts component, which is located on the homepage of the site. The icons were created in the aspect of 32px by 32px, and could later be used in other sizes. In the shortcut component, measures based on the 8-pixel grid and a larger spacing for the shortcut name were also defined.

Shortcuts component overview.