Design System & UI Library
Rosnet, Parkville MO | Apr, 2025
Summary
Dywayne championed the PowerCenter UI Library as a strategic investment in design scalability, development efficiency, and brand integrity. It standardizes design and code into a reusable library of components and templates, empowering teams to build faster, reduce bugs, and deliver a consistent brand experience across microsites. Built for modularity and progressive modernization, it provides the core building blocks for unified UI styling, encourages reuse across applications, and enables isolated, testable upgrades — all without relying on third-party frameworks like Bootstrap or Tailwind.
Problem
Rosnet’s existing applications rely on fragmented styles and outdated UI patterns. This has led to inconsistent user experiences, longer development cycles, and limited scalability. A modern design system was needed to standardize UI components, reduce technical debt, and improve developer velocity.
My Role
Lead UX Designer & Engineer: championed the initiative, responsible for creating design tokens, component architecture, Storybook documentation, and a testable React/TypeScript implementation for the components in the library.
Key Benefits
- Stronger alignment between brand, design, and development
- Components carry their own brand-centric styling (no need for external CSS files)
- Provides consistent user experiences
- Accelerated feature delivery
- Reduces dependency on external HTML frameworks that change
Technologies Used
- React
- Storybook (for building and testing components in isolation)
- Vite
- Vitest (for unit testing components in isolation)
- TypeScript
- CSS Modules (for style isolation within each component)
- Custom CSS (no third parties like Bootstrap, Tailwind, etc.)
- Biome Linter (static analysis tool that helps identify and fix common errors and style issues in web project code)
- Biome Formatter (an opinionated formatter that supports multiple languages, following a similar philosophy to Prettier with limited options to avoid debates)
Storybook Screenshot
