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.
Digital Toolkit

Authentication Framework

Protect user data with OAuth 2.0 and OpenID Connect—both industry standards.

Consumer API

Build your own apps and services faster using the same API that Banno uses.

Plugin Framework

Extend the functionality of the Banno Digital Platform by building plugins.

Admin API

Manage and integrate the back office using the same API that Banno uses.
Enterprise & Payments

jXchange Developer Portal

Translate business information between Jack Henry and third-party software products.

Enterprise REST APIs

Build your Fintech innovation leveraging the JH Enterprise RESTFUL APIs.

Payments Developer Experience

Integrate with Jack Henry Payments platforms.
Digital Toolkit

Visual Language

Learn elements of our design language such as color, iconography, and typography that help create consistent products.

Design Tokens

Browse the collection of design tokens that enable the options and decisions of our visual language to be applied throughout the system.

Components

View the library of commonly used components across our applications and guidelines on their usage.

Dark theme

Color

  • jh-color-container-page
    Used on page-level containers that make up large portions of the overall background
    Default value
    jh-color-gray-950
    Computed value
    rgb(30, 32, 33)
  • jh-color-container-primary-enabled
    Used on the major containers throughout the user interface such as cards and dialogs
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-container-primary-hover
    Hover color for primary container
    Default value
    jh-color-gray-850
    Computed value
    rgb(49, 52, 55)
  • jh-color-container-primary-active
    Active color for primary container
    Default value
    jh-color-gray-800
    Computed value
    rgb(59, 62, 65)
  • jh-color-container-primary-selected
    Selected color for primary container
    Default value
    jh-color-azure-850
    Computed value
    rgb(25, 42, 137)
  • jh-color-container-secondary-enabled
    Used on containers and sections that will sit on top of or within a primary container
    Default value
    jh-color-gray-850
    Computed value
    rgb(49, 52, 55)
  • jh-color-container-secondary-hover
    Hover color for secondary container
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-container-secondary-active
    Active color for secondary container
    Default value
    jh-color-gray-800
    Computed value
    rgb(59, 62, 65)
  • jh-color-container-secondary-selected
    Selected color for secondary container
    Default value
    jh-color-azure-800
    Computed value
    rgb(35, 51, 158)
  • jh-color-overlay
    Used to distinguish the modal layer from the layer underneath
    Default value
    rgba(42, 44, 46, jh-opacity-600)
    Computed value
    rgba(42, 44, 46, 0.6)
  • jh-color-control-enabled
    Used on the containers of interactive elements such as slider and switch tracks
    Default value
    jh-color-gray-750
    Computed value
    rgb(68, 72, 75)
  • jh-color-control-hover
    Hover color for control
    Default value
    jh-color-gray-700
    Computed value
    rgb(78, 81, 85)
  • jh-color-control-active
    Active color for control
    Default value
    jh-color-gray-650
    Computed value
    rgb(87, 90, 93)
  • jh-color-divider-primary
    Used on border elements that require more visual emphasis such as input fields
    Default value
    jh-color-gray-400
    Computed value
    rgb(147, 153, 159)
  • jh-color-divider-secondary
    Used on subtle border elements such as dividers and table borders
    Default value
    jh-color-gray-800
    Computed value
    rgb(59, 62, 65)
  • jh-color-divider-inverse
    Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-brand-primary
    Used to emphasize areas of importance such as feature areas or primary calls-to-action
    Default value
    jh-color-azure-950
    Computed value
    rgb(6, 24, 95)
  • jh-color-brand-secondary
    Used when another layer of visual hierarchy is needed within feature areas or on secondary calls-to-action
    Default value
    jh-color-azure-600
    Computed value
    rgb(8, 92, 229)
  • jh-color-brand-tertiary
    Used to add thoughtful branded touches to components such as accent bars
    Default value
    jh-color-cyan-200
    Computed value
    rgb(118, 220, 253)
  • jh-color-brand-gradient-light
    Used to accent branded elements with content such as ads or other calls-to-action
    Default value
    linear-gradient(135deg, jh-color-cyan-50 0%, jh-color-cyan-200 100%)
    Computed value
    linear-gradient(135deg, rgb(232, 247, 247) 0%, rgb(118, 220, 253) 100%)
  • jh-color-brand-gradient-medium
    Used to accents branded elements without content
    Default value
    linear-gradient(135deg, jh-color-cyan-200 0%, jh-color-azure-600 100%)
    Computed value
    linear-gradient(135deg, rgb(118, 220, 253) 0%, rgb(8, 92, 229) 100%)
  • jh-color-brand-gradient-dark
    Used to accent branded elements with content such as ads or other calls-to-action
    Default value
    linear-gradient(135deg, jh-color-azure-600 0%, jh-color-azure-950 100%)
    Computed value
    linear-gradient(135deg, rgb(8, 92, 229) 0%, rgb(6, 24, 95) 100%)
  • jh-color-brand-on-primary
    Used for content that sits on the primary brand color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-brand-on-secondary
    Used for content that sits on the secondary brand color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-brand-on-tertiary
    Used for content that sits on the tertiary brand color
    Default value
    jh-color-azure-950
    Computed value
    rgb(6, 24, 95)
  • jh-color-brand-on-gradient-light
    Used for content that sits on the light brand gradient
    Default value
    jh-color-azure-950
    Computed value
    rgb(6, 24, 95)
  • jh-color-brand-on-gradient-dark
    Used for content that sits on the dark brand gradient
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-brand-enabled
    Used for content that needs to have a strong branded presence
    Default value
    jh-color-azure-300
    Computed value
    rgb(118, 180, 248)
  • jh-color-content-brand-hover
    Hover color for branded content
    Default value
    jh-color-azure-250
    Computed value
    rgb(134, 193, 248)
  • jh-color-content-brand-active
    Active color for branded content
    Default value
    jh-color-azure-200
    Computed value
    rgb(163, 212, 255)
  • jh-color-content-primary-enabled
    Used for the majority of fundamental content within a layout such as body copy and headers as well as neutral messages
    Default value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-content-primary-hover
    Hover color for primary content
    Default value
    jh-color-gray-50
    Computed value
    rgb(240, 245, 249)
  • jh-color-content-primary-active
    Active color for primary content
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-secondary-enabled
    Used for supportive content such as labels, subtitles, and placeholder text
    Default value
    jh-color-gray-300
    Computed value
    rgb(169, 176, 182)
  • jh-color-content-secondary-hover
    Hover color for secondary content
    Default value
    jh-color-gray-250
    Computed value
    rgb(182, 187, 192)
  • jh-color-content-secondary-active
    Active color for secondary content
    Default value
    jh-color-gray-200
    Computed value
    rgb(201, 206, 211)
  • jh-color-content-positive-enabled
    Used for content that conveys a positive response such as a deposit
    Default value
    jh-color-green-300
    Computed value
    rgb(95, 196, 69)
  • jh-color-content-positive-hover
    Hover color for positive content
    Default value
    jh-color-green-250
    Computed value
    rgb(106, 209, 80)
  • jh-color-content-positive-active
    Active color for positive content
    Default value
    jh-color-green-200
    Computed value
    rgb(136, 226, 110)
  • jh-color-content-negative-enabled
    Used for content that conveys a negative response such as an error message
    Default value
    jh-color-red-300
    Computed value
    rgb(250, 145, 118)
  • jh-color-content-negative-hover
    Hover color for negative content
    Default value
    jh-color-red-250
    Computed value
    rgb(248, 164, 142)
  • jh-color-content-negative-active
    Active color for negative content
    Default value
    jh-color-red-200
    Computed value
    rgb(251, 191, 174)
  • jh-color-content-inverse-enabled
    Used on backgrounds that don't provide sufficient contrast with other content colors
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-inverse-hover
    Hover color for inverse content
    Default value
    jh-color-gray-850
    Computed value
    rgb(49, 52, 55)
  • jh-color-content-inverse-active
    Active color for inverse content
    Default value
    jh-color-gray-800
    Computed value
    rgb(59, 62, 65)
  • jh-color-content-on-brand-enabled
    Used for content that sits on the content brand color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-brand-hover
    Used for content that sits on the content brand hover color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-brand-active
    Used for content that sits on the content brand active color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-primary-enabled
    Used for content that sits on the content primary color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-primary-hover
    Used for content that sits on the content primary hover color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-primary-active
    Used for content that sits on the content primary active color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-secondary-enabled
    Used for content that sits on the content secondary color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-secondary-hover
    Used for content that sits on the content secondary hover color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-secondary-active
    Used for content that sits on the content secondary active color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-positive-enabled
    Used for content that sits on the content positive color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-positive-hover
    Used for content that sits on the content positive hover color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-positive-active
    Used for content that sits on the content positive active color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-negative-enabled
    Used for content that sits on the content negative color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-negative-hover
    Used for content that sits on the content negative hover color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-negative-active
    Used for content that sits on the content negative active color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-on-inverse-enabled
    Used for content that sits on the content inverse color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-inverse-hover
    Used for content that sits on the content inverse hover color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-inverse-active
    Used for content that sits on the content inverse active color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-interactive-focus-outer
    Used for the outermost part of the focus ring
    Default value
    jh-color-azure-300
    Computed value
    rgb(118, 180, 248)
  • jh-color-interactive-focus-inner
    Used to provide contrast against the outer focus color
    Default value
    jh-color-gray-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-interactive-highlight
    Used for highlighting content on the page
    Default value
    jh-color-cyan-800
    Computed value
    rgb(27, 67, 80)
  • jh-color-interactive-visited
    Used for visited links
    Default value
    jh-color-violet-300
    Computed value
    rgb(210, 152, 246)

Font

  • Aa
    jh-font-family-primary
    Used to set the default typeface for the system
    Default value
    jh-font-family-sans
    Computed value
    'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-micro-regular
    Used for fine-print text and small snippets of text with limited space within a component
    Default value
    jh-font-weight-400 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
    Computed value
    400 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-micro-medium
    Used for fine-print text and small snippets of text with limited space within a component
    Default value
    jh-font-weight-500 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
    Computed value
    500 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-micro-bold
    Used for fine-print text and small snippets of text with limited space within a component
    Default value
    jh-font-weight-700 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
    Computed value
    700 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-helper-regular
    Used for secondary or explanatory text as well as field labels
    Default value
    jh-font-weight-400 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
    Computed value
    400 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-helper-medium
    Used for secondary or explanatory text as well as field labels
    Default value
    jh-font-weight-500 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
    Computed value
    500 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-helper-bold
    Used for secondary or explanatory text as well as field labels.
    Default value
    jh-font-weight-700 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
    Computed value
    700 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-regular-1
    Used for blocks of text and most content displayed within components
    Default value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    400 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-regular-2
    Used for intro or leading blocks of text
    Default value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    400 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-medium-1
    Used for blocks of text and most content displayed within components
    Default value
    jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    500 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-medium-2
    Used for intro or leading blocks of text
    Default value
    jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    500 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-bold-1
    Used for blocks of text and most content displayed within components
    Default value
    jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    700 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-bold-2
    Used for intro or leading blocks of text
    Default value
    jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    700 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-regular-italic-1
    Used for blocks of text and most content displayed within components
    Default value
    jh-font-weight-400 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    400 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-regular-italic-2
    Used for intro or leading blocks of text
    Default value
    jh-font-weight-400 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    400 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-medium-italic-1
    Used for blocks of text and most content displayed within components
    Default value
    jh-font-weight-500 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    500 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-medium-italic-2
    Used for intro or leading blocks of text
    Default value
    jh-font-weight-500 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    500 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-bold-italic-1
    Used for blocks of text and most content displayed within components
    Default value
    jh-font-weight-700 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    700 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-body-bold-italic-2
    Used for intro or leading blocks of text
    Default value
    jh-font-weight-700 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    700 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-code-regular-1
    Used for code references in standard blocks of text
    Default value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-mono
    Computed value
    400 14px/20px 'Roboto Mono', monospace
  • Aa
    jh-font-code-regular-2
    Used for code references in intro or leading blocks of text
    Default value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-mono
    Computed value
    400 16px/24px 'Roboto Mono', monospace
  • Aa
    jh-font-display-light-1
    Used to create visual emphasis through size without being misconstrued as a heading
    Default value
    jh-font-weight-300 jh-font-size-1050/jh-font-line-height-1300 jh-font-family-primary
    Computed value
    300 42px/52px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-display-light-2
    Used to create visual emphasis through size without being misconstrued as a heading
    Default value
    jh-font-weight-300 jh-font-size-1350/jh-font-line-height-1600 jh-font-family-primary
    Computed value
    300 54px/64px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-display-light-3
    Used to create visual emphasis through size without being misconstrued as a heading
    Default value
    jh-font-weight-300 jh-font-size-2300/jh-font-line-height-2700 jh-font-family-primary
    Computed value
    300 92px/108px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-regular-1
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    400 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-regular-2
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    400 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-regular-3
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-400 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
    Computed value
    400 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-regular-4
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-400 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
    Computed value
    400 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-regular-5
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-400 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
    Computed value
    400 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-regular-6
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-400 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
    Computed value
    400 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-medium-1
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    500 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-medium-2
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    500 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-medium-3
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-500 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
    Computed value
    500 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-medium-4
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-500 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
    Computed value
    500 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-medium-5
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-500 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
    Computed value
    500 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-medium-6
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-500 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
    Computed value
    500 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-bold-1
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
    Computed value
    700 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-bold-2
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
    Computed value
    700 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-bold-3
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-700 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
    Computed value
    700 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-bold-4
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-700 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
    Computed value
    700 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-bold-5
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-700 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
    Computed value
    700 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
  • Aa
    jh-font-heading-bold-6
    Used to create visual hierarchy on a page and within a component
    Default value
    jh-font-weight-700 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
    Computed value
    700 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif

Opacity

  • jh-opacity-disabled
    Used on interactive elements to denote when they are disabled
    Default value
    jh-opacity-300
    Computed value
    0.3

Shadow

  • jh-shadow-focus
    Used to style the focus ring on interactive elements
    Default value
    0 0 0 1px jh-color-interactive-focus-inner, 0 0 0 3px jh-color-interactive-focus-outer
    Computed value
    0 0 0 1px rgb(42, 44, 46), 0 0 0 3px rgb(118, 180, 248)