Colors & Dark Mode

Why PawWalk looks like PawWalk

Open the app and you'll notice a consistent look: cool paper backgrounds, indigo-black text, one confident indigo accent, little uppercase labels that feel like an instrument panel. The designers called this language Subtle HUD — HUD as in heads-up display, the readouts projected in a pilot's view.

That consistency isn't discipline — it's a design system: one file, Theme/Brand.swift, defines every color and font, and every screen borrows from it. Change one line there and the whole app updates. This module teaches you that file, plus the two signature components built on top of it.

First: what a hex color is

Designers hand over colors as hex codes like 0x5B4BE0 (PawWalk's indigo accent). It's really three numbers glued together, two hex digits each: red 5B, green 4B, blue E0. Each pair is one byte — a value from 0 to 255. So 0x5B4BE0 means red 91, green 75, blue 224: a blue-leaning purple.

In Swift, 0x in front of a number literal means "this is written in hexadecimal" — 0xFF is just another way to write 255.