Design System; Primerica

Design System; Primerica


The project started with some wandering, trying to figure out how we were going to build such a massive system, completely from scratch. We then realized we needed to do an audit of our entire web application in order to understand our base needs. We itemized them, as seen in this table:

click to view larger image
click to view larger image

From this we had a good starting point, but we still had challenges. Namely, working within an Ionic framework meant that we needed to leverage native UI patterns instead of our bespoke practice of creating UI elements and going through a time consuming approval process. I then leveraged our UI audit list above and added the components from Ionic into the list. Our team, myself, Josue Lux, Andres Prieto then prioritized the list based on our needs. We then delegated to each other who would do what. I took on the rules, and several interface elements. Josue was responsible for getting our Design System into Invisions Design System Manager.

We then bought an Ioncic UI Kit to expedite our work, and then began creating our rules system, based heavily on existing Design Systems. Their rules would serve us well as our design principles to build off of.

Below are several rules and examples from our Design System:




Some formatting issues happened due to fonts not being replaced before publishing here:


Our ADA color guide palate: We used this to know if our color combinations passed ADA compliance.


Our ADA Guidelines: