Welcome to Aqua Design System

Aqua is a unified ecosystem created by designers and developers to deliver consistent, scalable and high quality experiences. It integrates design principles, reusable components and development best practices enabling teams to work faster and in sync.

Design together. Build together. Speak the same language.


Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons


FAQ


Aqua Basis

Aqua Composition

🧭 Introduction

What is Aqua?

Aqua was conceived as a comprehensive system that considers both visual and technical needs. This means that every decision - from the creation of design tokens to the implementation of components - responds to a process based on product experience, iterative and aligned with our vision of user experience.

This system is geared toward both designers and developers. For designers, it provides clear guidance on styles, components, usage patterns and components on the Figma platform. For developers, it provides a reusable, documented and design-aligned library, allowing for faster development and consistency across all products.

Aqua is more than a library of components: it's a way to work together, speak the same language and build consistent experiences. motto: Design together. Build together. Speak the same language.


Aqua Composition

Aqua is an ecosystem that delivers a high-value user experience by integrating efficient workflows, reusable components and coding best practices.

Aqua DS streamlines design and development processes, maintains high production standards, cohesion and high end-to-end quality.

image.png

More info in Aqua Composition


In this Docs.

This documentation is aimed to understand the components in a technical way, their attributes and their usage.

It is intended for frontend developers and/or designers to understand and use Aqua DS components within their products at the code level, as well as to understand the component library and its respective usage depending on the used framework.

Next: Quick Start >>

On this Page

back Aqua.png


Site Map

Quick Start

Framework Implementation

Aqua Composition

Components

Icons

Data Types