Designing the visual language for behavioral change intelligence in PrimeCompass
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.
01 Colors
02 Typography
03 Spacing
04 Icons
05 Shadows
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
60%
UI inconsistencies reduced
30%
Engg. UI rewrite effort reduced
3x
Accessibility improved
1.75x
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.
Let's get to work
vigneshmvk13@gmail.com
Copyright © 2026
Take me to the top