DESIGN SYSTEMS
BRAND DESIGN
Paysign Brand System
PROJECT OVERVIEW
In previous versions, our design system had evolved incrementally — a patch here, a polish there — but never a true reinvention. Over time, those small evolutions compounded into bigger problems: latency from outdated dependencies, visual fragmentation across products, and a lack of future-thinking, innovative designs.
It became clear that incremental fixes wouldn’t cut it anymore.
To close these gaps and build for the future, we needed to make breaking changes — and that meant a new major version.
PROJECT DETAILS
We rebuilt over 40 components from the ground up, ensuring seamless usability, accessibility, and a more intuitive experience for all. For this build, we created one-for-one matches of every component and variant to support a seamless re-skin for product and engineering.
Each element had a dozen useful variants, booleans, and states so various teams can access what they need without contacting design.
VARIABLES
Our library is housed inside of Figma, which now allows all of these components to be converted into various coding languages. From colors to typography, icons to motion, and buttons to border radii, we rebuilt everything from the ground up for Angular, React, and HTML.
ACTIONABLE CHANGES
The system now flexes across all materials that Paysign creates, powered by dynamic new colors that allow for light and dark modes (including a long-overdue refresh of our Paysign website).
LIBRARY
The library is now a place where various teams can come to gather information, understand the brand, and take the assets they need with them. It is all downloadable, easy to use, and creates endless possibilites. This was a 6 month work in progress that will pay off tenfold, and allow the design team the freedom to use our own assets and create many more.
BRAND MANUAL
To coincide in a more traditional sense, we also completely redesigned the Paysign Brand Manual to push forth new messaging and allow for a complete understanding of the brand.