Aqua Basis

Our typography system ensures consistent and accessible text styles across applications, covering font families, sizes, and line heights.

Categories

Font Family

Defines the set of fonts used across the application. Ensures text consistency and readability by applying a coherent typeface system.

<aside>

Segoe UI

--font-family-basic: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Microsoft Sans Serif', Freesans, Helvetica, Arial, sans-serif

Courier

--font-family-code: 'Courier New', Courier, monospace

</aside>

Font Sizes

Provides a scalable system of sizes for text elements. This guarantees hierarchy, clarity, and accessibility across different screen sizes and contexts.

<aside>

Size 2xs

--font-size-2xs: 0.5rem

Size xs

--font-size-xs: 0.75rem;

Size s

--font-size-s: 0.875rem;

Size m

Size l

Size xl

Size 2xl

</aside>

Line Heights

Controls the vertical spacing between lines of text. Proper line height improves legibility, readability, and overall visual balance.

<aside>

</aside>

Font Weights

Defines the thickness of characters, from light to bold. This enables emphasis, contrast, and better alignment with your brand’s visual style.

<aside>

</aside>

:root {
	/* Font Family */
  --font-family-basic: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'Microsoft Sans Serif', Freesans, Helvetica, Arial, sans-serif;
  --font-family-code: 'Courier New', Courier, monospace;
  
  /* Font Size */
  --font-size-8xl: 3.375rem;
  --font-size-7xl: 3rem;
  --font-size-6xl: 2.625rem;
  --font-size-5xl: 2.5rem;
  --font-size-4xl: 2rem;
  --font-size-3xl: 1.75rem;
  --font-size-2xl: 1.5rem;
  --font-size-xl: 1.25rem;
  --font-size-l: 1.125rem;
  --font-size-m: 1rem;
  --font-size-s: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-2xs: 0.5rem;
  
  /* Line Height */
  --font-line-height-1: 4em;
  --font-line-height-2: 3.125em;
  --font-line-height-3: 2.5em;
  --font-line-height-4: 2.25em;
  --font-line-height-5: 1.75em;
  --font-line-height-6: 1.375em;
  --font-line-height-7: 1.25em;
  --font-line-height-8: 1em;
  
  /* Font Weight */
  --font-weight-basic-unit: 200;
  --font-weight-light: calc(var(--font-weight-basic-unit)/2);
  --font-weight-regular: calc(var(--font-weight-basic-unit)*2);
  --font-weight-semi-bold: calc(var(--font-weight-basic-unit)*3);
  --font-weight-bold: calc(var(--font-weight-basic-unit)*3.5);
}