Token reference

Global tokens

Colors

Background
Platform tokenscsscssscssjses6
Default
#f8f8f8, #353535
var(--calcite-color-background)
None
rgba(255, 255, 255, 0)
var(--calcite-color-background-none)
Foreground
Platform tokenscsscssscssjses6
1
#ffffff, #2b2b2b
var(--calcite-color-foreground-1)
2
#f3f3f3, #202020
var(--calcite-color-foreground-2)
3
#eaeaea, #151515
var(--calcite-color-foreground-3)
Current
#c7eaff, #214155
var(--calcite-color-foreground-current)
Transparent
Platform tokenscsscssscssjses6
Default
rgba(0, 0, 0, 0), rgba(255, 255, 255, 0)
var(--calcite-color-transparent)
Hover
rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04)
var(--calcite-color-transparent-hover)
Press
rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08)
var(--calcite-color-transparent-press)
Scrim
rgba(255, 255, 255, 0.85), rgba(0, 0, 0, 0.85)
var(--calcite-color-transparent-scrim)
Tint
rgba(255, 255, 255, 0.8), rgba(43, 43, 43, 0.8)
var(--calcite-color-transparent-tint)
Brand
Platform tokenscsscssscssjses6
Default
#007ac2, #009af2
var(--calcite-color-brand)
Hover
#00619b, #007ac2
var(--calcite-color-brand-hover)
Press
#004874, #00619b
var(--calcite-color-brand-press)
Underline
rgba(0, 97, 155, 0.4), rgba(0, 160, 255, 0.4)
var(--calcite-color-brand-underline)
Status
Platform tokenscsscssscssjses6
Default
#00619b, #00a0ff
var(--calcite-color-status-info)
Hover
#004874, #3db8ff
var(--calcite-color-status-info-hover)
Press
#00304d, #009af2
var(--calcite-color-status-info-press)
Default
#35ac46, #36da43
var(--calcite-color-status-success)
Hover
#288835, #3bed52
var(--calcite-color-status-success-hover)
Press
#1a6324, #00b81b
var(--calcite-color-status-success-press)
Default
#edd317, #ffc900
var(--calcite-color-status-warning)
Hover
#d9bc00, #ffee33
var(--calcite-color-status-warning-hover)
Press
#bfa200, #f5d000
var(--calcite-color-status-warning-press)
Default
#d83020, #fe583e
var(--calcite-color-status-danger)
Hover
#a82b1e, #ff0015
var(--calcite-color-status-danger-hover)
Press
#7c1d13, #d90012
var(--calcite-color-status-danger-press)
Inverse
Platform tokenscsscssscssjses6
Default
#353535, #f8f8f8
var(--calcite-color-inverse)
Hover
#2b2b2b, #ffffff
var(--calcite-color-inverse-hover)
Press
#202020, #f3f3f3
var(--calcite-color-inverse-press)
Text
Platform tokenscsscssscssjses6
1
#151515, #ffffff
var(--calcite-color-text-1)
2
#4a4a4a, #bfbfbf
var(--calcite-color-text-2)
3
#6a6a6a, #9f9f9f
var(--calcite-color-text-3)
Default
Platform tokenscsscssscssjses6
Inverse
#ffffff, #151515
var(--calcite-color-text-inverse)
Border
Platform tokenscsscssscssjses6
1
#cacaca, #555555
var(--calcite-color-border-1)
2
#d4d4d4, #4a4a4a
var(--calcite-color-border-2)
3
#dfdfdf, #404040
var(--calcite-color-border-3)
Input
#949494, #757575
var(--calcite-color-border-input)
Ghost
rgba(0, 0, 0, 0.3), rgba(117, 117, 117, 0.3)
var(--calcite-color-border-ghost)
White
#ffffff, #f8f8f8
var(--calcite-color-border-white)

Border

Width
Platform tokenscsscssscssjses6
None
0
var(--calcite-border-width-none)
Sm
1px
var(--calcite-border-width-sm)
Md
2px
var(--calcite-border-width-md)
Lg
4px
var(--calcite-border-width-lg)

Corner

Radius
Platform tokenscsscssscssjses6
Default
0
var(--calcite-corner-radius)
Sharp
0
var(--calcite-corner-radius-sharp)
Round
4px
var(--calcite-corner-radius-round)
Pill
100%
var(--calcite-corner-radius-pill)

Shadow

Default
Platform tokenscsscssscssjses6
None
0px 0px 0px 0px rgba(0, 0, 0, 0)
var(--calcite-shadow-none)
Sm
0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 4px 16px 0px rgba(0, 0, 0, 0.08)
var(--calcite-shadow-sm)
Md
0px 4px 20px 0px rgba(0, 0, 0, 0.08), 0px 12px 32px -2px rgba(0, 0, 0, 0.1)
var(--calcite-shadow-md)

Opacity

Default
Platform tokenscsscssscssjses6
Light
0.4
var(--calcite-opacity-light)
Half
0.5
var(--calcite-opacity-half)
Dark
0.85
var(--calcite-opacity-dark)
Full
1
var(--calcite-opacity-full)
Disabled
0.5
var(--calcite-opacity-disabled)

Stacking

Default
Platform tokenscsscssscssjses6
Deep
-999999
var(--calcite-z-index-deep)
Default
1
var(--calcite-z-index)
Sticky
300
var(--calcite-z-index-sticky)
Header
400
var(--calcite-z-index-header)
Toast
500
var(--calcite-z-index-toast)
Overlay
700
var(--calcite-z-index-overlay)
Tooltip
901
var(--calcite-z-index-tooltip)

Font

Family
Platform tokenscsscssscssjses6
Default
AaBbCc
123456
["Avenir Next","Avenir","Helvetica Neue","sans-serif"]
var(--calcite-font-family)
Code
AaBbCc
123456
["Monaco","Consolas","Andale Mono","Lucida Console","monospace"]
var(--calcite-font-family-code)
Weight
Platform tokenscsscssscssjses6
Light
AaBbCc
123456
300
var(--calcite-font-weight-light)
Normal
AaBbCc
123456
400
var(--calcite-font-weight-normal)
Regular
AaBbCc
123456
400
var(--calcite-font-weight-regular)
Medium
AaBbCc
123456
500
var(--calcite-font-weight-medium)
Semibold
AaBbCc
123456
600
var(--calcite-font-weight-semibold)
Bold
AaBbCc
123456
700
var(--calcite-font-weight-bold)
Size
Platform tokenscsscssscssjses6
Xs
AaBbCc
123456
10px
var(--calcite-font-size-xs)
Sm
AaBbCc
123456
12px
var(--calcite-font-size-sm)
Default
AaBbCc
123456
14px
var(--calcite-font-size)
Md
AaBbCc
123456
16px
var(--calcite-font-size-md)
Lg
AaBbCc
123456
18px
var(--calcite-font-size-lg)
Xl
AaBbCc
123456
20px
var(--calcite-font-size-xl)
Xxl
AaBbCc
123456
24px
var(--calcite-font-size-xxl)
Style
Platform tokenscsscssscssjses6
Emphasis
AaBbCc
123456
italic
var(--calcite-font-style-emphasis)
Line height
Platform tokenscsscssscssjses6
Sm
AaBbCc
123456
12px
var(--calcite-font-line-height-fixed-sm)
Base
AaBbCc
123456
16px
var(--calcite-font-line-height-fixed-base)
Lg
AaBbCc
123456
20px
var(--calcite-font-line-height-fixed-lg)
Xl
AaBbCc
123456
24px
var(--calcite-font-line-height-fixed-xl)
Default
AaBbCc
123456
auto
var(--calcite-font-line-height-relative)
Tight
AaBbCc
123456
125%
var(--calcite-font-line-height-relative-tight)
Snug
AaBbCc
123456
137.5%
var(--calcite-font-line-height-relative-snug)
Normal
AaBbCc
123456
150%
var(--calcite-font-line-height-relative-normal)
Relaxed
AaBbCc
123456
162.5%
var(--calcite-font-line-height-relative-relaxed)
Loose
AaBbCc
123456
200%
var(--calcite-font-line-height-relative-loose)
Letter spacing
Platform tokenscsscssscssjses6
Tight
AaBbCc
123456
-0.4
var(--calcite-font-letter-spacing-tight)
Normal
AaBbCc
123456
0
var(--calcite-font-letter-spacing-normal)
Wide
AaBbCc
123456
0.4
var(--calcite-font-letter-spacing-wide)
Paragraph spacing
Platform tokenscsscssscssjses6
Normal
AaBbCc
123456
4px
var(--calcite-font-paragraph-spacing-normal)
Text decoration
Platform tokenscsscssscssjses6
None
AaBbCc
123456
none
var(--calcite-font-text-decoration-none)
Underline
AaBbCc
123456
underline
var(--calcite-font-text-decoration-underline)
Text case
Platform tokenscsscssscssjses6
None
AaBbCc
123456
none
var(--calcite-font-text-case-none)
Uppercase
AaBbCc
123456
uppercase
var(--calcite-font-text-case-uppercase)
Lowercase
AaBbCc
123456
lowercase
var(--calcite-font-text-case-lowercase)
Capitalize
AaBbCc
123456
capitalize
var(--calcite-font-text-case-capitalize)

Spacing

Default
Platform tokenscsscssscssjses6
Px
1px
var(--calcite-spacing-px)
Base
2px
var(--calcite-spacing-base)
Xxs
4px
var(--calcite-spacing-xxs)
Xs
6px
var(--calcite-spacing-xs)
Sm
8px
var(--calcite-spacing-sm)
Md
12px
var(--calcite-spacing-md)
Lg
14px
var(--calcite-spacing-lg)
Xl
16px
var(--calcite-spacing-xl)
Xxl
20px
var(--calcite-spacing-xxl)
Xxxl
32px
var(--calcite-spacing-xxxl)

Core tokens

Colors

Neutral
Platform tokenscsscssscssjses6
Blk-000
#ffffff
var(--calcite-color-neutral-blk-000)
Blk-005
#f8f8f8
var(--calcite-color-neutral-blk-005)
Blk-010
#f3f3f3
var(--calcite-color-neutral-blk-010)
Blk-020
#eaeaea
var(--calcite-color-neutral-blk-020)
Blk-030
#dfdfdf
var(--calcite-color-neutral-blk-030)
Blk-040
#d4d4d4
var(--calcite-color-neutral-blk-040)
Blk-050
#cacaca
var(--calcite-color-neutral-blk-050)
Blk-060
#bfbfbf
var(--calcite-color-neutral-blk-060)
Blk-070
#b5b5b5
var(--calcite-color-neutral-blk-070)
Blk-080
#aaaaaa
var(--calcite-color-neutral-blk-080)
Blk-090
#9f9f9f
var(--calcite-color-neutral-blk-090)
Blk-100
#949494
var(--calcite-color-neutral-blk-100)
Blk-110
#8a8a8a
var(--calcite-color-neutral-blk-110)
Blk-120
#808080
var(--calcite-color-neutral-blk-120)
Blk-130
#757575
var(--calcite-color-neutral-blk-130)
Blk-140
#6a6a6a
var(--calcite-color-neutral-blk-140)
Blk-150
#606060
var(--calcite-color-neutral-blk-150)
Blk-160
#555555
var(--calcite-color-neutral-blk-160)
Blk-170
#4a4a4a
var(--calcite-color-neutral-blk-170)
Blk-180
#404040
var(--calcite-color-neutral-blk-180)
Blk-190
#353535
var(--calcite-color-neutral-blk-190)
Blk-200
#2b2b2b
var(--calcite-color-neutral-blk-200)
Blk-210
#202020
var(--calcite-color-neutral-blk-210)
Blk-220
#151515
var(--calcite-color-neutral-blk-220)
Blk-230
#0b0b0b
var(--calcite-color-neutral-blk-230)
Blk-235
#060606
var(--calcite-color-neutral-blk-235)
Blk-240
#000000
var(--calcite-color-neutral-blk-240)
High saturation
Platform tokenscsscssscssjses6
H-bb-010
#c7eaff
var(--calcite-color-high-saturation-blue-h-bb-010)
H-bb-020
#9fd4f3
var(--calcite-color-high-saturation-blue-h-bb-020)
H-bb-030
#77bde7
var(--calcite-color-high-saturation-blue-h-bb-030)
H-bb-040
#50a7da
var(--calcite-color-high-saturation-blue-h-bb-040)
H-bb-050
#2890ce
var(--calcite-color-high-saturation-blue-h-bb-050)
H-bb-060
#007ac2
var(--calcite-color-high-saturation-blue-h-bb-060)
H-bb-070
#00619b
var(--calcite-color-high-saturation-blue-h-bb-070)
H-bb-080
#004874
var(--calcite-color-high-saturation-blue-h-bb-080)
H-bb-090
#00304d
var(--calcite-color-high-saturation-blue-h-bb-090)
H-bb-100
#001726
var(--calcite-color-high-saturation-blue-h-bb-100)
H-gb-010
#cef5f4
var(--calcite-color-high-saturation-green-blue-h-gb-010)
H-gb-020
#afedec
var(--calcite-color-high-saturation-green-blue-h-gb-020)
H-gb-030
#8fe6e5
var(--calcite-color-high-saturation-green-blue-h-gb-030)
H-gb-040
#5ae0de
var(--calcite-color-high-saturation-green-blue-h-gb-040)
H-gb-050
#28cecb
var(--calcite-color-high-saturation-green-blue-h-gb-050)
H-gb-060
#00bab5
var(--calcite-color-high-saturation-green-blue-h-gb-060)
H-gb-070
#009b98
var(--calcite-color-high-saturation-green-blue-h-gb-070)
H-gb-080
#007472
var(--calcite-color-high-saturation-green-blue-h-gb-080)
H-gb-090
#004d4c
var(--calcite-color-high-saturation-green-blue-h-gb-090)
H-gb-100
#002625
var(--calcite-color-high-saturation-green-blue-h-gb-100)
H-gg-010
#bdf2c4
var(--calcite-color-high-saturation-green-h-gg-010)
H-gg-020
#a2e4ab
var(--calcite-color-high-saturation-green-h-gg-020)
H-gg-030
#87d692
var(--calcite-color-high-saturation-green-h-gg-030)
H-gg-040
#6bc878
var(--calcite-color-high-saturation-green-h-gg-040)
H-gg-050
#50ba5f
var(--calcite-color-high-saturation-green-h-gg-050)
H-gg-060
#35ac46
var(--calcite-color-high-saturation-green-h-gg-060)
H-gg-070
#288835
var(--calcite-color-high-saturation-green-h-gg-070)
H-gg-080
#1a6324
var(--calcite-color-high-saturation-green-h-gg-080)
H-gg-090
#0d3f14
var(--calcite-color-high-saturation-green-h-gg-090)
H-gg-100
#001a03
var(--calcite-color-high-saturation-green-h-gg-100)
H-yg-010
#e5f7b4
var(--calcite-color-high-saturation-yellow-green-h-yg-010)
H-yg-020
#d9ef9f
var(--calcite-color-high-saturation-yellow-green-h-yg-020)
H-yg-030
#cde78a
var(--calcite-color-high-saturation-yellow-green-h-yg-030)
H-yg-040
#c2e075
var(--calcite-color-high-saturation-yellow-green-h-yg-040)
H-yg-050
#b6d860
var(--calcite-color-high-saturation-yellow-green-h-yg-050)
H-yg-060
#aad04b
var(--calcite-color-high-saturation-yellow-green-h-yg-060)
H-yg-070
#84a338
var(--calcite-color-high-saturation-yellow-green-h-yg-070)
H-yg-080
#5e7526
var(--calcite-color-high-saturation-yellow-green-h-yg-080)
H-yg-090
#384813
var(--calcite-color-high-saturation-yellow-green-h-yg-090)
H-yg-100
#121a00
var(--calcite-color-high-saturation-yellow-green-h-yg-100)
H-yy-010
#fff7cc
var(--calcite-color-high-saturation-yellow-h-yy-010)
H-yy-020
#fef3ad
var(--calcite-color-high-saturation-yellow-h-yy-020)
H-yy-030
#fcee8d
var(--calcite-color-high-saturation-yellow-h-yy-030)
H-yy-040
#fbea6e
var(--calcite-color-high-saturation-yellow-h-yy-040)
H-yy-050
#f9e54e
var(--calcite-color-high-saturation-yellow-h-yy-050)
H-yy-060
#edd317
var(--calcite-color-high-saturation-yellow-h-yy-060)
H-yy-070
#d9bc00
var(--calcite-color-high-saturation-yellow-h-yy-070)
H-yy-080
#bfa200
var(--calcite-color-high-saturation-yellow-h-yy-080)
H-yy-090
#8c7500
var(--calcite-color-high-saturation-yellow-h-yy-090)
H-yy-100
#5c4e00
var(--calcite-color-high-saturation-yellow-h-yy-100)
H-oy-010
#ffe2bf
var(--calcite-color-high-saturation-orange-yellow-h-oy-010)
H-oy-020
#fed3a1
var(--calcite-color-high-saturation-orange-yellow-h-oy-020)
H-oy-030
#fcc582
var(--calcite-color-high-saturation-orange-yellow-h-oy-030)
H-oy-040
#fbb664
var(--calcite-color-high-saturation-orange-yellow-h-oy-040)
H-oy-050
#f9a845
var(--calcite-color-high-saturation-orange-yellow-h-oy-050)
H-oy-060
#f89927
var(--calcite-color-high-saturation-orange-yellow-h-oy-060)
H-oy-070
#c67718
var(--calcite-color-high-saturation-orange-yellow-h-oy-070)
H-oy-080
#9a5b10
var(--calcite-color-high-saturation-orange-yellow-h-oy-080)
H-oy-090
#6d3f08
var(--calcite-color-high-saturation-orange-yellow-h-oy-090)
H-oy-100
#402300
var(--calcite-color-high-saturation-orange-yellow-h-oy-100)
H-oo-010
#ffd8bf
var(--calcite-color-high-saturation-orange-h-oo-010)
H-oo-020
#fdc39f
var(--calcite-color-high-saturation-orange-h-oo-020)
H-oo-030
#faae7f
var(--calcite-color-high-saturation-orange-h-oo-030)
H-oo-040
#f89960
var(--calcite-color-high-saturation-orange-h-oo-040)
H-oo-050
#f58440
var(--calcite-color-high-saturation-orange-h-oo-050)
H-oo-060
#f36f20
var(--calcite-color-high-saturation-orange-h-oo-060)
H-oo-070
#c65a18
var(--calcite-color-high-saturation-orange-h-oo-070)
H-oo-080
#9a4410
var(--calcite-color-high-saturation-orange-h-oo-080)
H-oo-090
#6d2f08
var(--calcite-color-high-saturation-orange-h-oo-090)
H-oo-100
#401900
var(--calcite-color-high-saturation-orange-h-oo-100)
H-ro-010
#ffc7b3
var(--calcite-color-high-saturation-red-orange-h-ro-010)
H-ro-020
#f8af95
var(--calcite-color-high-saturation-red-orange-h-ro-020)
H-ro-030
#f09677
var(--calcite-color-high-saturation-red-orange-h-ro-030)
H-ro-040
#e97e5a
var(--calcite-color-high-saturation-red-orange-h-ro-040)
H-ro-050
#e1653c
var(--calcite-color-high-saturation-red-orange-h-ro-050)
H-ro-060
#da4d1e
var(--calcite-color-high-saturation-red-orange-h-ro-060)
H-ro-070
#ad3c16
var(--calcite-color-high-saturation-red-orange-h-ro-070)
H-ro-080
#802c0f
var(--calcite-color-high-saturation-red-orange-h-ro-080)
H-ro-090
#531b07
var(--calcite-color-high-saturation-red-orange-h-ro-090)
H-ro-100
#260a00
var(--calcite-color-high-saturation-red-orange-h-ro-100)
H-rr-010
#ffc6bf
var(--calcite-color-high-saturation-red-h-rr-010)
H-rr-020
#ffaaa1
var(--calcite-color-high-saturation-red-h-rr-020)
H-rr-030
#f2877b
var(--calcite-color-high-saturation-red-h-rr-030)
H-rr-040
#f07062
var(--calcite-color-high-saturation-red-h-rr-040)
H-rr-050
#e65240
var(--calcite-color-high-saturation-red-h-rr-050)
H-rr-060
#d83020
var(--calcite-color-high-saturation-red-h-rr-060)
H-rr-070
#a82b1e
var(--calcite-color-high-saturation-red-h-rr-070)
H-rr-080
#7c1d13
var(--calcite-color-high-saturation-red-h-rr-080)
H-rr-090
#4f0e08
var(--calcite-color-high-saturation-red-h-rr-090)
H-rr-100
#210300
var(--calcite-color-high-saturation-red-h-rr-100)
H-pk-010
#ffd1ef
var(--calcite-color-high-saturation-pink-h-pk-010)
H-pk-020
#fabee4
var(--calcite-color-high-saturation-pink-h-pk-020)
H-pk-030
#f2a5d6
var(--calcite-color-high-saturation-pink-h-pk-030)
H-pk-040
#eb8dc9
var(--calcite-color-high-saturation-pink-h-pk-040)
H-pk-050
#e673bb
var(--calcite-color-high-saturation-pink-h-pk-050)
H-pk-060
#e04ea6
var(--calcite-color-high-saturation-pink-h-pk-060)
H-pk-070
#ba2f7e
var(--calcite-color-high-saturation-pink-h-pk-070)
H-pk-080
#851b52
var(--calcite-color-high-saturation-pink-h-pk-080)
H-pk-090
#590b32
var(--calcite-color-high-saturation-pink-h-pk-090)
H-pk-100
#260404
var(--calcite-color-high-saturation-pink-h-pk-100)
H-vr-010
#fadbff
var(--calcite-color-high-saturation-violet-red-h-vr-010)
H-vr-020
#e4beeb
var(--calcite-color-high-saturation-violet-red-h-vr-020)
H-vr-030
#cfa1d7
var(--calcite-color-high-saturation-violet-red-h-vr-030)
H-vr-040
#b983c3
var(--calcite-color-high-saturation-violet-red-h-vr-040)
H-vr-050
#a466af
var(--calcite-color-high-saturation-violet-red-h-vr-050)
H-vr-060
#8e499b
var(--calcite-color-high-saturation-violet-red-h-vr-060)
H-vr-070
#73377e
var(--calcite-color-high-saturation-violet-red-h-vr-070)
H-vr-080
#572561
var(--calcite-color-high-saturation-violet-red-h-vr-080)
H-vr-090
#3c1243
var(--calcite-color-high-saturation-violet-red-h-vr-090)
H-vr-100
#200026
var(--calcite-color-high-saturation-violet-red-h-vr-100)
H-vv-010
#e8d9ff
var(--calcite-color-high-saturation-violet-h-vv-010)
H-vv-020
#cdb9eb
var(--calcite-color-high-saturation-violet-h-vv-020)
H-vv-030
#b39ad7
var(--calcite-color-high-saturation-violet-h-vv-030)
H-vv-040
#987ac3
var(--calcite-color-high-saturation-violet-h-vv-040)
H-vv-050
#7e5baf
var(--calcite-color-high-saturation-violet-h-vv-050)
H-vv-060
#633b9b
var(--calcite-color-high-saturation-violet-h-vv-060)
H-vv-070
#4e2c7e
var(--calcite-color-high-saturation-violet-h-vv-070)
H-vv-080
#3a1e61
var(--calcite-color-high-saturation-violet-h-vv-080)
H-vv-090
#250f43
var(--calcite-color-high-saturation-violet-h-vv-090)
H-vv-100
#100026
var(--calcite-color-high-saturation-violet-h-vv-100)
Vibrant
Platform tokenscsscssscssjses6
V-bb-120
#59d6ff
var(--calcite-color-vibrant-blue-v-bb-120)
V-bb-140
#3db8ff
var(--calcite-color-vibrant-blue-v-bb-140)
V-bb-160
#009af2
var(--calcite-color-vibrant-blue-v-bb-160)
V-bb-180
#009af2
var(--calcite-color-vibrant-blue-v-bb-180)
V-gb-120
#59fffc
var(--calcite-color-vibrant-green-blue-v-gb-120)
V-gb-140
#00f7f3
var(--calcite-color-vibrant-green-blue-v-gb-140)
V-gb-160
#00e6e2
var(--calcite-color-vibrant-green-blue-v-gb-160)
V-gb-180
#00cfca
var(--calcite-color-vibrant-green-blue-v-gb-180)
V-gg-120
#73ff84
var(--calcite-color-vibrant-green-v-gg-120)
V-gg-140
#3bed52
var(--calcite-color-vibrant-green-v-gg-140)
V-gg-160
#00b81b
var(--calcite-color-vibrant-green-v-gg-160)
V-gg-180
#00a118
var(--calcite-color-vibrant-green-v-gg-180)
V-yg-120
#d7ff73
var(--calcite-color-vibrant-yellow-green-v-yg-120)
V-yg-140
#bbed3b
var(--calcite-color-vibrant-yellow-green-v-yg-140)
V-yg-160
#96cc00
var(--calcite-color-vibrant-yellow-green-v-yg-160)
V-yg-180
#7fab00
var(--calcite-color-vibrant-yellow-green-v-yg-180)
V-yy-120
#fff766
var(--calcite-color-vibrant-yellow-v-yy-120)
V-yy-140
#ffee33
var(--calcite-color-vibrant-yellow-v-yy-140)
V-yy-160
#f5d000
var(--calcite-color-vibrant-yellow-v-yy-160)
V-yy-180
#ebba17
var(--calcite-color-vibrant-yellow-v-yy-180)
V-oy-120
#ffb54d
var(--calcite-color-vibrant-orange-yellow-v-oy-120)
V-oy-140
#ff9500
var(--calcite-color-vibrant-orange-yellow-v-oy-140)
V-oy-160
#e68600
var(--calcite-color-vibrant-orange-yellow-v-oy-160)
V-oy-180
#d17300
var(--calcite-color-vibrant-orange-yellow-v-oy-180)
V-ro-120
#ff824d
var(--calcite-color-vibrant-red-orange-v-ro-120)
V-ro-140
#ff4d00
var(--calcite-color-vibrant-red-orange-v-ro-140)
V-ro-160
#de4300
var(--calcite-color-vibrant-red-orange-v-ro-160)
V-ro-180
#c93b00
var(--calcite-color-vibrant-red-orange-v-ro-180)
V-rr-120
#ff624d
var(--calcite-color-vibrant-red-v-rr-120)
V-rr-140
#ff0015
var(--calcite-color-vibrant-red-v-rr-140)
V-rr-160
#d90012
var(--calcite-color-vibrant-red-v-rr-160)
V-rr-180
#b3000f
var(--calcite-color-vibrant-red-v-rr-180)
V-pk-120
#ff66c2
var(--calcite-color-vibrant-pink-v-pk-120)
V-pk-140
#ff19a4
var(--calcite-color-vibrant-pink-v-pk-140)
V-pk-160
#d11486
var(--calcite-color-vibrant-pink-v-pk-160)
V-pk-180
#c00073
var(--calcite-color-vibrant-pink-v-pk-180)
V-vr-120
#ea80ff
var(--calcite-color-vibrant-violet-red-v-vr-120)
V-vr-140
#dd33ff
var(--calcite-color-vibrant-violet-red-v-vr-140)
V-vr-160
#ac08cc
var(--calcite-color-vibrant-violet-red-v-vr-160)
V-vr-180
#83009e
var(--calcite-color-vibrant-violet-red-v-vr-180)
V-vv-120
#b580ff
var(--calcite-color-vibrant-violet-v-vv-120)
V-vv-140
#974dff
var(--calcite-color-vibrant-violet-v-vv-140)
V-vv-160
#8129ff
var(--calcite-color-vibrant-violet-v-vv-160)
V-vv-180
#6a0be6
var(--calcite-color-vibrant-violet-v-vv-180)
Dark
Platform tokenscsscssscssjses6
D-gg-410
#44ed51
var(--calcite-color-dark-green-d-gg-410)
D-gg-420
#36da43
var(--calcite-color-dark-green-d-gg-420)
D-gg-430
#36da43
var(--calcite-color-dark-green-d-gg-430)
D-yy-410
#ffe24d
var(--calcite-color-dark-yellow-d-yy-410)
D-yy-420
#ffc900
var(--calcite-color-dark-yellow-d-yy-420)
D-yy-430
#f4b000
var(--calcite-color-dark-yellow-d-yy-430)
D-rr-410
#ff7465
var(--calcite-color-dark-red-d-rr-410)
D-rr-420
#fe583e
var(--calcite-color-dark-red-d-rr-420)
D-rr-430
#f3381b
var(--calcite-color-dark-red-d-rr-430)
D-bb-410
#47bbff
var(--calcite-color-dark-blue-d-bb-410)
D-bb-420
#00a0ff
var(--calcite-color-dark-blue-d-bb-420)
D-bb-430
#0087d7
var(--calcite-color-dark-blue-d-bb-430)

Shadow

Default
Platform tokenscsscssscssjses6
0
0px 0px 0px 0px rgba(0, 0, 0, 0)
var(--calcite-shadow-0)
1
0px 2px 8px 0px rgba(0, 0, 0, 0.04)
var(--calcite-shadow-1)
2
0px 4px 16px 0px rgba(0, 0, 0, 0.08)
var(--calcite-shadow-2)
3
0px 4px 20px 0px rgba(0, 0, 0, 0.08)
var(--calcite-shadow-3)
4
0px 12px 32px -2px rgba(0, 0, 0, 0.1)
var(--calcite-shadow-4)

Opacity

Default
Platform tokenscsscssscssjses6
0
0
var(--calcite-opacity-0)
4
0.04
var(--calcite-opacity-4)
8
0.08
var(--calcite-opacity-8)
10
0.1
var(--calcite-opacity-10)
20
0.2
var(--calcite-opacity-20)
30
0.3
var(--calcite-opacity-30)
40
0.4
var(--calcite-opacity-40)
50
0.5
var(--calcite-opacity-50)
60
0.6
var(--calcite-opacity-60)
70
0.7
var(--calcite-opacity-70)
80
0.8
var(--calcite-opacity-80)
85
0.85
var(--calcite-opacity-85)
90
0.9
var(--calcite-opacity-90)
92
0.92
var(--calcite-opacity-92)
96
0.96
var(--calcite-opacity-96)
100
1
var(--calcite-opacity-100)

Stacking

Default
Platform tokenscsscssscssjses6
0
-999999
var(--calcite-z-index-0)
1
1
var(--calcite-z-index-1)
3
300
var(--calcite-z-index-3)
4
400
var(--calcite-z-index-4)
5
500
var(--calcite-z-index-5)
6
600
var(--calcite-z-index-6)
7
700
var(--calcite-z-index-7)
8
800
var(--calcite-z-index-8)
9
900
var(--calcite-z-index-9)

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close