Design System

  • Divisions Maintenance Group

DMG brought me on to create a component design system for brand consistency and streamline development across growing product lines.

Phase 1

Following the principals of Atomic Design and Tailwind CSS. The initial build from scratch system started. Core Color system, Type ramp, Icons, Buttons, Writing Tone, and Spacing Guidelines established to work across mobile, desktop, and web platforms.

Phase 2

Request to find an out of the box solution to expedite design and development turnaround for any possible combinations of products Material Ui was selected. Colors, writing tone, spacing guidelines and Font family from previous phase incorporated. phase incorporated.

Phase 3

Add Dark Mode colors to system.

Phase 4

Request for system to look less Android and more iOS. When reviewing iOS applications preferred over Material Design applications a trend in rounded corners on cards and buttons was observed. Updated design system to rounded creating a hybrid of iOS shapes with Material Design interactions. Developer updates went from possible being a complete overhaul, to strategic front end modifications preventing the loss of months of development.