Discover Europe

Mini UI Kit

Tools used for this project : Figma, Procreate, Unsplash, Color Contrast Checker, ModularScale

This little UI Kit was inspired by my two years at the Center of European Studies, where I studied communication in Europe. Entirely designed with Figma (including the icons), this projects was also aimed to explore different tools to guarantee usability and accessibility in the choice of colors and font.

Choice of colors

The 2 main colors are the exact colors of the flag of the European Union. The kit also includes a darker version of blue and a lighter version of yellow, essentially used for hovered buttons, and different shades of grey (with a tint of blue) for text and icons.

The lightest grey can be used with a blue background, and the darkest gray can be used with a yellow background. Both combinason passed the color contrast checker test.

Typography

The typefaces used in this kit are Roboto Regular for Paragraphs and Labels, Roboto Bold for headings except for Heading 1 which is Playfair Display.

Paragraphs are 16px and use a modular scale with a ratio of 1.5

Icons, Buttons and Cards

The kit includes icons designed directly with Figma, different variations of basic buttons (normal and hover), and examples of cards.

Go back to the portfolio