Other documents:

📔 Getting Started 💡 Create components 📣 Modify component 📂 Deploy components 📝 Document component

What is the methodology behind Aqua DS?

Aqua DS is built under a methodology called Atomic design that allows creating a scalable and coherent system, developed by Brad Frost. It relies on the analogy of chemical elements to break down the interface into smaller, reusable components. Here is a summary of the "Atomic Design" methodology:

1. Atoms: Atoms are the smallest and most fundamental building blocks of the interface. These include things like buttons, text fields, icons, and individual colors. Atoms cannot be broken down into smaller components without losing their functionality.

Ex. Button / Toggle / Radio

1. Molecules: Molecules are created by combining various atoms to form more complex and reusable elements, such as an input field with an icon and a label. Molecules represent more complete but still relatively simple components.

Ex. Select with list menu

1. Organisms: Organisms are collections of molecules and atoms that work together to form larger, more specific sections of the interface. A header with a navigation bar, a logo, and a login button is an example of an organism.

Ex. Table / Dialog

1. Templates: Templates are layout structures that define how the various bodies and components will be arranged on a page or screen. These templates can contain content areas, grid layouts, and item locations.

1. Pages: Finally, pages are the actual representations of complete interfaces, where templates are filled with content and customized for specific use cases.

The "Atomic Design" methodology encourages reuse, consistency and scalability in the design and development of systems. By breaking down the interface into smaller elements and working from the most basic to the most complex, a solid foundation is created for the construction and evolution of digital products. This methodology also facilitates collaboration between designers and developers by establishing a clear hierarchy and modular structure for components.

Guidelines or Foundations

<aside> 💡 To know all the guidelines of design visit this link Foundations

</aside>

A style guide is an essential resource for developing a consistent and effective design system. Here are several key reasons why it's important to keep a style guide in mind when creating a design system:

1. Visual Consistency: A style guide establishes clear rules for how colors, fonts, icons, and other visual elements should be used throughout the system. This ensures that the visual appearance is uniform in all parts of the product, avoiding discrepancies and visual confusion.