## Font size

### Configuration

The following values can be used to configure the font size:

```css
:root {
	--text-scale: 1.2;
}
```

Building on this value, these variables are available, where `--text-sm` is slightly less than `1em` and `--text-md` is slightly more.

```css
--text-xs
--text-sm
--text-md
--text-lg
--text-xl
--text-xxl
--text-xxxl
```

## Spacing

Spacing is best show with the actual classes. The basic principle is, whenever the number in the name (eg. `--spacing-3`) doubles, the corresponding spacing should also double (`--spacing-6`).

```css
--spacing-0: 0;
--spacing-px: 1px;
--spacing-05: 0.125rem; 

/* 1 */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;

/* 2 */
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-18: 4.5rem;
--spacing-20: 5rem;

/* 4 */
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;

/* 8 */
--spacing-48: 12rem;
--spacing-56: 14rem;
--spacing-64: 16rem;
--spacing-80: 20rem;
--spacing-96: 24rem;
```

## Colors

Colors are divided in a set of different grays, ranging from more cold colors to a neutral set (which is the default) to warmer colors, and a palette of colors.

Every color has 10 values, `--<color>-50` and from `--<color>-100` and with `--<color>-900`.

The included colors are taken from the great [Tailwind.css](https://tailwindcss.com).

![Tailwind Palette](./media/tailwind.png)