Skip to main content
Contact us

Light 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-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-container-primary-enabled
    Used on the major containers throughout the user interface such as cards and dialogs
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-container-primary-hover
    Hover color for primary container
    Default value
    jh-color-gray-50
    Computed value
    rgb(240, 245, 249)
  • jh-color-container-primary-active
    Active color for primary container
    Default value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-container-primary-selected
    Selected color for primary container
    Default value
    jh-color-azure-50
    Computed value
    rgb(236, 245, 254)
  • 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-50
    Computed value
    rgb(240, 245, 249)
  • jh-color-container-secondary-hover
    Hover color for secondary container
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-container-secondary-active
    Active color for secondary container
    Default value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-container-secondary-selected
    Selected color for secondary container
    Default value
    jh-color-azure-100
    Computed value
    rgb(218, 238, 255)
  • 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-150
    Computed value
    rgb(211, 216, 220)
  • jh-color-control-hover
    Hover color for control
    Default value
    jh-color-gray-200
    Computed value
    rgb(201, 206, 211)
  • jh-color-control-active
    Active color for control
    Default value
    jh-color-gray-250
    Computed value
    rgb(182, 187, 192)
  • jh-color-divider-primary
    Used on border elements that require more visual emphasis such as input fields
    Default value
    jh-color-gray-500
    Computed value
    rgb(112, 117, 122)
  • jh-color-divider-secondary
    Used on subtle border elements such as dividers and table borders
    Default value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-divider-inverse
    Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • 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-600
    Computed value
    rgb(8, 92, 229)
  • jh-color-content-brand-hover
    Hover color for branded content
    Default value
    jh-color-azure-650
    Computed value
    rgb(38, 79, 213)
  • jh-color-content-brand-active
    Active color for branded content
    Default value
    jh-color-azure-700
    Computed value
    rgb(51, 67, 196)
  • 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-900
    Computed value
    rgb(42, 44, 46)
  • jh-color-content-primary-hover
    Hover color for primary content
    Default value
    jh-color-gray-950
    Computed value
    rgb(30, 32, 33)
  • jh-color-content-primary-active
    Active color for primary content
    Default value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • jh-color-content-secondary-enabled
    Used for supportive content such as labels, subtitles, and placeholder text
    Default value
    jh-color-gray-600
    Computed value
    rgb(95, 100, 104)
  • jh-color-content-secondary-hover
    Hover color for secondary content
    Default value
    jh-color-gray-650
    Computed value
    rgb(87, 90, 93)
  • jh-color-content-secondary-active
    Active color for secondary content
    Default value
    jh-color-gray-700
    Computed value
    rgb(78, 81, 85)
  • jh-color-content-positive-enabled
    Used for content that conveys a positive response such as a deposit
    Default value
    jh-color-green-600
    Computed value
    rgb(59, 111, 45)
  • jh-color-content-positive-hover
    Hover color for positive content
    Default value
    jh-color-green-650
    Computed value
    rgb(54, 100, 41)
  • jh-color-content-positive-active
    Active color for positive content
    Default value
    jh-color-green-700
    Computed value
    rgb(50, 90, 38)
  • jh-color-content-negative-enabled
    Used for content that conveys a negative response such as an error message
    Default value
    jh-color-red-600
    Computed value
    rgb(189, 33, 19)
  • jh-color-content-negative-hover
    Hover color for negative content
    Default value
    jh-color-red-650
    Computed value
    rgb(174, 24, 13)
  • jh-color-content-negative-active
    Active color for negative content
    Default value
    jh-color-red-700
    Computed value
    rgb(158, 21, 11)
  • jh-color-content-inverse-enabled
    Used on backgrounds that don't provide sufficient contrast with other content colors
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-inverse-hover
    Hover color for inverse content
    Default value
    jh-color-gray-50
    Computed value
    rgb(240, 245, 249)
  • jh-color-content-inverse-active
    Active color for inverse content
    Default value
    jh-color-gray-100
    Computed value
    rgb(231, 236, 240)
  • jh-color-content-on-brand-enabled
    Used for content that sits on the content brand color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-brand-hover
    Used for content that sits on the content brand hover color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-brand-active
    Used for content that sits on the content brand active color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-primary-enabled
    Used for content that sits on the content primary color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-primary-hover
    Used for content that sits on the content primary hover color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-primary-active
    Used for content that sits on the content primary active color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-secondary-enabled
    Used for content that sits on the content secondary color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-secondary-hover
    Used for content that sits on the content secondary hover color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-secondary-active
    Used for content that sits on the content secondary active color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-positive-enabled
    Used for content that sits on the content positive color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-positive-hover
    Used for content that sits on the content positive hover color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-positive-active
    Used for content that sits on the content positive active color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-negative-enabled
    Used for content that sits on the content negative color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-negative-hover
    Used for content that sits on the content negative hover color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-negative-active
    Used for content that sits on the content negative active color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-content-on-inverse-enabled
    Used for content that sits on the content inverse color
    Default value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • jh-color-content-on-inverse-hover
    Used for content that sits on the content inverse hover color
    Default value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • jh-color-content-on-inverse-active
    Used for content that sits on the content inverse active color
    Default value
    jh-color-gray-1000
    Computed value
    rgb(0, 0, 0)
  • jh-color-interactive-focus-outer
    Used for the outermost part of the focus ring
    Default value
    jh-color-azure-600
    Computed value
    rgb(8, 92, 229)
  • jh-color-interactive-focus-inner
    Used to provide contrast against the outer focus color
    Default value
    jh-color-gray-0
    Computed value
    rgb(255, 255, 255)
  • jh-color-interactive-highlight
    Used for highlighting content on the page
    Default value
    jh-color-cyan-100
    Computed value
    rgb(204, 242, 251)
  • jh-color-interactive-visited
    Used for visited links
    Default value
    jh-color-violet-600
    Computed value
    rgb(150, 30, 231)

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(255, 255, 255), 0 0 0 3px rgb(8, 92, 229)