Semantic tokens
@import "@esri/calcite-design-tokens/dist/css/index.css";
Colors
Name | Light value | Dark value | Platform tokens |
---|---|---|---|
Background | |||
default | #f7f7f7 | #363636 | var(--calcite-color-background) |
none | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) | var(--calcite-color-background-none) |
Foreground | |||
1 | #ffffff | #2b2b2b | var(--calcite-color-foreground-1) |
2 | #f2f2f2 | #212121 | var(--calcite-color-foreground-2) |
3 | #ebebeb | #141414 | var(--calcite-color-foreground-3) |
highlight | #d6efff | #2b465f | var(--calcite-color-surface-highlight) |
Transparent | |||
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.12) | var(--calcite-color-transparent-hover) |
press | rgba(0, 0, 0, 0.08) | rgba(255, 255, 255, 0.16) | 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) |
Transparent: inverse | |||
hover | rgba(255, 255, 255, 0.12) | rgba(0, 0, 0, 0.04) | var(--calcite-color-transparent-inverse-hover) |
press | rgba(255, 255, 255, 0.16) | rgba(0, 0, 0, 0.08) | var(--calcite-color-transparent-inverse-press) |
Brand | |||
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: info | |||
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) |
Status: success | |||
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) |
Status: warning | |||
default | #f89927 | #f89927 | var(--calcite-color-status-warning) |
hover | #d17300 | #ffb54d | var(--calcite-color-status-warning-hover) |
press | #9a5b10 | #ff9500 | var(--calcite-color-status-warning-press) |
Status: danger | |||
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 | |||
default | #363636 | #f7f7f7 | var(--calcite-color-inverse) |
hover | #2b2b2b | #ffffff | var(--calcite-color-inverse-hover) |
press | #212121 | #f2f2f2 | var(--calcite-color-inverse-press) |
Text | |||
1 | #141414 | #ffffff | var(--calcite-color-text-1) |
2 | #4a4a4a | #bfbfbf | var(--calcite-color-text-2) |
3 | #6b6b6b | #9e9e9e | var(--calcite-color-text-3) |
highlight | #004874 | #d6efff | var(--calcite-color-text-highlight) |
inverse | #ffffff | #141414 | var(--calcite-color-text-inverse) |
link | #00619b | #00a0ff | var(--calcite-color-text-link) |
Border | |||
1 | #c9c9c9 | #545454 | var(--calcite-color-border-1) |
2 | #d4d4d4 | #4a4a4a | var(--calcite-color-border-2) |
3 | #dedede | #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 | #f7f7f7 | var(--calcite-color-border-white) |
Focus | |||
default | #007ac2 | #009af2 | var(--calcite-color-focus) |
Border
Name | Value | Platform tokens |
---|---|---|
Width | ||
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
Name | Value | Platform tokens |
---|---|---|
default | 0 | var(--calcite-corner-radius) |
none | 0 | var(--calcite-corner-radius-none) |
xs | 2px | var(--calcite-corner-radius-xs) |
sm | 4px | var(--calcite-corner-radius-sm) |
pill | 100% | var(--calcite-corner-radius-pill) |
Shadow
Name | Value | Platform tokens |
---|---|---|
none | 0 0 0 0 rgba(0, 0, 0, 0) | var(--calcite-shadow-none) |
sm | 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08) | var(--calcite-shadow-sm) |
md | 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 32px -2px rgba(0, 0, 0, 0.1) | var(--calcite-shadow-md) |
Opacity
Name | Value | Platform tokens |
---|---|---|
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
Name | Value | Platform tokens |
---|---|---|
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) |
dropdown | 600 | var(--calcite-z-index-dropdown) |
overlay | 700 | var(--calcite-z-index-overlay) |
modal | 800 | var(--calcite-z-index-modal) |
popup | 900 | var(--calcite-z-index-popup) |
tooltip | 901 | var(--calcite-z-index-tooltip) |
Font
Name | Value | Platform tokens |
---|---|---|
Family | ||
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 | ||
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 600 | var(--calcite-font-weight-bold) |
Size | ||
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 | ||
emphasis | AaBbCc 123456 italic | var(--calcite-font-style-emphasis) |
Line height: fixed | ||
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) |
2xl | AaBbCc 123456 32px | var(--calcite-font-line-height-fixed-2xl) |
3xl | AaBbCc 123456 40px | var(--calcite-font-line-height-fixed-3xl) |
4xl | AaBbCc 123456 48px | var(--calcite-font-line-height-fixed-4xl) |
5xl | AaBbCc 123456 64px | var(--calcite-font-line-height-fixed-5xl) |
6xl | AaBbCc 123456 80px | var(--calcite-font-line-height-fixed-6xl) |
Line height: relative | ||
default | AaBbCc 123456 normal | var(--calcite-font-line-height-relative) |
base | AaBbCc 123456 1 | var(--calcite-font-line-height-relative-base) |
tight | AaBbCc 123456 1.25 | var(--calcite-font-line-height-relative-tight) |
snug | AaBbCc 123456 1.375 | var(--calcite-font-line-height-relative-snug) |
normal | AaBbCc 123456 1.5 | var(--calcite-font-line-height-relative-normal) |
relaxed | AaBbCc 123456 1.625 | var(--calcite-font-line-height-relative-relaxed) |
loose | AaBbCc 123456 2 | var(--calcite-font-line-height-relative-loose) |
Letter spacing | ||
tight | AaBbCc 123456 -0.4px | var(--calcite-font-letter-spacing-tight) |
normal | AaBbCc 123456 0 | var(--calcite-font-letter-spacing-normal) |
wide | AaBbCc 123456 0.4px | var(--calcite-font-letter-spacing-wide) |
Paragraph spacing | ||
normal | AaBbCc 123456 4px | var(--calcite-font-paragraph-spacing-normal) |
Text decoration | ||
none | AaBbCc 123456 none | var(--calcite-font-text-decoration-none) |
underline | AaBbCc 123456 underline | var(--calcite-font-text-decoration-underline) |
Text case | ||
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
Name | Value | Platform tokens |
---|---|---|
none | 0 | var(--calcite-spacing-none) |
px | 1px | var(--calcite-spacing-px) |
base | 2px | var(--calcite-spacing-base) |
xxs | 0.25rem | var(--calcite-spacing-xxs) |
xs | 0.375rem | var(--calcite-spacing-xs) |
sm | 0.5rem | var(--calcite-spacing-sm) |
sm+ | 0.625rem | var(--calcite-spacing-sm-plus) |
md | 0.75rem | var(--calcite-spacing-md) |
md+ | 0.875rem | var(--calcite-spacing-md-plus) |
lg | 1rem | var(--calcite-spacing-lg) |
xl | 1.25rem | var(--calcite-spacing-xl) |
xxl | 1.5rem | var(--calcite-spacing-xxl) |
xxxl | 2rem | var(--calcite-spacing-xxxl) |
Core tokens
@import "@esri/calcite-design-tokens/dist/css/core.css";
Colors
Name | Value | Platform tokens |
---|---|---|
Neutral | ||
blk-000 | #ffffff | var(--calcite-color-neutral-blk-000) |
blk-005 | #f7f7f7 | var(--calcite-color-neutral-blk-005) |
blk-010 | #f2f2f2 | var(--calcite-color-neutral-blk-010) |
blk-020 | #ebebeb | var(--calcite-color-neutral-blk-020) |
blk-030 | #dedede | var(--calcite-color-neutral-blk-030) |
blk-040 | #d4d4d4 | var(--calcite-color-neutral-blk-040) |
blk-050 | #c9c9c9 | 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 | #ababab | var(--calcite-color-neutral-blk-080) |
blk-090 | #9e9e9e | 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 | #6b6b6b | var(--calcite-color-neutral-blk-140) |
blk-150 | #616161 | var(--calcite-color-neutral-blk-150) |
blk-160 | #545454 | 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 | #363636 | var(--calcite-color-neutral-blk-190) |
blk-200 | #2b2b2b | var(--calcite-color-neutral-blk-200) |
blk-210 | #212121 | var(--calcite-color-neutral-blk-210) |
blk-220 | #141414 | var(--calcite-color-neutral-blk-220) |
blk-230 | #0a0a0a | var(--calcite-color-neutral-blk-230) |
blk-235 | #050505 | var(--calcite-color-neutral-blk-235) |
blk-240 | #000000 | var(--calcite-color-neutral-blk-240) |
Low saturation | ||
l-bb-010 | #edf3f7 | var(--calcite-color-low-saturation-blue-l-bb-010) |
l-bb-020 | #d7e1e7 | var(--calcite-color-low-saturation-blue-l-bb-020) |
l-bb-030 | #c1cfd7 | var(--calcite-color-low-saturation-blue-l-bb-030) |
l-bb-040 | #acbcc6 | var(--calcite-color-low-saturation-blue-l-bb-040) |
l-bb-050 | #96aab6 | var(--calcite-color-low-saturation-blue-l-bb-050) |
l-bb-060 | #8098a6 | var(--calcite-color-low-saturation-blue-l-bb-060) |
l-bb-070 | #647883 | var(--calcite-color-low-saturation-blue-l-bb-070) |
l-bb-080 | #495860 | var(--calcite-color-low-saturation-blue-l-bb-080) |
l-bb-090 | #2d373d | var(--calcite-color-low-saturation-blue-l-bb-090) |
l-bb-100 | #11171a | var(--calcite-color-low-saturation-blue-l-bb-100) |
l-gb-010 | #e8f2f2 | var(--calcite-color-low-saturation-green-blue-l-gb-010) |
l-gb-020 | #d7e8e8 | var(--calcite-color-low-saturation-green-blue-l-gb-020) |
l-gb-030 | #c2d7d7 | var(--calcite-color-low-saturation-green-blue-l-gb-030) |
l-gb-040 | #b1c9c9 | var(--calcite-color-low-saturation-green-blue-l-gb-040) |
l-gb-050 | #98b3b2 | var(--calcite-color-low-saturation-green-blue-l-gb-050) |
l-gb-060 | #88a6a5 | var(--calcite-color-low-saturation-green-blue-l-gb-060) |
l-gb-070 | #658584 | var(--calcite-color-low-saturation-green-blue-l-gb-070) |
l-gb-080 | #4b6160 | var(--calcite-color-low-saturation-green-blue-l-gb-080) |
l-gb-090 | #2f3d3d | var(--calcite-color-low-saturation-green-blue-l-gb-090) |
l-gb-100 | #121a1a | var(--calcite-color-low-saturation-green-blue-l-gb-100) |
l-gg-010 | #f0f7f0 | var(--calcite-color-low-saturation-green-l-gg-010) |
l-gg-020 | #dde7dd | var(--calcite-color-low-saturation-green-l-gg-020) |
l-gg-030 | #cad7ca | var(--calcite-color-low-saturation-green-l-gg-030) |
l-gg-040 | #b7c6b6 | var(--calcite-color-low-saturation-green-l-gg-040) |
l-gg-050 | #a4b6a3 | var(--calcite-color-low-saturation-green-l-gg-050) |
l-gg-060 | #91a690 | var(--calcite-color-low-saturation-green-l-gg-060) |
l-gg-070 | #728371 | var(--calcite-color-low-saturation-green-l-gg-070) |
l-gg-080 | #536053 | var(--calcite-color-low-saturation-green-l-gg-080) |
l-gg-090 | #343d34 | var(--calcite-color-low-saturation-green-l-gg-090) |
l-gg-100 | #151a15 | var(--calcite-color-low-saturation-green-l-gg-100) |
l-yg-010 | #f4f7eb | var(--calcite-color-low-saturation-yellow-green-l-yg-010) |
l-yg-020 | #e3e7d8 | var(--calcite-color-low-saturation-yellow-green-l-yg-020) |
l-yg-030 | #d2d7c5 | var(--calcite-color-low-saturation-yellow-green-l-yg-030) |
l-yg-040 | #c2c6b3 | var(--calcite-color-low-saturation-yellow-green-l-yg-040) |
l-yg-050 | #b1b6a0 | var(--calcite-color-low-saturation-yellow-green-l-yg-050) |
l-yg-060 | #a0a68d | var(--calcite-color-low-saturation-yellow-green-l-yg-060) |
l-yg-070 | #7e836f | var(--calcite-color-low-saturation-yellow-green-l-yg-070) |
l-yg-080 | #5d6051 | var(--calcite-color-low-saturation-yellow-green-l-yg-080) |
l-yg-090 | #3b3d33 | var(--calcite-color-low-saturation-yellow-green-l-yg-090) |
l-yg-100 | #191a15 | var(--calcite-color-low-saturation-yellow-green-l-yg-100) |
l-br-010 | #f7f1eb | var(--calcite-color-low-saturation-brown-l-br-010) |
l-br-020 | #e4ddd4 | var(--calcite-color-low-saturation-brown-l-br-020) |
l-br-030 | #d1c8be | var(--calcite-color-low-saturation-brown-l-br-030) |
l-br-040 | #bfb4a7 | var(--calcite-color-low-saturation-brown-l-br-040) |
l-br-050 | #ac9f91 | var(--calcite-color-low-saturation-brown-l-br-050) |
l-br-060 | #998b7a | var(--calcite-color-low-saturation-brown-l-br-060) |
l-br-070 | #796e60 | var(--calcite-color-low-saturation-brown-l-br-070) |
l-br-080 | #5a5146 | var(--calcite-color-low-saturation-brown-l-br-080) |
l-br-090 | #3a332b | var(--calcite-color-low-saturation-brown-l-br-090) |
l-br-100 | #1a1611 | var(--calcite-color-low-saturation-brown-l-br-100) |
l-yy-010 | #f7f5e6 | var(--calcite-color-low-saturation-yellow-l-yy-010) |
l-yy-020 | #e7e4d1 | var(--calcite-color-low-saturation-yellow-l-yy-020) |
l-yy-030 | #d7d3bc | var(--calcite-color-low-saturation-yellow-l-yy-030) |
l-yy-040 | #c6c1a6 | var(--calcite-color-low-saturation-yellow-l-yy-040) |
l-yy-050 | #b6b091 | var(--calcite-color-low-saturation-yellow-l-yy-050) |
l-yy-060 | #a69f7c | var(--calcite-color-low-saturation-yellow-l-yy-060) |
l-yy-070 | #837e61 | var(--calcite-color-low-saturation-yellow-l-yy-070) |
l-yy-080 | #605c47 | var(--calcite-color-low-saturation-yellow-l-yy-080) |
l-yy-090 | #3d3b2c | var(--calcite-color-low-saturation-yellow-l-yy-090) |
l-yy-100 | #1a1911 | var(--calcite-color-low-saturation-yellow-l-yy-100) |
l-oy-010 | #faf3eb | var(--calcite-color-low-saturation-orange-yellow-l-oy-010) |
l-oy-020 | #e9e0d5 | var(--calcite-color-low-saturation-orange-yellow-l-oy-020) |
l-oy-030 | #d8cdbf | var(--calcite-color-low-saturation-orange-yellow-l-oy-030) |
l-oy-040 | #c8b9a8 | var(--calcite-color-low-saturation-orange-yellow-l-oy-040) |
l-oy-050 | #b7a692 | var(--calcite-color-low-saturation-orange-yellow-l-oy-050) |
l-oy-060 | #a6937c | var(--calcite-color-low-saturation-orange-yellow-l-oy-060) |
l-oy-070 | #837461 | var(--calcite-color-low-saturation-orange-yellow-l-oy-070) |
l-oy-080 | #605547 | var(--calcite-color-low-saturation-orange-yellow-l-oy-080) |
l-oy-090 | #3d352c | var(--calcite-color-low-saturation-orange-yellow-l-oy-090) |
l-oy-100 | #1a1611 | var(--calcite-color-low-saturation-orange-yellow-l-oy-100) |
l-oo-010 | #faf1eb | var(--calcite-color-low-saturation-orange-l-oo-010) |
l-oo-020 | #e9ddd5 | var(--calcite-color-low-saturation-orange-l-oo-020) |
l-oo-030 | #d8c9bf | var(--calcite-color-low-saturation-orange-l-oo-030) |
l-oo-040 | #c8b4a8 | var(--calcite-color-low-saturation-orange-l-oo-040) |
l-oo-050 | #b7a092 | var(--calcite-color-low-saturation-orange-l-oo-050) |
l-oo-060 | #a68c7c | var(--calcite-color-low-saturation-orange-l-oo-060) |
l-oo-070 | #836e61 | var(--calcite-color-low-saturation-orange-l-oo-070) |
l-oo-080 | #605047 | var(--calcite-color-low-saturation-orange-l-oo-080) |
l-oo-090 | #3d322c | var(--calcite-color-low-saturation-orange-l-oo-090) |
l-oo-100 | #1a1411 | var(--calcite-color-low-saturation-orange-l-oo-100) |
l-ro-010 | #faf3f0 | var(--calcite-color-low-saturation-red-orange-l-ro-010) |
l-ro-020 | #e9ddd9 | var(--calcite-color-low-saturation-red-orange-l-ro-020) |
l-ro-030 | #d8c8c1 | var(--calcite-color-low-saturation-red-orange-l-ro-030) |
l-ro-040 | #c8b2aa | var(--calcite-color-low-saturation-red-orange-l-ro-040) |
l-ro-050 | #b79d92 | var(--calcite-color-low-saturation-red-orange-l-ro-050) |
l-ro-060 | #a6877b | var(--calcite-color-low-saturation-red-orange-l-ro-060) |
l-ro-070 | #836b61 | var(--calcite-color-low-saturation-red-orange-l-ro-070) |
l-ro-080 | #604e47 | var(--calcite-color-low-saturation-red-orange-l-ro-080) |
l-ro-090 | #3d302c | var(--calcite-color-low-saturation-red-orange-l-ro-090) |
l-ro-100 | #1a1311 | var(--calcite-color-low-saturation-red-orange-l-ro-100) |
l-rr-010 | #faf1f0 | var(--calcite-color-low-saturation-red-l-rr-010) |
l-rr-020 | #eddfdd | var(--calcite-color-low-saturation-red-l-rr-020) |
l-rr-030 | #dbc6c4 | var(--calcite-color-low-saturation-red-l-rr-030) |
l-rr-040 | #c8adaa | var(--calcite-color-low-saturation-red-l-rr-040) |
l-rr-050 | #ba9995 | var(--calcite-color-low-saturation-red-l-rr-050) |
l-rr-060 | #ab837e | var(--calcite-color-low-saturation-red-l-rr-060) |
l-rr-070 | #876764 | var(--calcite-color-low-saturation-red-l-rr-070) |
l-rr-080 | #604a47 | var(--calcite-color-low-saturation-red-l-rr-080) |
l-rr-090 | #3d2e2c | var(--calcite-color-low-saturation-red-l-rr-090) |
l-rr-100 | #1a1211 | var(--calcite-color-low-saturation-red-l-rr-100) |
l-pk-010 | #faf0f6 | var(--calcite-color-low-saturation-pink-l-pk-010) |
l-pk-020 | #e8d7e2 | var(--calcite-color-low-saturation-pink-l-pk-020) |
l-pk-030 | #dbc2d2 | var(--calcite-color-low-saturation-pink-l-pk-030) |
l-pk-040 | #c9abbe | var(--calcite-color-low-saturation-pink-l-pk-040) |
l-pk-050 | #b897ab | var(--calcite-color-low-saturation-pink-l-pk-050) |
l-pk-060 | #a68097 | var(--calcite-color-low-saturation-pink-l-pk-060) |
l-pk-070 | #856376 | var(--calcite-color-low-saturation-pink-l-pk-070) |
l-pk-080 | #614755 | var(--calcite-color-low-saturation-pink-l-pk-080) |
l-pk-090 | #3d2c35 | var(--calcite-color-low-saturation-pink-l-pk-090) |
l-pk-100 | #1a1111 | var(--calcite-color-low-saturation-pink-l-pk-100) |
l-vr-010 | #f5edf7 | var(--calcite-color-low-saturation-violet-red-l-vr-010) |
l-vr-020 | #e1d6e4 | var(--calcite-color-low-saturation-violet-red-l-vr-020) |
l-vr-030 | #cebcd1 | var(--calcite-color-low-saturation-violet-red-l-vr-030) |
l-vr-040 | #baa8bf | var(--calcite-color-low-saturation-violet-red-l-vr-040) |
l-vr-050 | #a791ac | var(--calcite-color-low-saturation-violet-red-l-vr-050) |
l-vr-060 | #937a99 | var(--calcite-color-low-saturation-violet-red-l-vr-060) |
l-vr-070 | #746079 | var(--calcite-color-low-saturation-violet-red-l-vr-070) |
l-vr-080 | #56465a | var(--calcite-color-low-saturation-violet-red-l-vr-080) |
l-vr-090 | #372b3a | var(--calcite-color-low-saturation-violet-red-l-vr-090) |
l-vr-100 | #18111a | var(--calcite-color-low-saturation-violet-red-l-vr-100) |
l-vv-010 | #f0edf7 | var(--calcite-color-low-saturation-violet-l-vv-010) |
l-vv-020 | #dcd8e7 | var(--calcite-color-low-saturation-violet-l-vv-020) |
l-vv-030 | #c8c3d7 | var(--calcite-color-low-saturation-violet-l-vv-030) |
l-vv-040 | #b5aec6 | var(--calcite-color-low-saturation-violet-l-vv-040) |
l-vv-050 | #a199b6 | var(--calcite-color-low-saturation-violet-l-vv-050) |
l-vv-060 | #8d84a6 | var(--calcite-color-low-saturation-violet-l-vv-060) |
l-vv-070 | #6f6783 | var(--calcite-color-low-saturation-violet-l-vv-070) |
l-vv-080 | #504b60 | var(--calcite-color-low-saturation-violet-l-vv-080) |
l-vv-090 | #322e3d | var(--calcite-color-low-saturation-violet-l-vv-090) |
l-vv-1000 | #13111a | var(--calcite-color-low-saturation-violet-l-vv-1000) |
Medium saturation | ||
m-bb-010 | #dfeffa | var(--calcite-color-medium-saturation-blue-m-bb-010) |
m-bb-020 | #c8e3f5 | var(--calcite-color-medium-saturation-blue-m-bb-020) |
m-bb-030 | #b1d8f1 | var(--calcite-color-medium-saturation-blue-m-bb-030) |
m-bb-040 | #9bccec | var(--calcite-color-medium-saturation-blue-m-bb-040) |
m-bb-050 | #84c1e8 | var(--calcite-color-medium-saturation-blue-m-bb-050) |
m-bb-060 | #6db5e3 | var(--calcite-color-medium-saturation-blue-m-bb-060) |
m-bb-070 | #548eb4 | var(--calcite-color-medium-saturation-blue-m-bb-070) |
m-bb-080 | #3a6884 | var(--calcite-color-medium-saturation-blue-m-bb-080) |
m-bb-090 | #2b465f | var(--calcite-color-medium-saturation-blue-m-bb-090) |
m-bb-100 | #071a26 | var(--calcite-color-medium-saturation-blue-m-bb-100) |
m-gb-010 | #dbf2f1 | var(--calcite-color-medium-saturation-green-blue-m-gb-010) |
m-gb-020 | #beedec | var(--calcite-color-medium-saturation-green-blue-m-gb-020) |
m-gb-030 | #9fe6e5 | var(--calcite-color-medium-saturation-green-blue-m-gb-030) |
m-gb-040 | #8be0df | var(--calcite-color-medium-saturation-green-blue-m-gb-040) |
m-gb-050 | #70d9d7 | var(--calcite-color-medium-saturation-green-blue-m-gb-050) |
m-gb-060 | #5cbfbc | var(--calcite-color-medium-saturation-green-blue-m-gb-060) |
m-gb-070 | #53a6a4 | var(--calcite-color-medium-saturation-green-blue-m-gb-070) |
m-gb-080 | #40807e | var(--calcite-color-medium-saturation-green-blue-m-gb-080) |
m-gb-090 | #2a5958 | var(--calcite-color-medium-saturation-green-blue-m-gb-090) |
m-gb-100 | #102928 | var(--calcite-color-medium-saturation-green-blue-m-gb-100) |
m-gg-010 | #e4f0e4 | var(--calcite-color-medium-saturation-green-m-gg-010) |
m-gg-020 | #cbe2cb | var(--calcite-color-medium-saturation-green-m-gg-020) |
m-gg-030 | #b2d4b2 | var(--calcite-color-medium-saturation-green-m-gg-030) |
m-gg-040 | #9ac699 | var(--calcite-color-medium-saturation-green-m-gg-040) |
m-gg-050 | #81b880 | var(--calcite-color-medium-saturation-green-m-gg-050) |
m-gg-060 | #68aa67 | var(--calcite-color-medium-saturation-green-m-gg-060) |
m-gg-070 | #548953 | var(--calcite-color-medium-saturation-green-m-gg-070) |
m-gg-080 | #3f683f | var(--calcite-color-medium-saturation-green-m-gg-080) |
m-gg-090 | #2b472a | var(--calcite-color-medium-saturation-green-m-gg-090) |
m-gg-100 | #172616 | var(--calcite-color-medium-saturation-green-m-gg-100) |
m-yg-010 | #f0f7da | var(--calcite-color-medium-saturation-yellow-green-m-yg-010) |
m-yg-020 | #e5efc6 | var(--calcite-color-medium-saturation-yellow-green-m-yg-020) |
m-yg-030 | #dae7b1 | var(--calcite-color-medium-saturation-yellow-green-m-yg-030) |
m-yg-040 | #cede9d | var(--calcite-color-medium-saturation-yellow-green-m-yg-040) |
m-yg-050 | #c3d688 | var(--calcite-color-medium-saturation-yellow-green-m-yg-050) |
m-yg-060 | #b8ce74 | var(--calcite-color-medium-saturation-yellow-green-m-yg-060) |
m-yg-070 | #90a15b | var(--calcite-color-medium-saturation-yellow-green-m-yg-070) |
m-yg-080 | #687442 | var(--calcite-color-medium-saturation-yellow-green-m-yg-080) |
m-yg-090 | #3f4728 | var(--calcite-color-medium-saturation-yellow-green-m-yg-090) |
m-yg-100 | #171a0f | var(--calcite-color-medium-saturation-yellow-green-m-yg-100) |
m-br-010 | #faeddf | var(--calcite-color-medium-saturation-brown-m-br-010) |
m-br-020 | #edd9c3 | var(--calcite-color-medium-saturation-brown-m-br-020) |
m-br-030 | #e0c6a8 | var(--calcite-color-medium-saturation-brown-m-br-030) |
m-br-040 | #d2b28c | var(--calcite-color-medium-saturation-brown-m-br-040) |
m-br-050 | #c59f71 | var(--calcite-color-medium-saturation-brown-m-br-050) |
m-br-060 | #b88b55 | var(--calcite-color-medium-saturation-brown-m-br-060) |
m-br-070 | #926d41 | var(--calcite-color-medium-saturation-brown-m-br-070) |
m-br-080 | #6c4f2d | var(--calcite-color-medium-saturation-brown-m-br-080) |
m-br-090 | #45311a | var(--calcite-color-medium-saturation-brown-m-br-090) |
m-br-100 | #1f1306 | var(--calcite-color-medium-saturation-brown-m-br-100) |
m-yy-010 | #faf7dc | var(--calcite-color-medium-saturation-yellow-m-yy-010) |
m-yy-020 | #f6f0c1 | var(--calcite-color-medium-saturation-yellow-m-yy-020) |
m-yy-030 | #f2e8a6 | var(--calcite-color-medium-saturation-yellow-m-yy-030) |
m-yy-040 | #ede18b | var(--calcite-color-medium-saturation-yellow-m-yy-040) |
m-yy-050 | #e9d970 | var(--calcite-color-medium-saturation-yellow-m-yy-050) |
m-yy-060 | #e5d255 | var(--calcite-color-medium-saturation-yellow-m-yy-060) |
m-yy-070 | #bcaa45 | var(--calcite-color-medium-saturation-yellow-m-yy-070) |
m-yy-080 | #8a7d31 | var(--calcite-color-medium-saturation-yellow-m-yy-080) |
m-yy-090 | #584f1c | var(--calcite-color-medium-saturation-yellow-m-yy-090) |
m-yy-100 | #262107 | var(--calcite-color-medium-saturation-yellow-m-yy-100) |
m-oy-010 | #ffedd6 | var(--calcite-color-medium-saturation-orange-yellow-m-oy-010) |
m-oy-020 | #fce0bd | var(--calcite-color-medium-saturation-orange-yellow-m-oy-020) |
m-oy-030 | #f8d2a4 | var(--calcite-color-medium-saturation-orange-yellow-m-oy-030) |
m-oy-040 | #f5c58c | var(--calcite-color-medium-saturation-orange-yellow-m-oy-040) |
m-oy-050 | #f1b773 | var(--calcite-color-medium-saturation-orange-yellow-m-oy-050) |
m-oy-060 | #eeaa5a | var(--calcite-color-medium-saturation-orange-yellow-m-oy-060) |
m-oy-070 | #bc8645 | var(--calcite-color-medium-saturation-orange-yellow-m-oy-070) |
m-oy-080 | #8a6130 | var(--calcite-color-medium-saturation-orange-yellow-m-oy-080) |
m-oy-090 | #583d1c | var(--calcite-color-medium-saturation-orange-yellow-m-oy-090) |
m-oy-100 | #261807 | var(--calcite-color-medium-saturation-orange-yellow-m-oy-100) |
m-oo-010 | #ffece0 | var(--calcite-color-medium-saturation-orange-m-oo-010) |
m-oo-020 | #fcdac5 | var(--calcite-color-medium-saturation-orange-m-oo-020) |
m-oo-030 | #f8c7aa | var(--calcite-color-medium-saturation-orange-m-oo-030) |
m-oo-040 | #f5b590 | var(--calcite-color-medium-saturation-orange-m-oo-040) |
m-oo-050 | #f1a275 | var(--calcite-color-medium-saturation-orange-m-oo-050) |
m-oo-060 | #ee905a | var(--calcite-color-medium-saturation-orange-m-oo-060) |
m-oo-070 | #bc7145 | var(--calcite-color-medium-saturation-orange-m-oo-070) |
m-oo-080 | #8a5131 | var(--calcite-color-medium-saturation-orange-m-oo-080) |
m-oo-090 | #58321c | var(--calcite-color-medium-saturation-orange-m-oo-090) |
m-oo-100 | #261207 | var(--calcite-color-medium-saturation-orange-m-oo-100) |
m-ro-010 | #f7e4dc | var(--calcite-color-medium-saturation-red-orange-m-ro-010) |
m-ro-020 | #f5d0c2 | var(--calcite-color-medium-saturation-red-orange-m-ro-020) |
m-ro-030 | #f3bba7 | var(--calcite-color-medium-saturation-red-orange-m-ro-030) |
m-ro-040 | #f1a78d | var(--calcite-color-medium-saturation-red-orange-m-ro-040) |
m-ro-050 | #ef9272 | var(--calcite-color-medium-saturation-red-orange-m-ro-050) |
m-ro-060 | #ed7e58 | var(--calcite-color-medium-saturation-red-orange-m-ro-060) |
m-ro-070 | #bc6345 | var(--calcite-color-medium-saturation-red-orange-m-ro-070) |
m-ro-080 | #8a4731 | var(--calcite-color-medium-saturation-red-orange-m-ro-080) |
m-ro-090 | #582b1c | var(--calcite-color-medium-saturation-red-orange-m-ro-090) |
m-ro-100 | #27120c | var(--calcite-color-medium-saturation-red-orange-m-ro-100) |
m-rr-010 | #fadfdc | var(--calcite-color-medium-saturation-red-m-rr-010) |
m-rr-020 | #fccac5 | var(--calcite-color-medium-saturation-red-m-rr-020) |
m-rr-030 | #ffb9b0 | var(--calcite-color-medium-saturation-red-m-rr-030) |
m-rr-040 | #f79e94 | var(--calcite-color-medium-saturation-red-m-rr-040) |
m-rr-050 | #f5867a | var(--calcite-color-medium-saturation-red-m-rr-050) |
m-rr-060 | #eb6c5e | var(--calcite-color-medium-saturation-red-m-rr-060) |
m-rr-070 | #c25347 | var(--calcite-color-medium-saturation-red-m-rr-070) |
m-rr-080 | #913d34 | var(--calcite-color-medium-saturation-red-m-rr-080) |
m-rr-090 | #5e241e | var(--calcite-color-medium-saturation-red-m-rr-090) |
m-rr-100 | #260a07 | var(--calcite-color-medium-saturation-red-m-rr-100) |
m-pk-010 | #fadef0 | var(--calcite-color-medium-saturation-pink-m-pk-010) |
m-pk-020 | #facdea | var(--calcite-color-medium-saturation-pink-m-pk-020) |
m-pk-030 | #f2b1da | var(--calcite-color-medium-saturation-pink-m-pk-030) |
m-pk-040 | #eb9dcf | var(--calcite-color-medium-saturation-pink-m-pk-040) |
m-pk-050 | #e688c2 | var(--calcite-color-medium-saturation-pink-m-pk-050) |
m-pk-060 | #e070b4 | var(--calcite-color-medium-saturation-pink-m-pk-060) |
m-pk-070 | #b8588f | var(--calcite-color-medium-saturation-pink-m-pk-070) |
m-pk-080 | #8c4267 | var(--calcite-color-medium-saturation-pink-m-pk-080) |
m-pk-090 | #592440 | var(--calcite-color-medium-saturation-pink-m-pk-090) |
m-pk-100 | #260b0b | var(--calcite-color-medium-saturation-pink-m-pk-100) |
m-vr-010 | #f6e1fa | var(--calcite-color-medium-saturation-violet-red-m-vr-010) |
m-vr-020 | #e9ceee | var(--calcite-color-medium-saturation-violet-red-m-vr-020) |
m-vr-030 | #dbbbe2 | var(--calcite-color-medium-saturation-violet-red-m-vr-030) |
m-vr-040 | #cea8d5 | var(--calcite-color-medium-saturation-violet-red-m-vr-040) |
m-vr-050 | #c095c9 | var(--calcite-color-medium-saturation-violet-red-m-vr-050) |
m-vr-060 | #b382bd | var(--calcite-color-medium-saturation-violet-red-m-vr-060) |
m-vr-070 | #8e6397 | var(--calcite-color-medium-saturation-violet-red-m-vr-070) |
m-vr-080 | #6a4572 | var(--calcite-color-medium-saturation-violet-red-m-vr-080) |
m-vr-090 | #46264c | var(--calcite-color-medium-saturation-violet-red-m-vr-090) |
m-vr-100 | #210726 | var(--calcite-color-medium-saturation-violet-red-m-vr-100) |
m-vv-010 | #ece6ff | var(--calcite-color-medium-saturation-violet-m-vv-010) |
m-vv-020 | #dcd2f2 | var(--calcite-color-medium-saturation-violet-m-vv-020) |
m-vv-030 | #ccbee5 | var(--calcite-color-medium-saturation-violet-m-vv-030) |
m-vv-040 | #bbaad7 | var(--calcite-color-medium-saturation-violet-m-vv-040) |
m-vv-050 | #ab96ca | var(--calcite-color-medium-saturation-violet-m-vv-050) |
m-vv-060 | #9b82bd | var(--calcite-color-medium-saturation-violet-m-vv-060) |
m-vv-070 | #796397 | var(--calcite-color-medium-saturation-violet-m-vv-070) |
m-vv-080 | #584572 | var(--calcite-color-medium-saturation-violet-m-vv-080) |
m-vv-090 | #36264c | var(--calcite-color-medium-saturation-violet-m-vv-090) |
m-vv-100 | #140726 | var(--calcite-color-medium-saturation-violet-m-vv-100) |
High saturation | ||
h-bb-010 | #d6efff | 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 | ||
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 | #0089de | 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 | ||
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 | #11ad1d | 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
Name | Value | Platform tokens |
---|---|---|
0 | 0 0 0 0 rgba(0, 0, 0, 0) | var(--calcite-shadow-0) |
1 | 0 2px 8px 0 rgba(0, 0, 0, 0.04) | var(--calcite-shadow-1) |
2 | 0 4px 16px 0 rgba(0, 0, 0, 0.08) | var(--calcite-shadow-2) |
3 | 0 4px 20px 0 rgba(0, 0, 0, 0.08) | var(--calcite-shadow-3) |
4 | 0 12px 32px -2px rgba(0, 0, 0, 0.1) | var(--calcite-shadow-4) |
Opacity
Name | Value | Platform tokens |
---|---|---|
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) |
12 | 0.12 | var(--calcite-opacity-12) |
16 | 0.16 | var(--calcite-opacity-16) |
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
Name | Value | Platform tokens |
---|---|---|
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) |