sencss-palette/README.md

Colour palette variables for Sencss

# Colour palette for Sencss

## Primary colour palette

```css
:root {
  --sensis-black: #000000;
  --sensis-white: #ffffff;
}
```

## Secondary colour palette

```css
:root {
  --sensis-green: #45a141;
  --sensis-lime: #cddb29;
  --sensis-magenta: #df1783;
  --sensis-orange: #ed7700;
  --sensis-purple: #a91b8d;
}
```

## Greyscale colour palette

```css
:root {
  --sensis-grey-1: #333333;
  --sensis-grey-2: #6e6e6e;
  --sensis-grey-3: #d9d9d9;
  --sensis-grey-4: #f2f2f2;
}
```

## Brands colour palette

```css
:root {
  --yellow-pages: #ffcd00;
  --white-pages: #001f5b;
  --where-is: #0bc5dd;
  --true-local: #00a9ef;
}
```

# Pitcher colour palette

```css
:root {
  --pitcher-slate-1: #717685;
  --pitcher-slate-2: #373c4c;
  --pitcher-slate-3: #272c37;
  --pitcher-slate-4: #0c2028;

  --pitcher-purple-1: #a31c89;
  --pitcher-purple-2: #a31c89;

  --pitcher-yellow-1: #e9e510;
}
```

## UI adjustments

```css
:root {
  --hue-1: h(- 15);
  --hue-2: h(- 10);
  --hue-3: h(+ 10);
  --hue-4: h(+ 15);

  --saturate-1: s(- 15%);
  --saturate-2: s(- 10%);
  --saturate-3: s(+ 10%);
  --saturate-4: s(+ 15%);

  --lighten-1: l(- 15%);
  --lighten-2: l(- 10%);
  --lighten-3: l(+ 10%);
  --lighten-4: l(+ 15%);

  --ui-darken-2: var(--hue-1) var(--saturate-1) var(--lighten-1);
  --ui-darken-1: var(--hue-2) var(--saturate-2) var(--lighten-2);
  --ui-lighten-1: var(--hue-3) var(--saturate-3) var(--lighten-3);
  --ui-lighten-2: var(--hue-4) var(--saturate-4) var(--lighten-4);
}

```