Skip to main content

Light theme

Color

  • jh-color-container-page
    Used on page-level containers that make up large portions of the overall background
    Value
    jh-color-gray-100
  • jh-color-container-primary-enabled
    Used on the major containers throughout the user interface such as cards and dialogs
    Value
    jh-color-gray-0
  • jh-color-container-primary-hover
    Hover color for primary container
    Value
    jh-color-gray-50
  • jh-color-container-primary-active
    Active color for primary container
    Value
    jh-color-gray-100
  • jh-color-container-primary-selected
    Selected color for primary container
    Value
    jh-color-azure-50
  • jh-color-container-secondary-enabled
    Used on containers and sections that will sit on top of or within a primary container
    Value
    jh-color-gray-50
  • jh-color-container-secondary-hover
    Hover color for secondary container
    Value
    jh-color-gray-0
  • jh-color-container-secondary-active
    Active color for secondary container
    Value
    jh-color-gray-100
  • jh-color-container-secondary-selected
    Selected color for secondary container
    Value
    jh-color-azure-100
  • jh-color-container-neutral-enabled
    Used on containers that have a neutral context
    Value
    jh-color-gray-100
  • jh-color-container-neutral-hover
    Hover color for neutral container
    Value
    jh-color-gray-150
  • jh-color-container-neutral-active
    Active color for neutral container
    Value
    jh-color-gray-200
  • jh-color-container-brand-enabled
    Used on containers that have a branded context
    Value
    jh-color-azure-100
  • jh-color-container-brand-hover
    Hover color for branded container
    Value
    jh-color-azure-150
  • jh-color-container-brand-active
    Active color for branded container
    Value
    jh-color-azure-200
  • jh-color-container-positive-enabled
    Used on containers that have a positive context
    Value
    jh-color-green-100
  • jh-color-container-positive-hover
    Hover color for positive container
    Value
    jh-color-green-150
  • jh-color-container-positive-active
    Active color for positive container
    Value
    jh-color-green-200
  • jh-color-container-negative-enabled
    Used on containers that have a negative context
    Value
    jh-color-red-100
  • jh-color-container-negative-hover
    Hover color for negative container
    Value
    jh-color-red-150
  • jh-color-container-negative-active
    Active color for negative container
    Value
    jh-color-red-200
  • jh-color-overlay
    Used to distinguish the modal layer from the layer underneath
    Value
    rgba(42, 44, 46, jh-opacity-600)
  • jh-color-control-enabled
    Used on the containers of interactive elements such as slider and switch tracks
    Value
    jh-color-gray-150
  • jh-color-control-hover
    Hover color for control
    Value
    jh-color-gray-200
  • jh-color-control-active
    Active color for control
    Value
    jh-color-gray-250
  • jh-color-divider-primary
    Used on border elements that require more visual emphasis such as input fields
    Value
    jh-color-gray-500
  • jh-color-divider-secondary
    Used on subtle border elements such as dividers and table borders
    Value
    jh-color-gray-100
  • jh-color-divider-inverse
    Used on backgrounds that don't provide sufficient contrast with primary or secondary dividers
    Value
    jh-color-gray-0
  • jh-color-brand-primary
    Used to emphasize areas of importance such as feature areas or primary calls-to-action
    Value
    jh-color-azure-950
  • jh-color-brand-secondary
    Used when another layer of visual hierarchy is needed within feature areas or on secondary calls-to-action
    Value
    jh-color-azure-600
  • jh-color-brand-tertiary
    Used to add thoughtful branded touches to components such as accent bars
    Value
    jh-color-cyan-200
  • jh-color-brand-gradient-light
    Used to accent branded elements with content such as ads or other calls-to-action
    Value
    linear-gradient(135deg, jh-color-cyan-50 0%, jh-color-cyan-200 100%)
  • jh-color-brand-gradient-medium
    Used to accents branded elements without content
    Value
    linear-gradient(135deg, jh-color-cyan-200 0%, jh-color-azure-600 100%)
  • jh-color-brand-gradient-dark
    Used to accent branded elements with content such as ads or other calls-to-action
    Value
    linear-gradient(135deg, jh-color-azure-600 0%, jh-color-azure-950 100%)
  • jh-color-brand-on-primary
    Used for content that sits on the primary brand color
    Value
    jh-color-gray-0
  • jh-color-brand-on-secondary
    Used for content that sits on the secondary brand color
    Value
    jh-color-gray-0
  • jh-color-brand-on-tertiary
    Used for content that sits on the tertiary brand color
    Value
    jh-color-azure-950
  • jh-color-brand-on-gradient-light
    Used for content that sits on the light brand gradient
    Value
    jh-color-azure-950
  • jh-color-brand-on-gradient-dark
    Used for content that sits on the dark brand gradient
    Value
    jh-color-gray-0
  • jh-color-content-brand-enabled
    Used for content that needs to have a strong branded presence
    Value
    jh-color-azure-600
  • jh-color-content-brand-hover
    Hover color for branded content
    Value
    jh-color-azure-650
  • jh-color-content-brand-active
    Active color for branded content
    Value
    jh-color-azure-700
  • 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
    Value
    jh-color-gray-900
  • jh-color-content-primary-hover
    Hover color for primary content
    Value
    jh-color-gray-950
  • jh-color-content-primary-active
    Active color for primary content
    Value
    jh-color-gray-1000
  • jh-color-content-secondary-enabled
    Used for supportive content such as labels, subtitles, and placeholder text
    Value
    jh-color-gray-600
  • jh-color-content-secondary-hover
    Hover color for secondary content
    Value
    jh-color-gray-650
  • jh-color-content-secondary-active
    Active color for secondary content
    Value
    jh-color-gray-700
  • jh-color-content-positive-enabled
    Used for content that conveys a positive response such as a deposit
    Value
    jh-color-green-600
  • jh-color-content-positive-hover
    Hover color for positive content
    Value
    jh-color-green-650
  • jh-color-content-positive-active
    Active color for positive content
    Value
    jh-color-green-700
  • jh-color-content-negative-enabled
    Used for content that conveys a negative response such as an error message
    Value
    jh-color-red-600
  • jh-color-content-negative-hover
    Hover color for negative content
    Value
    jh-color-red-650
  • jh-color-content-negative-active
    Active color for negative content
    Value
    jh-color-red-700
  • jh-color-content-inverse-enabled
    Used on backgrounds that don't provide sufficient contrast with other content colors
    Value
    jh-color-gray-0
  • jh-color-content-inverse-hover
    Hover color for inverse content
    Value
    jh-color-gray-50
  • jh-color-content-inverse-active
    Active color for inverse content
    Value
    jh-color-gray-100
  • jh-color-content-on-brand-enabled
    Used for content that sits on the content brand color
    Value
    jh-color-gray-0
  • jh-color-content-on-brand-hover
    Used for content that sits on the content brand hover color
    Value
    jh-color-gray-0
  • jh-color-content-on-brand-active
    Used for content that sits on the content brand active color
    Value
    jh-color-gray-0
  • jh-color-content-on-primary-enabled
    Used for content that sits on the content primary color
    Value
    jh-color-gray-0
  • jh-color-content-on-primary-hover
    Used for content that sits on the content primary hover color
    Value
    jh-color-gray-0
  • jh-color-content-on-primary-active
    Used for content that sits on the content primary active color
    Value
    jh-color-gray-0
  • jh-color-content-on-secondary-enabled
    Used for content that sits on the content secondary color
    Value
    jh-color-gray-0
  • jh-color-content-on-secondary-hover
    Used for content that sits on the content secondary hover color
    Value
    jh-color-gray-0
  • jh-color-content-on-secondary-active
    Used for content that sits on the content secondary active color
    Value
    jh-color-gray-0
  • jh-color-content-on-positive-enabled
    Used for content that sits on the content positive color
    Value
    jh-color-gray-0
  • jh-color-content-on-positive-hover
    Used for content that sits on the content positive hover color
    Value
    jh-color-gray-0
  • jh-color-content-on-positive-active
    Used for content that sits on the content positive active color
    Value
    jh-color-gray-0
  • jh-color-content-on-negative-enabled
    Used for content that sits on the content negative color
    Value
    jh-color-gray-0
  • jh-color-content-on-negative-hover
    Used for content that sits on the content negative hover color
    Value
    jh-color-gray-0
  • jh-color-content-on-negative-active
    Used for content that sits on the content negative active color
    Value
    jh-color-gray-0
  • jh-color-content-on-inverse-enabled
    Used for content that sits on the content inverse color
    Value
    jh-color-gray-1000
  • jh-color-content-on-inverse-hover
    Used for content that sits on the content inverse hover color
    Value
    jh-color-gray-1000
  • jh-color-content-on-inverse-active
    Used for content that sits on the content inverse active color
    Value
    jh-color-gray-1000
  • jh-color-interactive-focus-outer
    Used for the outermost part of the focus ring
    Value
    jh-color-azure-600
  • jh-color-interactive-focus-inner
    Used to provide contrast against the outer focus color
    Value
    jh-color-gray-0
  • jh-color-interactive-highlight
    Used for highlighting content on the page
    Value
    jh-color-cyan-100
  • jh-color-interactive-visited
    Used for visited links
    Value
    jh-color-violet-600

Font

  • jh-font-family-primary
    Used to set the default typeface for the system
    Value
    jh-font-family-sans
  • jh-font-micro-regular
    Used for fine-print text and small snippets of text with limited space within a component
    Value
    jh-font-weight-400 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
  • jh-font-micro-medium
    Used for fine-print text and small snippets of text with limited space within a component
    Value
    jh-font-weight-500 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
  • jh-font-micro-bold
    Used for fine-print text and small snippets of text with limited space within a component
    Value
    jh-font-weight-700 jh-font-size-250/jh-font-line-height-300 jh-font-family-primary
  • jh-font-helper-regular
    Used for secondary or explanatory text as well as field labels
    Value
    jh-font-weight-400 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
  • jh-font-helper-medium
    Used for secondary or explanatory text as well as field labels
    Value
    jh-font-weight-500 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
  • jh-font-helper-bold
    Used for secondary or explanatory text as well as field labels.
    Value
    jh-font-weight-700 jh-font-size-300/jh-font-line-height-400 jh-font-family-primary
  • jh-font-body-regular-1
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-body-regular-2
    Used for intro or leading blocks of text
    Value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-body-medium-1
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-body-medium-2
    Used for intro or leading blocks of text
    Value
    jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-body-bold-1
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-body-bold-2
    Used for intro or leading blocks of text
    Value
    jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-body-regular-italic-1
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-400 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-body-regular-italic-2
    Used for intro or leading blocks of text
    Value
    jh-font-weight-400 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-body-medium-italic-1
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-500 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-body-medium-italic-2
    Used for intro or leading blocks of text
    Value
    jh-font-weight-500 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-body-bold-italic-1
    Used for blocks of text and most content displayed within components
    Value
    jh-font-weight-700 italic jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-body-bold-italic-2
    Used for intro or leading blocks of text
    Value
    jh-font-weight-700 italic jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-code-regular-1
    Used for code references in standard blocks of text
    Value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-mono
  • jh-font-code-regular-2
    Used for code references in intro or leading blocks of text
    Value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-mono
  • jh-font-display-light-1
    Used to create visual emphasis through size without being misconstrued as a heading
    Value
    jh-font-weight-300 jh-font-size-1050/jh-font-line-height-1300 jh-font-family-primary
  • jh-font-display-light-2
    Used to create visual emphasis through size without being misconstrued as a heading
    Value
    jh-font-weight-300 jh-font-size-1350/jh-font-line-height-1600 jh-font-family-primary
  • jh-font-display-light-3
    Used to create visual emphasis through size without being misconstrued as a heading
    Value
    jh-font-weight-300 jh-font-size-2300/jh-font-line-height-2700 jh-font-family-primary
  • jh-font-heading-regular-1
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-400 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-heading-regular-2
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-400 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-heading-regular-3
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-400 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
  • jh-font-heading-regular-4
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-400 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
  • jh-font-heading-regular-5
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-400 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
  • jh-font-heading-regular-6
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-400 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
  • jh-font-heading-medium-1
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-500 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-heading-medium-2
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-500 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-heading-medium-3
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-500 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
  • jh-font-heading-medium-4
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-500 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
  • jh-font-heading-medium-5
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-500 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
  • jh-font-heading-medium-6
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-500 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary
  • jh-font-heading-bold-1
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-700 jh-font-size-350/jh-font-line-height-500 jh-font-family-primary
  • jh-font-heading-bold-2
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-700 jh-font-size-400/jh-font-line-height-600 jh-font-family-primary
  • jh-font-heading-bold-3
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-700 jh-font-size-500/jh-font-line-height-700 jh-font-family-primary
  • jh-font-heading-bold-4
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-700 jh-font-size-700/jh-font-line-height-900 jh-font-family-primary
  • jh-font-heading-bold-5
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-700 jh-font-size-800/jh-font-line-height-1000 jh-font-family-primary
  • jh-font-heading-bold-6
    Used to create visual hierarchy on a page and within a component
    Value
    jh-font-weight-700 jh-font-size-900/jh-font-line-height-1100 jh-font-family-primary

Opacity

  • jh-opacity-disabled
    Used on interactive elements to denote when they are disabled
    Value
    jh-opacity-300

Shadow

  • jh-shadow-focus
    Used to style the focus ring on interactive elements
    Value
    0 0 0 1px jh-color-interactive-focus-inner, 0 0 0 3px jh-color-interactive-focus-outer