Nova Design: Scaling a design system for a growing enterprise platform
Nova design system aligned branding, semantic tokens, and reusable components into a unified visual grammar used across 6 product modules for Primecompass.
Role
Senior UX consultant
Timeline
3 weeks (Integrating AI workflow)
Ownership
End-to-end visual system strategy and rollout
Team
Arun Antony ( Co founder, COO)
Shine Xavier ( Co founder, Chief Architect)
Jacob Nelson ( Engineer)
Context
PrimeCompass is an AI platform that creates behavioral digital twins of products to detect drift between expected and actual system behavior. As the platform expanded across analytics, workflows, and decision surfaces, interface consistency and semantic clarity became critical.
Nova established a shared visual language aligning brand meaning with interaction behavior across modules.
Why PrimeCompass
needed Nova
PrimeCompass combined analytics dashboards, workflow configuration interfaces, and decision-support interfaces across multiple modules. Without a shared token structure and semantic layer:
Visual inconsistencies increased across features
Interactions became inconsistent
New modules required repeated UI decisions
Brand meaning was not reflected in system behavior
Nova ensured system intelligence remained readable at scale.
Goal
Design a scalable visual system that:
Aligned brand meaning with behavioral intelligence concepts
Supported multi-module product growth
Reduced UI inconsistencies across surfaces
Enabled faster design and engineering collaboration
Established a token-driven architecture for cross-platform implementation
Naming strategy
Nova represents a sudden increase in brightness before returning to baseline, mirroring PrimeCompass’s role in detecting behavioral drift and helping teams recalibrate system expectations.
The design language reflects:
Change
Signals
Adaptation
Confidence
Foundations
To build something scalable, we had to start from the ground up. The lack of a structured foundation made every revamp chaotic and inconsistent.
Color primitives and Semantics
Color primitives establish a consistent visual foundation across the system, while semantic tokens map those values to meaningful UI behaviors. This separation improves scalability, accessibility, and makes theme-wide updates significantly easier to maintain.
Typograpghy
A structured typography system creates consistent hierarchy, readability, and rhythm across interfaces. Using tokenized type styles reduces inconsistency and helps teams design and develop with shared standards.
Spacing, Radius and Grid
Defined spacing, radius, and grid tokens create predictable layouts and reduce visual inconsistency across products. Standardized values also speed up decision-making by limiting unnecessary variations during design and development.
Icons
The icon system is built on a unified grid and stroke structure to ensure clarity, consistency, and scalability across the interface. Standardized construction also enables easier customization and seamless integration within components.
Shadows
Shadow tokens provide a consistent elevation system that helps communicate hierarchy, depth, and interaction states across the product. Centralizing these values also simplifies maintenance and ensures visual consistency at scale.
Token architecture
Nova introduced a layered token structure supporting scalable reuse across modules:
168 primitive tokens
107 semantic tokens
56 component tokens
13 responsive tokens
This allowed designers and engineers to work with semantic roles instead of raw visual values.
Three Tier System
Nova uses a three-tier token architecture designed to support scalable updates across brand identity, product interfaces, and reusable components without introducing cognitive overload.
The system separates visual decisions into:
Primitives
Semantics
Components
This structure allows teams to update the system at the appropriate layer without affecting unrelated interaction surfaces.
Component foundations
Governance and rollout
Design tokens were authored in Figma, exported as JSON, versioned via GitHub, and structured for platform outputs across Tailwind, Swift, and XML; keeping design and implementation aligned across environments.
Impact
100%
UI inconsistencies reduced
30%
Engg. UI rewrite effort reduced
3x
Accessibility improved
42%
Visual regression bugs reduced
Reflection
Design systems often focus on visual consistency alone. Nova extended beyond styling to encode behavioral meaning into the interface.
By aligning brand language with drift detection, confidence signaling, and AI-generated insights, Nova transformed PrimeCompass from a collection of modules into a coherent decision-support platform.
This reinforced a recurring pattern in my work: designing systems that make complex platform intelligence interpretable through structured visual semantics.
Copyright © 2026
Take me to the top