Tokens

Color

• CSS var

  --token-color-palette-blue-500

  Value

  #1c345f
• CSS var

  --token-color-palette-blue-400

  Value

  #0046d1
• CSS var

  --token-color-palette-blue-300

  Value

  #0c56e9
• CSS var

  --token-color-palette-blue-200

  Value

  #1060ff
• CSS var

  --token-color-palette-blue-100

  Value

  #cce3fe
• CSS var

  --token-color-palette-blue-50

  Value

  #f2f8ff
• CSS var

  --token-color-palette-purple-500

  Value

  #42215b
• CSS var

  --token-color-palette-purple-400

  Value

  #7b00db
• CSS var

  --token-color-palette-purple-300

  Value

  #911ced
• CSS var

  --token-color-palette-purple-200

  Value

  #a737ff
• CSS var

  --token-color-palette-purple-100

  Value

  #ead2fe
• CSS var

  --token-color-palette-purple-50

  Value

  #f9f2ff
• CSS var

  --token-color-palette-green-500

  Value

  #054220
• CSS var

  --token-color-palette-green-400

  Value

  #006619
• CSS var

  --token-color-palette-green-300

  Value

  #00781e
• CSS var

  --token-color-palette-green-200

  Value

  #008a22
• CSS var

  --token-color-palette-green-100

  Value

  #cceeda
• CSS var

  --token-color-palette-green-50

  Value

  #f2fbf6
• CSS var

  --token-color-palette-amber-500

  Value

  #542800
• CSS var

  --token-color-palette-amber-400

  Value

  #803d00
• CSS var

  --token-color-palette-amber-300

  Value

  #9e4b00
• CSS var

  --token-color-palette-amber-200

  Value

  #bb5a00
• CSS var

  --token-color-palette-amber-100

  Value

  #fbeabf
• CSS var

  --token-color-palette-amber-50

  Value

  #fff9e8
• CSS var

  --token-color-palette-red-500

  Value

  #51130a
• CSS var

  --token-color-palette-red-400

  Value

  #940004
• CSS var

  --token-color-palette-red-300

  Value

  #c00005
• CSS var

  --token-color-palette-red-200

  Value

  #e52228
• CSS var

  --token-color-palette-red-100

  Value

  #fbd4d4
• CSS var

  --token-color-palette-red-50

  Value

  #fff5f5
• CSS var

  --token-color-palette-neutral-700

  Value

  #0c0c0e
• CSS var

  --token-color-palette-neutral-600

  Value

  #3b3d45
• CSS var

  --token-color-palette-neutral-500

  Value

  #656a76
• CSS var

  --token-color-palette-neutral-400

  Value

  #8c909c
• CSS var

  --token-color-palette-neutral-300

  Value

  #c2c5cb
• CSS var

  --token-color-palette-neutral-200

  Value

  #dedfe3
• CSS var

  --token-color-palette-neutral-100

  Value

  #f1f2f3
• CSS var

  --token-color-palette-neutral-50

  Value

  #fafafa
• CSS var

  --token-color-palette-neutral-0

  Value

  #ffffff
• CSS var

  --token-color-palette-alpha-300

  Value

  #3b3d4566
• CSS var

  --token-color-palette-alpha-200

  Value

  #656a7633
• CSS var

  --token-color-palette-alpha-100

  Value

  #656a761a
• CSS var

  --token-color-border-primary

  Value

  #656a7633
• CSS var

  --token-color-border-faint

  Value

  #656a761a
• CSS var

  --token-color-border-strong

  Value

  #3b3d4566
• CSS var

  --token-color-border-action

  Value

  #cce3fe
• CSS var

  --token-color-border-highlight

  Value

  #ead2fe
• CSS var

  --token-color-border-success

  Value

  #cceeda
• CSS var

  --token-color-border-warning

  Value

  #fbeabf
• CSS var

  --token-color-border-critical

  Value

  #fbd4d4
• CSS var

  --token-color-focus-action-internal

  Value

  #0c56e9
• CSS var

  --token-color-focus-action-external

  Value

  #5990ff
• CSS var

  --token-color-focus-critical-internal

  Value

  #c00005
• CSS var

  --token-color-focus-critical-external

  Value

  #dd7578
• CSS var

  --token-color-foreground-strong

  Value

  #0c0c0e
• CSS var

  --token-color-foreground-primary

  Value

  #3b3d45
• CSS var

  --token-color-foreground-faint

  Value

  #656a76
• CSS var

  --token-color-foreground-high-contrast

  Value

  #ffffff
• CSS var

  --token-color-foreground-disabled

  Value

  #8c909c
• CSS var

  --token-color-foreground-action

  Value

  #1060ff
• CSS var

  --token-color-foreground-action-hover

  Value

  #0c56e9
• CSS var

  --token-color-foreground-action-active

  Value

  #0046d1
• CSS var

  --token-color-foreground-highlight

  Value

  #a737ff
• CSS var

  --token-color-foreground-highlight-on-surface

  Value

  #911ced
• CSS var

  --token-color-foreground-highlight-high-contrast

  Value

  #42215b
• CSS var

  --token-color-foreground-success

  Value

  #008a22
• CSS var

  --token-color-foreground-success-on-surface

  Value

  #00781e
• CSS var

  --token-color-foreground-success-high-contrast

  Value

  #054220
• CSS var

  --token-color-foreground-warning

  Value

  #bb5a00
• CSS var

  --token-color-foreground-warning-on-surface

  Value

  #9e4b00
• CSS var

  --token-color-foreground-warning-high-contrast

  Value

  #542800
• CSS var

  --token-color-foreground-critical

  Value

  #e52228
• CSS var

  --token-color-foreground-critical-on-surface

  Value

  #c00005
• CSS var

  --token-color-foreground-critical-high-contrast

  Value

  #51130a
• CSS var

  --token-color-page-primary

  Value

  #ffffff
• CSS var

  --token-color-page-faint

  Value

  #fafafa
• CSS var

  --token-color-surface-primary

  Value

  #ffffff
• CSS var

  --token-color-surface-faint

  Value

  #fafafa
• CSS var

  --token-color-surface-strong

  Value

  #f1f2f3
• CSS var

  --token-color-surface-interactive

  Value

  #ffffff
• CSS var

  --token-color-surface-interactive-hover

  Value

  #f1f2f3
• CSS var

  --token-color-surface-interactive-active

  Value

  #dedfe3
• CSS var

  --token-color-surface-interactive-disabled

  Value

  #fafafa
• CSS var

  --token-color-surface-action

  Value

  #f2f8ff
• CSS var

  --token-color-surface-highlight

  Value

  #f9f2ff
• CSS var

  --token-color-surface-success

  Value

  #f2fbf6
• CSS var

  --token-color-surface-warning

  Value

  #fff9e8
• CSS var

  --token-color-surface-critical

  Value

  #fff5f5
• CSS var

  --token-color-hashicorp-brand

  Value

  #000000
• CSS var

  --token-color-boundary-brand

  Value

  #f24c53
• CSS var

  --token-color-boundary-foreground

  Value

  #cf2d32
• CSS var

  --token-color-boundary-surface

  Value

  #ffecec
• CSS var

  --token-color-boundary-border

  Value

  #fbd7d8
• CSS var

  --token-color-boundary-gradient-primary-start

  Value

  #f97076
• CSS var

  --token-color-boundary-gradient-primary-stop

  Value

  #db363b
• CSS var

  --token-color-boundary-gradient-faint-start

  Value

  #fffafa
• CSS var

  --token-color-boundary-gradient-faint-stop

  Value

  #ffecec
• CSS var

  --token-color-consul-brand

  Value

  #e03875
• CSS var

  --token-color-consul-foreground

  Value

  #d01c5b
• CSS var

  --token-color-consul-surface

  Value

  #ffe9f1
• CSS var

  --token-color-consul-border

  Value

  #ffcede
• CSS var

  --token-color-consul-gradient-primary-start

  Value

  #ff99be
• CSS var

  --token-color-consul-gradient-primary-stop

  Value

  #da306e
• CSS var

  --token-color-consul-gradient-faint-start

  Value

  #fff9fb
• CSS var

  --token-color-consul-gradient-faint-stop

  Value

  #ffe9f1
• CSS var

  --token-color-hcp-brand

  Value

  #000000
• CSS var

  --token-color-nomad-brand

  Value

  #06d092
• CSS var

  --token-color-nomad-foreground

  Value

  #008661
• CSS var

  --token-color-nomad-surface

  Value

  #d3fdeb
• CSS var

  --token-color-nomad-border

  Value

  #bff3dd
• CSS var

  --token-color-nomad-gradient-primary-start

  Value

  #bff3dd
• CSS var

  --token-color-nomad-gradient-primary-stop

  Value

  #60dea9
• CSS var

  --token-color-nomad-gradient-faint-start

  Value

  #f3fff9
• CSS var

  --token-color-nomad-gradient-faint-stop

  Value

  #d3fdeb
• CSS var

  --token-color-packer-brand

  Value

  #02a8ef
• CSS var

  --token-color-packer-foreground

  Value

  #007eb4
• CSS var

  --token-color-packer-surface

  Value

  #d4f2ff
• CSS var

  --token-color-packer-border

  Value

  #b4e4ff
• CSS var

  --token-color-packer-gradient-primary-start

  Value

  #b4e4ff
• CSS var

  --token-color-packer-gradient-primary-stop

  Value

  #63d0ff
• CSS var

  --token-color-packer-gradient-faint-start

  Value

  #f3fcff
• CSS var

  --token-color-packer-gradient-faint-stop

  Value

  #d4f2ff
• CSS var

  --token-color-terraform-brand

  Value

  #7b42bc
• CSS var

  --token-color-terraform-foreground

  Value

  #773cb4
• CSS var

  --token-color-terraform-surface

  Value

  #f4ecff
• CSS var

  --token-color-terraform-border

  Value

  #ebdbfc
• CSS var

  --token-color-terraform-gradient-primary-start

  Value

  #bb8deb
• CSS var

  --token-color-terraform-gradient-primary-stop

  Value

  #844fba
• CSS var

  --token-color-terraform-gradient-faint-start

  Value

  #fcfaff
• CSS var

  --token-color-terraform-gradient-faint-stop

  Value

  #f4ecff
• CSS var

  --token-color-vagrant-brand

  Value

  #1868f2
• CSS var

  --token-color-vagrant-foreground

  Value

  #1c61d8
• CSS var

  --token-color-vagrant-surface

  Value

  #d6ebff
• CSS var

  --token-color-vagrant-border

  Value

  #c7dbfc
• CSS var

  --token-color-vagrant-gradient-primary-start

  Value

  #c7dbfc
• CSS var

  --token-color-vagrant-gradient-primary-stop

  Value

  #7dadff
• CSS var

  --token-color-vagrant-gradient-faint-start

  Value

  #f4faff
• CSS var

  --token-color-vagrant-gradient-faint-stop

  Value

  #d6ebff
• CSS var

  --token-color-vault-secrets-brand

  Value

  #ffd814
• CSS var

  --token-color-vault-secrets-brand-alt

  Value

  #000000
• CSS var

  --token-color-vault-secrets-foreground

  Value

  #9a6f00
• CSS var

  --token-color-vault-secrets-surface

  Value

  #fff9cf
• CSS var

  --token-color-vault-secrets-border

  Value

  #feec7b
• CSS var

  --token-color-vault-secrets-gradient-primary-start

  Value

  #feec7b
• CSS var

  --token-color-vault-secrets-gradient-primary-stop

  Value

  #ffe543
• CSS var

  --token-color-vault-secrets-gradient-faint-start

  Value

  #fffdf2
• CSS var

  --token-color-vault-secrets-gradient-faint-stop

  Value

  #fff9cf
• CSS var

  --token-color-vault-brand

  Value

  #ffd814
• CSS var

  --token-color-vault-brand-alt

  Value

  #000000
• CSS var

  --token-color-vault-foreground

  Value

  #9a6f00
• CSS var

  --token-color-vault-surface

  Value

  #fff9cf
• CSS var

  --token-color-vault-border

  Value

  #feec7b
• CSS var

  --token-color-vault-gradient-primary-start

  Value

  #feec7b
• CSS var

  --token-color-vault-gradient-primary-stop

  Value

  #ffe543
• CSS var

  --token-color-vault-gradient-faint-start

  Value

  #fffdf2
• CSS var

  --token-color-vault-gradient-faint-stop

  Value

  #fff9cf
• CSS var

  --token-color-waypoint-brand

  Value

  #14c6cb
• CSS var

  --token-color-waypoint-foreground

  Value

  #008196
• CSS var

  --token-color-waypoint-surface

  Value

  #e0fcff
• CSS var

  --token-color-waypoint-border

  Value

  #cbf1f3
• CSS var

  --token-color-waypoint-gradient-primary-start

  Value

  #cbf1f3
• CSS var

  --token-color-waypoint-gradient-primary-stop

  Value

  #62d4dc
• CSS var

  --token-color-waypoint-gradient-faint-start

  Value

  #f6feff
• CSS var

  --token-color-waypoint-gradient-faint-stop

  Value

  #e0fcff

Elevation

• CSS var

  --token-elevation-inset-box-shadow

  Value

  inset 0px 1px 2px 1px #656a761a
• CSS var

  --token-elevation-low-box-shadow

  Value

  0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d
• CSS var

  --token-elevation-mid-box-shadow

  Value

  0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633
• CSS var

  --token-elevation-high-box-shadow

  Value

  0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633
• CSS var

  --token-elevation-higher-box-shadow

  Value

  0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640
• CSS var

  --token-elevation-overlay-box-shadow

  Value

  0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559

Surface

• CSS var

  --token-surface-inset-box-shadow

  Value

  inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a
• CSS var

  --token-surface-base-box-shadow

  Value

  0 0 0 1px #656a7633
• CSS var

  --token-surface-low-box-shadow

  Value

  0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d
• CSS var

  --token-surface-mid-box-shadow

  Value

  0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633
• CSS var

  --token-surface-high-box-shadow

  Value

  0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633
• CSS var

  --token-surface-higher-box-shadow

  Value

  0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640
• CSS var

  --token-surface-overlay-box-shadow

  Value

  0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559

Focus-ring

• CSS var

  --token-focus-ring-action-box-shadow

  Value

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

  --token-focus-ring-critical-box-shadow

  Value

  inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578

Form

• CSS var

  --token-form-label-color

  Value

  #0c0c0e
• CSS var

  --token-form-legend-color

  Value

  #0c0c0e
• CSS var

  --token-form-helper-text-color

  Value

  #656a76
• CSS var

  --token-form-indicator-optional-color

  Value

  #656a76
• CSS var

  --token-form-error-color

  Value

  #c00005
• CSS var

  --token-form-error-icon-size

  Value

  14px
• CSS var

  --token-form-checkbox-size

  Value

  16px
• CSS var

  --token-form-checkbox-border-radius

  Value

  3px
• CSS var

  --token-form-checkbox-border-width

  Value

  1px
• CSS var

  --token-form-checkbox-background-image-size

  Value

  12px
• CSS var

  --token-form-checkbox-background-image-data-url

  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

  --token-form-checkbox-background-image-data-url-indeterminate

  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

  --token-form-checkbox-background-image-data-url-disabled

  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

  --token-form-checkbox-background-image-data-url-indeterminate-disabled

  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

  --token-form-control-base-foreground-value-color

  Value

  #0c0c0e
• CSS var

  --token-form-control-base-foreground-placeholder-color

  Value

  #656a76
• CSS var

  --token-form-control-base-surface-color-default

  Value

  #ffffff
• CSS var

  --token-form-control-base-surface-color-hover

  Value

  #f1f2f3
• CSS var

  --token-form-control-base-border-color-default

  Value

  #8c909c
• CSS var

  --token-form-control-base-border-color-hover

  Value

  #656a76
• CSS var

  --token-form-control-checked-foreground-color

  Value

  #ffffff
• CSS var

  --token-form-control-checked-surface-color-default

  Value

  #1060ff
• CSS var

  --token-form-control-checked-surface-color-hover

  Value

  #0c56e9
• CSS var

  --token-form-control-checked-border-color-default

  Value

  #0c56e9
• CSS var

  --token-form-control-checked-border-color-hover

  Value

  #0046d1
• CSS var

  --token-form-control-invalid-border-color-default

  Value

  #c00005
• CSS var

  --token-form-control-invalid-border-color-hover

  Value

  #940004
• CSS var

  --token-form-control-readonly-foreground-color

  Value

  #3b3d45
• CSS var

  --token-form-control-readonly-surface-color

  Value

  #f1f2f3
• CSS var

  --token-form-control-readonly-border-color

  Value

  #656a761a
• CSS var

  --token-form-control-disabled-foreground-color

  Value

  #8c909c
• CSS var

  --token-form-control-disabled-surface-color

  Value

  #fafafa
• CSS var

  --token-form-control-disabled-border-color

  Value

  #656a7633
• CSS var

  --token-form-control-padding

  Value

  7px
• CSS var

  --token-form-control-border-radius

  Value

  5px
• CSS var

  --token-form-control-border-width

  Value

  1px
• CSS var

  --token-form-radio-size

  Value

  16px
• CSS var

  --token-form-radio-border-width

  Value

  1px
• CSS var

  --token-form-radio-background-image-size

  Value

  12px
• CSS var

  --token-form-radio-background-image-data-url

  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

  --token-form-radio-background-image-data-url-disabled

  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

  --token-form-radiocard-group-gap

  Value

  16px
• CSS var

  --token-form-radiocard-border-width

  Value

  1px
• CSS var

  --token-form-radiocard-border-radius

  Value

  6px
• CSS var

  --token-form-radiocard-content-padding

  Value

  24px
• CSS var

  --token-form-radiocard-control-padding

  Value

  8px
• CSS var

  --token-form-radiocard-transition-duration

  Value

  0.2s
• CSS var

  --token-form-select-background-image-size

  Value

  16px
• CSS var

  --token-form-select-background-image-position-right-x

  Value

  7px
• CSS var

  --token-form-select-background-image-position-top-y

  Value

  9px
• CSS var

  --token-form-select-background-image-data-url

  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

  --token-form-select-background-image-data-url-disabled

  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

  --token-form-text-input-background-image-size

  Value

  16px
• CSS var

  --token-form-text-input-background-image-position-x

  Value

  7px
• CSS var

  --token-form-text-input-background-image-data-url-date

  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

  --token-form-text-input-background-image-data-url-time

  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

  --token-form-text-input-background-image-data-url-search

  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

  --token-form-text-input-background-image-data-url-search-cancel

  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

  --token-form-text-input-background-image-data-url-search-loading

  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

  --token-form-toggle-width

  Value

  32px
• CSS var

  --token-form-toggle-height

  Value

  16px
• CSS var

  --token-form-toggle-base-surface-color-default

  Value

  #f1f2f3
• CSS var

  --token-form-toggle-border-radius

  Value

  3px
• CSS var

  --token-form-toggle-border-width

  Value

  1px
• CSS var

  --token-form-toggle-background-image-size

  Value

  12px
• CSS var

  --token-form-toggle-background-image-position-x

  Value

  2px
• CSS var

  --token-form-toggle-background-image-data-url

  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

  --token-form-toggle-background-image-data-url-disabled

  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

  --token-form-toggle-transition-duration

  Value

  0.2s
• CSS var

  --token-form-toggle-transition-timing-function

  Value

  cubic-bezier(0.68, -0.2, 0.265, 1.15)
• CSS var

  --token-form-toggle-thumb-size

  Value

  16px

Pagination

• CSS var

  --token-pagination-nav-control-height

  Value

  36px
• CSS var

  --token-pagination-nav-control-padding-horizontal

  Value

  12px
• CSS var

  --token-pagination-nav-control-focus-inset

  Value

  4px
• CSS var

  --token-pagination-nav-control-icon-spacing

  Value

  6px
• CSS var

  --token-pagination-nav-indicator-height

  Value

  2px
• CSS var

  --token-pagination-nav-indicator-spacing

  Value

  6px
• CSS var

  --token-pagination-child-spacing-vertical

  Value

  8px
• CSS var

  --token-pagination-child-spacing-horizontal

  Value

  20px

Side-nav

• CSS var

  --token-side-nav-wrapper-border-width

  Value

  1px
• CSS var

  --token-side-nav-wrapper-border-color

  Value

  #656a76
• CSS var

  --token-side-nav-wrapper-padding-horizontal

  Value

  16px
• CSS var

  --token-side-nav-wrapper-padding-vertical

  Value

  16px
• CSS var

  --token-side-nav-wrapper-padding-horizontal-minimized

  Value

  8px
• CSS var

  --token-side-nav-wrapper-padding-vertical-minimized

  Value

  22px
• CSS var

  --token-side-nav-toggle-button-border-radius

  Value

  5px
• CSS var

  --token-side-nav-toggle-button-padding-horizontal

  Value

  4px
• CSS var

  --token-side-nav-toggle-button-padding-vertical

  Value

  10px
• CSS var

  --token-side-nav-header-home-link-padding

  Value

  4px
• CSS var

  --token-side-nav-header-home-link-logo-size

  Value

  48px
• CSS var

  --token-side-nav-header-home-link-logo-size-minimized

  Value

  32px
• CSS var

  --token-side-nav-header-actions-spacing

  Value

  8px
• CSS var

  --token-side-nav-body-list-margin-vertical

  Value

  24px
• CSS var

  --token-side-nav-body-list-item-height

  Value

  36px
• CSS var

  --token-side-nav-body-list-item-padding-horizontal

  Value

  8px
• CSS var

  --token-side-nav-body-list-item-padding-vertical

  Value

  4px
• CSS var

  --token-side-nav-body-list-item-spacing-vertical

  Value

  2px
• CSS var

  --token-side-nav-body-list-item-content-spacing-horizontal

  Value

  8px
• CSS var

  --token-side-nav-body-list-item-border-radius

  Value

  5px
• CSS var

  --token-side-nav-color-foreground-primary

  Value

  #dedfe3
• CSS var

  --token-side-nav-color-foreground-strong

  Value

  #fff
• CSS var

  --token-side-nav-color-foreground-faint

  Value

  #8c909c
• CSS var

  --token-side-nav-color-surface-primary

  Value

  #0c0c0e
• CSS var

  --token-side-nav-color-surface-interactive-hover

  Value

  #3b3d45
• CSS var

  --token-side-nav-color-surface-interactive-active

  Value

  #656a76

Tabs

• CSS var

  --token-tabs-tab-height

  Value

  36px
• CSS var

  --token-tabs-tab-padding-horizontal

  Value

  12px
• CSS var

  --token-tabs-tab-padding-vertical

  Value

  0px
• CSS var

  --token-tabs-tab-border-radius

  Value

  5px
• CSS var

  --token-tabs-tab-focus-inset

  Value

  6px
• CSS var

  --token-tabs-tab-gutter

  Value

  6px
• CSS var

  --token-tabs-indicator-height

  Value

  3px
• CSS var

  --token-tabs-indicator-transition-function

  Value

  cubic-bezier(0.5, 1, 0.89, 1)
• CSS var

  --token-tabs-indicator-transition-duration

  Value

  0.6s
• CSS var

  --token-tabs-divider-height

  Value

  1px

Tooltip

• CSS var

  --token-tooltip-border-radius

  Value

  5px
• CSS var

  --token-tooltip-color-foreground-primary

  Value

  var(--token-color-foreground-high-contrast)
• CSS var

  --token-tooltip-color-surface-primary

  Value

  var(--token-color-palette-neutral-700)
• CSS var

  --token-tooltip-focus-offset

  Value

  -2px
• CSS var

  --token-tooltip-max-width

  Value

  280px
• CSS var

  --token-tooltip-padding-horizontal

  Value

  12px
• CSS var

  --token-tooltip-padding-vertical

  Value

  8px
• CSS var

  --token-tooltip-transition-function

  Value

  cubic-bezier(0.54, 1.5, 0.38, 1.11)

Typography

• Aa
  CSS var

  --token-typography-font-stack-display

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-font-stack-text

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-font-stack-code

  Value

  ui-monospace, Menlo, Consolas, monospace
• Aa
  CSS var

  --token-typography-font-weight-regular

  Value

  400
• Aa
  CSS var

  --token-typography-font-weight-medium

  Value

  500
• Aa
  CSS var

  --token-typography-font-weight-semibold

  Value

  600
• Aa
  CSS var

  --token-typography-font-weight-bold

  Value

  700
• Aa
  CSS var

  --token-typography-display-500-font-family

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-display-500-font-size

  Value

  1.875rem
• CSS var

  --token-typography-display-500-line-height

  Value

  1.2666
• Aa
  CSS var

  --token-typography-display-400-font-family

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-display-400-font-size

  Value

  1.5rem
• CSS var

  --token-typography-display-400-line-height

  Value

  1.3333
• Aa
  CSS var

  --token-typography-display-300-font-family

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-display-300-font-size

  Value

  1.125rem
• CSS var

  --token-typography-display-300-line-height

  Value

  1.3333
• CSS var

  --token-typography-display-300-letter-spacing

  Value

  -0.5px
• Aa
  CSS var

  --token-typography-display-200-font-family

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-display-200-font-size

  Value

  1rem
• CSS var

  --token-typography-display-200-line-height

  Value

  1.5
• CSS var

  --token-typography-display-200-letter-spacing

  Value

  -0.5px
• Aa
  CSS var

  --token-typography-display-100-font-family

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-display-100-font-size

  Value

  0.8125rem
• CSS var

  --token-typography-display-100-line-height

  Value

  1.3846
• Aa
  CSS var

  --token-typography-body-300-font-family

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-body-300-font-size

  Value

  1rem
• CSS var

  --token-typography-body-300-line-height

  Value

  1.5
• Aa
  CSS var

  --token-typography-body-200-font-family

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-body-200-font-size

  Value

  0.875rem
• CSS var

  --token-typography-body-200-line-height

  Value

  1.4286
• Aa
  CSS var

  --token-typography-body-100-font-family

  Value

  -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Aa
  CSS var

  --token-typography-body-100-font-size

  Value

  0.8125rem
• CSS var

  --token-typography-body-100-line-height

  Value

  1.3846
• Aa
  CSS var

  --token-typography-code-100-font-family

  Value

  ui-monospace, Menlo, Consolas, monospace
• Aa
  CSS var

  --token-typography-code-100-font-size

  Value

  0.8125rem
• CSS var

  --token-typography-code-100-line-height

  Value

  1.23
• Aa
  CSS var

  --token-typography-code-200-font-family

  Value

  ui-monospace, Menlo, Consolas, monospace
• Aa
  CSS var

  --token-typography-code-200-font-size

  Value

  0.875rem
• CSS var

  --token-typography-code-200-line-height

  Value

  1.125
• Aa
  CSS var

  --token-typography-code-300-font-family

  Value

  ui-monospace, Menlo, Consolas, monospace
• Aa
  CSS var

  --token-typography-code-300-font-size

  Value

  1rem
• CSS var

  --token-typography-code-300-line-height

  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";

2. If a component accepts a color parameter you can use a design token too.

<FlightIcon @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.