32 severity primitives
Storybook source of truth
Nuxt 4 / Tailwind v4
The Problem
Alpamayo was managing three highly technical and complex products (PREKIT, Sanding Performance, and OCU) that had been built at different times by different developers. Consequently, they shared no common design identity, UI component library, or branding, leading to a disjointed developer experience and visual fragmentation. Adding new features meant redesigning standard components from scratch, and changing visual theme details required manual, multi-file code updates across separate repositories.
Constraints
- [01]Must support three distinct product themes: PREKIT (industrial edge), Sanding Performance (modern utility), and OCU (biopharma spectroscopy)
- [02]Storybook must serve as the single source of truth for both developers and designers
- [03]Must be lightweight and performant under heavy SVG/Canvas charting loads in web dashboards
- [04]Seamless integration with PrimeVue, Tailwind CSS, Nuxt 4, Vue 3, and CSS Variables
Our Approach
We established a unified visual language and component library built on Vue 3, TypeScript, PrimeVue, and Tailwind CSS. We designed 32 Alp* severity-driven primitives and a cross-product design token system managed via CSS Variables for flexible color and typography styling. Storybook was implemented as the single source of truth for component states. To make design tokens fully actionable, we built a live customizer that allowed designers to tune tokens in real time and export a structured, AI-ready DESIGN.md file.
Establishing a single source of truth using severity-driven primitives and design tokens ensures visual cohesion across fragmented codebases and enables AI-assisted frontend generation.
Gallery
Outcome
- Storybook established as the single source of truth, aligning engineering and design across three products
- Visual consistency achieved across PREKIT, Sanding Performance, and OCU platforms
- Reduced frontend feature development time by over 40% through component reuse
- Live token customizer shipped with AI-ready DESIGN.md export support
Why this matters
A design system is not just about aesthetics; it is about engineering efficiency and product consistency. By unifying PREKIT, Sanding Performance, and OCU under a single visual grammar, we transformed three fragmented interfaces into a cohesive product suite that projects high-quality Swiss engineering. The automated DESIGN.md export bridges the gap between human designers and agentic coding workflows, paving the way for future AI development.