# Colour

> The brand palette, named like stage lighting, and how to use it across digital, print, and partner work.

The brand palette is Roadie's colour scales, so a design and the app it becomes
use the same values. Each colour has a lighting name that says what it's for,
like the lights on a stage.

## Lighting names

Use the lighting name in briefs and design files, and the Roadie step in code.

| Name      | Roadie step | What it lights                                   |
| --------- | ----------- | ------------------------------------------------ |
| Flood     | Neutral 0   | Pure white backgrounds, and text on dark ones    |
| Wash      | 2           | Subtle backgrounds, rarely used                  |
| House     | 5           | Patterns, text blocks, and container backgrounds |
| Stage     | 7           | Secondary actions, links, and borders            |
| Spotlight | 9           | Primary calls to action and hero moments         |
| Backstage | 11          | Secondary text                                   |
| Blackout  | 12          | Body text, headings, and dark backgrounds        |

## Swatches

Each card shows a colour's light value, which brand artwork keeps in dark mode
too. Select a token, hex, or CMYK value to copy it, and a message confirms
what you copied. CMYK marked derived is a
screen-to-print equivalent, converted from the hex through a coated press
profile, to confirm with a proof.

### Neutral

Neutral carries most text and backgrounds. Blackout is for body text and
headings, and Backstage for secondary text.

| Name      | Token                | Hex       | CMYK                       |
| --------- | -------------------- | --------- | -------------------------- |
| Flood     | `--color-neutral-0`  | `#ffffff` | `0, 0, 0, 0`               |
| Wash      | `--color-neutral-2`  | `#f5fafe` | `2, 0, 0, 0 (derived)`     |
| House     | `--color-neutral-5`  | `#d7e2ed` | `14, 7, 3, 0 (derived)`    |
| Stage     | `--color-neutral-7`  | `#c1d1e1` | `23, 12, 5, 0 (derived)`   |
| Spotlight | `--color-neutral-9`  | `#7b90a5` | `58, 39, 27, 1 (derived)`  |
| Backstage | `--color-neutral-11` | `#475766` | `79, 62, 45, 29 (derived)` |
| Blackout  | `--color-neutral-12` | `#16202a` | `81, 70, 60, 83 (derived)` |

### Blue

The core brand colour, for trust, reliability, and partnership. In code, it's
the `intent-brand-blue` intent and the `--color-brand-blue-*` tokens.

| Name           | Token                   | Hex       | CMYK                       |
| -------------- | ----------------------- | --------- | -------------------------- |
| Wash blue      | `--color-brand-blue-2`  | `#f1f6fb` | `4, 2, 0, 0`               |
| House blue     | `--color-brand-blue-5`  | `#c2dffb` | `21, 5, 0, 0`              |
| Stage blue     | `--color-brand-blue-7`  | `#92c1ee` | `40, 15, 0, 0`             |
| Spotlight blue | `--color-brand-blue-9`  | `#0191eb` | `85, 25, 0, 0`             |
| Backstage blue | `--color-brand-blue-11` | `#01538a` | `100, 76, 25, 9 (derived)` |
| Blackout blue  | `--color-brand-blue-12` | `#04365b` | `100, 40, 0, 65`           |

### Purple

Innovation and premium experiences, strong in music and venue work. In code,
it's the `intent-brand-purple` intent and the `--color-brand-purple-*` tokens.

| Name             | Token                     | Hex       | CMYK                     |
| ---------------- | ------------------------- | --------- | ------------------------ |
| Wash purple      | `--color-brand-purple-2`  | `#f7f4fc` | `3, 4, 0, 0`             |
| House purple     | `--color-brand-purple-5`  | `#e1d1fb` | `10, 18, 0, 0`           |
| Stage purple     | `--color-brand-purple-7`  | `#c8acf0` | `25, 35, 0, 0`           |
| Spotlight purple | `--color-brand-purple-9`  | `#a96af1` | `50, 69, 0, 0`           |
| Backstage purple | `--color-brand-purple-11` | `#6d2fa9` | `74, 97, 0, 0 (derived)` |
| Blackout purple  | `--color-brand-purple-12` | `#431e69` | `75, 90, 0, 45`          |

### Orange

Energy and live moments, strong in shows and sports. In code, it's the
`intent-brand-orange` intent and the `--color-brand-orange-*` tokens.

| Name             | Token                     | Hex       | CMYK                        |
| ---------------- | ------------------------- | --------- | --------------------------- |
| Wash orange      | `--color-brand-orange-2`  | `#fef2ee` | `0, 5, 8, 0`                |
| House orange     | `--color-brand-orange-5`  | `#ffc3a8` | `0, 25, 35, 0`              |
| Stage orange     | `--color-brand-orange-7`  | `#ff9e78` | `0, 40, 55, 0`              |
| Spotlight orange | `--color-brand-orange-9`  | `#ff8a5c` | `0, 50, 65, 0`              |
| Backstage orange | `--color-brand-orange-11` | `#953601` | `27, 88, 100, 31 (derived)` |
| Blackout orange  | `--color-brand-orange-12` | `#5f270f` | `40, 80, 100, 45`           |

### Green, yellow, and red

Status colours, used sparingly and only for what they mean. Green is success,
yellow is featured content, and red is critical states. Yellow fills always
take dark text.

| Name            | Token                | Hex       | CMYK                        |
| --------------- | -------------------- | --------- | --------------------------- |
| Wash green      | `--color-success-2`  | `#edf9f7` | `8, 0, 5, 0`                |
| House green     | `--color-success-5`  | `#a1eae0` | `35, 0, 20, 0`              |
| Stage green     | `--color-success-7`  | `#61cec1` | `55, 0, 30, 0`              |
| Spotlight green | `--color-success-9`  | `#00c2b3` | `70, 0, 35, 0`              |
| Backstage green | `--color-success-11` | `#006057` | `100, 41, 70, 34 (derived)` |
| Blackout green  | `--color-success-12` | `#02453f` | `90, 30, 60, 55`            |

| Name             | Token                | Hex       | CMYK                        |
| ---------------- | -------------------- | --------- | --------------------------- |
| Wash yellow      | `--color-warning-2`  | `#fffae6` | `0, 1, 10, 0 (derived)`     |
| House yellow     | `--color-warning-5`  | `#ffe077` | `0, 10, 67, 0 (derived)`    |
| Stage yellow     | `--color-warning-7`  | `#f0c250` | `5, 24, 86, 0 (derived)`    |
| Spotlight yellow | `--color-warning-9`  | `#e0ac00` | `13, 33, 100, 0 (derived)`  |
| Backstage yellow | `--color-warning-11` | `#735302` | `45, 59, 100, 38 (derived)` |
| Blackout yellow  | `--color-warning-12` | `#483a1a` | `58, 62, 89, 67 (derived)`  |

| Name          | Token               | Hex       | CMYK                         |
| ------------- | ------------------- | --------- | ---------------------------- |
| Wash red      | `--color-danger-2`  | `#fdf2f1` | `0, 5, 3, 0`                 |
| House red     | `--color-danger-5`  | `#ffc2b7` | `0, 25, 15, 0`               |
| Stage red     | `--color-danger-7`  | `#f5a296` | `5, 40, 25, 0`               |
| Spotlight red | `--color-danger-9`  | `#ff6b5c` | `0, 60, 45, 0`               |
| Backstage red | `--color-danger-11` | `#a00207` | `23, 100, 100, 26 (derived)` |
| Blackout red  | `--color-danger-12` | `#592b25` | `40, 80, 85, 45`             |

## Pairing colours

Lead with blue, and let one spotlight colour be the hero of a piece.

### One spotlight colour leads

**Do**

```tsx
<Button intent='brand-blue' emphasis='strong'>Contact sales</Button>
```

One spotlight colour for the hero action, with house colours supporting it.

**Don’t**

```tsx
<>
  <Button intent='brand-orange' emphasis='strong'>Contact sales</Button>
  <Button intent='brand-purple' emphasis='strong'>Create my event</Button>
</>
```

Warm and cool spotlight colours competing in one piece.

- Keep bright colours off large backgrounds. The pattern is the exception,
  with house colour curves on a spotlight ground.
- Keep blue in every Oztix logo and primary call to action.
- In print, use house colours for large areas, specify CMYK, and test on the
  actual paper stock.

### By market

| Market | Colours                                           |
| ------ | ------------------------------------------------- |
| Music  | Blue and purple. Purple can lead the background.  |
| Sports | Blue and orange, in high energy combinations.     |
| Venues | Blue and purple, mostly blue, kept professional.  |
| Shows  | Blue and orange, matched to the show's energy.    |
| Events | Blue, orange, and green, the most flexible range. |

### By piece

| Piece        | Colour                                                                  |
| ------------ | ----------------------------------------------------------------------- |
| Email        | Spotlight blue headers, house blue backgrounds, and Blackout text       |
| Social post  | One spotlight colour leads, with house colour support                   |
| Print        | House colours for main areas, and spotlight for brand moments           |
| Presentation | Spotlight blue, house patterns and text blocks, and neutral backgrounds |
| Co-branding  | Spotlight blue for Oztix elements, neutrals for shared space            |

## Contrast

Contrast is measured with APCA, at the minimums on
[Colours](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md#contrast): Lc 75 for body text, Lc 60 for labels
on strong fills and large text, and Lc 45 for non-text elements. White text on
Spotlight blue passes for labels and large text. Never use colour alone to
carry meaning.

## In Roadie

- Emphasis picks the step, so code names the intent rather than a lighting
  name. See [Colours](https://ticketsolutionsptyltd.github.io/roadie/foundations/colors.md).
- Artwork that keeps its light colours in dark mode uses the pinned `-light-`
  tokens, such as `--color-brand-blue-light-9`, which exist for steps 5, 9, 12,
  and 13, and neutral 0. The swatch tokens follow the theme.
- Every step of every scale is on [Color scales](https://ticketsolutionsptyltd.github.io/roadie/tokens/color-scales.md).

Docs updated 15 Oct 2026.