Why building a UI Kit?

As a design student, building a UI kit could be a good visual design training. Cleanly work on my design file, build components, be comfortable with Atomic Design and improve my speed and efficiency, those things become priorities I wanted to work on. I wanted to make it step by step, so I've started by building a small UI kit like this one.

Full UI Kit Preview

Design a system that works

Working with common spacings for every card, design components to make it as most convenient as possible for users, those are the challenges of building a UI kit that does work. The main aim of a UI kit is to be able to build screens from components. But another important feature was to let the user be free and let him or her bring his or her content (images, texts, etc). A UI kit must be modular and adaptive to many edge cases.

Screens Examples made from Ellie UI Kit

Style Guide

Typography is an important part of visual design in my opinion. First of all, typography defines how the user will read the text, thanks to how the hierarchy was built.

Then I've used a primary color and several shades of grey. I've also used icons from Eva Icons, an icon set that I like a lot.

Ellie Kit Style Guide

A Few Components from Ellie Kit