INNIT: The Design-to-Code Acceleration Engine
The Problem
Starting every B2B client project from scratch was creating massive technical debt and burning valuable sprint cycles. Frontend teams lost weeks configuring basic foundations, and updating brand themes meant manually chasing hardcoded values across multiple repositories. We needed an internal design-to-code engine: a deployable chassis where an engineer could import a module and have an accessible, fully themed enterprise shell ready on day one.
We replaced hardcoded values with a semantic token architecture. This abstraction layer maps primitive hex codes to functional decisions (e.g., primary-action-bg), allowing the entire platform to be rebranded or scaled instantly without touching the codebase.
The Solution
I engineered INNIT as an internal design-to-code acceleration engine built on top of Angular Material primitives. Instead of handing off static visual specs, I architected a semantic token pipeline that synchronizes Figma variables directly with production code. To validate the system under real-world conditions, we used INNIT to build Elemental Aura (PassiveScan) - a cybersecurity health platform combining CVE vulnerability checks, PageSpeed metrics, and open port diagnostics. By leveraging INNIT's pre-built shells, the team skipped foundational configuration entirely and shipped weeks ahead of schedule.
The Process
Semantic Token Architecture
Hardcoded hex codes were replaced with a multi-tiered semantic token structure. Tokens map functional roles (e.g., surface-elevated, action-primary-active) rather than visual values, enabling complete white-label re-theming without touching component logic.
Automated Figma-to-Code Pipeline
Real-World Validation (PassiveScan)
Stress-testing the architecture on an intensive data-density tool (CVE lookups, port tables, health badges) proved that atomic component composition remained responsive under heavy real-time data.
INNIT utilised Storybook as the single source of truth for the design system, eliminating documentation drift between Figma and production code.
Psychology Insights & Behavioral Heuristics
Core interaction models were grounded in proven psychological principles to reduce cognitive load and keep complex workflows intuitive for first-time users.
Law of Prägnanz
The simplest possible interpretation is always preferred
Service Architecture & Interactive Logic Maps
System journeys mapping decision points, entitlement logic, and state transitions across the platform.
Module Spin-Up: Tenant Theme Configuration
A new client configures and publishes a whitelabelled INNIT instance.
Things to Consider
Happy path
Pre-validation at build time catches contrast failures before QA. IBM Carbon saw 7× adoption growth within 10 months of launching automated token validation (IBM, 2021).
Sad Path
Post-launch remediation of accessibility violations costs 10× more than pre-launch detection (IBM Research, 2022).
Component Adoption: Designer → Engineer Handoff
How a product feature is designed and consumed through the design system.
Things to Consider
Happy path
Storybook as single source of truth reduced design-to-dev handoff errors by 60% in comparable enterprise systems (Sparkbox, 2023).
Sad Path
Atlassian attributed 60% of UI regressions to missing component documentation, not code bugs.
User Archetypes & Friction Points
Key personas synthesized from stakeholder interviews, support escalations, and direct workflow observations.
The Product Engineer
"The design system should make accessible, consistent components the path of least resistance. I should not have to think about state management for a button."
Pain Points
- •Documentation patchy and variable across each designer's output
- •Missing accessibility attributes: aria roles and labels absent from many components
- •No specs or documentation for interactions, states, or motion. All guessed from static designs
Goals
- ✓Storybook as single source of truth with live component stories per state
- ✓Auto-generated accessibility coverage reports on each component
- ✓Easing and duration tokens surfaced in Figma and consumed directly in code
The Mid-level Designer
"I should not need to ask a senior which variant to use in an edge case. That decision should be documented where I work, in Figma and Storybook."
Pain Points
- •Ambiguous naming between Figma components and code counterparts
- •Edge-case states (error, loading, empty) not designed or documented
- •Contribution process unclear. No guidance on when to build vs when to request
Goals
- ✓Decision trees per component covering edge cases and state variants
- ✓Co-located usage guidelines in Storybook stories, not a separate doc site
- ✓Lightweight contribution pathway with tiered governance for pattern-level work
Outcomes & Reflection
Shipping INNIT created an immediate acceleration across our delivery cadence, proving that automated design token pipelines eliminate documentation drift between Figma and production code.
- ✓Accelerated Delivery: Delivered the PassiveScan MVP four weeks ahead of schedule through atomic component reuse.
- ✓Lean Engineering: Engineered the complete V1 design system and custom Figma export plugin in two weeks with two developers.
- ✓Instant Multi-Brand Theming: Enabled full brand re-skins in minutes by simply replacing a single design token file.
- ✓Design-to-Code Parity: Utilised Storybook as the single source of truth, ensuring 100% fidelity between design specs and production code.