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

Tokens

Design tokens are provided as CSS custom properties and used to share and standardize foundation styles.

Border

  • 3px
    CSS var
    Value
    3px
  • 5px
    CSS var
    Value
    5px
  • 6px
    CSS var
    Value
    6px
  • 8px
    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

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

App-side-nav

  • 1px
    CSS var
    Value
    1px
  • CSS var
    Value
    var(--token-color-palette-neutral-200)
  • 16px
    CSS var
    Value
    16px
  • 16px
    CSS var
    Value
    16px
  • 8px
    CSS var
    Value
    8px
  • 22px
    CSS var
    Value
    22px
  • 5px
    CSS var
    Value
    5px
  • 4px
    CSS var
    Value
    4px
  • 48px
    CSS var
    Value
    48px
  • 32px
    CSS var
    Value
    32px
  • 8px
    CSS var
    Value
    8px
  • 24px
    CSS var
    Value
    24px
  • 36px
    CSS var
    Value
    36px
  • 8px
    CSS var
    Value
    8px
  • 4px
    CSS var
    Value
    4px
  • 2px
    CSS var
    Value
    2px
  • 8px
    CSS var
    Value
    8px
  • 5px
    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
  • 14px
    CSS var
    Value
    14px
  • 16px
    CSS var
    Value
    16px
  • 3px
    CSS var
    Value
    3px
  • 1px
    CSS var
    Value
    1px
  • 12px
    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
  • 7px
    CSS var
    Value
    7px
  • 5px
    CSS var
    Value
    5px
  • 1px
    CSS var
    Value
    1px
  • 16px
    CSS var
    Value
    16px
  • 1px
    CSS var
    Value
    1px
  • 12px
    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")
  • 16px
    CSS var
    Value
    16px
  • 1px
    CSS var
    Value
    1px
  • 6px
    CSS var
    Value
    6px
  • 24px
    CSS var
    Value
    24px
  • 8px
    CSS var
    Value
    8px
  • CSS var
    Value
    0.2s
  • 16px
    CSS var
    Value
    16px
  • 7px
    CSS var
    Value
    7px
  • 9px
    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")
  • 16px
    CSS var
    Value
    16px
  • 7px
    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")
  • 32px
    CSS var
    Value
    32px
  • 16px
    CSS var
    Value
    16px
  • CSS var
    Value
    #f1f2f3
  • 3px
    CSS var
    Value
    3px
  • 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' 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)
  • 16px
    CSS var
    Value
    16px

Pagination

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

Side-nav

  • 1px
    CSS var
    Value
    1px
  • CSS var
    Value
    #656a76
  • 16px
    CSS var
    Value
    16px
  • 16px
    CSS var
    Value
    16px
  • 8px
    CSS var
    Value
    8px
  • 22px
    CSS var
    Value
    22px
  • 5px
    CSS var
    Value
    5px
  • 4px
    CSS var
    Value
    4px
  • 48px
    CSS var
    Value
    48px
  • 32px
    CSS var
    Value
    32px
  • 8px
    CSS var
    Value
    8px
  • 24px
    CSS var
    Value
    24px
  • 36px
    CSS var
    Value
    36px
  • 8px
    CSS var
    Value
    8px
  • 4px
    CSS var
    Value
    4px
  • 2px
    CSS var
    Value
    2px
  • 8px
    CSS var
    Value
    8px
  • 5px
    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

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

Tooltip

  • 5px
    CSS var
    Value
    5px
  • CSS var
    Value
    var(--token-color-foreground-high-contrast)
  • CSS var
    Value
    var(--token-color-palette-neutral-700)
  • -2px
    CSS var
    Value
    -2px
  • 280px
    CSS var
    Value
    280px
  • 12px
    CSS var
    Value
    12px
  • 8px
    CSS var
    Value
    8px
  • 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
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    ui-monospace, Menlo, Consolas, monospace
  • Aa
    CSS var
    Value
    400
  • Aa
    CSS var
    Value
    500
  • Aa
    CSS var
    Value
    600
  • Aa
    CSS var
    Value
    700
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    1.875rem
  • CSS var
    Value
    1.2666
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    1.5rem
  • CSS var
    Value
    1.3333
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    1.125rem
  • CSS var
    Value
    1.3333
  • CSS var
    Value
    -0.5px
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    1rem
  • CSS var
    Value
    1.5
  • CSS var
    Value
    -0.5px
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    0.8125rem
  • CSS var
    Value
    1.3846
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    1rem
  • CSS var
    Value
    1.5
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    0.875rem
  • CSS var
    Value
    1.4286
  • Aa
    CSS var
    Value
    -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
  • Aa
    CSS var
    Value
    0.8125rem
  • CSS var
    Value
    1.3846
  • Aa
    CSS var
    Value
    ui-monospace, Menlo, Consolas, monospace
  • Aa
    CSS var
    Value
    0.8125rem
  • CSS var
    Value
    1.23
  • Aa
    CSS var
    Value
    ui-monospace, Menlo, Consolas, monospace
  • Aa
    CSS var
    Value
    0.875rem
  • CSS var
    Value
    1.125
  • Aa
    CSS var
    Value
    ui-monospace, Menlo, Consolas, monospace
  • Aa
    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.

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

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.