Branding — Colours

These are the brand colour tokens used across the marketing surface, social cards and PWA theme.

Accent

The single saturated accent, reserved for buttons, links, selection and the brand mark. It mirrors Apple’s system blue so the estimator’s UI and the brand surface read as one product.

Mode	Swatch	HEX	RGB	Use
Light		#007AFF	0, 122, 255	Default accent, light theme
Dark		#0A84FF	10, 132, 255	Default accent, dark theme
Pressed (Light)		#0062CC	0, 98, 204	Pressed state, light theme
Pressed (Dark)		#409CFF	64, 156, 255	Pressed state, dark theme

Accent conflict with Master Spec §2.2

Master Spec §2.2 fixes the primary blue at #0A84FF, and this docs site uses that value in both themes. The brand system defines #007AFF for light mode and #0A84FF only for dark mode. The two documents disagree, and the written specification prevails until §2.2 is revisited.

Semantic colours

Token	Swatch	HEX	RGB	Use
Highlight		#FF2D95	255, 45, 149	Canvas Highlight tool (translucent)
Highlight (Dark)		#FF47A8	255, 71, 168	Same in dark mode
Destructive		#FF3B30	255, 59, 48	Delete, force unlock, trash
Destructive (Dark)		#FF453A	255, 69, 58	Same in dark mode
Success		#34C759	52, 199, 89	Sync OK, validation passed
Success (Dark)		#30D158	48, 209, 88	Same in dark mode
Warning		#FF9500	255, 149, 0	Warnings
Warning (Dark)		#FF9F0A	255, 159, 10	Same in dark mode

Highlight is reserved for the Canvas Highlight tool only — never repurpose it for buttons or errors. Destructive is loud: irreversible actions only.

Surface ramp

The estimator’s drawings and the satellite image stay the focus, so the surface ramp is neutral and low-chroma.

Token	Swatch	HEX	RGB	Use
systemBackground (Light)		#FFFFFF	255, 255, 255	Light theme base canvas
systemBackground (Dark)		#000000	0, 0, 0	Dark theme base canvas
secondarySystemBackground (Light)		#F2F2F7	242, 242, 247	Light grouped surfaces
secondarySystemBackground (Dark)		#1C1C1E	28, 28, 30	Dark grouped surfaces
tertiarySystemBackground (Light)		#FFFFFF	255, 255, 255	Light raised surfaces
tertiarySystemBackground (Dark)		#2C2C2E	44, 44, 46	Dark raised surfaces
card (Light)		#FFFFFF	255, 255, 255	Cards, estimate rows, SOW
card (Dark)		#1C1C1E	28, 28, 30	Same in dark mode
fill (Light)		#E5E5EA	229, 229, 234	Inert control backgrounds
fill (Dark)		#2C2C2E	44, 44, 46	Same in dark mode

Text and labels

Token	Swatch	HEX	RGB	Use
label (Light)		#1C1C1E	28, 28, 30	Primary text
label (Dark)		#FFFFFF	255, 255, 255	Primary text (dark)
secondaryLabel (Light)		#6C6C70	108, 108, 112	Helper copy, metadata
secondaryLabel (Dark)		#AEAEB2	174, 174, 178	Same in dark mode
tertiaryLabel (Light)		#AEAEB2	174, 174, 178	Placeholders, disabled
tertiaryLabel (Dark)		#6C6C70	108, 108, 112	Same in dark mode
separator (Light)		#D1D1D6	209, 209, 214	Hairline dividers
separator (Dark)		#38383A	56, 56, 58	Same in dark mode

Mascot palette

These are art-only colours, not interface tokens. Use them when reproducing brand art; never introduce them as UI accents.

Colour	Swatch	HEX (approx)	Use
Body light blue		#7CB9F0	Mascot skin
Body mid blue		#4FA0E8	Mascot mid-tone
Body shadow blue		#1B4FBF	Mascot shadows, outline
Coat dark blue		#3D7EFF	Mascot work coat
Coat highlight		#5C9CFF	Coat highlights
Helmet white		#F2F2F7	Hard hat (shadow #C0C0C8)
Skin mouth pink		#E5556B	Tongue
Logo deep blue		#0B3A7E	Helmet lettering

Accessibility

Pair	Contrast	Verdict
Accent #007AFF on #FFFFFF	4.51:1	AA for large text and UI
Label #1C1C1E on #FFFFFF	18.9:1	AAA
Secondary label #6C6C70 on #FFFFFF	4.7:1	AA
Tertiary label #AEAEB2 on #FFFFFF	2.7:1	Non-essential UI only

Tertiary label falls below AA. Restrict it to placeholders and disabled states.