Northbound as Code

A Token-Driven Design System, Shipped as Code

Project Overview

The same token architecture from the Figma case study, taken through Claude Code and Figma MCP into a coded component library, three assembled screens, and a Storybook deployed on Chromatic. AI design tools are only as good as the system they consume, this is the proof.

View the live Storybook → https://www.chromatic.com/library?appId=6a470152b0f836d9404953f1

Client

Concept Product

Services

Code Ready Design System

Role

Design Engineer

Date

August 10, 2026

View GitHub Repo

The Challenge

A design system that only lives in Figma makes a promise it can't fully back: that the naming grammar holds when a real build tool has to read it and generate something. AI coding tools make that promise testable, and most systems fail the test, not because the components are wrong but because the token layer underneath was never built to be machine-legible. Northbound's Figma foundation, 156 semantic tokens, two themes, a 4-level component structure, was built to prove the naming grammar could scale without a rename. CS2 is that same claim pushed one boundary further: can the system be read by Claude Code through Figma MCP and rebuilt as production code, token for token, without the architecture breaking on contact with a real build tool.

The Approach

The foundation carries over unchanged. Primitive and semantic tokens, authored in Token Studio, export as CSS instead of flattened Figma styles, so semantics.css keeps its alias chain intact: a semantic token like --color-background-brand-bold-default resolves through var(--color-gold-500), not a baked hex value. That var() chain is the traceability artifact CS1 argued for and CS2 ships. Tailwind v4's @theme inline reads those CSS variables directly, so the token layer is the single source both Figma and the codebase point back to. Dark mode is a .dark class swap over the same variable names, the identical mechanism CS1 proved conceptually, now running in a browser. Claude Code, connected through Figma MCP, reads each component directly off the Figma file and generates its coded version against this token layer, shadcn/ui as the structural base, restyled through the same naming grammar rather than a fresh set of one-off styles.

Key Decisions & Trade-offs

The build stops at Storybook, not a deployed app. A full app deploy would add surface area, routing, state, a backend shape, without adding proof: the claim CS2 makes is that the token and component system survives the trip from design tool to code, and Storybook is the more honest, more inspectable surface for that specific claim. The other trade-off carried over from CS1: the full 156-token palette shipped to code as-is rather than trimmed to what three screens use, so the coded system is exercised at the same product scale the Figma system was designed at, not a demo-sized subset. Accessibility was treated the same way, built in rather than checked after: addon-a11y is set to error mode and surfaces WCAG violations directly in Storybook for every story, not an automated CI gate today, but a check that's impossible to miss while browsing the components.

The Solution

Three screens ship as working React, assembled from the coded component library and Vite: Portfolio Dashboard, Asset Detail, and Deposit & FX Conversion. Underneath sits the same 25-component library from CS1, rebuilt as code across four layers, each layer depending only on the layer below it: 9 Foundation components (Icon, Avatar, Button, Input, Divider, Chip, Badge, Icon Tile, Sparkline), 7 Composite (Chip Group, Amount Cluster, Data Row, Asset Header, Section Header, Card, Holding Row), 5 Feature (Movement Breakdown, Price Chart, Position Summary, Personal Holdings, Portfolio Balance), and 4 Layout (AppBar, BalanceSection, HoldingsSection, ScreenScaffold). Every component has a Storybook story covering its variants and states, plus a dedicated Design Tokens documentation page, and the whole library auto-publishes to Chromatic on every push to main, so the Storybook link is always the current state of the repo, not a snapshot. The theme toggle runs on the same semantic layer CS1 described: switching light to dark is a class swap, not a re-theme, and it's the single click that demonstrates the entire architecture live.

The Impact

156 semantic tokens shipped to code unchanged from the Figma layer: 52 background, 32 text, 44 border, 28 icon

25 components rebuilt in React across the same four levels, each with a Storybook story and full variant/state coverage
3 screens assembled in Vite from the coded library
Light and dark themes running from one semantic layer, a class swap in the browser instead of a design re-pass
Storybook deployed on Chromatic, auto-published on every push to main, live and inspectable end to end
WCAG AA accessibility checked via addon-a11y in error mode, surfacing violations directly in Storybook for every story, not a manual pass
Stack: Figma, Token Studio, Claude Code, Cursor, React 19, Vite, Tailwind CSS v4, shadcn/ui, Storybook, Chromatic, Vitest, Playwright

What’s Next

This is still a concept product: no real money moves, all data is sample data, nothing here is financial advice. What CS1 argued in Figma, CS2 verifies in a real build tool: the naming grammar carried over from design tokens to production CSS to a deployed component library without a single rename, and Claude Code could read the Figma file and generate matching code because the system underneath was built to be legible, not just look organized. That's the actual product of this build, a token architecture that survives contact with an AI coding pipeline, with Northbound as the proof it was tested on, not the point of the exercise.

Northbound as Code

Project Overview

The Challenge

The Approach

Key Decisions & Trade-offs

The Solution

The Impact

What’s Next

Work with:

Work with:

Work with: