Structure approach

What is atomic design ?

Atomic Design by Brad Frost is the one of methodology that can accelerate the process of creating modular designs. He introduced the concept of atomic design about 5 years ago.

“As the craft of web design continues to evolve, We’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. Atomic design is a methodology for creating design systems.”

— Brad Frost

In my word, Build systems mean that not design or develop the front-end full pages. It’s like small element like as buttons. And all small components combine to a large unit like a label, box, table, forms. The final full pages are then just a combination of these units.it is the idea of the building system.

Atomic Design by Brad Frost

Atomic Design by Brad Frost

A methodology for creating design systems. Go deeper and discover Brad Frost Approach

How to categorize an element ?

Atomic Design, is an approch that allows you to decompose your UI elements in order to standardelize and organize them. An important question that we need to ask ourselves is “to what category does a given component belong to?”.

Constants

Constants

Elements that we categorize in the “Constants” category will be transversal element as font-size, line-height, colors, spacing units, elevation, etc. This are also elements that are not specific to a given component.

Atoms

Atoms

Elements that we categorize in the “Atoms” category will be basic elements, generally used more than once on a web page. They are generally embedded in other elements (larger ones), and have various states and variations.

Molecules

Molecules

Elements that we categorize in the “Molecules” category will generally be elements that contain smaller and simpler elements (atoms). Generally this elements are made for specific cases and can be used more than once.

Organisms

Organisms

Elements that we categorize in the “Organisms” category will generally be complex elements that are composed of smaller elements. You can think of Organisms as a “part” of a web page. A web page will be the result of the somme of organisms.

Each design system can have its own categorization depending on the context and purpose. The objectif of the Axa design system is to be of use to all Axa entities, how have differents needs and constraints. The way we’ve thought the categorization of the elements is to allow for as much possibilities as possible.

Create and categorize new elements

Create and categorize new elements

If you need to create new elements and you ask yourself how to categorize them, try out this tool

Help & Contact

Any question?