Storefront Design System

sinisterdiesel.com · public storefront

Years of page-by-page development had left the storefront’s templates with duplicated, inconsistent CSS and markup. I built a component system underneath it without ever putting the live site at risk.

Platform: Miva Merchant (MVT)
Rollout: Milestone-based
Design tokens: One shared system
Live: Checkout · PDP · cart · search

VIEW LIVE SITE ↗

Simplified system view · one source of truth per component

Context / problem

No shared system

Years of page-by-page development had left the storefront’s templates with duplicated, inconsistent CSS and markup. There was no shared design system, so every new feature was slower and riskier to ship than the one before it.

I designed and built a from-scratch component system and led the page-by-page revamp — without touching the live legacy templates directly.

The component system

Built inactive, verified, then assigned

One global design-system stylesheet and a library of canonical, reusable components: product cards, search and filtering, cart drawer, PDP building blocks, and the vehicle-fitment “garage” tools specific to diesel performance parts.

Simplified rollout view · build, verify, assign

Engineering decisions

One source of truth

Exactly one canonical component per pattern, so a fix lands once rather than in every template that happened to copy it.

Progressive enhancement

Component JavaScript only initialises when its markup is present, and tolerates a disabled localStorage rather than throwing.

Inactive-first

New components are built and verified as inactive templates, previewed in isolation, and only assigned to a live page once confirmed.

Customer-facing scope

Category browsing, product pages, search and filtering, cart, checkout and account — all rebuilt on the same component library.

Rollout

Rolled out one milestone at a time against a written specification, with legacy templates left untouched until each page was explicitly assigned live in Miva Admin. The constraint that shaped everything: a full redesign of a live, revenue-generating storefront, with zero downtime and no broken legacy pages.

Result

Live Checkout · PDP · cart · header · footer · home · search

Those surfaces run on the new design system today, with the old duplicated-CSS pattern retired page by page.

Miva Merchant (MVT) JavaScript CSS Design tokens

Next system · 04 / 06

Multi-Tenant Commerce Platform

One storefront becomes many — and the rail forks into isolated lanes.