Latitude Design System
The token-driven source of truth powering two brands across Web and iOS, in light and dark.
Role
Senior Product Designer
Timeline
2022–Present
Platform
Web · iOS · light + dark
Team
Design Systems Team
The Problem
Anchorage Digital builds regulated digital-asset custody software, where a misread balance or an ambiguous confirmation isn't a polish issue. It's a trust issue. The catch: one product surface has to serve two brands (Anchorage and Porto), two platforms (Web and iOS), and both light and dark modes, without the UI fragmenting as teams ship in parallel.
The Solution
Latitude is the single source of truth that holds all of that together. Design decisions live as versioned tokens (authored in the W3C DTCG format and consumed from @latitude/tokens), so one component renders correctly for either brand and mode by swapping a layer, never by forking. The rule across the org is simple: default to Latitude, custom UI is a last resort.
Key Tokens
2
brands (Anchorage · Porto)
2
platforms (Web · iOS)
3
token tiers (sys · ref · comp)
A layered token architecture
Tokens resolve through five source layers (Base, Effects, Brand, Mode, then Platform) and three tiers: global primitives (sys), semantic aliases (ref), and component-bound values (comp). Product code references ref and comp tokens, never raw primitives, which keeps every component brand- and mode-agnostic by construction. Eight color families (anchor, ocean, iron, starfish, lobster, sunset, algae, seashell) feed the whole system.
Two brands, one codebase
Anchorage maps its primary to blue, Porto maps it to lilac, but both resolve through the same alias tokens, so a button is written once and themes itself. Nothing in application code assumes a brand. That discipline is what lets two products share a system while still feeling distinctly themselves.
Design-to-code, automated
A single build emits everything downstream needs: a Tailwind preset and per-brand, per-mode CSS variables for Web, Swift tokens for iOS, and an SVG icon sprite. Icons sync nightly from Figma via a GitHub Action, and merges to master auto-publish the package to a private registry. I replaced Tokens Studio with an in-house token editor and a Figma sync plugin so the source of truth stays in the repo, not a third-party tool.
Principles over pixels
The system encodes intent, not just style: security-first (communicate risk before critical decisions), user-in-control, transparency, and a warm, human voice. Accessibility is non-negotiable: semantic HTML, visible focus, and never color alone to carry meaning. Teams inherit safe, accessible defaults instead of bolting them on.
What I did
- Architected the five-layer token pipeline (Base → Effects → Brand → Mode → Platform) in W3C DTCG format
- Defined the sys → ref → comp tiering that keeps product code brand- and mode-agnostic
- Built an in-house token editor and a Figma sync plugin, replacing Tokens Studio
- Automated multi-target builds: Tailwind preset, per-brand CSS variables, iOS Swift tokens, and an icon sprite
How it works
One set of tokens is the contract. They can be created and controlled in Figma, in code, or with AI. The structure is platform-agnostic, so the same source drives Figma, Web and iOS in lockstep.
Create & control
Figma
Author tokens visually
Code
Edit the token JSON
AI
Generate & adjust
Single source of truth
Latitude Tokens
W3C DTCG · platform-agnostic
Drives every surface
Figma components
Variables via sync plugin
Web
Tailwind preset + --lds CSS vars
iOS
Swift tokens
However tokens are authored (design tool, code, or AI), they resolve to one platform-agnostic source that designers and engineers share. No hand-off drift.
From primitive to product · one token, three tiers
Global primitive
color.sys.anchor.blue-50
Raw value
Semantic alias
color.ref.primary
Anchorage → blue
Porto → lilac
Brand-agnostic decision
Component-bound
color.comp.action.primary
What components consume
Spaceship Design System
