Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Shadow

Global

Token Value Example
jh-shadow-100
Shadow 100; used on surface-level content and components such as cards and control thumbs
0 4px 6px 0 rgba(39, 40, 41, 0.2), 0 2px 2px 0 rgba(39, 40, 41, 0.1)
jh-shadow-200
Shadow 200; used on components that overlay a portion of the UI such as FABs and toasts
0 8px 12px 0 rgba(39, 40, 41, 0.2), 0 4px 4px 0 rgba(39, 40, 41, 0.1)
jh-shadow-300
Shadow 300; used on major sections of the UI such as menus
0 12px 18px 0 rgba(39, 40, 41, 0.2), 0 6px 6px 0 rgba(39, 40, 41, 0.1)
jh-shadow-400
Shadow 400; used on components that should overlay the entire UI such as dialogs
0 16px 24px 0 rgba(39, 40, 41, 0.2), 0 8px 8px 0 rgba(39, 40, 41, 0.1)

Decision

Token Value Example
jh-shadow-focus
Used to style the focus ring on interactive elements
0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(8, 92, 229)