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

Tokens

Design tokens are used to share and standardize foundation styles.

Border

  • CSS var
    Value
    3px
  • CSS var
    Value
    5px
  • CSS var
    Value
    6px
  • CSS var
    Value
    8px

Color

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

Elevation

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

Surface

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

Focus-ring

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

App-header

  • CSS var
    Value
    60px
  • CSS var
    Value
    36px
  • CSS var
    Value
    28px

App-side-nav

  • CSS var
    Value
    1px
  • CSS var
    Value
    var(--token-color-palette-neutral-200)
  • CSS var
    Value
    16px
  • CSS var
    Value
    16px
  • CSS var
    Value
    8px
  • CSS var
    Value
    22px
  • CSS var
    Value
    5px
  • CSS var
    Value
    4px
  • CSS var
    Value
    48px
  • CSS var
    Value
    32px
  • CSS var
    Value
    8px
  • CSS var
    Value
    24px
  • CSS var
    Value
    36px
  • CSS var
    Value
    8px
  • CSS var
    Value
    4px
  • CSS var
    Value
    2px
  • CSS var
    Value
    8px
  • CSS var
    Value
    5px
  • CSS var
    Value
    var(--token-color-foreground-primary)
  • CSS var
    Value
    var(--token-color-foreground-primary)
  • CSS var
    Value
    var(--token-color-foreground-faint)
  • CSS var
    Value
    var(--token-color-surface-faint)
  • CSS var
    Value
    var(--token-color-surface-interactive-hover)
  • CSS var
    Value
    var(--token-color-palette-neutral-300)

Form

  • CSS var
    Value
    #0c0c0e
  • CSS var
    Value
    #0c0c0e
  • CSS var
    Value
    #656a76
  • CSS var
    Value
    #656a76
  • CSS var
    Value
    #c00005
  • CSS var
    Value
    14px
  • CSS var
    Value
    16px
  • CSS var
    Value
    3px
  • CSS var
    Value
    1px
  • CSS var
    Value
    12px
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' 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' fill='%23FFF'/%3e%3c/svg%3e")
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' 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' fill='%23FFF'/%3e%3c/svg%3e")
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' 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' fill='%238C909C'/%3e%3c/svg%3e")
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' 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' fill='%238C909C'/%3e%3c/svg%3e")
  • CSS var
    Value
    #0c0c0e
  • CSS var
    Value
    #656a76
  • CSS var
    Value
    #ffffff
  • CSS var
    Value
    #f1f2f3
  • CSS var
    Value
    #8c909c
  • CSS var
    Value
    #656a76
  • CSS var
    Value
    #ffffff
  • CSS var
    Value
    #1060ff
  • CSS var
    Value
    #0c56e9
  • CSS var
    Value
    #0c56e9
  • CSS var
    Value
    #0046d1
  • CSS var
    Value
    #c00005
  • CSS var
    Value
    #940004
  • CSS var
    Value
    #3b3d45
  • CSS var
    Value
    #f1f2f3
  • CSS var
    Value
    #656a761a
  • CSS var
    Value
    #8c909c
  • CSS var
    Value
    #fafafa
  • CSS var
    Value
    #656a7633
  • CSS var
    Value
    7px
  • CSS var
    Value
    5px
  • CSS var
    Value
    1px
  • CSS var
    Value
    16px
  • CSS var
    Value
    1px
  • CSS var
    Value
    12px
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%23ffffff'/%3e%3c/svg%3e")
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='6' cy='6' r='2.5' fill='%238C909C'/%3e%3c/svg%3e")
  • CSS var
    Value
    16px
  • CSS var
    Value
    1px
  • CSS var
    Value
    6px
  • CSS var
    Value
    24px
  • CSS var
    Value
    8px
  • CSS var
    Value
    0.2s
  • CSS var
    Value
    16px
  • CSS var
    Value
    7px
  • CSS var
    Value
    9px
  • CSS var
    Value
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' 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' fill='%23656A76'/%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%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' fill='%238C909C'/%3E%3C/svg%3E")
  • CSS var
    Value
    16px
  • CSS var
    Value
    7px
  • 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")
  • 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")
  • 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")
  • CSS var
    Value
    32px
  • CSS var
    Value
    16px
  • CSS var
    Value
    #f1f2f3
  • CSS var
    Value
    3px
  • CSS var
    Value
    1px
  • CSS var
    Value
    12px
  • CSS var
    Value
    2px
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' 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' fill='%23FFF'/%3e%3c/svg%3e")
  • CSS var
    Value
    url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' 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' fill='%238C909C'/%3e%3c/svg%3e")
  • CSS var
    Value
    0.2s
  • CSS var
    Value
    cubic-bezier(0.68, -0.2, 0.265, 1.15)
  • CSS var
    Value
    16px

Pagination

  • CSS var
    Value
    36px
  • CSS var
    Value
    12px
  • CSS var
    Value
    4px
  • CSS var
    Value
    6px
  • CSS var
    Value
    2px
  • CSS var
    Value
    6px
  • CSS var
    Value
    8px
  • CSS var
    Value
    20px

Side-nav

  • CSS var
    Value
    1px
  • CSS var
    Value
    #656a76
  • CSS var
    Value
    16px
  • CSS var
    Value
    16px
  • CSS var
    Value
    8px
  • CSS var
    Value
    22px
  • CSS var
    Value
    5px
  • CSS var
    Value
    4px
  • CSS var
    Value
    48px
  • CSS var
    Value
    32px
  • CSS var
    Value
    8px
  • CSS var
    Value
    24px
  • CSS var
    Value
    36px
  • CSS var
    Value
    8px
  • CSS var
    Value
    4px
  • CSS var
    Value
    2px
  • CSS var
    Value
    8px
  • CSS var
    Value
    5px
  • CSS var
    Value
    #dedfe3
  • CSS var
    Value
    #ffffff
  • CSS var
    Value
    #8c909c
  • CSS var
    Value
    #0c0c0e
  • CSS var
    Value
    #3b3d45
  • CSS var
    Value
    #656a76

Tabs

  • CSS var
    Value
    36px
  • CSS var
    Value
    48px
  • CSS var
    Value
    12px
  • CSS var
    Value
    20px
  • CSS var
    Value
    0px
  • CSS var
    Value
    5px
  • CSS var
    Value
    6px
  • CSS var
    Value
    6px
  • CSS var
    Value
    3px
  • CSS var
    Value
    cubic-bezier(0.5, 1, 0.89, 1)
  • CSS var
    Value
    0.6s
  • CSS var
    Value
    1px

Tooltip

  • CSS var
    Value
    5px
  • CSS var
    Value
    var(--token-color-foreground-high-contrast)
  • CSS var
    Value
    var(--token-color-palette-neutral-700)
  • CSS var
    Value
    -2px
  • CSS var
    Value
    280px
  • CSS var
    Value
    12px
  • CSS var
    Value
    8px
  • CSS var
    Value
    cubic-bezier(0.54, 1.5, 0.38, 1.11)

Typography

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

How to use tokens

Use tokens in styles

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

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(--token-color-foreground-success)" />

For more details on how the design tokens pipeline is implemented, and how the design tokens are generated and distributed, see the repository @hashicorp/design-system-tokens.