tokens

Summary

The design set's palette, and where it agrees and disagrees with the Expo app.

Canonical values

Key	Value	Last changed
TOKEN.BRAND	indigo, --brand-50/100/200/400/500/700/900	2026-09-23
TOKEN.ACCENT	saffron, --accent-50…700 plus --accent-ink #4a2c02	2026-09-23
TOKEN.RESERVED	--pos green, --neg rose, --settled neutral	2026-09-23
TOKEN.SPLASH	#3a37a8 light, #211f5c dark — fixed in app.config.ts	2026-09-23
TOKEN.AVATAR	eight hues, the order src/lib/avatar-color.ts hashes into	2026-09-23

The one deliberate departure from the app. src/global.css keys the second brand colour saffron (--color-saffron-*); this set keys it accent. The seven values are identical — only the name differs — and the estate rule is that colours are named by ROLE, never by hue, so that a repalette is a one-file change rather than a rename across every screen. Renaming it in the app is a follow-up in the app's own tree, not a fix to this set.

Everything else matches src/global.css value for value, including the dark block, which mirrors its @variant dark 1:1. The category keys are the app's own spelling (--cat-foodbg, not --cat-food-bg), so bg-cat-foodbg means the same thing in both trees.

--splash does not follow the theme remap. The OS paints it before React runs, so it is whatever app.config.ts declares — and both of its values are LIGHT brand values, which is why the dark scope carries its own literal rather than reusing --brand-900.

Related

• reserved-money-direction
• categories
• 2026-09-23-design-set-migrated-to-the-estate-standard

Sources

• src/global.css
• src/theme/tokens.ts
• .context/designs/mobile/shared.css