Assets libraries

"In the natural world, atomic elements combine together to form molecules. These molecules can be combined in a variety of ways to create relatively complicated organisms. Let's apply this principle to user interface design. A graphical interface can, in fact, be broken down into a small number of atomic elements."
Atomic Design Brad Frost


Atoms
labels
inputs
buttons..
Molecules
combined together
Organisms
to create
complex
patterns
Templates
following
a logical
structure
Pages
to deliver
your final
product

Components

Atoms

List of atoms from left to right: Border, elevation, button-primary, button-secondary, line, toggle, placeholders, labels, checkbox, radio, badge.


Combined together to form molecules

Combining Border, label, elevation, line, checkbox, badge for Basic select, a multiselect, an input with autocomplete, dropdown.

Cards, popover, tabs, modals.


Responsiveness


Others

Colors

A good color scheme always aids in the readability of information. It can also be used to boost the effectiveness of elements such as calls to action. It has the potential to improve customer navigation capabilities. It can meet the user's subconscious aesthetic needs. Finally, it can elicit intuitive interactions.

Typography

Typography is more than just picking out pretty fonts. It's an important part of user interface design. Good typography will generate a strong visual hierarchy, give the website a graphic balance, and determine the overall tone of voice. Your typography should direct and enlighten your users, improve readability and accessibility, and provide a positive user experience.