I started this phase with a list of Atomic elements that can compose the components we'll need. In parallel I also built the Style guide to have as reference while designing the layout.

List of Atomic's elements

In the following image I show some of the screen components that were built from the list of atomic elements and style guide choices.

Atomic design.png

Style guide

The guide is based on the brand, which has an old version with colors and a new one just in black and white. I used the following articles to help me in this task, Creating a UI Style Guide for Better UX, How To Create A Style Guide. This guide helped me to start the explorations, and of course some of the visual decisions were changed and added to it.

Style guide.png

◀︎ Previous

                                                        [Next](<https://henriqueolson.notion.site/Layout-development-4028c54e36644f0bafe232cfdcfd1316>) ▶︎