About the system

The Jack Henry Design System is a complete and organized set of guidelines, components, and other relevant resources that inform users how to consistently and efficiently create cohesive digital products.

Why is a design system important?

A design system is important because it eliminates our teams from getting caught in a cycle of working on the same problems again and again. Common design problems are solved for teams, empowering them to focus on solving more complex, higher-impact problems unique to their product.

Simply put, it allows us all to work better, faster.

Ultimately, design systems help us build good products, which creates a positive experience for our customers, is good for business, and is rewarding for us.

For our customers, we can create a cohesive Jack Henry experience. This experience will further strengthen the Jack Henry brand. As our customers move from one product to the next they will be able to immediately recognize it as a Jack Henry product. Over time, they should develop a sense of familiarity, increasing their usability of our product suite by interacting with consistent usage patterns.

Using design system components also reduces time-to-market, with faster design and development cycles due to design asset and code reuse at scale.

Ultimately, teams can stop pushing aside the things they never have time for because the highly repetitive work is already done, creating time for innovation.

Finally, utilizing a design system will keep us competitive with other well-known software brands as systematic and component-based ways of building apps become the new normal.

What does the system include?

The design system is made up of several elements:

  • Guidelines: A comprehensive set of best practices and usage guidelines explain how and why a component should be used.
  • Design kit: A series of design libraries provide visual representations of each component to empower designers to rapidly create high-fidelity layouts and prototypes.
  • Icons: The design system includes a custom icon set
  • Component library: Developers can directly interact with demos of each component in a sandboxed environment, import them directly into their project, as well as have access to detailed technical documentation.
  • Design tokens: Design decisions are stored as reusable tokens that can be easily referenced throughout an entire application to create consistent user interfaces.