---
name: Lifty
version: "01"
source: https://design.lifty.ski
colors:
  primary:
    mountain-teal: "#142C30"  # Mountain Teal
    electric-orange: "#FF541F"  # Electric Orange
    icy-mint: "#A4E8DE"  # Icy Mint
    deep-burgundy: "#4C192A"  # Deep Burgundy
  secondary:
    off-white: "#F9F9F7"  # Off White
  extension:
    orange-ink: "#BF3A0B"  # proposed
    teal-lifted: "#2A5157"  # proposed
    burgundy-lifted: "#7A2E46"  # proposed
    contour: "#1E4147"  # proposed
    snow-blue: "#3D7FE0"  # proposed
  piste:
    easy: "#A5D379"  # Easy Green
    moderate: "#5D8FE8"  # Moderate Blue
    difficult: "#DD2626"  # Moderate - Difficult Red
    expert: "#191919"  # Difficult Black
  signal:
    danger: "#DD2626"  # Danger
    warning: "#FF9B57"  # Warning
    caution: "#FCDF65"  # Caution
    safe: "#A5D379"  # Safe / first aid
    mandatory: "#5D8FE8"  # Mandatory instructions
gradient:
  mixed: "linear-gradient(150deg, #C8FFF9 0%, #0E3A44 35%, #4C192A 65%, #FF541F 100%)"
typography:
  display: "Coolvetica, Poppins, system-ui, sans-serif"  # Display, headings
  decorative: "Jorude, Poppins, system-ui, sans-serif"  # Expressive headlines
  body: "Poppins, system-ui, sans-serif"  # Body, info, paragraphs, labels
---

<!-- Generated from brand/content and brand/tokens by `npm run agent` in brand/. Do not edit by hand. -->

# Lifty — DESIGN.md

Lifty is offline turn-by-turn navigation for ski resorts. The brand is playful and adventurous but clear and dependable: a bold, unexpected palette (teal, orange, mint, burgundy — not the usual ski blues), a soft two-peak mountain mark, chunky display type and a voice like a local guide. Full guide: https://design.lifty.ski (every page has a `.md` twin). Source: Lifty Final Branding Doc v01 (Designer By Day, 2026-10-20).

## Colour

| Name | Hex | Token | Use |
|---|---|---|---|
| Mountain Teal | `#142C30` | `--color-primary-mountain-teal` | Confidence, clarity and structure. Dark panels, ink on light grounds. |
| Electric Orange | `#FF541F` | `--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` | `--color-primary-icy-mint` | Fresh, playful contrast. Accents on teal and burgundy; teal or burgundy text on it. |
| Deep Burgundy | `#4C192A` | `--color-primary-deep-burgundy` | Grounded depth. Hero panels; off-white, mint or orange display text on it. |

| Name | Hex | Token | Use |
|---|---|---|---|
| Off White | `#F9F9F7` | `--color-secondary-off-white` | Breathing room. Light grounds and text on dark panels. |

**Mixed Gradient** (proposed): `linear-gradient(150deg, #C8FFF9 0%, #0E3A44 35%, #4C192A 65%, #FF541F 100%)`. Backgrounds only — never fill type with it.

**Hierarchy:** Mountain Teal 30%, Electric Orange 30%, Icy Mint 15%, Deep Burgundy 15%, Off White 10%.

### Digital extensions (screen only, one job each)

| Name | Hex | Token | Use |
|---|---|---|---|
| Orange Ink *(proposed)* | `#BF3A0B` | `--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` | `--color-extension-teal-lifted` | Mountain Teal in dark mode. #142C30 vanishes on a dark ground (#1C1C1E). |
| Lifted Burgundy *(proposed)* | `#7A2E46` | `--color-extension-burgundy-lifted` | Deep Burgundy in dark mode. #4C192A reads as a hole on a dark ground. |
| Contour *(proposed)* | `#1E4147` | `--color-extension-contour` | Topographic contour lines drawn over Mountain Teal. |
| Snow Blue *(proposed)* | `#3D7FE0` | `--color-extension-snow-blue` | New snow, forecasts and alerts in the app. |

### Functional

| Name | Hex | Token | Use |
|---|---|---|---|
| Easy Green | `#A5D379` | `--color-piste-easy` |  |
| Moderate Blue | `#5D8FE8` | `--color-piste-moderate` |  |
| Moderate - Difficult Red | `#DD2626` | `--color-piste-difficult` |  |
| Difficult Black | `#191919` | `--color-piste-expert` |  |
| Danger | `#DD2626` | `--color-signal-danger` |  |
| Warning | `#FF9B57` | `--color-signal-warning` |  |
| Caution | `#FCDF65` | `--color-signal-caution` |  |
| Safe / first aid | `#A5D379` | `--color-signal-safe` |  |
| Mandatory instructions | `#5D8FE8` | `--color-signal-mandatory` |  |

Always pair functional colour with an icon or words.

### Pairings

Approved text-on-ground pairings (WCAG 2 contrast; AA ≥ 4.5 for body text, 3 for large text):

- White on Mountain Teal — 14.66:1, AAA
- White on Electric Orange — 3.21:1, Large text
- Mountain Teal on Icy Mint — 10.59:1, AAA
- Electric Orange on Deep Burgundy — 4.42:1, Large text
- White on Mixed Gradient
- Deep Burgundy on Off White — 13.46:1, AAA
- Icy Mint on Mountain Teal — 10.59:1, AAA
- Deep Burgundy on Electric Orange — 4.42:1, Large text

Avoid:

- Contour on Mountain Teal — Too little contrast.
- Mixed Gradient on Electric Orange — Never fill type with the gradient.
- Electric Orange on Icy Mint — The colours clash and the text is hard to read.
- Mountain Teal on Deep Burgundy — Too little contrast.
- Mixed Gradient on Mixed Gradient — Never fill type with the gradient.
- Icy Mint on Off White — Too little contrast.
- Deep Burgundy on Mountain Teal — Too little contrast.
- Icy Mint on Electric Orange — The colours clash.

Electric Orange on white is 3.21:1 and on Off White 3.05:1 (Large text): use Orange Ink (`#BF3A0B`, 5.49:1 on white) for small orange text on light grounds.

## Typography

- **Coolvetica** — Display, headings. Primary typeface. Display and headlines only: short lines, never body copy. Stack: `Coolvetica, Poppins, system-ui, sans-serif`. Licence: Typodermic free desktop licence: static use only. Webfont and app licences not bought yet.
- **Jorude** — Expressive headlines. Decorative typeface. Expressive headlines, stickers and playful moments; always uppercase. Stack: `Jorude, Poppins, system-ui, sans-serif`. Licence: Unknown: delivered without a licence file.
- **Poppins** — Body, info, paragraphs, labels. Supporting typeface. Body copy, app navigation, labels, information. Stack: `Poppins, system-ui, sans-serif`. Licence: SIL Open Font License 1.1
- Subhead ≤ 33% of the headline's ascender height; body ≤ 50% of the subhead's cap height.
- Until the Coolvetica / Jorude web and app licences are bought, screens use Poppins; never embed or redistribute those font files.

## Logo

Forms: mark (two uneven soft peaks), wordmark (`lifty`, lowercase, custom), lockup (mark over wordmark, optionally with a sun), landscape (mark left of wordmark). Colours: mountain-teal, icy-mint, deep-burgundy, electric-orange, off-white, black, white.

- Logo lockup: `https://design.lifty.ski/assets/logos/lockup/<colour>.svg`
- Logomark: `https://design.lifty.ski/assets/logos/mark/<colour>.svg`
- Wordmark: `https://design.lifty.ski/assets/logos/wordmark/<colour>.svg`
- Landscape logo: `https://design.lifty.ski/assets/logos/landscape/<colour>.svg`

Each colour belongs on one ground: Mountain Teal on #A4E8DE; Icy Mint on #142C30; Deep Burgundy on #FF541F; Electric Orange on #4C192A; Off White on #142C30; Black on #FFFFFF; White on #000000.

## Rules

### Lifty Brand Guidelines

- Do: use only the brand palette — the four primaries, Off White, the Mixed Gradient and the documented digital extensions.
- Do: use the supplied logo files as they are.
- Don't: alter, recolour, skew, outline or add effects to the logo.
- Don't: set body text in Coolvetica or Jorude — they are display faces.

### Voice

- Do: name the place, the lift and the time — specifics beat adjectives.
- Do: say what the rider needs to know, then stop.
- Do: use skiers' words — piste, run, lift, gondola, chairlift, sector, blue / red / black.
- Don't: use hype, superlatives or fake urgency (amazing, incredible, seamless, premium, passionate).
- Don't: make a claim the product can't back up — especially about privacy.

### Logo

- Do: use the supplied SVG files; pick the colour variant made for your background.
- Do: colour the logo only in Mountain Teal, Electric Orange, Deep Burgundy or Icy Mint — black or white only where colour is impossible.
- Do: keep clear space around the logo, doubled between Lifty and a partner logo.
- Don't: skew, stretch, rotate, outline, add a shadow to, or two-tone the logo.
- Don't: change the spacing between the mark and the wordmark, or delete an element.
- Don't: place the logo on a jarring background or let anything cover it.

### Colour

- 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).

### Typography

- Do: keep Coolvetica headlines short — a few words.
- Do: use Poppins for body copy, app navigation, labels and information.
- Do: keep subheads ≤ 33% of the headline's ascender height, and body ≤ 50% of the subhead's cap height.
- Do: set Jorude in capitals, for taglines and stickers.
- Don't: overuse the display typeface or set paragraphs in it.
- Don't: open up the tracking or leading of display headlines — keep them tight.

### Graphics

- Do: repeat, resize and rearrange the sun; step-and-repeat the mountain line; use contours for maps and navigation.
- Do: crop the mark and the sun boldly, past the edge of the layout.
- Do: build stickers from the mark, sun, trees and contours, in a circle, in brand colours.
- Do: use one pattern per surface — contours, the mountain line or dots, never two.
- Do: run contours and the mountain line edge to edge; only dots sit in part of a surface.
- Do: draw contours at one zoom everywhere, from a fixed piece of the sheet per surface, summit in a corner, fading away from it.
- Do: zoom the mountain line until no mark's end is visible inside the surface.
- Do: keep dots as one cluster hanging off a corner, cropped by its edges.
- Do: give a surface one motif — the big sun or the cropped mark — in the corner opposite the text.
- Don't: draw patterns in colours outside the palette.
- Don't: put the big sun on a surface with dots, or let any pattern or motif sit behind body text.
- Don't: tile contours, scale them per surface or cut a random piece each time.

### Iconography

- Do: use familiar, universally recognised symbols — one icon per meaning.
- Do: in the apps, draw icons from the app's icon registry, not ad-hoc images.
- Don't: use emoji as product icons.

### Photography

- Do: show real moments — friends laughing on a chairlift, someone carving fresh powder.
- Do: shoot low angles, close-ups, interesting crops and candid moments.
- Do: look for brand colours in clothing, equipment and surroundings.
- Do: keep logos and type over photos legible, with strong contrast.
- Don't: over-polish or stage the edit.

### In the app

- Do: put brand colour inside content — cards, tiles, buttons, hero panels.
- Do: use stock system chrome — navigation bars, tab bars, toggles, alerts.
- Do: read colours from the platform's brand tokens, never a hard-coded hex.
- Do: show status with a dot and a word, never colour alone.
- Don't: tint system bars, toggles or alerts with brand colours.

### Downloads

- Do: download logos from here rather than copying them out of documents.
- Do: use SVG wherever the medium allows it.

## Using this in the Lifty repo

- This file is `brand/DESIGN.md`; the long-form pages are `brand/content/*.md`; tokens are `brand/tokens/*.tokens.json`; logos are `brand/public/assets/logos/<form>/<colour>.svg`.
- In app code, read colours from the platform's brand tokens (`Brand` in iOS, `LiftyBrand` / `LiftyTheme` in Android) — never a new hard-coded hex. Code names differ from the guide's until Phase 2 (alpine = Mountain Teal, plum = Deep Burgundy, iceMint = Icy Mint, orange/sunset = Electric Orange, cream ≈ Off White).
- To change the brand, edit `brand/content` or `brand/tokens`, then run `npm run agent` in `brand/`.