# Colour

> Bold, unexpected colour — teal and orange lead, mint and burgundy add depth, Off White gives room — plus functional colours for pistes and safety.

Source: https://design.lifty.ski/colour · Updated 2026-10-27

## At a glance

- Do: lead with Mountain Teal and Electric Orange (30% each); Icy Mint and Deep Burgundy 15% each; Off White 10%.
- Do: use only the approved pairings for text.
- Do: use Orange Ink (#BF3A0B), not Electric Orange, for small orange text or links on light backgrounds.
- Do: pair every functional colour with an icon or words — never colour alone.
- Don't: introduce any colour outside the palette and its digital extensions.
- Don't: fill type with the Mixed Gradient.
- Don't: set body text in Electric Orange on white or Off White — it fails contrast (3.2:1).

Lifty's palette breaks away from the expected. Instead of the blues and icy tones most ski and snowboard brands use, it brings a bold mix that captures the excitement, energy and freedom of the mountains.

Vibrant orange and fresh mint bring playful, youthful energy; deep teal and rich burgundy keep it grounded and confident. The palette stands out on screen and stays bold and punchy in print. With soft Off White and expressive gradients, it is modern, versatile, adventurous, approachable — and unmistakably Lifty.

## Primary colours

| Colour | Hex | RGB | CMYK | CSS token | Use |
|---|---|---|---|---|---|
| Mountain Teal | `#142C30` | 20, 44, 48 | 89, 62, 61, 62 | `--color-primary-mountain-teal` | Confidence, clarity and structure. Dark panels, ink on light grounds. |
| Electric Orange | `#FF541F` | 255, 84, 31 | 0, 87, 100, 0 | `--color-primary-electric-orange` | Energy, excitement and personality. Fills, CTAs, the mark. Never small text on a light ground (use extension.orange-ink). |
| Icy Mint | `#A4E8DE` | 164, 232, 222 | 38, 0, 19, 0 | `--color-primary-icy-mint` | Fresh, playful contrast. Accents on teal and burgundy; teal or burgundy text on it. |
| Deep Burgundy | `#4C192A` | 76, 25, 42 | 45, 91, 59, 57 | `--color-primary-deep-burgundy` | Grounded depth. Hero panels; off-white, mint or orange display text on it. |

## Secondary colours

| Colour | Hex | RGB | CMYK | CSS token | Use |
|---|---|---|---|---|---|
| Off White | `#F9F9F7` | 249, 249, 247 | 2, 1, 2, 0 | `--color-secondary-off-white` | Breathing room. Light grounds and text on dark panels. |

**Mixed Gradient** (proposed): Mixed Gradient: icy cyan through teal and burgundy to orange, diagonal. Stops are read off the PDF swatch; the designer to confirm.

CSS: `linear-gradient(150deg, #C8FFF9 0%, #0E3A44 35%, #4C192A 65%, #FF541F 100%)`

## Digital extensions

Some colours of the palette can't carry small text on screen: Electric Orange on white is 3.2:1, and accessibility guidelines (WCAG AA) ask for 4.5:1. Dark mode needs teal and burgundy that don't vanish on a dark ground. These extensions solve exactly that and nothing else — **screen only, one job each, never in print and never as a brand colour in their own right**. They are proposed until the designer confirms the exact values.

| Colour | Hex | RGB | CMYK | CSS token | Use |
|---|---|---|---|---|---|
| Orange Ink (proposed) | `#BF3A0B` | 191, 58, 11 | — | `--color-extension-orange-ink` | Orange text, links and small icons on light grounds (white, off-white). Electric Orange there is 3.2:1 and fails body-text contrast. |
| Lifted Teal (proposed) | `#2A5157` | 42, 81, 87 | — | `--color-extension-teal-lifted` | Mountain Teal in dark mode. #142C30 vanishes on a dark ground (#1C1C1E). |
| Lifted Burgundy (proposed) | `#7A2E46` | 122, 46, 70 | — | `--color-extension-burgundy-lifted` | Deep Burgundy in dark mode. #4C192A reads as a hole on a dark ground. |
| Contour (proposed) | `#1E4147` | 30, 65, 71 | — | `--color-extension-contour` | Topographic contour lines drawn over Mountain Teal. |
| Snow Blue (proposed) | `#3D7FE0` | 61, 127, 224 | — | `--color-extension-snow-blue` | New snow, forecasts and alerts in the app. |

## Colour hierarchy

Mountain Teal and Electric Orange lead at 30% each: teal brings confidence, clarity and structure; orange brings energy, excitement and personality. Icy Mint and Deep Burgundy make up 15% each, adding contrast, depth and room for creative expression. Off White completes the balance at 10%, giving layouts room to breathe. These proportions are a flexible guide, not a strict rule.

- Mountain Teal `#142C30`: 30%
- Electric Orange `#FF541F`: 30%
- Icy Mint `#A4E8DE`: 15%
- Deep Burgundy `#4C192A`: 15%
- Off White `#F9F9F7`: 10%

## Colour pairings

The approved pairings for text and supporting elements. Each tile shows its contrast ratio: **AA** passes for body text, **Large text** only for headlines (24 px and up, or 19 px bold), **Fail** never for reading.

| Text on ground | Approved | Contrast | Why not |
|---|---|---|---|
| White on Mountain Teal | Yes | 14.66:1 (AAA) |  |
| White on Electric Orange | Yes | 3.21:1 (Large text) |  |
| Mountain Teal on Icy Mint | Yes | 10.59:1 (AAA) |  |
| Electric Orange on Deep Burgundy | Yes | 4.42:1 (Large text) |  |
| White on Mixed Gradient | Yes | n/a (gradient) |  |
| Deep Burgundy on Off White | Yes | 13.46:1 (AAA) |  |
| Icy Mint on Mountain Teal | Yes | 10.59:1 (AAA) |  |
| Deep Burgundy on Electric Orange | Yes | 4.42:1 (Large text) |  |

### Pairings to avoid

These create too much (or too little) contrast, or simply don't go together.

| Text on ground | Approved | Contrast | Why not |
|---|---|---|---|
| Contour on Mountain Teal | No | 1.33:1 (Fail) | Too little contrast. |
| Mixed Gradient on Electric Orange | No | n/a (gradient) | Never fill type with the gradient. |
| Electric Orange on Icy Mint | No | 2.32:1 (Fail) | The colours clash and the text is hard to read. |
| Mountain Teal on Deep Burgundy | No | 1.03:1 (Fail) | Too little contrast. |
| Mixed Gradient on Mixed Gradient | No | n/a (gradient) | Never fill type with the gradient. |
| Icy Mint on Off White | No | 1.31:1 (Fail) | Too little contrast. |
| Deep Burgundy on Mountain Teal | No | 1.03:1 (Fail) | Too little contrast. |
| Icy Mint on Electric Orange | No | 2.32:1 (Fail) | The colours clash. |

### Every combination

Contrast for every palette colour on every other, for anything the pairings above don't cover.

| Text | Ground | Contrast | WCAG |
|---|---|---|---|
| Electric Orange | Mountain Teal | 4.56:1 | AA |
| Icy Mint | Mountain Teal | 10.59:1 | AAA |
| Deep Burgundy | Mountain Teal | 1.03:1 | Fail |
| Off White | Mountain Teal | 13.90:1 | AAA |
| Orange Ink | Mountain Teal | 2.67:1 | Fail |
| Mountain Teal | Electric Orange | 4.56:1 | AA |
| Icy Mint | Electric Orange | 2.32:1 | Fail |
| Deep Burgundy | Electric Orange | 4.42:1 | Large text |
| Off White | Electric Orange | 3.05:1 | Large text |
| Orange Ink | Electric Orange | 1.71:1 | Fail |
| Mountain Teal | Icy Mint | 10.59:1 | AAA |
| Electric Orange | Icy Mint | 2.32:1 | Fail |
| Deep Burgundy | Icy Mint | 10.26:1 | AAA |
| Off White | Icy Mint | 1.31:1 | Fail |
| Orange Ink | Icy Mint | 3.97:1 | Large text |
| Mountain Teal | Deep Burgundy | 1.03:1 | Fail |
| Electric Orange | Deep Burgundy | 4.42:1 | Large text |
| Icy Mint | Deep Burgundy | 10.26:1 | AAA |
| Off White | Deep Burgundy | 13.46:1 | AAA |
| Orange Ink | Deep Burgundy | 2.59:1 | Fail |
| Mountain Teal | Off White | 13.90:1 | AAA |
| Electric Orange | Off White | 3.05:1 | Large text |
| Icy Mint | Off White | 1.31:1 | Fail |
| Deep Burgundy | Off White | 13.46:1 | AAA |
| Orange Ink | Off White | 5.21:1 | AA |
| Mountain Teal | Orange Ink | 2.67:1 | Fail |
| Electric Orange | Orange Ink | 1.71:1 | Fail |
| Icy Mint | Orange Ink | 3.97:1 | Large text |
| Deep Burgundy | Orange Ink | 2.59:1 | Fail |
| Off White | Orange Ink | 5.21:1 | AA |

## Colour schemes

Suggested schemes for graphics, social content, marketing and posters: a background colour, a typography colour and a decorative colour.

| Background | Typography | Decorative |
|---|---|---|
| Mountain Teal | Icy Mint | Deep Burgundy |
| Electric Orange | Icy Mint | Mountain Teal |
| Deep Burgundy | Off White | Electric Orange |
| Off White | Mountain Teal | Icy Mint |
| Mountain Teal | Mixed Gradient | Electric Orange |
| Off White | Deep Burgundy | Mountain Teal |
| Deep Burgundy | Mixed Gradient | Mountain Teal |
| Mountain Teal | Off White | Electric Orange |
| Deep Burgundy | Electric Orange | Off White |

## Functional colours

Beyond the brand palette, functional colours support navigation, safety and clear communication in the app. They have a practical job: helping riders spot important information quickly.

### Piste colours

The piste system shows slope difficulty with the familiar green, blue, red and black, so riders find runs that suit them at a glance. Follow each resort's or region's classification.

| Colour | Hex | RGB | CMYK | CSS token | Use |
|---|---|---|---|---|---|
| Easy Green | `#A5D379` | 165, 211, 121 | 43, 0, 76, 0 | `--color-piste-easy` |  |
| Moderate Blue | `#5D8FE8` | 93, 143, 232 | 66, 39, 0, 0 | `--color-piste-moderate` |  |
| Moderate - Difficult Red | `#DD2626` | 221, 38, 38 | 0, 100, 100, 0 | `--color-piste-difficult` |  |
| Difficult Black | `#191919` | 25, 25, 25 | 73, 67, 65, 79 | `--color-piste-expert` |  |

### Warnings and information

Each safety colour has one role, from danger alerts and caution notices to first-aid locations and mandatory instructions. Use them consistently and always with a clear icon or words, so the message never relies on colour alone.

| Colour | Hex | RGB | CMYK | CSS token | Use |
|---|---|---|---|---|---|
| Danger | `#DD2626` | 221, 38, 38 | 0, 100, 100, 0 | `--color-signal-danger` |  |
| Warning | `#FF9B57` | 255, 155, 87 | 0, 52, 77, 0 | `--color-signal-warning` |  |
| Caution | `#FCDF65` | 252, 223, 101 | 0, 10, 82, 0 | `--color-signal-caution` |  |
| Safe / first aid | `#A5D379` | 165, 211, 121 | 43, 0, 76, 0 | `--color-signal-safe` |  |
| Mandatory instructions | `#5D8FE8` | 93, 143, 232 | 66, 39, 0, 0 | `--color-signal-mandatory` |  |

Danger shares its value with the red piste, Safe with the green and Mandatory with the blue — on purpose, so the system stays small. Where the app's current status colours differ, see [open items](https://design.lifty.ski/open-items.md).