A Flexible Design System
Depending upon the user, his environment and the business, designers go in different directions. Therefore we created Coolplay as a flexible system. Following the principles of atomic design, we created the basic components that the designers can rearrange based on their requirements.
Undestanding Atomic Design
Inputs
Icons
Indicators
Buttons
Colors
Atoms
Molecules
Organisms
Templates
Pages
Represent the basic building blocks of a design
system. An example is a button or a text style.
A group of atoms working together as a unit.
Molecules are tangible UI elements. For example,
a button and text field can be grouped to create
a search form.
Atoms and molecules working together in a complex
structure. A search field grouped with a navigation
bar forms a header organism on a website.
Page-level objects placing components into a layout
that defines the content structure.For example, taking
a header organism and placing it on a homepage
template.
​
Instances of templates that represent the final product.
The adobe xd files of the basic components of the design system
like icons, buttons, input and indicators will be available to
designers for use. The designers are free to create their own
components unless they follow the fundamental principles given
in the the first section.
