```js
import colors from '@invisionag/iris-colors';
```

The injixo color world is split into 3 categories:

**Brand**

Only used for branding related tasks. It's not allowed to use those color for any other cause.

```js
import { brand } from '@invisionag/iris-colors';
```

**System**

Are used for all stylings within the injixo applications such as background-colors, border, typography, etc...

```js
import { system } from '@invisionag/iris-colors';
```

**Data Visualization**

Only used for data visualization such as graphs, tables and other data heavy visualizations.

```js
import { visualization } from '@invisionag/iris-colors';
```

### Usage:

```js
export const StyledItem = styled.div`
  background-color: ${colors.system.ui100};
`;
```

**Brand**

```js
export const StyledItem = styled.div`
  background-color: ${brand.injixo100};
`;
```

**System**

```js
export const StyledItem = styled.div`
  background-color: ${system.ui100};
`;
```

**Data Visualization**

```js
export const StyledItem = styled.div`
  background-color: ${visualization.ink50};
`;
```