Skip to content

Colors

--tng-color-neutral-black
#000000
--tng-color-neutral-white
#ffffff
--tng-color-neutral-black
#000000
--tng-color-neutral-white
#ffffff
--tng-color-grey-100
#fbfbfc
--tng-color-grey-200
#f5f5f5
--tng-color-grey-300
#e4e4e4
--tng-color-grey-400
#e5e3e1
--tng-color-grey-500
#d4d2d1
--tng-color-grey-600
#a8aaac
--tng-color-grey-700
#999999
--tng-color-grey-800
#6c7073
--tng-color-grey-900
#666666
--tng-color-grey-1000
#4d4d4d
--tng-color-grey-1100
#333333
--tng-color-grey-1200
#282830
--tng-color-grey-1300
#1a1a1a
--tng-color-grey-1400
#15151b
--tng-color-grey-100
#fbfbfc
--tng-color-grey-200
#f5f5f5
--tng-color-grey-300
#e4e4e4
--tng-color-grey-400
#e5e3e1
--tng-color-grey-500
#d4d2d1
--tng-color-grey-600
#a8aaac
--tng-color-grey-700
#999999
--tng-color-grey-800
#6c7073
--tng-color-grey-900
#666666
--tng-color-grey-1000
#4d4d4d
--tng-color-grey-1100
#333333
--tng-color-grey-1200
#282830
--tng-color-grey-1300
#1a1a1a
--tng-color-grey-1400
#15151b
--tng-color-blue-100
#e9f4ff
--tng-color-blue-200
#c6e3ff
--tng-color-blue-300
#95c6ff
--tng-color-blue-400
#60a7ff
--tng-color-blue-500
#0072f0
--tng-color-blue-600
#001874
--tng-color-blue-700
#00004e
--tng-color-blue-800
#00001d
--tng-color-blue-100
#e9f4ff
--tng-color-blue-200
#c6e3ff
--tng-color-blue-300
#95c6ff
--tng-color-blue-400
#60a7ff
--tng-color-blue-500
#0072f0
--tng-color-blue-600
#001874
--tng-color-blue-700
#00004e
--tng-color-blue-800
#00001d
--tng-color-copper-100
#f3e2da
--tng-color-copper-200
#e4bca9
--tng-color-copper-300
#d49677
--tng-color-copper-400
#c57046
--tng-color-copper-500
#905233
--tng-color-copper-100
#f3e2da
--tng-color-copper-200
#e4bca9
--tng-color-copper-300
#d49677
--tng-color-copper-400
#c57046
--tng-color-copper-500
#905233
--tng-color-green-100
#ebfaeb
--tng-color-green-200
#c9e7ca
--tng-color-green-300
#93f694
--tng-color-green-400
#6fd171
--tng-color-green-500
#4caf50
--tng-color-green-600
#208a2b
--tng-color-green-700
#006800
--tng-color-green-800
#004600
--tng-color-green-100
#ebfaeb
--tng-color-green-200
#c9e7ca
--tng-color-green-300
#93f694
--tng-color-green-400
#6fd171
--tng-color-green-500
#4caf50
--tng-color-green-600
#208a2b
--tng-color-green-700
#006800
--tng-color-green-800
#004600
--tng-color-indigo-100
#e5e9ed
--tng-color-indigo-200
#ccd3db
--tng-color-indigo-300
#8899ac
--tng-color-indigo-400
#445e7c
--tng-color-indigo-500
#00244d
--tng-color-indigo-600
#001a38
--tng-color-indigo-700
#001834
--tng-color-indigo-100
#e5e9ed
--tng-color-indigo-200
#ccd3db
--tng-color-indigo-300
#8899ac
--tng-color-indigo-400
#445e7c
--tng-color-indigo-500
#00244d
--tng-color-indigo-600
#001a38
--tng-color-indigo-700
#001834
--tng-color-red-100
#fdaaaa
--tng-color-red-200
#fc7979
--tng-color-red-300
#fa4747
--tng-color-red-400
#ff0022
--tng-color-red-500
#d40605
--tng-color-red-600
#a40404
--tng-color-red-700
#720303
--tng-color-red-800
#410202
--tng-color-red-100
#fdaaaa
--tng-color-red-200
#fc7979
--tng-color-red-300
#fa4747
--tng-color-red-400
#ff0022
--tng-color-red-500
#d40605
--tng-color-red-600
#a40404
--tng-color-red-700
#720303
--tng-color-red-800
#410202
--tng-color-yellow-100
#fff9e5
--tng-color-yellow-200
#fff4cc
--tng-color-yellow-300
#ffefb2
--tng-color-yellow-400
#ffe066
--tng-color-yellow-500
#e5b700
--tng-color-yellow-600
#cca300
--tng-color-yellow-700
#7f6600
--tng-color-yellow-800
#4c3d00
--tng-color-yellow-100
#fff9e5
--tng-color-yellow-200
#fff4cc
--tng-color-yellow-300
#ffefb2
--tng-color-yellow-400
#ffe066
--tng-color-yellow-500
#e5b700
--tng-color-yellow-600
#cca300
--tng-color-yellow-700
#7f6600
--tng-color-yellow-800
#4c3d00

The semantic color tokens have their background colors split across three different semantic roles.

Background

Surface

--tng-color-border-contrast-default
#e4e4e4
--tng-color-border-contrast-emphasis
#ffffff
--tng-color-border-contrast-muted
#6c7073
--tng-color-border-contrast-subtle
#a8aaac
--tng-color-border-dim-contrast-default
rgba(255, 255, 255, 0.5)
--tng-color-border-dim-contrast-muted
rgba(255, 255, 255, 0.2)
--tng-color-border-dim-contrast-subtle
rgba(255, 255, 255, 0.3)
--tng-color-border-dim-neutral-default
rgba(0, 0, 0, 0.65)
--tng-color-border-dim-neutral-muted
rgba(0, 0, 0, 0.25)
--tng-color-border-dim-neutral-subtle
rgba(0, 0, 0, 0.55)
--tng-color-border-error-default
#cc0000
--tng-color-border-error-muted
#ffd0c9
--tng-color-border-error-subtle
#ff3333
--tng-color-border-ev-default
#d49677
--tng-color-border-focus-contrast-default
#60a7ff
--tng-color-border-focus-neutral-default
#0072f0
--tng-color-border-info-default
#001874
--tng-color-border-info-muted
#c6e3ff
--tng-color-border-info-subtle
#0072f0
--tng-color-border-neutral-default
#282830
--tng-color-border-neutral-emphasis
#000000
--tng-color-border-neutral-muted
#a8aaac
--tng-color-border-neutral-subtle
#999999
--tng-color-border-primary-default
#15151b
--tng-color-border-primary-muted
#6c7073
--tng-color-border-primary-subtle
#282830
--tng-color-border-secondary-default
#c57046
--tng-color-border-secondary-muted
#e4bca9
--tng-color-border-secondary-subtle
#d49677
--tng-color-border-success-default
#006800
--tng-color-border-success-muted
#6fd171
--tng-color-border-success-subtle
#4caf50
--tng-color-border-warning-default
#e5b700
--tng-color-border-contrast-default
#e4e4e4
--tng-color-border-contrast-emphasis
#ffffff
--tng-color-border-contrast-muted
#6c7073
--tng-color-border-contrast-subtle
#a8aaac
--tng-color-border-dim-contrast-default
rgba(255, 255, 255, 0.45)
--tng-color-border-dim-contrast-muted
rgba(255, 255, 255, 0.2)
--tng-color-border-dim-contrast-subtle
rgba(255, 255, 255, 0.35)
--tng-color-border-dim-neutral-default
rgba(0, 0, 0, 0.65)
--tng-color-border-dim-neutral-muted
rgba(0, 0, 0, 0.25)
--tng-color-border-dim-neutral-subtle
rgba(0, 0, 0, 0.55)
--tng-color-border-error-default
#cc0000
--tng-color-border-error-muted
#ffd0c9
--tng-color-border-error-subtle
#ff3333
--tng-color-border-ev-default
#0072f0
--tng-color-border-focus-contrast-default
#60a7ff
--tng-color-border-focus-neutral-default
#0072f0
--tng-color-border-info-default
#001874
--tng-color-border-info-muted
#c6e3ff
--tng-color-border-info-subtle
#0072f0
--tng-color-border-neutral-default
#282830
--tng-color-border-neutral-emphasis
#15151b
--tng-color-border-neutral-muted
#a8aaac
--tng-color-border-neutral-subtle
#6c7073
--tng-color-border-primary-default
#ff0022
--tng-color-border-primary-muted
#fdaaaa
--tng-color-border-primary-subtle
#fa4747
--tng-color-border-secondary-default
#003641
--tng-color-border-secondary-muted
#328994
--tng-color-border-secondary-subtle
#006d7a
--tng-color-border-success-default
#006800
--tng-color-border-success-muted
#6fd171
--tng-color-border-success-subtle
#4caf50
--tng-color-border-warning-default
#e5b700
--tng-color-background-contrast-default
#000000
--tng-color-background-contrast-muted
#15151b
--tng-color-background-contrast-subtle
#1a1a1a
--tng-color-background-neutral-default
#ffffff
--tng-color-background-neutral-muted
#e5e3e1
--tng-color-background-neutral-subtle
#f5f5f5
--tng-color-background-contrast-default
#282830
--tng-color-background-contrast-muted
#15151b
--tng-color-background-contrast-subtle
#15151b
--tng-color-background-neutral-default
#ffffff
--tng-color-background-neutral-muted
#e5e3e1
--tng-color-background-neutral-subtle
#e4e4e4
--tng-color-fill-bz4x-default
#003641
--tng-color-fill-bz4x-muted
#328994
--tng-color-fill-bz4x-subtle
#006d7a
--tng-color-fill-contrast-default
#d4d2d1
--tng-color-fill-contrast-emphasis
#f5f5f5
--tng-color-fill-contrast-muted
#333333
--tng-color-fill-contrast-subtle
#4d4d4d
--tng-color-fill-dim-contrast-default
rgba(255, 255, 255, 0.45)
--tng-color-fill-dim-contrast-muted
rgba(255, 255, 255, 0.2)
--tng-color-fill-dim-contrast-subtle
rgba(255, 255, 255, 0.35)
--tng-color-fill-dim-neutral-default
rgba(0, 0, 0, 0.65)
--tng-color-fill-dim-neutral-muted
rgba(0, 0, 0, 0.25)
--tng-color-fill-dim-neutral-subtle
rgba(0, 0, 0, 0.55)
--tng-color-fill-error-default
#cc0000
--tng-color-fill-error-muted
#ffeeec
--tng-color-fill-error-subtle
#ffd0c9
--tng-color-fill-info-default
#001874
--tng-color-fill-info-muted
#c6e3ff
--tng-color-fill-info-subtle
#0072f0
--tng-color-fill-neutral-default
#999999
--tng-color-fill-neutral-emphasis
#4d4d4d
--tng-color-fill-neutral-muted
#f5f5f5
--tng-color-fill-neutral-subtle
#e5e3e1
--tng-color-fill-primary-default
#001a38
--tng-color-fill-primary-muted
#8899ac
--tng-color-fill-primary-subtle
#00244d
--tng-color-fill-secondary-default
#d49677
--tng-color-fill-secondary-muted
#c57046
--tng-color-fill-secondary-subtle
#c57046
--tng-color-fill-success-default
#006800
--tng-color-fill-success-muted
#c9e7ca
--tng-color-fill-success-subtle
#93f694
--tng-color-fill-warning-default
#fff9e5
--tng-color-fill-bz4x-default
#003641
--tng-color-fill-bz4x-muted
#328994
--tng-color-fill-bz4x-subtle
#006d7a
--tng-color-fill-contrast-default
#e4e4e4
--tng-color-fill-contrast-emphasis
#ffffff
--tng-color-fill-contrast-muted
#6c7073
--tng-color-fill-contrast-subtle
#a8aaac
--tng-color-fill-dim-contrast-default
rgba(255, 255, 255, 0.45)
--tng-color-fill-dim-contrast-muted
rgba(255, 255, 255, 0.2)
--tng-color-fill-dim-contrast-subtle
rgba(255, 255, 255, 0.35)
--tng-color-fill-dim-neutral-default
rgba(0, 0, 0, 0.65)
--tng-color-fill-dim-neutral-muted
rgba(0, 0, 0, 0.25)
--tng-color-fill-dim-neutral-subtle
rgba(0, 0, 0, 0.55)
--tng-color-fill-error-default
#cc0000
--tng-color-fill-error-muted
#ffeeec
--tng-color-fill-error-subtle
#ffd0c9
--tng-color-fill-info-default
#001874
--tng-color-fill-info-muted
#c6e3ff
--tng-color-fill-info-subtle
#0072f0
--tng-color-fill-neutral-default
#282830
--tng-color-fill-neutral-emphasis
#000000
--tng-color-fill-neutral-muted
#a8aaac
--tng-color-fill-neutral-subtle
#6c7073
--tng-color-fill-primary-default
#d40605
--tng-color-fill-primary-muted
#fdaaaa
--tng-color-fill-primary-subtle
#fa4747
--tng-color-fill-secondary-default
#d40605
--tng-color-fill-secondary-muted
#fdaaaa
--tng-color-fill-secondary-subtle
#fa4747
--tng-color-fill-success-default
#006800
--tng-color-fill-success-muted
#c9e7ca
--tng-color-fill-success-subtle
#93f694
--tng-color-fill-warning-default
#fff9e5
--tng-color-foreground-contrast-default
#fbfbfc
--tng-color-foreground-contrast-emphasis
#ffffff
--tng-color-foreground-contrast-muted
#666666
--tng-color-foreground-contrast-subtle
#d4d2d1
--tng-color-foreground-error-default
#cc0000
--tng-color-foreground-error-muted
#ffd0c9
--tng-color-foreground-error-subtle
#ff3333
--tng-color-foreground-info-default
#001874
--tng-color-foreground-info-muted
#c6e3ff
--tng-color-foreground-info-subtle
#0072f0
--tng-color-foreground-neutral-default
#333333
--tng-color-foreground-neutral-emphasis
#000000
--tng-color-foreground-neutral-muted
#999999
--tng-color-foreground-neutral-subtle
#4d4d4d
--tng-color-foreground-primary-on-contrast-default
#00244d
--tng-color-foreground-primary-on-contrast-muted
#ccd3db
--tng-color-foreground-primary-on-contrast-subtle
#8899ac
--tng-color-foreground-primary-on-neutral-default
#00244d
--tng-color-foreground-primary-on-neutral-muted
#ccd3db
--tng-color-foreground-primary-on-neutral-subtle
#8899ac
--tng-color-foreground-secondary-default
#d49677
--tng-color-foreground-secondary-muted
#c57046
--tng-color-foreground-secondary-subtle
#c57046
--tng-color-foreground-success-default
#006800
--tng-color-foreground-success-muted
#6fd171
--tng-color-foreground-success-subtle
#4caf50
--tng-color-foreground-warning-default
#fff9e5
--tng-color-foreground-contrast-default
#fbfbfc
--tng-color-foreground-contrast-emphasis
#ffffff
--tng-color-foreground-contrast-muted
#e4e4e4
--tng-color-foreground-contrast-subtle
#f5f5f5
--tng-color-foreground-error-default
#cc0000
--tng-color-foreground-error-muted
#ffd0c9
--tng-color-foreground-error-subtle
#ff3333
--tng-color-foreground-info-default
#001874
--tng-color-foreground-info-muted
#95c6ff
--tng-color-foreground-info-subtle
#0072f0
--tng-color-foreground-neutral-default
#282830
--tng-color-foreground-neutral-emphasis
#15151b
--tng-color-foreground-neutral-muted
#a8aaac
--tng-color-foreground-neutral-subtle
#6c7073
--tng-color-foreground-primary-on-contrast-default
#d40605
--tng-color-foreground-primary-on-contrast-muted
#fdaaaa
--tng-color-foreground-primary-on-contrast-subtle
#ff0022
--tng-color-foreground-primary-on-neutral-default
#d40605
--tng-color-foreground-primary-on-neutral-muted
#fdaaaa
--tng-color-foreground-primary-on-neutral-subtle
#ff0022
--tng-color-foreground-secondary-default
#003641
--tng-color-foreground-secondary-muted
#328994
--tng-color-foreground-secondary-subtle
#006d7a
--tng-color-foreground-success-default
#006800
--tng-color-foreground-success-muted
#6fd171
--tng-color-foreground-success-subtle
#4caf50
--tng-color-foreground-warning-default
#fff9e5
--tng-color-surface-contrast-default
#00244d
--tng-color-surface-contrast-error
#ff0022
--tng-color-surface-contrast-success
#6fd171
--tng-color-surface-dim-contrast-default
rgba(255, 255, 255, 0.45)
--tng-color-surface-dim-contrast-muted
rgba(255, 255, 255, 0.2)
--tng-color-surface-dim-contrast-subtle
rgba(255, 255, 255, 0.35)
--tng-color-surface-dim-neutral-default
rgba(0, 0, 0, 0.65)
--tng-color-surface-dim-neutral-muted
rgba(0, 0, 0, 0.25)
--tng-color-surface-dim-neutral-subtle
rgba(0, 0, 0, 0.55)
--tng-color-surface-neutral-default
#ffffff
--tng-color-surface-neutral-error
#ff0022
--tng-color-surface-neutral-muted
#e5e9ed
--tng-color-surface-neutral-subtle
#f5f5f5
--tng-color-surface-neutral-success
#006800
--tng-color-surface-contrast-default
#282830
--tng-color-surface-contrast-error
#ff0022
--tng-color-surface-contrast-success
#6fd171
--tng-color-surface-dim-contrast-default
rgba(255, 255, 255, 0.45)
--tng-color-surface-dim-contrast-muted
rgba(255, 255, 255, 0.2)
--tng-color-surface-dim-contrast-subtle
rgba(255, 255, 255, 0.35)
--tng-color-surface-dim-neutral-default
rgba(0, 0, 0, 0.65)
--tng-color-surface-dim-neutral-muted
rgba(0, 0, 0, 0.25)
--tng-color-surface-dim-neutral-subtle
rgba(0, 0, 0, 0.55)
--tng-color-surface-neutral-default
#ffffff
--tng-color-surface-neutral-error
#ff0022
--tng-color-surface-neutral-muted
#e4e4e4
--tng-color-surface-neutral-subtle
#f5f5f5
--tng-color-surface-neutral-success
#006800
--tng-color-blur-blur-dark-25
rgba(0, 0, 0, 0.25)
--tng-color-blur-blur-dark-55
rgba(0, 0, 0, 0.55)
--tng-color-blur-blur-dark-65
rgba(0, 0, 0, 0.65)
--tng-color-blur-blur-dark-25
rgba(0, 0, 0, 0.25)
--tng-color-blur-blur-dark-55
rgba(0, 0, 0, 0.55)
--tng-color-blur-blur-dark-65
rgba(0, 0, 0, 0.65)
--tng-color-teal-bz4-x-bz4-x
#003641
--tng-color-teal-bz4-x-bz4-x-2
#006d7a
--tng-color-teal-bz4-x-bz4-x-3
#328994
--tng-color-teal-bz4-x-bz4-x
#003641
--tng-color-teal-bz4-x-bz4-x-2
#006d7a
--tng-color-teal-bz4-x-bz4-x-3
#328994
--tng-color-energy-energy-a
#fff200
--tng-color-energy-energy-aa
#bfd730
--tng-color-energy-energy-aaa
#50b848
--tng-color-energy-energy-aaaa
#00a651
--tng-color-energy-energy-b
#fdb913
--tng-color-energy-energy-bright-a
#00ff00
--tng-color-energy-energy-bright-b
#4dff00
--tng-color-energy-energy-bright-c
#b3ff00
--tng-color-energy-energy-bright-d
#ffff00
--tng-color-energy-energy-bright-e
#ffb300
--tng-color-energy-energy-bright-f
#ff4d00
--tng-color-energy-energy-bright-g
#ff0000
--tng-color-energy-energy-c
#f37021
--tng-color-energy-energy-d
#ed1c24
--tng-color-energy-energy-e
#ed1c24
--tng-color-energy-energy-f
#ed1c24
--tng-color-energy-energy-g
#ed1c24
--tng-color-energy-energy-a
#fff200
--tng-color-energy-energy-aa
#bfd730
--tng-color-energy-energy-aaa
#50b848
--tng-color-energy-energy-aaaa
#00a651
--tng-color-energy-energy-b
#fdb913
--tng-color-energy-energy-bright-a
#00ff00
--tng-color-energy-energy-bright-b
#4dff00
--tng-color-energy-energy-bright-c
#b3ff00
--tng-color-energy-energy-bright-d
#ffff00
--tng-color-energy-energy-bright-e
#ffb300
--tng-color-energy-energy-bright-f
#ff4d00
--tng-color-energy-energy-bright-g
#ff0000
--tng-color-energy-energy-c
#f37021
--tng-color-energy-energy-d
#ed1c24
--tng-color-energy-energy-e
#ed1c24
--tng-color-energy-energy-f
#ed1c24
--tng-color-energy-energy-g
#ed1c24
--tng-color-notification-red-100
#ffeeec
--tng-color-notification-red-200
#ffd0c9
--tng-color-notification-red-300
#ff3333
--tng-color-notification-red-400
#cc0000
--tng-color-notification-red-100
#ffeeec
--tng-color-notification-red-200
#ffd0c9
--tng-color-notification-red-300
#ff3333
--tng-color-notification-red-400
#cc0000
--tng-color-opacity-dark-20
rgba(0, 0, 0, 0.2)
--tng-color-opacity-dark-25
rgba(0, 0, 0, 0.25)
--tng-color-opacity-dark-30
rgba(0, 0, 0, 0.3)
--tng-color-opacity-dark-35
rgba(0, 0, 0, 0.35)
--tng-color-opacity-dark-40
rgba(0, 0, 0, 0.4)
--tng-color-opacity-dark-45
rgba(0, 0, 0, 0.45)
--tng-color-opacity-dark-55
rgba(0, 0, 0, 0.55)
--tng-color-opacity-dark-65
rgba(0, 0, 0, 0.65)
--tng-color-opacity-light-0
rgba(255, 255, 255, 0)
--tng-color-opacity-light-20
rgba(255, 255, 255, 0.2)
--tng-color-opacity-light-30
rgba(255, 255, 255, 0.3)
--tng-color-opacity-light-35
rgba(255, 255, 255, 0.35)
--tng-color-opacity-light-45
rgba(255, 255, 255, 0.45)
--tng-color-opacity-light-50
rgba(255, 255, 255, 0.5)
--tng-color-opacity-dark-20
rgba(0, 0, 0, 0.2)
--tng-color-opacity-dark-25
rgba(0, 0, 0, 0.25)
--tng-color-opacity-dark-30
rgba(0, 0, 0, 0.3)
--tng-color-opacity-dark-35
rgba(0, 0, 0, 0.35)
--tng-color-opacity-dark-40
rgba(0, 0, 0, 0.4)
--tng-color-opacity-dark-45
rgba(0, 0, 0, 0.45)
--tng-color-opacity-dark-55
rgba(0, 0, 0, 0.55)
--tng-color-opacity-dark-65
rgba(0, 0, 0, 0.65)
--tng-color-opacity-light-0
rgba(255, 255, 255, 0)
--tng-color-opacity-light-20
rgba(255, 255, 255, 0.2)
--tng-color-opacity-light-30
rgba(255, 255, 255, 0.3)
--tng-color-opacity-light-35
rgba(255, 255, 255, 0.35)
--tng-color-opacity-light-45
rgba(255, 255, 255, 0.45)
--tng-color-opacity-light-50
rgba(255, 255, 255, 0.5)