As RagaAI expands its suite of testing applications for both GenAI and traditional AI, the need arose for a design system to ensure consistent and cohesive designs across all products and platforms.

Timeline From explorations to final designs in 16 weeks while working with multiple projects at the same time

Background A design system ensures visual consistency, usability, and scalability by providing standardized components and guidelines. For RagaAI, a comprehensive AI testing platform, this is crucial as it supports tools for both GenAI and traditional AI testing. A design system streamlines development, enhances collaboration, and ensures a cohesive user experience across products, fostering trust and ease of use.

##### ICONs | Atoms

Visual symbols that represent actions or content in a compact form.

##### SHADOWs | Atoms

Depth-enhancing elements that add dimensionality to flat surfaces.

##### TYPOGRAPHY | Atoms

The arrangement of text that sets the visual style and hierarchy of content.

##### Colors | Atoms

Foundational hues that set the tone and mood of the interface.

##### Buttons | Atoms

Clickable triggers that initiate key user actions.

##### sliders | Atoms

Adjustable controls that allow users to select a value within a defined range.

##### TOAST | Atoms

Temporary notifications that provide brief, contextual feedback.

##### CHECKBOX | Atoms

A selectable box that switches between checked and unchecked to represent a binary choice.

##### TOGGLE | Atoms

A switch that allows users to switch between two states, such as on and off.

##### dropdown | Atoms

A collapsible menu that reveals a list of options when activated, allowing users to make a selection.

##### TABLE | Atoms

Components to organize information in rows and columns for easy comparison and analysis.

##### lines | Atoms

Basic dividers that structure content and create visual separation.

##### CHARTS | Atoms

Data-driven visuals for comparing and tracking metrics.

RagaAI Rhythm- Our Design System is a comprehensive guide that helps us create consistent and cohesive designs across our products and platforms at RagaAI. It consists of reusable components, guidelines, patterns, and best practices. We follow the structure of the popular framework called the Atomic Design methodology, which organizes UI elements into a hierarchy: atoms, molecules, organisms, templates, and pages.

The most basic building blocks in a design system.

Examples: Buttons, input fields, icons, colors, fonts, and spacing.

These are not further divisible and serve as the foundation for more complex elements.

Groups of atoms bonded together to form a simple, functional unit.

Examples: A search bar (composed of an input field atom and a button atom).

Molecules give a specific purpose or action in the interface by combining atoms.

Complex UI components composed of multiple molecules and atoms.

Examples: A header section (logo, navigation, search bar) or a card with an image, text, and buttons.

Organisms create distinct sections of an interface.

##### CARDS | MOLECULES

Compact containers that group related information or actions in a visually distinct format.

##### MODALS | MOLECULES

Overlays that present critical information or actions while temporarily blocking the main interface.

##### FILTERS | MOLECULES

Input controls that allow users to refine or sort content based on specific criteria.

##### GRAPHS | MOLECULES

Combined visual elements that depict relationships, trends, or comparisons in datasets for easy interpretation.