Northbound

A 156-Token Naming Grammar for a Cross-Border Investing App

Project Overview

A token-driven, Figma-only design system foundation for a concept investing app serving non-US investors accessing US markets, built to prove that a naming grammar can scale past three screens without a single renamed token.

Client

Concept Product

Services

Design Systems

Role

Design System Specialist

Date

July 3, 2026

View Project in Figma

The Challenge

Most Figma-only design systems are a UI kit with no system underneath: named color styles with no traceable link back to a raw value, no way to prove a fill isn’t just an eyeballed match. That gap disappears on one screen and becomes obvious the moment a product needs two themes, six feedback purposes, and a currency conversion screen where the same red has to mean two different things in two different places. Northbound, a concept investing app for non-US investors moving into US stocks and ETFs, was built to put exactly that pressure on a token system: currency duality and FX transparency don’t forgive decoration dressed up as architecture.

The Approach

The foundation is a set of raw color primitives, gray, gold, blue, red, orange, green, with gold kept as its own hue family so brand and warning never blur together. A semantic layer of 156 tokens sits on top, naming intent instead of color through one fixed grammar: category, purpose, emphasis, state. Each token points back to a primitive by alias, not a flattened value, so the grammar is inspectable, not decorative. That same layer drives both themes: light and dark share identical token names with different values underneath, so a theme switch is a value swap, not a redesign. Components are organized into four levels, Foundation, Composite, Feature, Layout, each built only from the level below it, which gives the FX work its own named tier instead of a generic components pile.

Key Decisions & Trade-offs

The gold ramp skips steps 200 to 400, the range a dark-theme hover state would pull from. It’s left unfilled on purpose: nothing breaks today, and adding speculative steps for a state that doesn’t exist yet is just more surface to maintain. The bigger trade-off is scale over scope: the semantic layer stayed at its full 156 tokens rather than trimming to what three screens actually use. That’s a bet that a system built at product scale, even partially exercised, proves scalability better than one trimmed to fit the demo.

The Solution

The file holds three screens built entirely from the token system: Portfolio Dashboard, Asset Detail, and Deposit and FX Conversion, the last one carrying the app’s real differentiator, a full breakdown of amount sent, exchange rate, fee, and amount received in both currencies. Underneath sits a 25-component library across four levels: 9 Foundation (Button, Input, Icon, Avatar, Divider, Chip, Badge, Icon Tile, Sparkline), 7 Composite (Card, Data Row, Chip Group, Amount Cluster, Asset Header, Section Header, Holding Row), 5 Feature (Movement Breakdown, Price Chart, Position Summary, Personal Holdings, Portfolio Balance), and 4 Layout (AppBar, BalanceSection, HoldingsSection, ScreenScaffold). Every component exists in both light and dark, driven by the same tokens, so the two themes are the same file read against a different value set.

The Impact

156 semantic tokens across four categories: 52 background, 32 text, 44 border, 28 icon

Light and dark token sets are name-identical, so no component needs to know which theme it’s in
25 components across four levels: 9 Foundation, 7 Composite, 5 Feature, 4 Layout
3 screens built entirely from the token and component system
Brand anchor, gold.500 on gray.900, checks at 13:1 contrast, AAA

What’s Next

This is a concept product: no real money moves, all data is sample data, every number exists to stress-test the system, not to advise anyone. What’s documented here is the token architecture and component library, verified in Figma, stopping deliberately at that boundary. The naming grammar was built to carry over without renaming a token, and proving that, tokens compiled, components rebuilt, an AI pipeline generating code straight from this file, is Northbound’s second case study: Code-Ready Design System and GitHub Repo. Same system, one boundary further.

Northbound

Project Overview

The Challenge

The Approach

Key Decisions & Trade-offs

The Solution

The Impact

What’s Next

Work with:

Work with:

Work with: