NorthStar Design System
Company
Cardinal Financial
Tools
Figma, Figma Agents, Claude, Cursor, GitHub, Storybook
Role
Owner • Design System Lead
Deliverables
Design System Site
Coded Components
AI-Native Build Process
System Documentation
TL;DR
00 - TL;DR
Building a Design System for the AI Era
Kinetic wasn't designed to scale across Cardinal's growing product ecosystem.
Challenge
Approach
Make AI core to how the system got built, so it could be built as fast as it was designed.
AI Workflow
Rebuilt the design-to-code process around AI, compressing weeks of handoffs into days.
Result
A scalable system supporting Customer, Borrower, and Internal experiences.
01 - The Problem
Kinetic solved for a product, not an ecosystem.
Cardinal didn't need another component library. It needed a design system capable of supporting an expanding ecosystem of products and teams.
Surfaces in the Cardinal ecosystem that Kinetic was ever built for...and even that one was half finished.
CF.com
-
-
3PUX
Covered, Partly
Broker Portal
-
Octane
-
Customer
Customer
Borrower
Internal
Internal
02 - The Opportunity
What if we built for the future, not the present?
Cardinal didn't need another component library. It needed a system that could scale with the products, teams, and experiences ahead. Three different experiences. Different users. Different levels of complexity. One shared foundation.
03 - AI as a Design System Accelerator
AI didn't just help design the system. It helped build it.
Product Management
Think, plan, and define the system.
AI helped me research, structure requirements, write user stories, define acceptance criteria, and think through the system before design began.
Tools:
Product Design
Explore and prototype faster.
AI helped me generate flows, explore interaction patterns, prototype ideas, and iterate on solutions before committing to the system.
Tools:
Documentation
Make the system understandable and usable.
AI helped me structure documentation, define component usage and behavior, and create clearer guidance for designers and developers.
Tools:
Development
Turn design decisions into working code.
AI helped me translate Northstar foundations and components into code, iterate directly in the codebase, and build the system alongside development.
Tools:
1. From design decision straight into code
The stages themselves are familiar. What changed was how I moved between them. Vibe coding meant I could go from a design decision straight into working code, which meant validating and documenting happened alongside the work instead of waiting at the end of it.
04 - The Process
The stages didn't change. The distance between them did.
No separate handoff step. A component didn't need to become a finished spec before someone could build it. I could take a Figma decision and have it running as code in the same sitting.
1a. Figma Component
1c. Build Result
2. Turning Decisions into Documentation
Documentation used to be something I wrote after a component was finished. With AI, I could draft it while I was still designing:
Usage Guidance
Do/Don't examples
Component Behavior
Patterns
Etc.
Documentation stopped being a separate phase that trailed behind the work.
2b. Build Result
1. From design decision straight into code
The stages themselves are familiar. What changed was how I moved between them. Vibe coding meant I could go from a design decision straight into working code, which meant validating and documenting happened alongside the work instead of waiting at the end of it.
04 - The Process
The stages didn't change. The distance between them did.
No separate handoff step. A component didn't need to become a finished spec before someone could build it. I could take a Figma decision and have it running as code in the same sitting.
1a. Figma Component
1c. Build Result
2. Turning Decisions into Documentation
Documentation used to be something I wrote after a component was finished. With AI, I could draft it while I was still designing:
Usage Guidance
Do/Don't examples
Component Behavior
Patterns
Etc.
Documentation stopped being a separate phase that trailed behind the work.
2b. Build Result
05 - Impact
The Payoff
50%
Shorter Design Sprints
2 weeks → 1 week
3
Product Divisions Supported
Customer • Borrower • Internal
100%
Documented at Ship
No Docs Trailing Behind
0
Handoffs to Development
One Owner, Design to Code
SPEED
SCALE
Documentation
Handoff
Northstar supports three distinct product experiences instead of one half-finished product.
SYSTEM
PROCESS
I can research, design, build, validate, and document at a pace the old handoff model couldn't reach.
COLLABORATION
Working directly in code closed the gap between design and development that used to need constant back-and-forth.
06 - What I'd bring to the next team
I didn't just build a design system. I built a faster way to build one.
Lead design-system strategy from audit through rollout.
Systems Strategy
Cross-Discipline Range
Work fluently across product, design, documentation, and code.
AI Fluency
Use AI as a genuine multiplier, not a novelty.
Design to Code
Translate design decisions directly into working components.
Human + AI Ready
Build systems that are usable by both people and AI.