CWP Design System
Innovapptive · Design systems
One design language. From Figma to working code.
A shared system of foundations, components and guidance that designers, developers and AI tools can use.
- MY ROLE
- Design system ownership, foundations & AI-assisted implementation
- PERIOD
- 2024–present
- TEAM
- Design leadership, stakeholders & engineering
- STATUS
- Live, used by engineering and growing through review
A shared Figma reference, reusable web components, Storybook documentation and an MCP connection carry the same decisions into implementation.
The challenge
Which version should the team use?
Designers had different Figma libraries. Developers had different implementations of the same controls. Even a primary button could differ in size, color and behavior.
I drove the design and implementation of a shared system with design leadership guidance and stakeholder reviews. The task was to connect design decisions to the components that actually appear in the product.
01 · Foundations
Document the purpose behind the appearance.
I organized typography, colors and component guidance into a common Figma library. Each pattern needed usage rules and states, not just a finished appearance.
Tokens separate raw palette values from semantic roles such as surface, text and action. Component tokens then express intent, hierarchy, state and slot. That separation lets the same roles map to different appearances without hand-coding each screen.
02 · Implementation
Make the design reusable in the product.
A Figma library alone could not resolve differences in code. I directed and reviewed implementation of framework-agnostic Stencil web components with generated Angular and React adapters. Versioned packages let both stacks use the same controls.
Storybook provides working examples, properties and behavior. Readiness remains specific to each component; a shared catalog is not a promise that every component is production-ready.
03 · AI consumption
Let AI look up the real component.
An AI-generated screen could look close to the system while quietly inventing its own controls. I built an MCP connection so AI tools can query actual components, tokens, usage guidance and readiness.
The catalog exposes details such as properties, events and slots. This grounds implementation in the real system. I still direct design choices and review the output; a connector does not replace design judgment.
Look up
Retrieve the actual component and its usage guidance.
Implement
Reuse the documented component instead of creating a near-match.
Review
Check the resulting behavior, visual quality and keyboard interaction.
Outcome & reflection
A shared reference that keeps growing.
Early exploration began in October 2024, with sustained ownership from August 2025. Storybook launched in March 2026, followed by production hosting from May 2026. The system is live and used by engineering.
Designers have common foundations; developers have reusable components and adapters; AI tools can query the same system. Documentation, review and accurate readiness information remain part of the design work.
My learning: a design system succeeds through the connection between its parts. A polished library, a component package or an AI connector is less useful when it drifts away from the other two.