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
    #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
    #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
    #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
    #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
    #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
    #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
    #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
  • 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

  • CSS var
    Value
    1

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(--i80-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(--i80-color-foreground-primary)
  • CSS var
    Value
    var(--i80-color-foreground-primary)
  • CSS var
    Value
    var(--i80-color-foreground-faint)
  • CSS var
    Value
    var(--i80-color-surface-faint)
  • CSS var
    Value
    var(--i80-color-surface-interactive-hover)
  • CSS var
    Value
    var(--i80-color-palette-neutral-300)

Badge-count

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

Badge

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

Form

  • CSS var
    Value
    #656a76
  • CSS var
    Value
    0.8125rem
  • CSS var
    Value
    1.3846
  • Don't use
    This token is now deprecated
    CSS var
    i80-form-label-color
  • CSS var
    Value
    #0c0c0e
  • CSS var
    Value
    0.875rem
  • CSS var
    Value
    600
  • CSS var
    Value
    1.4286
  • Don't use
    This token is now deprecated
    CSS var
    i80-form-legend-color
  • CSS var
    Value
    #0c0c0e
  • CSS var
    Value
    0.875rem
  • CSS var
    Value
    600
  • CSS var
    Value
    1.4286
  • Don't use
    This token is now deprecated
    CSS var
    i80-form-helper-text-color
  • CSS var
    Value
    #656a76
  • CSS var
    Value
    0.8125rem
  • CSS var
    Value
    1.3846
  • Don't use
    This token is now deprecated
    CSS var
    i80-form-indicator-optional-color
  • CSS var
    Value
    #656a76
  • CSS var
    Value
    0.8125rem
  • CSS var
    Value
    1.3846
  • Don't use
    This token is now deprecated
    CSS var
    i80-form-error-color
  • CSS var
    Value
    #c00005
  • CSS var
    Value
    0.8125rem
  • CSS var
    Value
    1.3846
  • 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

Icon-tile

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

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

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(--i80-color-foreground-high-contrast)
  • CSS var
    Value
    var(--i80-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

Load the tokens

The tokens are CSS custom properties, declared on :root. components.css already declares them, so if you are using the components there is nothing else to load:

<!-- components.css already declares every token; load it and they are available -->
<link rel="stylesheet" href="https://design.i80.dk/v/0.5.2/components.css">

<!-- Or the tokens on their own, if you are not using the component styles -->
<link rel="stylesheet" href="https://design.i80.dk/v/0.5.2/tokens.css">

Use tokens in your own styles

Write them into your style declarations like any other CSS variable:

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

Use a token as a colour value

Where a component takes a colour, a token is a valid value:

<i80-icon name="alert-circle" color="var(--i80-color-foreground-success)"></i80-icon>

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