---
url: /frontend/design-system.md
---
# Design System

The Evolve theme uses Tailwind for styling. You can adjust the `tailwind.config.js` config like you would in any other Tailwind project.

## Defining a base style

You can choose between a `light` or `dark` base by passing the according value to our theme plugin.

```js [tailwind.config.js]
plugins: [
    require('./tailwind/theme')({
        theme: 'light', // light or dark
    })
],
```

## Theme Colors

Because we use the same color utilities for light and dark modes, you need to setup our theme colors in the `tailwind/theme.js` config file.

You can define colors for both `light` and `dark` styles.

### Primary Color

By default, you need to define a primary color and a darker and lighter version.

### Shades

Our color system for grays consists of `lighter` and `stronger` variants.

* The more **strong** a color is, the more it should stand out from the background.
* The more  **light** a color is, the more it should fade into the background.

### Supporting shades

* The **muted** color should be a neutral color between strong and light.
* The **negative** color should be the opposite color of the background (usually the same or similar color as `strongest`).
* The **elevated** color should be a color to show elevation from the background. (E.g. white on a light-gray background)

## Changing theme styles per component

Regardless of your base styles, you can still make parts of your design specifically dark or light by using the `dark` and `light` classes on any HTML element.

You can also use the `theme-invert` and `theme-current` classes to be more dependant on the base style.

```html
<!-- Base is set to `light` -->
<html>

    <Card class="dark">
        <!-- Makes card always appear `dark` -->
    </Card>

    <Card class="theme-invert">
        <!-- Makes card appear `dark` or `light`, depending of the base style  -->
    </Card>

</html>
```