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.
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 |
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 carries most text and backgrounds. Blackout is for body text and headings, and Backstage for secondary text.
The core brand colour, for trust, reliability, and partnership. In code, it's
the intent-brand-blue intent and the --color-brand-blue-* tokens.
Intent
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.
Intent
Energy and live moments, strong in shows and sports. In code, it's the
intent-brand-orange intent and the --color-brand-orange-* tokens.
Intent
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.
Lead with blue, and let one spotlight colour be the hero of a piece.
Do
One spotlight colour for the hero action, with house colours supporting it.
Don’t
Warm and cool spotlight colours competing in one piece.
| 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. |
| Piece | Colour |
|---|---|
| Spotlight blue headers, house blue backgrounds, and Blackout text | |
| Social post | One spotlight colour leads, with house colour support |
| 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 is measured with APCA, at the minimums on Colours: 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.
-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.