# Basics

## Colors

### Primary

#### Neutral

> _[No color tokens found for: neutral]_

#### Beige

> _[No color tokens found for: beige]_

#### Green

> _[No color tokens found for: green]_

#### Teal

> _[No color tokens found for: teal]_

#### Blue

> _[No color tokens found for: blue]_

#### Violet

> _[No color tokens found for: violet]_

#### Pink

> _[No color tokens found for: pink]_

#### Red

> _[No color tokens found for: red]_

#### Red Orange

> _[No color tokens found for: red-orange]_

#### Orange

> _[No color tokens found for: orange]_

#### Yellow

> _[No color tokens found for: yellow]_

### Semantic

#### Background brand primary

> _[No color tokens found for: background-brand-primary]_

#### Background brand secondary

> _[No color tokens found for: background-brand-secondary]_

## Spacing

You can customize the global spacing for `padding` and `margin`, `top`, `left`, `right` and `bottom`.

> _[No theme variables found for: spacing]_

## Border radius

By default, we set a border radius on components. Set the radii borders to 0 if you don't like this default. You can also configure the border width.

> _[No theme variables found for: radius]_

## Breakpoint (screens)

We use values taken from [this article](https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a).

> _[No theme variables found for: breakpoint]_

## Typography

We use `font`, `font-size`, `font-weight`, `line-height` and `letter-spacing` to customize the theme. You should use the [Text component](https://www.welcome-ui.com/components/text) with predefined text styles where you can.

### font-size

> _[No theme variables found for: font-size]_

### font-weight

> _[No theme variables found for: font-weight]_