Whazzonline Design System, A Foundational

Whazzonline Design System, A Foundational Starter

Tokens, type, spacing, and a six component commerce kit, built to scale across products.

Blawdigital had no design system. No component library, no defined type scale, no documented spacing logic. Whazzonline, their commerce platform was being built without shared design infrastructure, which meant inconsistency was being shipped into the product daily. The brief was to build a foundational system that developers could use immediately and designers could extend as new products joined the company's portfolio.

I built the system in three layers so it could grow without breaking. Primitives hold the raw values, color ramps, type sizes, spacing units on a 4 point base. Tokens are semantic aliases (text-primary, background-surface, border-default) that point at primitives. Components consume tokens, never primitives directly. This separation is what lets the system extend a new product with different brand colors becomes a token remap, not a redesign. Dark mode becomes a token remap. Six commerce relevant components, button, input, badge, product card, navigation, modal, were built with multiple states each, so engineers had real specifications, not just hex values.

The Outcome:💯

A starter system that ships with ~40 color tokens, 8 type styles, 8 spacing values, and six documented components. Small on purpose. The discipline is in keeping it small as it grows.