Dark theme
The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.
Color
-
jh-color-container-page
Used on page-level containers that make up large portions of the overall backgroundDefault valuejh-color-gray-950
Computed valuergb(30, 32, 33)
-
jh-color-container-primary-enabled
Used on the major containers throughout the user interface such as cards and dialogsDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-container-primary-hover
Hover color for primary containerDefault valuejh-color-gray-850
Computed valuergb(49, 52, 55)
-
jh-color-container-primary-active
Active color for primary containerDefault valuejh-color-gray-800
Computed valuergb(59, 62, 65)
-
jh-color-container-primary-selected
Selected color for primary containerDefault valuejh-color-azure-850
Computed valuergb(25, 42, 137)
-
jh-color-container-secondary-enabled
Used on containers and sections that will sit on top of or within a primary containerDefault valuejh-color-gray-850
Computed valuergb(49, 52, 55)
-
jh-color-container-secondary-hover
Hover color for secondary containerDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-container-secondary-active
Active color for secondary containerDefault valuejh-color-gray-800
Computed valuergb(59, 62, 65)
-
jh-color-container-secondary-selected
Selected color for secondary containerDefault valuejh-color-azure-800
Computed valuergb(35, 51, 158)
-
jh-color-overlay
Used to distinguish the modal layer from the layer underneathDefault valuergba(42, 44, 46, jh-opacity-600)
Computed valuergba(42, 44, 46, 0.6)
-
jh-color-control-enabled
Used on the containers of interactive elements such as slider and switch tracksDefault valuejh-color-gray-750
Computed valuergb(68, 72, 75)
-
jh-color-control-hover
Hover color for controlDefault valuejh-color-gray-700
Computed valuergb(78, 81, 85)
-
jh-color-control-active
Active color for controlDefault valuejh-color-gray-650
Computed valuergb(87, 90, 93)
-
jh-color-divider-primary
Used on border elements that require more visual emphasis such as input fieldsDefault valuejh-color-gray-400
Computed valuergb(147, 153, 159)
-
jh-color-divider-secondary
Used on subtle border elements such as dividers and table bordersDefault valuejh-color-gray-800
Computed valuergb(59, 62, 65)
-
jh-color-divider-inverse
Used on backgrounds that don't provide sufficient contrast with primary or secondary dividersDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-brand-primary
Used to emphasize areas of importance such as feature areas or primary calls-to-actionDefault valuejh-color-azure-950
Computed valuergb(6, 24, 95)
-
jh-color-brand-secondary
Used when another layer of visual hierarchy is needed within feature areas or on secondary calls-to-actionDefault valuejh-color-azure-600
Computed valuergb(8, 92, 229)
-
jh-color-brand-tertiary
Used to add thoughtful branded touches to components such as accent barsDefault valuejh-color-cyan-200
Computed valuergb(118, 220, 253)
-
jh-color-brand-gradient-light
Used to accent branded elements with content such as ads or other calls-to-actionDefault valuelinear-gradient(135deg, jh-color-cyan-50 0%, jh-color-cyan-200 100%)
Computed valuelinear-gradient(135deg, rgb(232, 247, 247) 0%, rgb(118, 220, 253) 100%)
-
jh-color-brand-gradient-medium
Used to accents branded elements without contentDefault valuelinear-gradient(135deg, jh-color-cyan-200 0%, jh-color-azure-600 100%)
Computed valuelinear-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-actionDefault valuelinear-gradient(135deg, jh-color-azure-600 0%, jh-color-azure-950 100%)
Computed valuelinear-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 colorDefault valuejh-color-gray-0
Computed valuergb(255, 255, 255)
-
jh-color-brand-on-secondary
Used for content that sits on the secondary brand colorDefault valuejh-color-gray-0
Computed valuergb(255, 255, 255)
-
jh-color-brand-on-tertiary
Used for content that sits on the tertiary brand colorDefault valuejh-color-azure-950
Computed valuergb(6, 24, 95)
-
jh-color-brand-on-gradient-light
Used for content that sits on the light brand gradientDefault valuejh-color-azure-950
Computed valuergb(6, 24, 95)
-
jh-color-brand-on-gradient-dark
Used for content that sits on the dark brand gradientDefault valuejh-color-gray-0
Computed valuergb(255, 255, 255)
-
jh-color-content-brand-enabled
Used for content that needs to have a strong branded presenceDefault valuejh-color-azure-300
Computed valuergb(118, 180, 248)
-
jh-color-content-brand-hover
Hover color for branded contentDefault valuejh-color-azure-250
Computed valuergb(134, 193, 248)
-
jh-color-content-brand-active
Active color for branded contentDefault valuejh-color-azure-200
Computed valuergb(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 messagesDefault valuejh-color-gray-100
Computed valuergb(231, 236, 240)
-
jh-color-content-primary-hover
Hover color for primary contentDefault valuejh-color-gray-50
Computed valuergb(240, 245, 249)
-
jh-color-content-primary-active
Active color for primary contentDefault valuejh-color-gray-0
Computed valuergb(255, 255, 255)
-
jh-color-content-secondary-enabled
Used for supportive content such as labels, subtitles, and placeholder textDefault valuejh-color-gray-300
Computed valuergb(169, 176, 182)
-
jh-color-content-secondary-hover
Hover color for secondary contentDefault valuejh-color-gray-250
Computed valuergb(182, 187, 192)
-
jh-color-content-secondary-active
Active color for secondary contentDefault valuejh-color-gray-200
Computed valuergb(201, 206, 211)
-
jh-color-content-positive-enabled
Used for content that conveys a positive response such as a depositDefault valuejh-color-green-300
Computed valuergb(95, 196, 69)
-
jh-color-content-positive-hover
Hover color for positive contentDefault valuejh-color-green-250
Computed valuergb(106, 209, 80)
-
jh-color-content-positive-active
Active color for positive contentDefault valuejh-color-green-200
Computed valuergb(136, 226, 110)
-
jh-color-content-negative-enabled
Used for content that conveys a negative response such as an error messageDefault valuejh-color-red-300
Computed valuergb(250, 145, 118)
-
jh-color-content-negative-hover
Hover color for negative contentDefault valuejh-color-red-250
Computed valuergb(248, 164, 142)
-
jh-color-content-negative-active
Active color for negative contentDefault valuejh-color-red-200
Computed valuergb(251, 191, 174)
-
jh-color-content-inverse-enabled
Used on backgrounds that don't provide sufficient contrast with other content colorsDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-inverse-hover
Hover color for inverse contentDefault valuejh-color-gray-850
Computed valuergb(49, 52, 55)
-
jh-color-content-inverse-active
Active color for inverse contentDefault valuejh-color-gray-800
Computed valuergb(59, 62, 65)
-
jh-color-content-on-brand-enabled
Used for content that sits on the content brand colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-brand-hover
Used for content that sits on the content brand hover colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-brand-active
Used for content that sits on the content brand active colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-primary-enabled
Used for content that sits on the content primary colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-primary-hover
Used for content that sits on the content primary hover colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-primary-active
Used for content that sits on the content primary active colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-secondary-enabled
Used for content that sits on the content secondary colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-secondary-hover
Used for content that sits on the content secondary hover colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-secondary-active
Used for content that sits on the content secondary active colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-positive-enabled
Used for content that sits on the content positive colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-positive-hover
Used for content that sits on the content positive hover colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-positive-active
Used for content that sits on the content positive active colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-negative-enabled
Used for content that sits on the content negative colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-negative-hover
Used for content that sits on the content negative hover colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-negative-active
Used for content that sits on the content negative active colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-content-on-inverse-enabled
Used for content that sits on the content inverse colorDefault valuejh-color-gray-0
Computed valuergb(255, 255, 255)
-
jh-color-content-on-inverse-hover
Used for content that sits on the content inverse hover colorDefault valuejh-color-gray-0
Computed valuergb(255, 255, 255)
-
jh-color-content-on-inverse-active
Used for content that sits on the content inverse active colorDefault valuejh-color-gray-0
Computed valuergb(255, 255, 255)
-
jh-color-interactive-focus-outer
Used for the outermost part of the focus ringDefault valuejh-color-azure-300
Computed valuergb(118, 180, 248)
-
jh-color-interactive-focus-inner
Used to provide contrast against the outer focus colorDefault valuejh-color-gray-900
Computed valuergb(42, 44, 46)
-
jh-color-interactive-highlight
Used for highlighting content on the pageDefault valuejh-color-cyan-800
Computed valuergb(27, 67, 80)
-
jh-color-interactive-visited
Used for visited linksDefault valuejh-color-violet-300
Computed valuergb(210, 152, 246)
Font
-
Aa
jh-font-family-primary
Used to set the default typeface for the systemDefault valuejh-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 componentDefault valuejh-font-weight-400 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
Computed value400 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 componentDefault valuejh-font-weight-500 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
Computed value500 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 componentDefault valuejh-font-weight-700 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
Computed value700 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-helper-regular
Used for secondary or explanatory text as well as field labelsDefault valuejh-font-weight-400 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
Computed value400 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-helper-medium
Used for secondary or explanatory text as well as field labelsDefault valuejh-font-weight-500 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
Computed value500 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 valuejh-font-weight-700 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
Computed value700 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 componentsDefault valuejh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value400 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-body-regular-2
Used for intro or leading blocks of textDefault valuejh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value400 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 componentsDefault valuejh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value500 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-body-medium-2
Used for intro or leading blocks of textDefault valuejh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value500 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 componentsDefault valuejh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value700 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-body-bold-2
Used for intro or leading blocks of textDefault valuejh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value700 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 componentsDefault valuejh-font-weight-400 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value400 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-body-regular-italic-2
Used for intro or leading blocks of textDefault valuejh-font-weight-400 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value400 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 componentsDefault valuejh-font-weight-500 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value500 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-body-medium-italic-2
Used for intro or leading blocks of textDefault valuejh-font-weight-500 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value500 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 componentsDefault valuejh-font-weight-700 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value700 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-body-bold-italic-2
Used for intro or leading blocks of textDefault valuejh-font-weight-700 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value700 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
-
Aa
jh-font-code-regular-1
Used for code references in standard blocks of textDefault valuejh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-mono
Computed value400 14px/20px 'Roboto Mono', monospace
-
Aa
jh-font-code-regular-2
Used for code references in intro or leading blocks of textDefault valuejh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-mono
Computed value400 16px/24px 'Roboto Mono', monospace
-
Aa
jh-font-display-light-1
Used to create visual emphasis through size without being misconstrued as a headingDefault valuejh-font-weight-300 jh-font-size-1050/jh-font-line-height-1300 jh-font-family-primary
Computed value300 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 headingDefault valuejh-font-weight-300 jh-font-size-1350/jh-font-line-height-1600 jh-font-family-primary
Computed value300 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 headingDefault valuejh-font-weight-300 jh-font-size-2300/jh-font-line-height-2700 jh-font-family-primary
Computed value300 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 componentDefault valuejh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value400 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 componentDefault valuejh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value400 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 componentDefault valuejh-font-weight-400 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
Computed value400 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 componentDefault valuejh-font-weight-400 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
Computed value400 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 componentDefault valuejh-font-weight-400 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
Computed value400 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 componentDefault valuejh-font-weight-400 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
Computed value400 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 componentDefault valuejh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value500 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 componentDefault valuejh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value500 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 componentDefault valuejh-font-weight-500 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
Computed value500 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 componentDefault valuejh-font-weight-500 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
Computed value500 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 componentDefault valuejh-font-weight-500 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
Computed value500 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 componentDefault valuejh-font-weight-500 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
Computed value500 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 componentDefault valuejh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
Computed value700 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 componentDefault valuejh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
Computed value700 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 componentDefault valuejh-font-weight-700 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
Computed value700 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 componentDefault valuejh-font-weight-700 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
Computed value700 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 componentDefault valuejh-font-weight-700 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
Computed value700 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 componentDefault valuejh-font-weight-700 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
Computed value700 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif
Opacity
-
jh-opacity-disabled
Used on interactive elements to denote when they are disabledDefault valuejh-opacity-300
Computed value0.3
Shadow
-
jh-shadow-focus
Used to style the focus ring on interactive elementsDefault value0 0 0 1px jh-color-interactive-focus-inner, 0 0 0 3px jh-color-interactive-focus-outer
Computed value0 0 0 1px rgb(42, 44, 46), 0 0 0 3px rgb(118, 180, 248)
Name | Description | Type | Default value | Computed value |
---|---|---|---|---|
jh-color-container-page | Used on page-level containers that make up large portions of the overall background | color | jh-color-gray-950 | rgb(30, 32, 33) |
jh-color-container-primary-enabled | Used on the major containers throughout the user interface such as cards and dialogs | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-container-primary-hover | Hover color for primary container | color | jh-color-gray-850 | rgb(49, 52, 55) |
jh-color-container-primary-active | Active color for primary container | color | jh-color-gray-800 | rgb(59, 62, 65) |
jh-color-container-primary-selected | Selected color for primary container | color | jh-color-azure-850 | 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 | color | jh-color-gray-850 | rgb(49, 52, 55) |
jh-color-container-secondary-hover | Hover color for secondary container | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-container-secondary-active | Active color for secondary container | color | jh-color-gray-800 | rgb(59, 62, 65) |
jh-color-container-secondary-selected | Selected color for secondary container | color | jh-color-azure-800 | rgb(35, 51, 158) |
jh-color-overlay | Used to distinguish the modal layer from the layer underneath | color | rgba(42, 44, 46, jh-opacity-600) | rgba(42, 44, 46, 0.6) |
jh-color-control-enabled | Used on the containers of interactive elements such as slider and switch tracks | color | jh-color-gray-750 | rgb(68, 72, 75) |
jh-color-control-hover | Hover color for control | color | jh-color-gray-700 | rgb(78, 81, 85) |
jh-color-control-active | Active color for control | color | jh-color-gray-650 | rgb(87, 90, 93) |
jh-color-divider-primary | Used on border elements that require more visual emphasis such as input fields | color | jh-color-gray-400 | rgb(147, 153, 159) |
jh-color-divider-secondary | Used on subtle border elements such as dividers and table borders | color | jh-color-gray-800 | rgb(59, 62, 65) |
jh-color-divider-inverse | Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-brand-primary | Used to emphasize areas of importance such as feature areas or primary calls-to-action | color | jh-color-azure-950 | 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 | color | jh-color-azure-600 | rgb(8, 92, 229) |
jh-color-brand-tertiary | Used to add thoughtful branded touches to components such as accent bars | color | jh-color-cyan-200 | rgb(118, 220, 253) |
jh-color-brand-gradient-light | Used to accent branded elements with content such as ads or other calls-to-action | color | linear-gradient(135deg, jh-color-cyan-50 0%, jh-color-cyan-200 100%) | 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 | color | linear-gradient(135deg, jh-color-cyan-200 0%, jh-color-azure-600 100%) | 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 | color | linear-gradient(135deg, jh-color-azure-600 0%, jh-color-azure-950 100%) | 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 | color | jh-color-gray-0 | rgb(255, 255, 255) |
jh-color-brand-on-secondary | Used for content that sits on the secondary brand color | color | jh-color-gray-0 | rgb(255, 255, 255) |
jh-color-brand-on-tertiary | Used for content that sits on the tertiary brand color | color | jh-color-azure-950 | rgb(6, 24, 95) |
jh-color-brand-on-gradient-light | Used for content that sits on the light brand gradient | color | jh-color-azure-950 | rgb(6, 24, 95) |
jh-color-brand-on-gradient-dark | Used for content that sits on the dark brand gradient | color | jh-color-gray-0 | rgb(255, 255, 255) |
jh-color-content-brand-enabled | Used for content that needs to have a strong branded presence | color | jh-color-azure-300 | rgb(118, 180, 248) |
jh-color-content-brand-hover | Hover color for branded content | color | jh-color-azure-250 | rgb(134, 193, 248) |
jh-color-content-brand-active | Active color for branded content | color | jh-color-azure-200 | 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 | color | jh-color-gray-100 | rgb(231, 236, 240) |
jh-color-content-primary-hover | Hover color for primary content | color | jh-color-gray-50 | rgb(240, 245, 249) |
jh-color-content-primary-active | Active color for primary content | color | jh-color-gray-0 | rgb(255, 255, 255) |
jh-color-content-secondary-enabled | Used for supportive content such as labels, subtitles, and placeholder text | color | jh-color-gray-300 | rgb(169, 176, 182) |
jh-color-content-secondary-hover | Hover color for secondary content | color | jh-color-gray-250 | rgb(182, 187, 192) |
jh-color-content-secondary-active | Active color for secondary content | color | jh-color-gray-200 | rgb(201, 206, 211) |
jh-color-content-positive-enabled | Used for content that conveys a positive response such as a deposit | color | jh-color-green-300 | rgb(95, 196, 69) |
jh-color-content-positive-hover | Hover color for positive content | color | jh-color-green-250 | rgb(106, 209, 80) |
jh-color-content-positive-active | Active color for positive content | color | jh-color-green-200 | rgb(136, 226, 110) |
jh-color-content-negative-enabled | Used for content that conveys a negative response such as an error message | color | jh-color-red-300 | rgb(250, 145, 118) |
jh-color-content-negative-hover | Hover color for negative content | color | jh-color-red-250 | rgb(248, 164, 142) |
jh-color-content-negative-active | Active color for negative content | color | jh-color-red-200 | rgb(251, 191, 174) |
jh-color-content-inverse-enabled | Used on backgrounds that don't provide sufficient contrast with other content colors | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-inverse-hover | Hover color for inverse content | color | jh-color-gray-850 | rgb(49, 52, 55) |
jh-color-content-inverse-active | Active color for inverse content | color | jh-color-gray-800 | rgb(59, 62, 65) |
jh-color-content-on-brand-enabled | Used for content that sits on the content brand color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-brand-hover | Used for content that sits on the content brand hover color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-brand-active | Used for content that sits on the content brand active color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-primary-enabled | Used for content that sits on the content primary color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-primary-hover | Used for content that sits on the content primary hover color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-primary-active | Used for content that sits on the content primary active color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-secondary-enabled | Used for content that sits on the content secondary color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-secondary-hover | Used for content that sits on the content secondary hover color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-secondary-active | Used for content that sits on the content secondary active color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-positive-enabled | Used for content that sits on the content positive color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-positive-hover | Used for content that sits on the content positive hover color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-positive-active | Used for content that sits on the content positive active color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-negative-enabled | Used for content that sits on the content negative color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-negative-hover | Used for content that sits on the content negative hover color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-negative-active | Used for content that sits on the content negative active color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-content-on-inverse-enabled | Used for content that sits on the content inverse color | color | jh-color-gray-0 | rgb(255, 255, 255) |
jh-color-content-on-inverse-hover | Used for content that sits on the content inverse hover color | color | jh-color-gray-0 | rgb(255, 255, 255) |
jh-color-content-on-inverse-active | Used for content that sits on the content inverse active color | color | jh-color-gray-0 | rgb(255, 255, 255) |
jh-color-interactive-focus-outer | Used for the outermost part of the focus ring | color | jh-color-azure-300 | rgb(118, 180, 248) |
jh-color-interactive-focus-inner | Used to provide contrast against the outer focus color | color | jh-color-gray-900 | rgb(42, 44, 46) |
jh-color-interactive-highlight | Used for highlighting content on the page | color | jh-color-cyan-800 | rgb(27, 67, 80) |
jh-color-interactive-visited | Used for visited links | color | jh-color-violet-300 | rgb(210, 152, 246) |
jh-font-family-primary | Used to set the default typeface for the system | font | jh-font-family-sans | 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-micro-regular | Used for fine-print text and small snippets of text with limited space within a component | font | jh-font-weight-400 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary | 400 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-micro-medium | Used for fine-print text and small snippets of text with limited space within a component | font | jh-font-weight-500 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary | 500 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-micro-bold | Used for fine-print text and small snippets of text with limited space within a component | font | jh-font-weight-700 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary | 700 10px/12px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-helper-regular | Used for secondary or explanatory text as well as field labels | font | jh-font-weight-400 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary | 400 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-helper-medium | Used for secondary or explanatory text as well as field labels | font | jh-font-weight-500 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary | 500 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-helper-bold | Used for secondary or explanatory text as well as field labels. | font | jh-font-weight-700 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary | 700 12px/16px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-regular-1 | Used for blocks of text and most content displayed within components | font | jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 400 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-regular-2 | Used for intro or leading blocks of text | font | jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 400 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-medium-1 | Used for blocks of text and most content displayed within components | font | jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 500 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-medium-2 | Used for intro or leading blocks of text | font | jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 500 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-bold-1 | Used for blocks of text and most content displayed within components | font | jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 700 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-bold-2 | Used for intro or leading blocks of text | font | jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 700 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-regular-italic-1 | Used for blocks of text and most content displayed within components | font | jh-font-weight-400 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 400 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-regular-italic-2 | Used for intro or leading blocks of text | font | jh-font-weight-400 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 400 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-medium-italic-1 | Used for blocks of text and most content displayed within components | font | jh-font-weight-500 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 500 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-medium-italic-2 | Used for intro or leading blocks of text | font | jh-font-weight-500 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 500 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-bold-italic-1 | Used for blocks of text and most content displayed within components | font | jh-font-weight-700 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 700 italic 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-body-bold-italic-2 | Used for intro or leading blocks of text | font | jh-font-weight-700 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 700 italic 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-code-regular-1 | Used for code references in standard blocks of text | font | jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-mono | 400 14px/20px 'Roboto Mono', monospace |
jh-font-code-regular-2 | Used for code references in intro or leading blocks of text | font | jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-mono | 400 16px/24px 'Roboto Mono', monospace |
jh-font-display-light-1 | Used to create visual emphasis through size without being misconstrued as a heading | font | jh-font-weight-300 jh-font-size-1050/jh-font-line-height-1300 jh-font-family-primary | 300 42px/52px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-display-light-2 | Used to create visual emphasis through size without being misconstrued as a heading | font | jh-font-weight-300 jh-font-size-1350/jh-font-line-height-1600 jh-font-family-primary | 300 54px/64px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-display-light-3 | Used to create visual emphasis through size without being misconstrued as a heading | font | jh-font-weight-300 jh-font-size-2300/jh-font-line-height-2700 jh-font-family-primary | 300 92px/108px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-regular-1 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 400 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-regular-2 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 400 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-regular-3 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-400 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary | 400 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-regular-4 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-400 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary | 400 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-regular-5 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-400 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary | 400 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-regular-6 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-400 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary | 400 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-medium-1 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 500 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-medium-2 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 500 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-medium-3 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-500 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary | 500 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-medium-4 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-500 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary | 500 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-medium-5 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-500 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary | 500 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-medium-6 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-500 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary | 500 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-bold-1 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary | 700 14px/20px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-bold-2 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary | 700 16px/24px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-bold-3 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-700 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary | 700 20px/28px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-bold-4 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-700 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary | 700 28px/36px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-bold-5 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-700 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary | 700 32px/40px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-font-heading-bold-6 | Used to create visual hierarchy on a page and within a component | font | jh-font-weight-700 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary | 700 36px/44px 'Roboto Flex', Roboto, Helvetica, Arial, sans-serif |
jh-opacity-disabled | Used on interactive elements to denote when they are disabled | opacity | jh-opacity-300 | 0.3 |
jh-shadow-focus | Used to style the focus ring on interactive elements | shadow | 0 0 0 1px jh-color-interactive-focus-inner, 0 0 0 3px jh-color-interactive-focus-outer | 0 0 0 1px rgb(42, 44, 46), 0 0 0 3px rgb(118, 180, 248) |