B2B • Design system

Building an Enterprise Design System for Design-to-Code

Nova design system file showing colour primitives and semantic colour tokens, over a blurred sunset sea

Role: Founding Product Designer
Timeline: 1 month
Team: Arun Antony (Co-founder & COO)Shine Xavier (Co-founder & CEO)Sivakumar OK (Architect & Engineering head)Jacob Nelson (Engineer)

Overview

A growing platform needed a shared visual language

As PrimeThoughts, the company behind Prime Compass, expanded its enterprise platform, inconsistent UI patterns and disconnected design-to-code workflows made it harder to maintain a cohesive product experience.

The challenge

Inconsistent patterns across product modules.
Repeated design and development effort.
Keep semantic meaning consistent across complex states and data visualizations.
Design decisions that were difficult to translate into code.

Key insight

The system needed to connect design decisions with implementation, giving designers and AI-assisted coding workflows a consistent foundation to build from.

Solution

Creating a three-tier token architecture

I structured the design system around primitive, semantic, and component-level tokens, creating a consistent foundation for reusable UI patterns and implementation.

Figma variables panel for Nova: primitive, semantic and component collections, open on the grey colour scale

Making the system usable in AI-assisted workflows

I structured the design system into modular Markdown files, separating components, design tokens, rules, screens, and references. Files like product.md and data.md provided additional context, giving Cursor/Claude a structured source of truth to reference when generating and modifying UI directly in code.

Code editor with the design system as Markdown files, open on the AI insight card's component spec

Connecting design decisions to implementation

I exported design tokens from Figma, versioned them through GitHub, and structured the outputs for platform use. This helped keep design and engineering aligned across environments.

The Nova design system file in Figma, open on the Buttons page with every size and state

Final designs

Nova components together: a button group, metric cards, a baseline picker, an alert card, a tooltip and a Label your application dialog

A large primary button and a toggle in Nova's burnt orange

Radio buttons and checkboxes in their default, hover, focus and disabled states

A discovery runs table with status badges, Compare and Run Discovery buttons, a Modules metric card and status tags

Outcome

A system designed to scale across products and workflows

The design system established a shared foundation for product interfaces, reusable components, and design-to-code workflows.

More consistent interfaces
Shared foundations and semantic rules reduced one-off styling decisions.
Cross-platform readiness
Token outputs were organized to support platform-specific implementation.
AI-ready design context
Structured documentation gave AI agents a clearer reference for applying design decisions in code.

Reflection

A design system must work beyond Figma

A design system creates value when its decisions carry through to implementation. Connecting tokens, components, and coding workflows was essential to making the system useful beyond the design team.