Design System / Ecommerce Platform

CVP Design System

How I designed and implemented a reusable UI system in Figma and code to migrate a large ecommerce platform from legacy UIkit patterns to Tailwind-first, documented components.

cvp.com/designsystem

CVP design system documentation overview

I led the UI system workstream for CVP's platform refresh, building a design system that could ship in production while guiding a full template migration.

The challenge was to improve visual consistency and UX quality across ecommerce, portal, support, and service flows, while reducing future development overhead.

Role

UX/UI + Front-end Development

Scope

Foundations, component system, migration standards, and production implementation.

System Architecture

Designed as two connected layers: design decisions in Figma, production patterns in code.

01

Colors & Tokens

02

Typography

03

Icons & Spacing

04

Core Components

05

Interaction Patterns

06

Documentation

cvp.com/designsystem/typography

Design system docs navigation and typography section

Figma to Code Translation

The system was built to be implementable, not aspirational.

Conventions and aliases map cleanly from design tokens to Tailwind utility output, and documentation lives in production so teams copy patterns instead of reinventing UI per template.

Basecoat-driven interactions and native HTML patterns keep the JS layer lean and maintainable.

/designsystem/colors

/designsystem/buttons

Production component docs and implementation

Implementation Highlights

Production changes that made the design system operational across the platform.

01

Dialog system overhaul

Native dialog patterns with data-driven open/close attributes and a programmatic confirm API for consistent modal UX.

02

Upload component + controller

Reusable file upload UI and JS controller with shared validation and callback behavior.

03

Empty states and loading patterns

Documented empty states and spinner patterns for continuity in first-use and no-results scenarios.

04

Autocomplete and discovery UI

Enhanced autocomplete patterns and reusable templates for faster product discovery flows.

05

UIkit to Lucide/Tailwind migration

Converted icons and legacy UI dependencies to modern, lightweight primitives aligned with the system.

06

Portal conversion strategy

Applied the system across portal account, order, auth, and settings templates to remove visual and interaction drift.

Outcome

A reusable design and implementation framework that improved UX consistency, accelerated delivery, and reduced component-level duplication.

Consistency

Unified language across ecommerce and portal journeys.

Velocity

Reusable docs and components reduced repeat UI work.

Maintainability

Cleaner separation between presentation and business logic.