Northstar Design System

Project Overview

As Cardinal Financial embraced AI across the organization, our design system needed to evolve beyond a static and isolated component library. Existing design-to-development workflows relied on sequential handoffs between product design and engineering, making it difficult to collaborate in real time or move at the speed required by an AI-first organization.

Northstar was created to address that challenge. Rather than focusing solely on reusable UI components, we reimagined the design system as a unified platform that connects design, engineering, documentation, and AI-assisted development through a shared workflow. The result is a design system that continues to evolve alongside the products it supports while enabling teams to build faster, collaborate earlier, and work from a common source of truth.

Impact

Northstar is transforming how product teams design and build experiences at Cardinal Financial.

By connecting GitHub, Cursor, Claude Code, Figma, Storybook, and MCP-enabled workflows, Northstar has reduced friction between design and engineering while accelerating component creation and improving design-to-code consistency. Designers now contribute closer to implementation, engineers review components earlier through shared repositories and pull requests, and both disciplines collaborate from the same system of components, tokens, and documentation.

Northstar is actively supporting product redesigns today while establishing a scalable foundation for AI-native product development across Cardinal Financial’s borrower ecosystem, marketing experiences, and future digital products.

Six screens from the Northstar workflow, arranged in a grid. Cursor with Claude Code working through a table component beside its Storybook documentation; the Table component running in Storybook with its controls panel; the ui-packages repository on GitHub; a pull request summarizing component changes with its reviewers and checks; an Alert changeset under visual review in Chromatic, light and dark side by side; and the same table documented in the Northstar Design Resources file in Figma. — The connected workflow in practice. Components built and refined in Cursor and Claude Code, props and behavior tested in Storybook, reviewed as a pull request in Github, visual regression testing conducted in Chromatic, and then merged in Github. Figma components synchronized with the merged codebase.

My Role

I co-led the development of Northstar to define the direction of Northstar while collaborating closely with front-end engineers, product leadership, and cross-functional stakeholders. Our primary objective was to introduce AI-assisted workflows that strengthened collaboration between design and engineering, helping establish a more connected product development process.

My key responsibilities included:

Design system strategy and roadmap
AI-assisted workflow research and implementation
GitHub, Cursor, Claude Code, Figma, Storybook, and MCP integration
Design-to-development workflow optimization
Component architecture and Figma component development
Design token strategy and implementation
Documentation and governance
Accessibility review
Engineering collaboration and QA

The Challenge

As Cardinal Financial evolved into an AI-first organization, the traditional design-to-development workflow was becoming a bottleneck. While the existing design system provided a strong foundation, the way designers and engineers collaborated had changed very little. Design happened in Figma, documentation lived separately, and implementation began only after a formal handoff to engineering.

At the same time, business priorities, product requirements, and industry expectations were changing faster than ever. Teams needed to iterate more quickly, respond to changing priorities, and build new experiences without sacrificing consistency or quality. A largely sequential workflow made real-time collaboration difficult and slowed the feedback loop between design and engineering.

The challenge was no longer just to improve the design system. It was to create a unified, AI-enabled workflow where design, engineering, documentation, and implementation could evolve together while maintaining a shared source of truth.

The design-to-development workflow before Northstar, drawn as a single left-to-right sequence: 01 Design in Figma, with 02 Document branching off to a dashed box for Zeroheight, then a solid black 03 Handoff wall, then 04 Build, 05 Review and 06 Ship. One short loop returns from Review to Build; the only other route back runs the full width of the diagram from Ship all the way to Design. — The workflow before Northstar. One direction, one wall, and a documentation track maintained by hand beside it.

Research & Discovery

Rather than approaching Northstar as another redesign of a component library, we began by researching how modern design systems were evolving alongside AI-assisted development. Our focus shifted from simply creating reusable components to designing a workflow that reduced friction between design and engineering.

Six boards from the Design System Architect FigJam file, arranged in a grid. Two information-architecture trees mapping the foundational categories and the component categories for form, input and data display; a component page template beside a component documentation template; a zoomed view of that documentation template worked through as a button example; a board of working notes covering current problems, future problems and a proposal for bringing Claude Code into the workflow; and a written comparison arguing that Figma is a thinking tool while Cursor is a building tool. — Discovery in FigJam. Mapping the system's architecture, drafting documentation templates for all components, and working out where AI belongs in the process.

As part of that effort, I explored AI-assisted workflows that connected Github, Cursor, Claude Code, Figma, Storybook, and MCP integrations into a more cohesive pipeline. Early experiments quickly exposed an architectural challenge. AI-generated components produced inconsistent styling, hardcoded values, and conflicting token usage, revealing that the issue wasn’t the AI itself, it was the ambiguity within our token architecture.

That discovery fundamentally influenced Northstar’s architecture and reinforced an important principle: successful AI workflows depend on strong design system foundations.

Cursor's agent panel beside a Figma file holding a single Tabs documentation page with an interactive demo. — First attempt, Figma MCP driven from the Cursor agent. In Figma it produced a documentation page rather than a component, nothing mirrored the library, and every value was hardcoded.

A Figma canvas of Tabs variants, horizontal and vertical, default and pills, with hover states, and the layer tree behind them. — Second attempt, same route as the first attempt. Much closer to the Northstar repo library component, but the values were still hardcoded rather than bound to variables.

A Figma file built by Claude Code, holding Input, Combobox and Card component sets with their variant matrices. — Switching to Claude Code in the terminal. Multiple components were accurate to the Northstar repo library out of the box, with auto layout already applied.

A close view of the Input and Field component set, its variant properties and its auto layout panel. — Better again, and the same gap remained. No variables bound, values still hardcoded. That gap is what pointed at the token architecture.

Solution & Design

By simplifying the token hierarchy and adopting a clearer semantic token strategy, we created a workflow that became significantly more predictable for both designers and AI-assisted development.

Building Northstar, drawn as two zones. "Set up once" holds 01 Assemble, shadcn as the component base with Tailwind on top and Figma variables added as the tokens, then 02 Unify, where three token sets converge into one and object tokens are removed. "The loop: how it runs now" holds 03 Build, components built in Cursor and Claude Code from Figma screenshots, links and docs, then fine-tuned in code; 04 Bridge, a two-way MCP connection at 1:1 parity with Design Resources, drawn where the old handoff wall stood; and 05 Circulate, a GitHub pull request with Storybook and Chromatic review before merging to main. A short loop returns from Build to itself, and a long one returns from Circulate for new components and iterations. Underneath, one token stack: Tailwind consumption, semantic --s-* tokens, primitive --p-* tokens, and a struck-through object --obj-* layer marked removed. — A unified design system workflow connecting tokens, code, Figma, and AI-assisted development through a shared, iterative foundation.

Building on this improved foundation, we integrated Figma, GitHub, Storybook, Cursor, Claude Code, and MCP-enabled workflows, transforming the design-to-development process from a largely sequential handoff structure to a more collaborative and iterative model. Designers can contribute closer to implementation, engineers can review components earlier through shared repositories and pull requests, and both teams can work from a common system of components, tokens, and documentation.

Building with Northstar, drawn as a product lifecycle that returns to its own start. Six steps run left to right: 01 Discover, research and synthesis through to problem prioritization; 02 Ideate, traditional and AI-assisted exploration with rapid prototyping in Claude Design; 03 Build, composing Northstar components into products in Cursor and Figma, then fine-tuning; then an outlined Handoff gate crossed by arrows in both directions; 04 Review, where developers validate the code and flag issues that get fixed in Cursor and handed back until sign-off; 05 Ship, local testing, QA, fixes and MVP launch; and 06 Learn, where analytics and research feed the next turn. A return path runs the full width from Learn back to Discover, labeled "each turn starts from what the last one learned". A single bar underneath reads "Northstar, integrated into the product repo", noting that 03 starts from a working base rather than from nothing. — Northstar extends that foundation into the product lifecycle, creating a continuous feedback loop across design, development, review, launch, and iteration, where the handoff becomes a gate that can be crossed in both directions.

Reflection

Northstar fundamentally changed how I think about design systems.

The biggest challenge wasn’t designing components, it was redesigning the way people work together. Building an AI-enabled workflow required just as much attention to collaboration, architecture, governance, and communication as it did to interface design.

One of the most valuable lessons was realizing that AI doesn’t replace strong design system thinking, it amplifies it. Well-structured foundations, clear token architecture, and shared standards become even more important when designers, engineers, and AI agents are all contributing within the same ecosystem.

Northstar continues to evolve, but it has already reshaped how our teams collaborate and how I approach design systems. I now see them not simply as UI libraries, but as organizational platforms that enable faster product development, stronger cross-functional partnerships, and a more adaptable future for digital product teams.

Evolving Cardinal Financial’s Design System into “Northstar”

Details