# Alkemio UX
This document provides guidelines for Alkemio User Experience (UX).

## User Interface Color Palette
These are the colors currently defined in the web application and their usage:

| Name | Color | Usage |
| -------- | -------- | -------- |
| Primary |  `#068293` | buttons, large text |
| Positive |  `#00A88F` | tags |
| Warning | tbd | warnings |
| Negative |  `#D40062` | errors |
| Neutral |  `#181828` | small text and shadows |
| Neutral plus |  `#B8BAC8` | tags, text |
| Neutral light |  `#F9F9F9` | backgrounds |
| Background |  `#FFFFFF` | backgrounds |

The above colors are also used with an opacity applied in various locations in the user experience. For example, the divider color is primary with 40% opacity.

## Alkemio (TM) Brand
The logo for Alkemio is shown below:

<p align="center">
<a href="http://alkem.io/" target="blank"><img src="https://alkem.io/uploads/logos/alkemio-logo.svg" width="200" alt="Alkemio Logo" /></a>
</p>

The logo uses the following two color codes:
| Name | Color | Usage |
| -------- | -------- | -------- |
| Pacific Blue |  `#09bcd4` | icon |
| Deep Blue |  `#2d546a` | text |

These colors are used also in certain places in the user interface. However for accessibilty (i.e. contrast) the Pacific Blue color in particular is swapped in text for the Primary color above.