The color foundation behind the Horse Keeper iOS app: a three-tier token library built in Figma Variables and synced to code, so a single source of truth drives both design and the shipped product.
Flat hex values don't scale. The moment a brand color shifts or a theme is added, every screen has to be hunted down by hand. Horse Keeper's tokens are structured so meaning lives in one place and everything downstream inherits it.
The literal hex palette: teal, brown, neutral, ink, and support hues. Named by ramp position, never used directly in UI.
Roles like brand/primary or text/muted that alias to primitives. This is the layer designers actually reach for.
Button, card, and navigation tokens that reference semantics, so components stay consistent and never touch raw hex.
Each semantic token is an alias. Change a primitive once and every role pointing at it updates across design and code.
teal/600teal/700teal/50brown/500brown/accentneutral/50neutral/surfaceneutral/0ink/900ink/600ink/400neutral/0neutral/borderteal/600support/orangesupport/blueThe outermost layer references semantics, never raw hex, so buttons, cards, and navigation stay in lockstep with the system.
brand/primarytext/inversebrand/primaryPressedbackground/cardtext/primaryborder/subtlebackground/cardborder/subtlebackground/appbrand/primarytext/mutedWhy it matters: because every component token traces back through a semantic role to a single primitive, rebranding or theming Horse Keeper is a handful of edits at the primitive tier, not a screen-by-screen rework. The library is authored in Figma Variables and exported to code, keeping design and the shipped iOS app on one source of truth.