The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Documentation versions

Other versions
HDS components v7.0.0 is now available! Learn more about the changes in this major release

Tokens

Design tokens are used to share and standardize foundation styles.

Breaking changes
Major breaking changes to the tokens were released in `v7.0` of the components package and `v6.0` of the tokens package.
This list of tokens refers to the latest tokens. If you are using an older version, refer to the documentation for your version.

Border

  • 3px
    CSS var
    Value
    3px
    Carbon modes
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 1000000000px
    CSS var
    Value
    1000000000px
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #656a761a
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #cce3fe
    Carbon modes
  • CSS var
    Value
    #ead2fe
    Carbon modes
  • CSS var
    Value
    #cceeda
    Carbon modes
  • CSS var
    Value
    #fbeabf
    Carbon modes
  • CSS var
    Value
    #fbd4d4
    Carbon modes

Core

  • CSS var
    Value
    #1c345f
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #cce3fe
    Carbon modes
  • CSS var
    Value
    #f2f8ff
    Carbon modes
  • CSS var
    Value
    #42215b
    Carbon modes
  • CSS var
    Value
    #7b00db
    Carbon modes
  • CSS var
    Value
    #911ced
    Carbon modes
  • CSS var
    Value
    #a737ff
    Carbon modes
  • CSS var
    Value
    #ead2fe
    Carbon modes
  • CSS var
    Value
    #f9f2ff
    Carbon modes
  • CSS var
    Value
    #054220
    Carbon modes
  • CSS var
    Value
    #006619
    Carbon modes
  • CSS var
    Value
    #00781e
    Carbon modes
  • CSS var
    Value
    #008a22
    Carbon modes
  • CSS var
    Value
    #cceeda
    Carbon modes
  • CSS var
    Value
    #f2fbf6
    Carbon modes
  • CSS var
    Value
    #542800
    Carbon modes
  • CSS var
    Value
    #803d00
    Carbon modes
  • CSS var
    Value
    #9e4b00
    Carbon modes
  • CSS var
    Value
    #bb5a00
    Carbon modes
  • CSS var
    Value
    #fbeabf
    Carbon modes
  • CSS var
    Value
    #fff9e8
    Carbon modes
  • CSS var
    Value
    #51130a
    Carbon modes
  • CSS var
    Value
    #940004
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #e52228
    Carbon modes
  • CSS var
    Value
    #fbd4d4
    Carbon modes
  • CSS var
    Value
    #fff5f5
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #c2c5cb
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #656a761a
    Carbon modes

Focus

  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #5990ff
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #dd7578
    Carbon modes

Foreground

  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #a737ff
    Carbon modes
  • CSS var
    Value
    #911ced
    Carbon modes
  • CSS var
    Value
    #42215b
    Carbon modes
  • CSS var
    Value
    #008a22
    Carbon modes
  • CSS var
    Value
    #00781e
    Carbon modes
  • CSS var
    Value
    #054220
    Carbon modes
  • CSS var
    Value
    #bb5a00
    Carbon modes
  • CSS var
    Value
    #9e4b00
    Carbon modes
  • CSS var
    Value
    #542800
    Carbon modes
  • CSS var
    Value
    #e52228
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #51130a
    Carbon modes

Page

  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes

Surface

  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #f2f8ff
    Carbon modes
  • CSS var
    Value
    #f9f2ff
    Carbon modes
  • CSS var
    Value
    #f2fbf6
    Carbon modes
  • CSS var
    Value
    #fff9e8
    Carbon modes
  • CSS var
    Value
    #fff5f5
    Carbon modes
  • CSS var
    Value
    inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a
    Carbon modes
  • CSS var
    Value
    0 0 0 1px #656a7633
    Carbon modes
  • CSS var
    Value
    0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d
    Carbon modes
  • CSS var
    Value
    0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633
    Carbon modes
  • CSS var
    Value
    0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633
    Carbon modes
  • CSS var
    Value
    0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640
    Carbon modes
  • CSS var
    Value
    0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559
    Carbon modes

Css

  • CSS var
    Value
    1
    Carbon modes

Elevation

  • CSS var
    Value
    inset 0px 1px 2px 1px #656a761a
    Carbon modes
  • CSS var
    Value
    0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d
    Carbon modes
  • CSS var
    Value
    0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633
    Carbon modes
  • CSS var
    Value
    0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633
    Carbon modes
  • CSS var
    Value
    0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640
    Carbon modes
  • CSS var
    Value
    0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559
    Carbon modes

Focus-ring

  • 3px
    CSS var
    Value
    3px
    Carbon modes
  • 1px
    CSS var
    Value
    1px
    Carbon modes
  • CSS var
    Value
    inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff
    Carbon modes
  • CSS var
    Value
    inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578
    Carbon modes

Accordion

  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 20px
    CSS var
    Value
    20px
    Carbon modes
  • 24px
    CSS var
    Value
    24px
    Carbon modes
  • CSS var
    Value
    -180deg
    Carbon modes
  • CSS var
    Value
    cubic-bezier(0.25, 0.1, 0.25, 1)
    Carbon modes
  • CSS var
    Value
    0.3s
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes

Advanced-table

  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • 1.5px
    CSS var
    Value
    1.5px
    Carbon modes
  • 1px
    CSS var
    Value
    1px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 14px
    CSS var
    Value
    14px
    Carbon modes
  • 24px
    CSS var
    Value
    24px
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • 0px
    CSS var
    Value
    0px
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    1.4286
    Carbon modes
  • CSS var
    Value
    auto
    Carbon modes
  • CSS var
    Value
    auto
    Carbon modes
  • CSS var
    Value
    auto
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • 14px
    CSS var
    Value
    14px
    Carbon modes
  • 22px
    CSS var
    Value
    22px
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 0.5px
    CSS var
    Value
    0.5px
    Carbon modes
  • 3px
    CSS var
    Value
    3px
    Carbon modes
  • -1px
    CSS var
    Value
    -1px
    Carbon modes
  • CSS var
    Value
    #3b3d4500
    Carbon modes
  • CSS var
    Value
    #3b3d4514
    Carbon modes
  • -11px
    CSS var
    Value
    -11px
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #cce3fe80
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • 1px
    CSS var
    Value
    1px
    Carbon modes

Alert

  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #ead2fe
    Carbon modes
  • CSS var
    Value
    #cceeda
    Carbon modes
  • CSS var
    Value
    #fbeabf
    Carbon modes
  • CSS var
    Value
    #fbd4d4
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #f9f2ff
    Carbon modes
  • CSS var
    Value
    #f2fbf6
    Carbon modes
  • CSS var
    Value
    #fff9e8
    Carbon modes
  • CSS var
    Value
    #fff5f5
    Carbon modes
  • CSS var
    Value
    1.4286
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #911ced
    Carbon modes
  • CSS var
    Value
    #00781e
    Carbon modes
  • CSS var
    Value
    #9e4b00
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #911ced
    Carbon modes
  • CSS var
    Value
    #00781e
    Carbon modes
  • CSS var
    Value
    #9e4b00
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 48px
    CSS var
    Value
    48px
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 1px
    CSS var
    Value
    1px
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #ead2fe
    Carbon modes
  • CSS var
    Value
    #cceeda
    Carbon modes
  • CSS var
    Value
    #fbeabf
    Carbon modes
  • CSS var
    Value
    #fbd4d4
    Carbon modes

App-footer

  • CSS var
    Value
    #b2b6bd66
  • CSS var
    Value
    #d5d7db
  • CSS var
    Value
    #b2b6bd
  • CSS var
    Value
    #d5d7db
  • CSS var
    Value
    #efeff1
  • 2px
    CSS var
    Value
    2px
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes

App-header

  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 11px
    CSS var
    Value
    11px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #bcc7fd
    Carbon modes
  • CSS var
    Value
    #0d69f2
    Carbon modes
  • 60px
    CSS var
    Value
    60px
    Carbon modes
  • 3px
    CSS var
    Value
    3px
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • 28px
    CSS var
    Value
    28px
  • 12px
    CSS var
    Value
    12px
    Carbon modes

App-side-nav

  • CSS var
    Value
    #fafafa
    Carbon modes
  • 1px
    CSS var
    Value
    1px
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 8px
    CSS var
    Value
    8px
  • 22px
    CSS var
    Value
    22px
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 36px
    CSS var
    Value
    36px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 9px
    CSS var
    Value
    9px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • 36px
    CSS var
    Value
    36px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
  • 2px
    CSS var
    Value
    2px
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • Aa
    CSS var
    Value
    500
    Carbon modes
  • 8px
    CSS var
    Value
    8px
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • 2px
    CSS var
    Value
    2px
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes

Badge-count

  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 14px
    CSS var
    Value
    14px
    Carbon modes

Badge

  • 20px
    CSS var
    Value
    20px
    Carbon modes
  • 24px
    CSS var
    Value
    24px
  • 32px
    CSS var
    Value
    32px
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 2px
    CSS var
    Value
    2px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
  • 4px
    CSS var
    Value
    4px
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • Aa
    CSS var
    Value
    1rem
    Carbon modes
  • CSS var
    Value
    1.2308
  • CSS var
    Value
    1.2308
  • CSS var
    Value
    1.5
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #7b00db
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #a737ff
    Carbon modes
  • CSS var
    Value
    #006619
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #008a22
    Carbon modes
  • CSS var
    Value
    #803d00
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #bb5a00
    Carbon modes
  • CSS var
    Value
    #940004
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #e52228
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    #ead2fe
    Carbon modes
  • CSS var
    Value
    #a737ff
    Carbon modes
  • CSS var
    Value
    #cceeda
    Carbon modes
  • CSS var
    Value
    #008a22
    Carbon modes
  • CSS var
    Value
    #fbeabf
    Carbon modes
  • CSS var
    Value
    #bb5a00
    Carbon modes
  • CSS var
    Value
    #fbd4d4
    Carbon modes
  • CSS var
    Value
    #e52228
    Carbon modes
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
  • 16px
    CSS var
    Value
    16px
  • 16px
    CSS var
    Value
    16px

Breadcrumb

  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    1.2308
    Carbon modes
  • CSS var
    Value
    #c2c5cb
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633
    Carbon modes

Button

  • 28px
    CSS var
    Value
    28px
    Carbon modes
  • 36px
    CSS var
    Value
    36px
    Carbon modes
  • 48px
    CSS var
    Value
    48px
    Carbon modes
  • 11px
    CSS var
    Value
    11px
    Carbon modes
  • 15px
    CSS var
    Value
    15px
    Carbon modes
  • 19px
    CSS var
    Value
    19px
    Carbon modes
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • 9px
    CSS var
    Value
    9px
    Carbon modes
  • 11px
    CSS var
    Value
    11px
    Carbon modes
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • Aa
    CSS var
    Value
    0.875rem
    Carbon modes
  • Aa
    CSS var
    Value
    1rem
    Carbon modes
  • CSS var
    Value
    0.9286
    Carbon modes
  • CSS var
    Value
    1.1429
    Carbon modes
  • CSS var
    Value
    1.5
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #fff5f5
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #fff5f5
    Carbon modes
  • CSS var
    Value
    #940004
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • 1px
    CSS var
    Value
    1px
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #940004
    Carbon modes
  • CSS var
    Value
    #940004
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 24px
    CSS var
    Value
    24px
    Carbon modes

Card

  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes

Code-block

  • CSS var
    Value
    #2d8eff
    Carbon modes
  • CSS var
    Value
    #32fff7
    Carbon modes
  • CSS var
    Value
    #86ff13
    Carbon modes
  • CSS var
    Value
    #ffa800
    Carbon modes
  • CSS var
    Value
    #c76cff
    Carbon modes
  • CSS var
    Value
    #ff3b20
    Carbon modes
  • CSS var
    Value
    #ffeb3b
    Carbon modes
  • CSS var
    Value
    #efeff1
    Carbon modes
  • CSS var
    Value
    #d5d7db
    Carbon modes
  • CSS var
    Value
    #878a8f
    Carbon modes
  • CSS var
    Value
    #2b89ff
    Carbon modes
  • CSS var
    Value
    #0d0e12
  • CSS var
    Value
    #0d0e12
    Carbon modes
  • CSS var
    Value
    #0d0e1240
    Carbon modes
  • CSS var
    Value
    #15181e
    Carbon modes
  • CSS var
    Value
    #86ff13
  • CSS var
    Value
    rgba(178, 182, 189, 0.4)
    Carbon modes
  • CSS var
    Value
    rgba(178, 182, 189, 0.2)
    Carbon modes
  • CSS var
    Value
    #9bc7fd
    Carbon modes
  • CSS var
    Value
    #0d69f2
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    #15181e
    Carbon modes
  • CSS var
    Value
    #0d0e12
    Carbon modes
  • CSS var
    Value
    #2b303c
    Carbon modes
  • CSS var
    Value
    rgba(0, 74, 222, 0.2)
    Carbon modes
  • CSS var
    Value
    #1555d4
    Carbon modes

Product

  • CSS var
    Value
    #000000
    Carbon modes
  • CSS var
    Value
    #f24c53
  • CSS var
    Value
    #cf2d32
  • CSS var
    Value
    #ffecec
  • CSS var
    Value
    #fbd7d8
  • CSS var
    Value
    #f97076
  • CSS var
    Value
    #db363b
  • CSS var
    Value
    #fffafa
  • CSS var
    Value
    #ffecec
  • CSS var
    Value
    #e03875
  • CSS var
    Value
    #d01c5b
  • CSS var
    Value
    #ffe9f1
  • CSS var
    Value
    #ffcede
  • CSS var
    Value
    #ff99be
  • CSS var
    Value
    #da306e
  • CSS var
    Value
    #fff9fb
  • CSS var
    Value
    #ffe9f1
  • CSS var
    Value
    #000000
    Carbon modes
  • CSS var
    Value
    #06d092
  • CSS var
    Value
    #008661
  • CSS var
    Value
    #d3fdeb
  • CSS var
    Value
    #bff3dd
  • CSS var
    Value
    #bff3dd
  • CSS var
    Value
    #60dea9
  • CSS var
    Value
    #f3fff9
  • CSS var
    Value
    #d3fdeb
  • CSS var
    Value
    #02a8ef
  • CSS var
    Value
    #007eb4
  • CSS var
    Value
    #d4f2ff
  • CSS var
    Value
    #b4e4ff
  • CSS var
    Value
    #b4e4ff
  • CSS var
    Value
    #63d0ff
  • CSS var
    Value
    #f3fcff
  • CSS var
    Value
    #d4f2ff
  • CSS var
    Value
    #7b42bc
    Carbon modes
  • CSS var
    Value
    #a067da
  • CSS var
    Value
    #773cb4
  • CSS var
    Value
    #f4ecff
  • CSS var
    Value
    #ebdbfc
  • CSS var
    Value
    #bb8deb
  • CSS var
    Value
    #844fba
  • CSS var
    Value
    #fcfaff
  • CSS var
    Value
    #f4ecff
  • CSS var
    Value
    #1868f2
  • CSS var
    Value
    #1c61d8
  • CSS var
    Value
    #d6ebff
  • CSS var
    Value
    #c7dbfc
  • CSS var
    Value
    #639cff
  • CSS var
    Value
    #2e71e5
  • CSS var
    Value
    #f4faff
  • CSS var
    Value
    #d6ebff
  • CSS var
    Value
    #ffcf25
  • CSS var
    Value
    #000000
    Carbon modes
  • CSS var
    Value
    #9a6f00
  • CSS var
    Value
    #fff9cf
  • CSS var
    Value
    #feec7b
  • CSS var
    Value
    #feec7b
  • CSS var
    Value
    #ffe543
  • CSS var
    Value
    #fffdf2
  • CSS var
    Value
    #fff9cf
  • CSS var
    Value
    #ffcf25
  • CSS var
    Value
    #000000
    Carbon modes
  • CSS var
    Value
    #9a6f00
  • CSS var
    Value
    #fff9cf
  • CSS var
    Value
    #feec7b
  • CSS var
    Value
    #feec7b
  • CSS var
    Value
    #ffe543
  • CSS var
    Value
    #fffdf2
  • CSS var
    Value
    #fff9cf
  • CSS var
    Value
    #ffcf25
  • CSS var
    Value
    #000000
    Carbon modes
  • CSS var
    Value
    #9a6f00
  • CSS var
    Value
    #fff9cf
  • CSS var
    Value
    #feec7b
  • CSS var
    Value
    #feec7b
  • CSS var
    Value
    #ffe543
  • CSS var
    Value
    #fffdf2
  • CSS var
    Value
    #fff9cf
  • CSS var
    Value
    #14c6cb
  • CSS var
    Value
    #008196
  • CSS var
    Value
    #e0fcff
  • CSS var
    Value
    #cbf1f3
  • CSS var
    Value
    #cbf1f3
  • CSS var
    Value
    #62d4dc
  • CSS var
    Value
    #f6feff
  • CSS var
    Value
    #e0fcff

Copy

  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes

Dialog-primitive

  • 24px
    CSS var
    Value
    24px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    1.3846
    Carbon modes
  • Aa
    CSS var
    Value
    600
    Carbon modes

Dismiss-button

  • 24px
    CSS var
    Value
    24px
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    rgba(222, 223, 227, 0.4)
    Carbon modes
  • CSS var
    Value
    rgba(222, 223, 227, 0.4)
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes

Dropdown

  • CSS var
    Value
    0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #e52228
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #940004
    Carbon modes
  • CSS var
    Value
    #940004
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 6px
    CSS var
    Value
    6px
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • 9px
    CSS var
    Value
    9px
    Carbon modes
  • 2px
    CSS var
    Value
    2px
    Carbon modes
  • 1px
    CSS var
    Value
    1px
    Carbon modes

Filter-bar

  • 28px
    CSS var
    Value
    28px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #1c345f
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #c2c5cb
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 1px
    CSS var
    Value
    1px
    Carbon modes

Form

  • CSS var
    Value
    #656a76
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    1.3846
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • Deprecated
    CSS var
    hds-form-label-color
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • Aa
    CSS var
    Value
    0.875rem
    Carbon modes
  • Aa
    CSS var
    Value
    600
    Carbon modes
  • CSS var
    Value
    1.4286
    Carbon modes
  • Aa
    CSS var
    Value
    0.875rem
    Carbon modes
  • CSS var
    Value
    1.4286
    Carbon modes
  • Deprecated
    CSS var
    hds-form-legend-color
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • Aa
    CSS var
    Value
    0.875rem
    Carbon modes
  • Aa
    CSS var
    Value
    600
    Carbon modes
  • CSS var
    Value
    1.4286
    Carbon modes
  • Deprecated
    CSS var
    hds-form-helper-text-color
  • CSS var
    Value
    #656a76
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    1.3846
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    1.3846
    Carbon modes
  • Deprecated
    CSS var
    hds-form-indicator-optional-color
  • CSS var
    Value
    #656a76
    Carbon modes
  • Deprecated
    CSS var
    hds-form-error-color
  • CSS var
    Value
    #c00005
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    1.3846
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • 14px
    CSS var
    Value
    14px
  • 24px
    CSS var
    Value
    24px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 3px
    CSS var
    Value
    3px
    Carbon modes
  • 1px
    CSS var
    Value
    1px
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' fill='%23FFF' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' /%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' fill='%23FFF' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' /%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' fill='%238C909C' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' /%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' fill='%238C909C' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' /%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #940004
    Carbon modes
  • CSS var
    Value
    #656a761a
    Carbon modes
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • 1px
    CSS var
    Value
    1px
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #8c909c
    Carbon modes
  • 7px
    CSS var
    Value
    7px
    Carbon modes
  • 7px
    CSS var
    Value
    7px
    Carbon modes
  • 36px
    CSS var
    Value
    36px
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%233b3d45' viewBox='0 0 16 16'%3E%3Cg %3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%238c909c' viewBox='0 0 16 16'%3E%3Cg %3E%3Cpath d='M4.24 5.8a.75.75 0 001.06-.04l1.95-2.1v6.59a.75.75 0 001.5 0V3.66l1.95 2.1a.75.75 0 101.1-1.02l-3.25-3.5a.75.75 0 00-1.101.001L4.2 4.74a.75.75 0 00.04 1.06z'/%3E%3Cpath d='M1.75 9a.75.75 0 01.75.75v3c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75v-3a.75.75 0 011.5 0v3A2.25 2.25 0 0112.75 15h-9.5A2.25 2.25 0 011 12.75v-3A.75.75 0 011.75 9z'/%3E%3C/g%3E%3C/svg%3E")
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • 36px
    CSS var
    Value
    36px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • 1px
    CSS var
    Value
    1px
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 24px
    CSS var
    Value
    24px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #f2f8ff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #cce3fe
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • Aa
    CSS var
    Value
    1.125rem
    Carbon modes
  • Aa
    CSS var
    Value
    700
    Carbon modes
  • CSS var
    Value
    1.3333
    Carbon modes
  • CSS var
    Value
    0.2s
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 1px
    CSS var
    Value
    1px
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg fill='%23ffffff' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='2.5' /%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg fill='%238C909C' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='2.5' /%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 7px
    CSS var
    Value
    7px
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23656A76' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' /%3E%3C/svg%3E")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%238C909C' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M8.55 2.24a.75.75 0 0 0-1.1 0L4.2 5.74a.75.75 0 1 0 1.1 1.02L8 3.852l2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5Zm-1.1 11.52a.75.75 0 0 0 1.1 0l3.25-3.5a.75.75 0 1 0-1.1-1.02L8 12.148 5.3 9.24a.75.75 0 0 0-1.1 1.02l3.25 3.5Z' /%3E%3C/svg%3E")
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • 11px
    CSS var
    Value
    11px
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%231060ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.78 4.28a.75.75 0 00-1.06-1.06l-7.97 7.97-3.47-3.47a.75.75 0 00-1.06 1.06l4 4a.75.75 0 001.06 0l8.5-8.5z' /%3E%3C/svg%3E")
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • 500px
    CSS var
    Value
    500px
    Carbon modes
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • 3px
    CSS var
    Value
    3px
    Carbon modes
  • 2px
    CSS var
    Value
    2px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 3px
    CSS var
    Value
    3px
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 7px
    CSS var
    Value
    7px
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.5.75a.75.75 0 00-1.5 0V1H6V.75a.75.75 0 00-1.5 0V1H3.25A2.25 2.25 0 001 3.25v9.5A2.25 2.25 0 003.25 15h9.5A2.25 2.25 0 0015 12.75v-9.5A2.25 2.25 0 0012.75 1H11.5V.75zm-7 2.5V2.5H3.25a.75.75 0 00-.75.75V5h11V3.25a.75.75 0 00-.75-.75H11.5v.75a.75.75 0 01-1.5 0V2.5H6v.75a.75.75 0 01-1.5 0zm9 3.25h-11v6.25c0 .414.336.75.75.75h9.5a.75.75 0 00.75-.75V6.5z' fill-rule='evenodd' clip-rule='evenodd' fill='%233B3D45'/%3e%3c/svg%3e")
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e")
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76' %3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e")
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • 7px
    CSS var
    Value
    7px
    Carbon modes
  • 32px
    CSS var
    Value
    32px
  • 16px
    CSS var
    Value
    16px
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • 1px
    CSS var
    Value
    1px
  • 12px
    CSS var
    Value
    12px
  • 2px
    CSS var
    Value
    2px
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' fill='%23FFF' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' /%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' fill='%238C909C' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' /%3e%3c/svg%3e")
    Carbon modes
  • CSS var
    Value
    0.2s
  • CSS var
    Value
    cubic-bezier(0.68, -0.2, 0.265, 1.15)
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes

Icon-tile

  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes

Link

  • 0.25em
    CSS var
    Value
    0.25em
    Carbon modes
  • 2px
    CSS var
    Value
    2px
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • 0.375rem
    CSS var
    Value
    0.375rem
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • Aa
    CSS var
    Value
    0.875rem
  • Aa
    CSS var
    Value
    1rem
  • CSS var
    Value
    1.231
    Carbon modes
  • CSS var
    Value
    1.143
    Carbon modes
  • CSS var
    Value
    1.5
    Carbon modes
  • 0.75rem
    CSS var
    Value
    0.75rem
    Carbon modes
  • 1rem
    CSS var
    Value
    1rem
  • 1.5rem
    CSS var
    Value
    1.5rem
    Carbon modes

Modal

  • CSS var
    Value
    #9e4b00
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes
  • CSS var
    Value
    #fff9e8
    Carbon modes
  • CSS var
    Value
    #fff5f5
    Carbon modes
  • CSS var
    Value
    #fbeabf
    Carbon modes
  • CSS var
    Value
    #fbd4d4
    Carbon modes
  • CSS var
    Value
    #9e4b00
    Carbon modes
  • CSS var
    Value
    #c00005
    Carbon modes

Pagination

  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • 36px
    CSS var
    Value
    36px
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • 6px
    CSS var
    Value
    6px
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • Aa
    CSS var
    Value
    500
    Carbon modes
  • 2px
    CSS var
    Value
    2px
    Carbon modes
  • 6px
    CSS var
    Value
    6px
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • 8px
    CSS var
    Value
    8px
  • 20px
    CSS var
    Value
    20px

Reveal

  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes

Rich-tooltip

  • 280px
    CSS var
    Value
    280px
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • 20px
    CSS var
    Value
    20px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • 1em
    CSS var
    Value
    1em
    Carbon modes

Segmented-group

  • 0px
    CSS var
    Value
    0px
    Carbon modes
  • -1px
    CSS var
    Value
    -1px
    Carbon modes

Stepper

  • Aa
    CSS var
    Value
    600
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • 1px
    CSS var
    Value
    1px
    Carbon modes
  • 11px
    CSS var
    Value
    11px
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • Aa
    CSS var
    Value
    600
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • -4px
    CSS var
    Value
    -4px
    Carbon modes
  • 4px
    CSS var
    Value
    4px
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • 24px
    CSS var
    Value
    24px
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • CSS var
    Value
    #c2c5cb
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #008a22
    Carbon modes
  • CSS var
    Value
    #00781e
    Carbon modes
  • CSS var
    Value
    #006619
    Carbon modes
  • 12px
    CSS var
    Value
    12px

Table

  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • 1px
    CSS var
    Value
    1px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 14px
    CSS var
    Value
    14px
    Carbon modes
  • CSS var
    Value
    #656a76
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • 0px
    CSS var
    Value
    0px
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    1.4286
    Carbon modes
  • CSS var
    Value
    auto
    Carbon modes
  • CSS var
    Value
    auto
    Carbon modes
  • CSS var
    Value
    auto
    Carbon modes
  • 16px
    CSS var
    Value
    16px
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • 14px
    CSS var
    Value
    14px
    Carbon modes
  • 22px
    CSS var
    Value
    22px
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #fafafa
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #656a7633
    Carbon modes
  • 0.5px
    CSS var
    Value
    0.5px
    Carbon modes

Tabs

  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • CSS var
    Value
    rgba(0, 0, 0, 0)
    Carbon modes
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • 36px
    CSS var
    Value
    36px
    Carbon modes
  • 48px
    CSS var
    Value
    48px
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • 6px
    CSS var
    Value
    6px
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 20px
    CSS var
    Value
    20px
    Carbon modes
  • 0px
    CSS var
    Value
    0px
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • 3px
    CSS var
    Value
    3px
    Carbon modes
  • CSS var
    Value
    cubic-bezier(0.5, 1, 0.89, 1)
  • CSS var
    Value
    0.6s
  • 1px
    CSS var
    Value
    1px

Tag

  • 166px
    CSS var
    Value
    166px
    Carbon modes
  • 3px
    CSS var
    Value
    3px
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • 10px
    CSS var
    Value
    10px
    Carbon modes
  • 10px
    CSS var
    Value
    10px
    Carbon modes
  • 50px
    CSS var
    Value
    50px
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • Aa
    CSS var
    Value
    500
    Carbon modes
  • CSS var
    Value
    1.2308
    Carbon modes
  • 160px
    CSS var
    Value
    160px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
  • 6px
    CSS var
    Value
    6px
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #1060ff
    Carbon modes
  • CSS var
    Value
    #0c56e9
    Carbon modes
  • CSS var
    Value
    #0046d1
    Carbon modes
  • CSS var
    Value
    #0c0c0e
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d4566
    Carbon modes
  • CSS var
    Value
    #ffffff
    Carbon modes
  • CSS var
    Value
    #f1f2f3
    Carbon modes
  • CSS var
    Value
    #dedfe3
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes
  • CSS var
    Value
    #3b3d45
    Carbon modes

Tooltip

  • 280px
    CSS var
    Value
    280px
    Carbon modes
  • 12px
    CSS var
    Value
    12px
    Carbon modes
  • 8px
    CSS var
    Value
    8px
    Carbon modes
  • 5px
    CSS var
    Value
    5px
    Carbon modes
  • CSS var
    Value
    path('M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z')
    Carbon modes
  • 7px
    CSS var
    Value
    7px
    Carbon modes
  • 16px
    CSS var
    Value
    16px
    Carbon modes
  • CSS var
    Value
    cubic-bezier(0.54, 1.5, 0.38, 1.11)

Typography

  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    ui-monospace, Menlo, Consolas, monospace
    Carbon modes
  • Aa
    CSS var
    Value
    400
    Carbon modes
  • Aa
    CSS var
    Value
    500
    Carbon modes
  • Aa
    CSS var
    Value
    600
    Carbon modes
  • Aa
    CSS var
    Value
    700
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    1.875rem
    Carbon modes
  • CSS var
    Value
    1.2666
    Carbon modes
  • CSS var
    Value
    -0.5px
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    1.5rem
    Carbon modes
  • CSS var
    Value
    1.3333
    Carbon modes
  • CSS var
    Value
    0px
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    1.125rem
    Carbon modes
  • CSS var
    Value
    1.3333
    Carbon modes
  • CSS var
    Value
    -0.5px
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    1rem
    Carbon modes
  • CSS var
    Value
    1.5
    Carbon modes
  • CSS var
    Value
    -0.5px
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    1.3846
    Carbon modes
  • CSS var
    Value
    0px
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    1rem
    Carbon modes
  • CSS var
    Value
    1.5
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    0.875rem
    Carbon modes
  • CSS var
    Value
    1.4286
    Carbon modes
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
  • CSS var
    Value
    1.3846
    Carbon modes
  • Aa
    CSS var
    Value
    ui-monospace, Menlo, Consolas, monospace
    Carbon modes
  • Aa
    CSS var
    Value
    1rem
    Carbon modes
  • CSS var
    Value
    1.25
    Carbon modes
  • Aa
    CSS var
    Value
    ui-monospace, Menlo, Consolas, monospace
    Carbon modes
  • Aa
    CSS var
    Value
    0.875rem
    Carbon modes
  • CSS var
    Value
    1.125
    Carbon modes
  • Aa
    CSS var
    Value
    ui-monospace, Menlo, Consolas, monospace
    Carbon modes
  • Aa
    CSS var
    Value
    0.8125rem
    Carbon modes
  • CSS var
    Value
    1.23
    Carbon modes

A note about versions

The tokens used here refer to v7.0 or above of the components package, and v6.0 or above of the tokens package. If you are using an older version, refer to the documentation for your version.

How to use tokens

Use tokens in styles

Use the design tokens in your style declarations as CSS custom properties.

.your-selector {
  color: var(--hds-foreground-color-highlight);
  font-size: var(--hds-typography-body-300-font-size);
  font-family: var(--hds-typography-body-300-font-family);
  line-height: var(--hds-typography-body-300-line-height);
  background: var(--hds-surface-color-highlight);
  border: 1px solid var(--hds-border-color-highlight);
}

Use tokens in components

  1. Ensure you’ve imported the relevant CSS file.
// for product applications
@import "~@hashicorp/design-system-tokens/dist/products/css/tokens.css";
// for hashicorp developer platform
@import "~@hashicorp/design-system-tokens/dist/devdot/css/tokens.css";
  1. If a component accepts a color parameter you can use a design token too.
<Hds::Icon @name="alert-circle" @color="var(--hds-foreground-color-success)" />