Updated 2026-10-27 · Markdown

In the app

How the brand meets iOS and Android — brand colour inside content, native system chrome around it.

Do

  • Put brand colour inside content — cards, tiles, buttons, hero panels.
  • Use stock system chrome — navigation bars, tab bars, toggles, alerts.
  • Read colours from the platform's brand tokens, never a hard-coded hex.
  • Show status with a dot and a word, never colour alone.

Don't

  • Tint system bars, toggles or alerts with brand colours.

The apps follow the platforms' own look — Liquid Glass on iOS, Material 3 on Android — and the brand lives inside the content. Lifty should feel at home on the phone and unmistakably Lifty on the screen.

Where colour goes

ElementColour
Primary action (route, record)Electric Orange fill, white label (large, bold)
Orange text, links, checkmarks on light groundsOrange Ink
Dark hero panels and cardsMountain Teal, with contour lines in Contour
Celebration and collection heroesDeep Burgundy
Good news and badges on teal or burgundyIcy Mint
Dark mode panelsLifted Teal, Lifted Burgundy
Piste difficultyPiste colours, with the difficulty name
Status (open, limited, closed)A coloured dot beside the word

In code

Today the colours live in ios/…/App/Brand.swift and android/…/ui/theme/Color.kt, under older names (alpine, plum, iceMint, cream, Sunset Orange). The next phase generates both from this guide's tokens and renames them to match. Until then, the colour page lists the code name next to each token.

Type in the apps is the system font (SF Pro, Roboto) with Unbounded for hero numbers. The brand typefaces arrive with their app licences.