Aqua Basis

Aqua DS provides a structured color system designed to keep your applications consistent, accessible, and easy to customize.

Categories

<aside>

Ink Colors

Defines the base shades of ink used across text and UI elements, ensuring clarity and readability.

--color-ink-base

#272A2F

--color-ink-lighter

#595D64

--color-ink-dark

#1C1E21

--color-ink-darker

#131316

--color-ink-light

#3B3F45

</aside>

<aside>

Paper & White

Provides background and neutral tones designed to create contrast and maintain accessibility.

Paper colors

--color-paper-base

#D3D4D9

--color-paper-lighter

#F7F7F8

--color-paper-dark

#B6B8BE

--color-paper-darker

#8A8E96

--color-paper-light

#E3E3E6

White

</aside>

<aside>

</aside>

:root {
	/* Ink */
  --color-ink-base: #272a2f;
  --color-ink-dark: #1C1E21;
  --color-ink-darker: #131316;
  --color-ink-light: #3B3F45;
  --color-ink-lighter: #595D64;
  
	/* Primary */
  --color-primary-base: #0A5BFC;
  --color-primary-dark: #023075;
  --color-primary-darker: #03152B;
  --color-primary-light: #9EC5FF;
  --color-primary-lighter: #F0F7FF;
  
	/* Success */
  --color-success-lighter: #EEFBF4;
  --color-success-light: #96DEB2;
  --color-success-base: #24A852;
  --color-success-dark: #004A18;
  --color-success-darker: #001B07;

	/* Warning */
  --color-warning-lighter: #FFFDE6;
  --color-warning-light: #FFE180;
  --color-warning-base: #F2C840;
  --color-warning-dark: #523800;
  --color-warning-darker: #1F1300;
  
	/* Danger */
  --color-danger-darker: #260309;
  --color-danger-dark: #690713;
  --color-danger-base: #C7242B;
  --color-danger-light: #FFA3A5;
  --color-danger-lighter: #FFF0F1;
  
	/* Paper */
  --color-paper-base: #D3D4D9;
  --color-paper-dark: #B6B8BE;
  --color-paper-darker: #8A8E96;
  --color-paper-light: #E3E3E6;
  --color-paper-lighter: #F7F7F8;
  
	/* White */
  --color-white: #FFFFFF;
}