Skip to main content

About the design system

The Jack Henry Design System provides the building blocks to design and implement consistent, accessible, and beautiful experiences for our customers. It is used by Jack Henry product teams to design and build the UIs of our Admin and Consumer-facing products.

Overview

The Jack Henry Design System is built by the design system team. Using the system ensures our different product lines share a common design language. We work closely with these teams to collect feedback to understand Admin and Consumer needs to inform our work.

Benefits of using the design system

  • Increase velocity in the design and development of new products and features
  • Reduce silos between teams that adopt the system
  • Spend less time on duplicative work such as rebuilding components and patterns and more time spent on solving complex problems
  • Meet or exceed current WCAG accessibility guidelines out of the box

The architecture

  • Foundations: colors, typography, icons, content
  • Components: design, development, tokens, standards
  • Documentation: education, processes, contribution, content standards

Get started with the Jack Henry Design System

Learn how to use our components and other resources by reading our guides for designers and developers.

Start designing with the system using these guidelines and Figma library and tools.
Start developing using our component code guidelines and our Storybook library and tools.