What started out as a visual refresh of the Paycor Design System became a full design system redesign and rebrand:
- Aligning with Marketing’s updated colors and branding
- Building on an 8pt Grid
- Prioritizing Accessibility and Semantics
- Utilizing a Responsive Grid System
- Updating to System Fonts
- Resolving Naming and Property Inconsistencies
Aligning with Marketing’s updated colors and branding
Collaborating with Marketing to align our internal product styles and colors with Paycor.com, we went from a bright blue to a darker blue, grays with blue undertones to grays with orange undertones, and rounded corners to pointed corners.
Building on an 8pt Grid
The previous version of the design system was built on the foundational mindset of a 10pt grid with the component sizes being 30px, 40px, 50px. There have been minor adjustments to the previous version with the inclusion of line height and mindful spacing between components, but the new system will be built on the consistent standard of an 8pt grid. The font size is 16px (1rem), the line height is 24px (1.5rem), and the default size component is 40px.
Prioritizing Accessibility and Semantics
With the updating of the design system, there is the ability to focus on cleaning up the code and making it more semantic.
Utilizing a Responsive Grid System
Placing importance on building on a grid and developing on a grid provides responsive consistency within the UI.
Responsive Width Breakpoints
Desktop
Tablet
Mobile
Although mobile has 12 columns, the content will span 12 columns most of the time.
Updating to System Fonts
Transitioning from a paid font that has a misaligned line-height to the system fonts allow for a more consistent experience as the users transfer back and forth between their other computer windows and our product.
Resolving Naming and Property Inconsistencies
Some aspects were developed inconsistently. This redesign is an opportunity to standardize and clean up those inconsistencies by adding certain properties and removing others.
Amy M Street 