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-brand-on-dark

  Value

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

  #639cff
• CSS var

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

  Value

  #2e71e5
• 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-radar-brand

  Value

  #ffcf25
• CSS var

  --token-color-vault-radar-brand-alt

  Value

  #000000
• CSS var

  --token-color-vault-radar-foreground

  Value

  #9a6f00
• CSS var

  --token-color-vault-radar-surface

  Value

  #fff9cf
• CSS var

  --token-color-vault-radar-border

  Value

  #feec7b
• CSS var

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

  Value

  #feec7b
• CSS var

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

  Value

  #ffe543
• CSS var

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

  Value

  #fffdf2
• CSS var

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

  Value

  #fff9cf
• CSS var

  --token-color-vault-secrets-brand

  Value

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

  #ffcf25
• 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-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-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-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-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
• 7px
  CSS var

  --token-form-control-padding

  Value

  7px
• 5px
  CSS var

  --token-form-control-border-radius

  Value

  5px
• 1px
  CSS var

  --token-form-control-border-width

  Value

  1px
• 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
• 14px
  CSS var

  --token-form-error-icon-size

  Value

  14px
• 16px
  CSS var

  --token-form-checkbox-size

  Value

  16px
• 3px
  CSS var

  --token-form-checkbox-border-radius

  Value

  3px
• 1px
  CSS var

  --token-form-checkbox-border-width

  Value

  1px
• 12px
  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")
• 16px
  CSS var

  --token-form-radio-size

  Value

  16px
• 1px
  CSS var

  --token-form-radio-border-width

  Value

  1px
• 12px
  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")
• 16px
  CSS var

  --token-form-radiocard-group-gap

  Value

  16px
• 1px
  CSS var

  --token-form-radiocard-border-width

  Value

  1px
• 6px
  CSS var

  --token-form-radiocard-border-radius

  Value

  6px
• 24px
  CSS var

  --token-form-radiocard-content-padding

  Value

  24px
• 8px
  CSS var

  --token-form-radiocard-control-padding

  Value

  8px
• CSS var

  --token-form-radiocard-transition-duration

  Value

  0.2s
• 16px
  CSS var

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

  Value

  16px
• 7px
  CSS var

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

  Value

  7px
• 9px
  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")
• 16px
  CSS var

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

  Value

  16px
• 7px
  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")
• 32px
  CSS var

  --token-form-toggle-width

  Value

  32px
• 16px
  CSS var

  --token-form-toggle-height

  Value

  16px
• CSS var

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

  Value

  #f1f2f3
• 3px
  CSS var

  --token-form-toggle-border-radius

  Value

  3px
• 1px
  CSS var

  --token-form-toggle-border-width

  Value

  1px
• 12px
  CSS var

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

  Value

  12px
• 2px
  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)
• 16px
  CSS var

  --token-form-toggle-thumb-size

  Value

  16px

App-header

• 60px
  CSS var

  --token-app-header-height

  Value

  60px
• 36px
  CSS var

  --token-app-header-home-link-size

  Value

  36px
• 28px
  CSS var

  --token-app-header-logo-size

  Value

  28px

App-side-nav

• 1px
  CSS var

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

  Value

  1px
• CSS var

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

  Value

  #656a76
• 16px
  CSS var

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

  Value

  16px
• 16px
  CSS var

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

  Value

  16px
• 8px
  CSS var

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

  Value

  8px
• 22px
  CSS var

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

  Value

  22px
• 5px
  CSS var

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

  Value

  5px
• 4px
  CSS var

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

  Value

  4px
• 48px
  CSS var

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

  Value

  48px
• 32px
  CSS var

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

  Value

  32px
• 8px
  CSS var

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

  Value

  8px
• 24px
  CSS var

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

  Value

  24px
• 36px
  CSS var

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

  Value

  36px
• 8px
  CSS var

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

  Value

  8px
• 4px
  CSS var

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

  Value

  4px
• 2px
  CSS var

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

  Value

  2px
• 8px
  CSS var

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

  Value

  8px
• 5px
  CSS var

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

  Value

  5px
• CSS var

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

  Value

  #dedfe3
• CSS var

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

  Value

  #fff
• CSS var

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

  Value

  #8c909c
• CSS var

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

  Value

  #0c0c0e
• CSS var

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

  Value

  #3b3d45
• CSS var

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

  Value

  #656a76

Pagination

• 36px
  CSS var

  --token-pagination-nav-control-height

  Value

  36px
• 12px
  CSS var

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

  Value

  12px
• 4px
  CSS var

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

  Value

  4px
• 6px
  CSS var

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

  Value

  6px
• 2px
  CSS var

  --token-pagination-nav-indicator-height

  Value

  2px
• 6px
  CSS var

  --token-pagination-nav-indicator-spacing

  Value

  6px
• 8px
  CSS var

  --token-pagination-child-spacing-vertical

  Value

  8px
• 20px
  CSS var

  --token-pagination-child-spacing-horizontal

  Value

  20px

Side-nav

• 1px
  CSS var

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

  Value

  1px
• CSS var

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

  Value

  #656a76
• 16px
  CSS var

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

  Value

  16px
• 16px
  CSS var

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

  Value

  16px
• 8px
  CSS var

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

  Value

  8px
• 22px
  CSS var

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

  Value

  22px
• 5px
  CSS var

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

  Value

  5px
• 4px
  CSS var

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

  Value

  4px
• 48px
  CSS var

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

  Value

  48px
• 32px
  CSS var

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

  Value

  32px
• 8px
  CSS var

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

  Value

  8px
• 24px
  CSS var

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

  Value

  24px
• 36px
  CSS var

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

  Value

  36px
• 8px
  CSS var

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

  Value

  8px
• 4px
  CSS var

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

  Value

  4px
• 2px
  CSS var

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

  Value

  2px
• 8px
  CSS var

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

  Value

  8px
• 5px
  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

• 36px
  CSS var

  --token-tabs-tab-height-medium

  Value

  36px
• 48px
  CSS var

  --token-tabs-tab-height-large

  Value

  48px
• 12px
  CSS var

  --token-tabs-tab-padding-horizontal-medium

  Value

  12px
• 20px
  CSS var

  --token-tabs-tab-padding-horizontal-large

  Value

  20px
• 0px
  CSS var

  --token-tabs-tab-padding-vertical

  Value

  0px
• 5px
  CSS var

  --token-tabs-tab-border-radius

  Value

  5px
• 6px
  CSS var

  --token-tabs-tab-focus-inset

  Value

  6px
• 6px
  CSS var

  --token-tabs-tab-gutter

  Value

  6px
• 3px
  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
• 1px
  CSS var

  --token-tabs-divider-height

  Value

  1px

Tooltip

• 5px
  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)
• -2px
  CSS var

  --token-tooltip-focus-offset

  Value

  -2px
• 280px
  CSS var

  --token-tooltip-max-width

  Value

  280px
• 12px
  CSS var

  --token-tooltip-padding-horizontal

  Value

  12px
• 8px
  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.

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