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

Spacing tokens provide a clear and scalable system for margins, paddings, and layout structure, ensuring balanced and predictable designs.

Categories

<aside>

Basic

--spacing-size-basic: 0.0625rem;

Small

--spacing-size-small: 0.125rem;

Minor

--spacing-size-minor: 0.25rem;

Short

--spacing-size-short: 0.5rem;

Medium

</aside>

:root {
  --spacing-size-basic: 0.0625rem;
  --spacing-size-small: 0.125rem;
  --spacing-size-minor: 0.25rem;
  --spacing-size-short: 0.5rem;
  --spacing-size-medium: 0.75rem;
  --spacing-size-moderate: 1rem;
  --spacing-size-large: 1.5rem;
  --spacing-size-big: 2rem;
  --spacing-size-greater: 2.5rem;
  --spacing-size-extra: 3rem;
}