Colors
Colors are essential for creating a cohesive and visually appealing design system. They help establish visual hierarchy, improve usability and reinforce our brand's identity.
import Colors from '@dynatrace/strato-design-tokens/colors';
Colors.Theme
Colors.Theme.Foreground
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Theme.Foreground.10 | #2c2d4d | #f0f0f5 | - | ||
| Colors.Theme.Foreground.20 | #fcfcfd | #111223 | - | ||
Colors.Theme.Background
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Theme.Background.10 | #f4f4f7 | #1b1c2e | - | ||
| Colors.Theme.Background.20 | #fcfcfd | #111223 | - | ||
Colors.Theme.Neutral
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Theme.Neutral.10 | #ececf2 | #242538 | - | ||
| Colors.Theme.Neutral.20 | #e4e5ec | #2e2f42 | - | ||
| Colors.Theme.Neutral.30 | #dddde7 | #37384d | - | ||
| Colors.Theme.Neutral.40 | #d5d5e1 | #404157 | - | ||
| Colors.Theme.Neutral.50 | #cdcedc | #4a4b61 | - | ||
| Colors.Theme.Neutral.60 | #b6b6cc | #656680 | - | ||
| Colors.Theme.Neutral.70 | #565889 | #aeafc9 | - | ||
| Colors.Theme.Neutral.80 | #3f416a | #cacbdc | - | ||
| Colors.Theme.Neutral.90 | #303253 | #dedfe9 | - | ||
Colors.Theme.Primary
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Theme.Primary.10 | #ebecf5 | #24253c | - | ||
| Colors.Theme.Primary.20 | #e3e3f3 | #2d2e49 | - | ||
| Colors.Theme.Primary.30 | #dadbf1 | #353757 | - | ||
| Colors.Theme.Primary.40 | #d1d3f0 | #3e4064 | - | ||
| Colors.Theme.Primary.50 | #c9caee | #474872 | - | ||
| Colors.Theme.Primary.60 | #aeb1e8 | #62639b | - | ||
| Colors.Theme.Primary.70 | #434ad1 | #a9aaf2 | - | ||
| Colors.Theme.Primary.80 | #2c34a9 | #c7c8f7 | - | ||
| Colors.Theme.Primary.90 | #212786 | #ddddfa | - | ||
Colors.Theme.Success
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Theme.Success.10 | #eaedf0 | #1f2737 | - | ||
| Colors.Theme.Success.20 | #e0e6e8 | #23313f | - | ||
| Colors.Theme.Success.30 | #d6dfe1 | #283c48 | - | ||
| Colors.Theme.Success.40 | #ccd8d9 | #2c4650 | - | ||
| Colors.Theme.Success.50 | #c2d1d2 | #305159 | - | ||
| Colors.Theme.Success.60 | #a4bcbb | #3d7072 | - | ||
| Colors.Theme.Success.70 | #2c655e | #5fc0b6 | - | ||
| Colors.Theme.Success.80 | #1f4c46 | #6eded2 | - | ||
| Colors.Theme.Success.90 | #163a36 | #79f3e6 | - | ||
Colors.Theme.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Theme.Warning.10 | #efeceb | #28252e | - | ||
| Colors.Theme.Warning.20 | #eae3de | #362d2e | - | ||
| Colors.Theme.Warning.30 | #e5dbd2 | #43362e | - | ||
| Colors.Theme.Warning.40 | #e0d3c6 | #503e2e | - | ||
| Colors.Theme.Warning.50 | #dbcbb9 | #5e472e | - | ||
| Colors.Theme.Warning.60 | #cbb294 | #85602f | - | ||
| Colors.Theme.Warning.70 | #8b4c00 | #e7a033 | - | ||
| Colors.Theme.Warning.80 | #693800 | #fbbd78 | - | ||
| Colors.Theme.Warning.90 | #522b00 | #fcd6b4 | - | ||
Colors.Theme.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Theme.Critical.10 | #f1e9ef | #2a2335 | - | ||
| Colors.Theme.Critical.20 | #eedee6 | #392a3d | - | ||
| Colors.Theme.Critical.30 | #ebd3de | #483144 | - | ||
| Colors.Theme.Critical.40 | #e7c9d6 | #57384c | - | ||
| Colors.Theme.Critical.50 | #e4bece | #673f53 | - | ||
| Colors.Theme.Critical.60 | #db9db5 | #94546a | - | ||
| Colors.Theme.Critical.70 | #ad194d | #f491a5 | - | ||
| Colors.Theme.Critical.80 | #821038 | #f7b9c4 | - | ||
| Colors.Theme.Critical.90 | #660a2b | #fad3da | - | ||
Colors.Background
Colors.Background.Base
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Base.Default | #f4f4f7 | #1b1c2e | Use for the background of your app. | ||
Colors.Background.Surface
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Surface.Backdrop | #f4f4f7cc | #1b1c2ecc | Use as the backdrop for surfaces to reduce the visual noise of background elements. | ||
| Colors.Background.Surface.Default | #fcfcfd | #111223 | Use for default surface background. | ||
Colors.Background.Container.Neutral
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Container.Neutral.Subdued | #f4f4f7 | #1b1c2e | Use for subtle containers. | ||
| Colors.Background.Container.Neutral.Default | #ececf2 | #242538 | Use for default containers. | ||
| Colors.Background.Container.Neutral.Emphasized | #e4e5ec | #2e2f42 | Use for emphasized neutral containers that draw attention. | ||
| Colors.Background.Container.Neutral.Accent | #565889 | #aeafc9 | Use for accentuated neutral containers with high contrast. Use sparingly. | ||
Colors.Background.Container.Primary
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Container.Primary.Default | #ebecf5 | #24253c | Use for default primary color containers. | ||
| Colors.Background.Container.Primary.Emphasized | #e3e3f3 | #2d2e49 | Use for emphasized primary color containers that draw attention. | ||
| Colors.Background.Container.Primary.Accent | #434ad1 | #a9aaf2 | Use for accentuated primary color containers with high contrast. Use sparingly. | ||
Colors.Background.Container.Success
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Container.Success.Default | #eaedf0 | #1f2737 | Use for default success color containers. | ||
| Colors.Background.Container.Success.Emphasized | #e0e6e8 | #23313f | Use for emphasized success color containers that draw attention. | ||
| Colors.Background.Container.Success.Accent | #2c655e | #5fc0b6 | Use for accentuated success color containers with high contrast. Use sparingly. | ||
Colors.Background.Container.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Container.Warning.Default | #efeceb | #28252e | Use for default warning color containers. | ||
| Colors.Background.Container.Warning.Emphasized | #eae3de | #362d2e | Use for emphasized warning color containers that draw attention. | ||
| Colors.Background.Container.Warning.Accent | #8b4c00 | #e7a033 | Use for accentuated warning color containers with high contrast. Use sparingly. | ||
Colors.Background.Container.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Container.Critical.Default | #f1e9ef | #2a2335 | Use for default critical color containers. | ||
| Colors.Background.Container.Critical.Emphasized | #eedee6 | #392a3d | Use for emphasized critical color containers that draw attention. | ||
| Colors.Background.Container.Critical.Accent | #ad194d | #f491a5 | Use for accentuated critical color containers with high contrast. Use sparingly. | ||
Colors.Background.Field.Neutral
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Field.Neutral.Disabled | #dddde780 | #37384d80 | Use for disabled neutral fields. | ||
| Colors.Background.Field.Neutral.Default | #dddde700 | #37384d00 | Use for default neutral fields. | ||
| Colors.Background.Field.Neutral.DefaultHover | #d5d5e1 | #404157 | Use for hover interaction on default neutral fields. | ||
| Colors.Background.Field.Neutral.DefaultActive | #cdcedc | #4a4b61 | Use for click interaction on default neutral fields. | ||
| Colors.Background.Field.Neutral.Emphasized | #dddde7 | #37384d | Use for emphasized neutral fields. | ||
| Colors.Background.Field.Neutral.EmphasizedHover | #d5d5e1 | #404157 | Use for hover interaction on emphasized neutral fields. | ||
| Colors.Background.Field.Neutral.EmphasizedActive | #cdcedc | #4a4b61 | Use for click interaction on emphasized neutral fields. | ||
| Colors.Background.Field.Neutral.Accent | #565889 | #aeafc9 | Use for accentuated neutral fields. Use sparingly. | ||
| Colors.Background.Field.Neutral.AccentHover | #3f416a | #cacbdc | Use for hover interaction on accentuated neutral fields. | ||
| Colors.Background.Field.Neutral.AccentActive | #303253 | #dedfe9 | Use for click interaction on accentuated neutral fields. | ||
Colors.Background.Field.Primary
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Field.Primary.Disabled | #dddde780 | #37384d80 | Use for disabled primary fields. | ||
| Colors.Background.Field.Primary.Default | #dadbf100 | #35375700 | Use for default primary fields. | ||
| Colors.Background.Field.Primary.DefaultHover | #d1d3f0 | #3e4064 | Use for hover interaction on default primary fields. | ||
| Colors.Background.Field.Primary.DefaultActive | #c9caee | #474872 | Use for click interaction on default primary fields. | ||
| Colors.Background.Field.Primary.Emphasized | #dadbf1 | #353757 | Use for emphasized primary fields. | ||
| Colors.Background.Field.Primary.EmphasizedHover | #d1d3f0 | #3e4064 | Use for hover interaction on emphasized primary fields. | ||
| Colors.Background.Field.Primary.EmphasizedActive | #c9caee | #474872 | Use for click interaction on emphasized primary fields. | ||
| Colors.Background.Field.Primary.Accent | #434ad1 | #a9aaf2 | Use for accentuated primary fields. Use sparingly. | ||
| Colors.Background.Field.Primary.AccentHover | #2c34a9 | #c7c8f7 | Use for hover interaction on accentuated primary fields. | ||
| Colors.Background.Field.Primary.AccentActive | #212786 | #ddddfa | Use for click interaction on accentuated primary fields. | ||
Colors.Background.Field.Success
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Field.Success.Disabled | #dddde780 | #37384d80 | Use for disabled success fields. | ||
| Colors.Background.Field.Success.Default | #d6dfe100 | #283c4800 | Use for default success fields. | ||
| Colors.Background.Field.Success.DefaultHover | #ccd8d9 | #2c4650 | Use for hover interaction on default success fields. | ||
| Colors.Background.Field.Success.DefaultActive | #c2d1d2 | #305159 | Use for click interaction on default success fields. | ||
| Colors.Background.Field.Success.Emphasized | #d6dfe1 | #283c48 | Use for emphasized success fields. | ||
| Colors.Background.Field.Success.EmphasizedHover | #ccd8d9 | #2c4650 | Use for hover interaction on emphasized success fields. | ||
| Colors.Background.Field.Success.EmphasizedActive | #c2d1d2 | #305159 | Use for click interaction on emphasized success fields. | ||
| Colors.Background.Field.Success.Accent | #2c655e | #5fc0b6 | Use for accentuated success fields. Use sparingly. | ||
| Colors.Background.Field.Success.AccentHover | #1f4c46 | #6eded2 | Use for hover interaction on accentuated success fields. | ||
| Colors.Background.Field.Success.AccentActive | #163a36 | #79f3e6 | Use for click interaction on accentuated success fields. | ||
Colors.Background.Field.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Field.Warning.Disabled | #dddde780 | #37384d80 | Use for disabled warning fields. | ||
| Colors.Background.Field.Warning.Default | #e5dbd200 | #43362e00 | Use for default warning fields. | ||
| Colors.Background.Field.Warning.DefaultHover | #e0d3c6 | #503e2e | Use for hover interaction on default warning fields. | ||
| Colors.Background.Field.Warning.DefaultActive | #dbcbb9 | #5e472e | Use for click interaction on default warning fields. | ||
| Colors.Background.Field.Warning.Emphasized | #e5dbd2 | #43362e | Use for emphasized warning fields. | ||
| Colors.Background.Field.Warning.EmphasizedHover | #e0d3c6 | #503e2e | Use for hover interaction on emphasized warning fields. | ||
| Colors.Background.Field.Warning.EmphasizedActive | #dbcbb9 | #5e472e | Use for click interaction on emphasized warning fields. | ||
| Colors.Background.Field.Warning.Accent | #8b4c00 | #e7a033 | Use for accentuated warning fields. Use sparingly. | ||
| Colors.Background.Field.Warning.AccentHover | #693800 | #fbbd78 | Use for hover interaction on accentuated warning fields. | ||
| Colors.Background.Field.Warning.AccentActive | #522b00 | #fcd6b4 | Use for click interaction on accentuated warning fields. | ||
Colors.Background.Field.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Field.Critical.Disabled | #dddde780 | #37384d80 | Use for disabled neutral fields. | ||
| Colors.Background.Field.Critical.Default | #ebd3de00 | #48314400 | Use for default neutral fields. | ||
| Colors.Background.Field.Critical.DefaultHover | #e7c9d6 | #57384c | Use for hover interaction on default neutral fields. | ||
| Colors.Background.Field.Critical.DefaultActive | #e4bece | #673f53 | Use for click interaction on default neutral fields. | ||
| Colors.Background.Field.Critical.Emphasized | #ebd3de | #483144 | Use for emphasized neutral fields. | ||
| Colors.Background.Field.Critical.EmphasizedHover | #e7c9d6 | #57384c | Use for hover interaction on emphasized neutral fields. | ||
| Colors.Background.Field.Critical.EmphasizedActive | #e4bece | #673f53 | Use for click interaction on emphasized neutral fields. | ||
| Colors.Background.Field.Critical.Accent | #ad194d | #f491a5 | Use for accentuated neutral fields. Use sparingly. | ||
| Colors.Background.Field.Critical.AccentHover | #821038 | #f7b9c4 | Use for hover interaction on accentuated neutral fields. | ||
| Colors.Background.Field.Critical.AccentActive | #660a2b | #fad3da | Use for click interaction on accentuated neutral fields. | ||
Colors.Background.Field.OnAccent
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Background.Field.OnAccent.Disabled | #f4f4f71a | #1b1c2e1a | Use for disabled fields placed on accentuated background. | ||
| Colors.Background.Field.OnAccent.Default | #f4f4f700 | #1b1c2e00 | Use for default fields placed on accentuated background. | ||
| Colors.Background.Field.OnAccent.DefaultHover | #f4f4f74d | #1b1c2e4d | Use for hover interaction on default fields on an accentuated background. | ||
| Colors.Background.Field.OnAccent.DefaultActive | #f4f4f766 | #1b1c2e66 | Use for click interaction on default fields on an accentuated background. | ||
| Colors.Background.Field.OnAccent.Emphasized | #f4f4f733 | #1b1c2e33 | Use for emphasized fields placed on accentuated background. | ||
| Colors.Background.Field.OnAccent.EmphasizedHover | #f4f4f74d | #1b1c2e4d | Use for hover interaction on emphasized fields on an accentuated background. | ||
| Colors.Background.Field.OnAccent.EmphasizedActive | #f4f4f766 | #1b1c2e66 | Use for click interaction on emphasized fields on an accentuated background. | ||
Colors.Border
Colors.Border.Neutral
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Border.Neutral.Disabled | #d5d5e180 | #40415780 | Use as the default border color in a disabled state. | ||
| Colors.Border.Neutral.Default | #d5d5e1 | #404157 | Use as the default border color. | ||
| Colors.Border.Neutral.DefaultHover | #b6b6cc | #656680 | Use as default border color on hover interaction. | ||
| Colors.Border.Neutral.DefaultActive | #565889 | #aeafc9 | Use as default border color on click interaction. | ||
| Colors.Border.Neutral.Accent | #565889 | #aeafc9 | Use as the border color of accentuated elements. | ||
| Colors.Border.Neutral.AccentHover | #3f416a | #cacbdc | Use as border color of accentuated elements on hover interaction. | ||
| Colors.Border.Neutral.AccentActive | #303253 | #dedfe9 | Use as border color of accentuated elements on click interaction. | ||
Colors.Border.Primary
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Border.Primary.Disabled | #d5d5e180 | #40415780 | Use as border primary color in a disabled state. | ||
| Colors.Border.Primary.Default | #d1d3f0 | #3e4064 | Use as the default primary border color. | ||
| Colors.Border.Primary.DefaultHover | #aeb1e8 | #62639b | Use as default border primary color on hover interaction. | ||
| Colors.Border.Primary.DefaultActive | #434ad1 | #a9aaf2 | Use as default border primary color on click interaction. | ||
| Colors.Border.Primary.Accent | #434ad1 | #a9aaf2 | Use as the border color of primary accentuated elements. | ||
| Colors.Border.Primary.AccentHover | #2c34a9 | #c7c8f7 | Use as border color of primary accentuated elements on hover interaction. | ||
| Colors.Border.Primary.AccentActive | #212786 | #ddddfa | Use as border color of primary accentuated elements on click interaction. | ||
Colors.Border.Success
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Border.Success.Disabled | #d5d5e180 | #40415780 | Use as border success color in a disabled state. | ||
| Colors.Border.Success.Default | #ccd8d9 | #2c4650 | Use as the default success border color. | ||
| Colors.Border.Success.DefaultHover | #a4bcbb | #3d7072 | Use as default border success color on hover interaction. | ||
| Colors.Border.Success.DefaultActive | #2c655e | #5fc0b6 | Use as default border success color on click interaction. | ||
| Colors.Border.Success.Accent | #2c655e | #5fc0b6 | Use as the border color of success accentuated elements. | ||
| Colors.Border.Success.AccentHover | #1f4c46 | #6eded2 | Use as border color of success accentuated elements on hover interaction. | ||
| Colors.Border.Success.AccentActive | #163a36 | #79f3e6 | Use as border color of success accentuated elements on click interaction. | ||
Colors.Border.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Border.Warning.Disabled | #d5d5e180 | #40415780 | Use as border warning color in a disabled state. | ||
| Colors.Border.Warning.Default | #e0d3c6 | #503e2e | Use as the default warning border color. | ||
| Colors.Border.Warning.DefaultHover | #cbb294 | #85602f | Use as default border warning color on hover interaction. | ||
| Colors.Border.Warning.DefaultActive | #8b4c00 | #e7a033 | Use as default border warning color on click interaction. | ||
| Colors.Border.Warning.Accent | #8b4c00 | #e7a033 | Use as the border color of warning accentuated elements. | ||
| Colors.Border.Warning.AccentHover | #693800 | #fbbd78 | Use as border color of warning accentuated elements on hover interaction. | ||
| Colors.Border.Warning.AccentActive | #522b00 | #fcd6b4 | Use as border color of warning accentuated elements on click interaction. | ||
Colors.Border.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Border.Critical.Disabled | #d5d5e180 | #40415780 | Use as border critical color in a disabled state. | ||
| Colors.Border.Critical.Default | #e7c9d6 | #57384c | Use as the default critical border color. | ||
| Colors.Border.Critical.DefaultHover | #db9db5 | #94546a | Use as default border critical color on hover interaction. | ||
| Colors.Border.Critical.DefaultActive | #ad194d | #f491a5 | Use as default border critical color on click interaction. | ||
| Colors.Border.Critical.Accent | #ad194d | #f491a5 | Use as the border color of critical accentuated elements. | ||
| Colors.Border.Critical.AccentHover | #821038 | #f7b9c4 | Use as border color of critical accentuated elements on hover interaction. | ||
| Colors.Border.Critical.AccentActive | #660a2b | #fad3da | Use as border color of critical accentuated elements on click interaction. | ||
Colors.Border.OnAccent
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Border.OnAccent.Disabled | #f4f4f733 | #1b1c2e33 | Use for border color of elements on an accentuated background in a disabled state. | ||
| Colors.Border.OnAccent.Default | #f4f4f7 | #1b1c2e | Use as the default border color of elements on an accentuated background. | ||
| Colors.Border.OnAccent.DefaultHover | #f4f4f7cc | #1b1c2ecc | Use as border color on hover interaction of elements on an accentuated background. | ||
| Colors.Border.OnAccent.DefaultActive | #f4f4f799 | #1b1c2e99 | Use as border color on click interaction of elements on an accentuated background. | ||
Colors.Text
Colors.Text.Neutral
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Text.Neutral.Disabled | #56588980 | #aeafc980 | Use for text color on disabled state. | ||
| Colors.Text.Neutral.Subdued | #565889 | #aeafc9 | Use for subtle, understated text color. | ||
| Colors.Text.Neutral.SubduedHover | #3f416a | #cacbdc | Use for subtle, understated text color on hover interaction. | ||
| Colors.Text.Neutral.SubduedActive | #303253 | #dedfe9 | Use for subtle, understated text color on click interaction. | ||
| Colors.Text.Neutral.Default | #2c2d4d | #f0f0f5 | Use as the default text color. | ||
| Colors.Text.Neutral.DefaultHover | #303253 | #dedfe9 | Use as the default text color on hover interaction. | ||
| Colors.Text.Neutral.DefaultActive | #3f416a | #cacbdc | Use as the default text color on click interaction. | ||
Colors.Text.Primary
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Text.Primary.Disabled | #56588980 | #aeafc980 | Use for primary text color on disabled state. | ||
| Colors.Text.Primary.Default | #434ad1 | #a9aaf2 | Use as the default primary text color. | ||
| Colors.Text.Primary.DefaultHover | #2c34a9 | #c7c8f7 | Use as the default primary text color on hover interaction. | ||
| Colors.Text.Primary.DefaultActive | #212786 | #ddddfa | Use as the default primary text color on click interaction. | ||
Colors.Text.Success
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Text.Success.Disabled | #56588980 | #aeafc980 | Use for success text color on disabled state. | ||
| Colors.Text.Success.Default | #2c655e | #5fc0b6 | Use as the default success text color. | ||
| Colors.Text.Success.DefaultHover | #1f4c46 | #6eded2 | Use as the default success text color on hover interaction. | ||
| Colors.Text.Success.DefaultActive | #163a36 | #79f3e6 | Use as the default success text color on click interaction. | ||
Colors.Text.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Text.Warning.Disabled | #56588980 | #aeafc980 | Use for warning text color on disabled state. | ||
| Colors.Text.Warning.Default | #8b4c00 | #e7a033 | Use as the default warning text color. | ||
| Colors.Text.Warning.DefaultHover | #693800 | #fbbd78 | Use as the default warning text color on hover interaction. | ||
| Colors.Text.Warning.DefaultActive | #522b00 | #fcd6b4 | Use as the default warning text color on click interaction. | ||
Colors.Text.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Text.Critical.Disabled | #56588980 | #aeafc980 | Use for critical text color on disabled state. | ||
| Colors.Text.Critical.Default | #ad194d | #f491a5 | Use as the default critical text color. | ||
| Colors.Text.Critical.DefaultHover | #821038 | #f7b9c4 | Use as the default critical text color on hover interaction. | ||
| Colors.Text.Critical.DefaultActive | #660a2b | #fad3da | Use as the default critical text color on click interaction. | ||
Colors.Text.OnAccent
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Text.OnAccent.Disabled | #f4f4f780 | #1b1c2e80 | Use for text color placed on accentuated background on disabled state. | ||
| Colors.Text.OnAccent.Default | #f4f4f7 | #1b1c2e | Use for text color placed on accentuated background. | ||
| Colors.Text.OnAccent.DefaultHover | #f4f4f7cc | #1b1c2ecc | Use for text color placed on accentuated background on hover interaction. | ||
| Colors.Text.OnAccent.DefaultActive | #f4f4f799 | #1b1c2e99 | Use for text color placed on accentuated background on click interaction. | ||
Colors.Icon
Colors.Icon.Neutral
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Icon.Neutral.Disabled | #56588980 | #aeafc980 | Use for icon color on disabled state. | ||
| Colors.Icon.Neutral.Subdued | #565889 | #aeafc9 | Use for subtle, understated icon color. | ||
| Colors.Icon.Neutral.SubduedHover | #3f416a | #cacbdc | Use for subtle, understated icon color on hover interaction. | ||
| Colors.Icon.Neutral.SubduedActive | #303253 | #dedfe9 | Use for subtle, understated icon color on click interaction. | ||
| Colors.Icon.Neutral.Default | #2c2d4d | #f0f0f5 | Use as the default icon color. | ||
| Colors.Icon.Neutral.DefaultHover | #303253 | #dedfe9 | Use as the default icon color on hover interaction. | ||
| Colors.Icon.Neutral.DefaultActive | #3f416a | #cacbdc | Use as the default icon color on click interaction. | ||
Colors.Icon.Primary
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Icon.Primary.Disabled | #56588980 | #aeafc980 | Use for primary icon color on disabled state. | ||
| Colors.Icon.Primary.Default | #434ad1 | #a9aaf2 | Use as the default primary icon color. | ||
| Colors.Icon.Primary.DefaultHover | #2c34a9 | #c7c8f7 | Use as the default primary icon color on hover interaction. | ||
| Colors.Icon.Primary.DefaultActive | #212786 | #ddddfa | Use as the default primary icon color on click interaction. | ||
Colors.Icon.Success
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Icon.Success.Disabled | #56588980 | #aeafc980 | Use for success icon color on disabled state. | ||
| Colors.Icon.Success.Default | #2c655e | #5fc0b6 | Use as the default success icon color. | ||
| Colors.Icon.Success.DefaultHover | #1f4c46 | #6eded2 | Use as the default success icon color on hover interaction. | ||
| Colors.Icon.Success.DefaultActive | #163a36 | #79f3e6 | Use as the default success icon color on click interaction. | ||
Colors.Icon.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Icon.Warning.Disabled | #56588980 | #aeafc980 | Use for warning icon color on disabled state. | ||
| Colors.Icon.Warning.Default | #8b4c00 | #e7a033 | Use as the default warning icon color. | ||
| Colors.Icon.Warning.DefaultHover | #693800 | #fbbd78 | Use as the default warning icon color on hover interaction. | ||
| Colors.Icon.Warning.DefaultActive | #522b00 | #fcd6b4 | Use as the default warning icon color on click interaction. | ||
Colors.Icon.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Icon.Critical.Disabled | #56588980 | #aeafc980 | Use for critical icon color on disabled state. | ||
| Colors.Icon.Critical.Default | #ad194d | #f491a5 | Use as the default critical icon color. | ||
| Colors.Icon.Critical.DefaultHover | #821038 | #f7b9c4 | Use as the default critical icon color on hover interaction. | ||
| Colors.Icon.Critical.DefaultActive | #660a2b | #fad3da | Use as the default critical icon color on click interaction. | ||
Colors.Icon.OnAccent
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Icon.OnAccent.Disabled | #f4f4f780 | #1b1c2e80 | Use for icon color placed on accentuated background on disabled state. | ||
| Colors.Icon.OnAccent.Default | #f4f4f7 | #1b1c2e | Use for icon color placed on accentuated background. | ||
| Colors.Icon.OnAccent.DefaultHover | #f4f4f7cc | #1b1c2ecc | Use for icon color placed on accentuated background on hover interaction. | ||
| Colors.Icon.OnAccent.DefaultActive | #f4f4f799 | #1b1c2e99 | Use for icon color placed on accentuated background on click interaction. | ||
Colors.Syntax
Colors.Syntax
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Syntax.Comment | #565889 | #aeafc9 | Use to style 'Comment' syntax on a code editor context. | ||
| Colors.Syntax.String | #086568 | #80dbca | Use to style 'String' syntax on a code editor context. | ||
| Colors.Syntax.Variable | #2956b7 | #a6ace8 | Use to style 'Variable' syntax on a code editor context. | ||
| Colors.Syntax.Number | #ae0984 | #f98bdd | Use to style 'Number' syntax on a code editor context. | ||
| Colors.Syntax.Punctuation | #8439ac | #cda2f1 | Use to style 'Punctuation' syntax on a code editor context. | ||
| Colors.Syntax.Function | #2956b7 | #a6ace8 | Use to style 'Function' syntax on a code editor context. | ||
| Colors.Syntax.Classname | #2c2d4d | #f0f0f5 | Use to style 'Classname' syntax on a code editor context. | ||
| Colors.Syntax.Tag | #b30926 | #ff8fa1 | Use to style 'Tag' syntax on a code editor context. | ||
| Colors.Syntax.Operators | #8439ac | #cda2f1 | Use to style 'Operators' syntax on a code editor context. | ||
| Colors.Syntax.Boolean | #994000 | #f89678 | Use to style 'Boolean' syntax on a code editor context. | ||
Colors.Charts
Colors.Charts.Categorical.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color01.Default | #134fc9 | #2e5bd6 | - | ||
Colors.Charts.Categorical.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color02.Default | #2c2f3f | #e1e3ef | - | ||
Colors.Charts.Categorical.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color03.Default | #2a7453 | #368160 | - | ||
Colors.Charts.Categorical.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color04.Default | #d85a9f | #d35091 | - | ||
Colors.Charts.Categorical.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color05.Default | #84859a | #7f8194 | - | ||
Colors.Charts.Categorical.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color06.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.Categorical.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color07.Default | #438fb1 | #4285a9 | - | ||
Colors.Charts.Categorical.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color08.Default | #8b6ecf | #8d74cd | - | ||
Colors.Charts.Categorical.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color09.Default | #649438 | #62903c | - | ||
Colors.Charts.Categorical.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color10.Default | #904523 | #a24b20 | - | ||
Colors.Charts.Categorical.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color11.Default | #627cfe | #86c3e4 | - | ||
Colors.Charts.Categorical.Color12
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color12.Default | #cd3741 | #cd3c44 | - | ||
Colors.Charts.Categorical.Color13
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color13.Default | #1c520a | #6fc3ad | - | ||
Colors.Charts.Categorical.Color14
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color14.Default | #d56b1a | #dc671e | - | ||
Colors.Charts.Categorical.Color15
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Categorical.Color15.Default | #9033a3 | #b138c7 | - | ||
Colors.Charts.CategoricalThemed.PurpleRain.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.PurpleRain.Color01.Default | #9033a3 | #b138c7 | - | ||
Colors.Charts.CategoricalThemed.PurpleRain.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.PurpleRain.Color02.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.CategoricalThemed.PurpleRain.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.PurpleRain.Color03.Default | #d85a9f | #d35091 | - | ||
Colors.Charts.CategoricalThemed.PurpleRain.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.PurpleRain.Color04.Default | #8b6ecf | #8d74cd | - | ||
Colors.Charts.CategoricalThemed.PurpleRain.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.PurpleRain.Color05.Default | #904523 | #a24b20 | - | ||
Colors.Charts.CategoricalThemed.PurpleRain.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.PurpleRain.Color06.Default | #cd3741 | #cd3c44 | - | ||
Colors.Charts.CategoricalThemed.Swamps.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Swamps.Color01.Default | #006650 | #107e65 | - | ||
Colors.Charts.CategoricalThemed.Swamps.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Swamps.Color02.Default | #84859a | #7f8194 | - | ||
Colors.Charts.CategoricalThemed.Swamps.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Swamps.Color03.Default | #649438 | #62903c | - | ||
Colors.Charts.CategoricalThemed.Swamps.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Swamps.Color04.Default | #8f4624 | #a24b20 | - | ||
Colors.Charts.CategoricalThemed.Swamps.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Swamps.Color05.Default | #2c2f3f | #e1e3ef | - | ||
Colors.Charts.CategoricalThemed.Swamps.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Swamps.Color06.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.CategoricalThemed.Fireplace.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Fireplace.Color01.Default | #ae132d | #cd3c44 | - | ||
Colors.Charts.CategoricalThemed.Fireplace.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Fireplace.Color02.Default | #d85a9f | #d35091 | - | ||
Colors.Charts.CategoricalThemed.Fireplace.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Fireplace.Color03.Default | #d56b1a | #dc671e | - | ||
Colors.Charts.CategoricalThemed.Fireplace.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Fireplace.Color04.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.CategoricalThemed.Fireplace.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Fireplace.Color05.Default | #904523 | #a24b20 | - | ||
Colors.Charts.CategoricalThemed.Fireplace.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.Fireplace.Color06.Default | #9033a3 | #a414bd | - | ||
Colors.Charts.CategoricalThemed.BlueSteel.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.BlueSteel.Color01.Default | #438fb1 | #5194b8 | - | ||
Colors.Charts.CategoricalThemed.BlueSteel.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.BlueSteel.Color02.Default | #84859a | #7f8194 | - | ||
Colors.Charts.CategoricalThemed.BlueSteel.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.BlueSteel.Color03.Default | #627cfe | #86c3e4 | - | ||
Colors.Charts.CategoricalThemed.BlueSteel.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.BlueSteel.Color04.Default | #8b6ecf | #8d74cd | - | ||
Colors.Charts.CategoricalThemed.BlueSteel.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.BlueSteel.Color05.Default | #134fc9 | #2e5bd6 | - | ||
Colors.Charts.CategoricalThemed.BlueSteel.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.CategoricalThemed.BlueSteel.Color06.Default | #2c2f3f | #e1e3ef | - | ||
Colors.Charts.Logstatus.Error
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Logstatus.Error.Default | #cd3741 | #cd3c44 | - | ||
Colors.Charts.Logstatus.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Logstatus.Warning.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.Logstatus.Info
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Logstatus.Info.Default | #134fc9 | #2e5bd6 | - | ||
Colors.Charts.Logstatus.None
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Logstatus.None.Default | #2c2f3f | #6f7285 | - | ||
Colors.Charts.Loglevel.Emergency
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Emergency.Default | #ae132d | #c21930 | - | ||
Colors.Charts.Loglevel.Error
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Error.Default | #cd3741 | #cd3c44 | - | ||
Colors.Charts.Loglevel.Alert
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Alert.Default | #c73d84 | #c43b80 | - | ||
Colors.Charts.Loglevel.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Critical.Default | #d85a9f | #df62a1 | - | ||
Colors.Charts.Loglevel.Severe
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Severe.Default | #d56b1a | #dc671e | - | ||
Colors.Charts.Loglevel.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Warning.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.Loglevel.Notice
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Notice.Default | #2a7453 | #368160 | - | ||
Colors.Charts.Loglevel.Info
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Info.Default | #134fc9 | #2e5bd6 | - | ||
Colors.Charts.Loglevel.Debug
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Loglevel.Debug.Default | #8b6ecf | #8d74cd | - | ||
Colors.Charts.Apdex.Excellent
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Apdex.Excellent.Default | #2a7453 | #48936f | - | ||
Colors.Charts.Apdex.Good
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Apdex.Good.Default | #1c520a | #007058 | - | ||
Colors.Charts.Apdex.Fair
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Apdex.Fair.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.Apdex.Poor
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Apdex.Poor.Default | #d56b1a | #dc671e | - | ||
Colors.Charts.Apdex.Unacceptable
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Apdex.Unacceptable.Default | #cd3741 | #cd3c44 | - | ||
Colors.Charts.SecurityRiskLevel.Muted
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.SecurityRiskLevel.Muted.Default | #84859a | #7f8194 | - | ||
Colors.Charts.SecurityRiskLevel.Critical
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.SecurityRiskLevel.Critical.Default | #8a0012 | #c21930 | - | ||
Colors.Charts.SecurityRiskLevel.High
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.SecurityRiskLevel.High.Default | #cd3741 | #d65151 | - | ||
Colors.Charts.SecurityRiskLevel.Medium
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.SecurityRiskLevel.Medium.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.SecurityRiskLevel.Low
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.SecurityRiskLevel.Low.Default | #134fc9 | #2e5bd6 | - | ||
Colors.Charts.VulnerabilityStatus.Muted
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.VulnerabilityStatus.Muted.Default | #84859a | #7f8194 | - | ||
Colors.Charts.VulnerabilityStatus.Resolved
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.VulnerabilityStatus.Resolved.Default | #3e8e6a | #48936f | - | ||
Colors.Charts.VulnerabilityStatus.Affected
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.VulnerabilityStatus.Affected.Default | #cd3741 | #d65151 | - | ||
Colors.Charts.Threshold.Good
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Threshold.Good.Default | #2a7453 | #368160 | - | ||
Colors.Charts.Threshold.Warning
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Threshold.Warning.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.Threshold.Bad
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Threshold.Bad.Default | #cd3741 | #cd3c44 | - | ||
Colors.Charts.Rainbow.Red
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Rainbow.Red.Default | #cd3741 | #cd3c44 | - | ||
Colors.Charts.Rainbow.Orange
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Rainbow.Orange.Default | #d56b1a | #dc671e | - | ||
Colors.Charts.Rainbow.Yellow
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Rainbow.Yellow.Default | #a9780f | #b68c2b | - | ||
Colors.Charts.Rainbow.Moss
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Rainbow.Moss.Default | #2a7453 | #368160 | - | ||
Colors.Charts.Rainbow.Blue
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Rainbow.Blue.Default | #134fc9 | #2e5bd6 | - | ||
Colors.Charts.Rainbow.Magenta
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Rainbow.Magenta.Default | #9033a3 | #b138c7 | - | ||
Colors.Charts.Sequential.PinkPurple.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color01.Default | #d85a9f | #df62a1 | - | ||
Colors.Charts.Sequential.PinkPurple.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color02.Default | #c6539f | #d062a8 | - | ||
Colors.Charts.Sequential.PinkPurple.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color03.Default | #b450a3 | #c261ae | - | ||
Colors.Charts.Sequential.PinkPurple.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color04.Default | #9f49a2 | #b15eb5 | - | ||
Colors.Charts.Sequential.PinkPurple.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color05.Default | #8d45a5 | #9e5dbb | - | ||
Colors.Charts.Sequential.PinkPurple.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color06.Default | #7640a5 | #8b5bc2 | - | ||
Colors.Charts.Sequential.PinkPurple.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color07.Default | #5d3ba5 | #745bc8 | - | ||
Colors.Charts.Sequential.PinkPurple.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color08.Default | #4038a8 | #595bcf | - | ||
Colors.Charts.Sequential.PinkPurple.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.PinkPurple.Color09.Default | #0035a8 | #2e5bd6 | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color01.Default | #0035a8 | #2e5bd6 | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color02.Default | #1d41a5 | #3b62ce | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color03.Default | #284e9f | #466fc8 | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color04.Default | #2f5998 | #4e7ac1 | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color05.Default | #336794 | #5185b8 | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color06.Default | #31708c | #5693b3 | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color07.Default | #307c88 | #559caa | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color08.Default | #2a8981 | #57a8a3 | - | ||
Colors.Charts.Sequential.BlueTurquoise.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.BlueTurquoise.Color09.Default | #1d957b | #53b29a | - | ||
Colors.Charts.Sequential.Blue.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color01.Default | #001b85 | #2e5bd6 | - | ||
Colors.Charts.Sequential.Blue.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color02.Default | #0035a8 | #4766e1 | - | ||
Colors.Charts.Sequential.Blue.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color03.Default | #134fc9 | #6178ea | - | ||
Colors.Charts.Sequential.Blue.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color04.Default | #3f63e4 | #7989f1 | - | ||
Colors.Charts.Sequential.Blue.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color05.Default | #627cfe | #8d99f7 | - | ||
Colors.Charts.Sequential.Blue.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color06.Default | #8a9bff | #9da8fb | - | ||
Colors.Charts.Sequential.Blue.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color07.Default | #a8b7ff | #b4bcfe | - | ||
Colors.Charts.Sequential.Blue.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color08.Default | #bdc8ff | #c2cbff | - | ||
Colors.Charts.Sequential.Blue.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Blue.Color09.Default | #d6deff | #d6dfff | - | ||
Colors.Charts.Sequential.Grey.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color01.Default | #111422 | #606276 | - | ||
Colors.Charts.Sequential.Grey.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color02.Default | #2c2f3f | #6f7285 | - | ||
Colors.Charts.Sequential.Grey.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color03.Default | #484a5b | #7f8194 | - | ||
Colors.Charts.Sequential.Grey.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color04.Default | #66687a | #8f91a3 | - | ||
Colors.Charts.Sequential.Grey.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color05.Default | #84859a | #9fa1b2 | - | ||
Colors.Charts.Sequential.Grey.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color06.Default | #a7a9be | #afb0c0 | - | ||
Colors.Charts.Sequential.Grey.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color07.Default | #cacce2 | #bfc1cf | - | ||
Colors.Charts.Sequential.Grey.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color08.Default | #d8d9e9 | #d1d3e0 | - | ||
Colors.Charts.Sequential.Grey.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Grey.Color09.Default | #e1e3ef | #e1e3ef | - | ||
Colors.Charts.Sequential.Moss.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color01.Default | #084427 | #287150 | - | ||
Colors.Charts.Sequential.Moss.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color02.Default | #195c3d | #368160 | - | ||
Colors.Charts.Sequential.Moss.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color03.Default | #2a7453 | #48936f | - | ||
Colors.Charts.Sequential.Moss.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color04.Default | #3e8e6a | #5aa07e | - | ||
Colors.Charts.Sequential.Moss.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color05.Default | #509575 | #6db08f | - | ||
Colors.Charts.Sequential.Moss.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color06.Default | #75c29d | #85c1a3 | - | ||
Colors.Charts.Sequential.Moss.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color07.Default | #93dcb8 | #9ad0b4 | - | ||
Colors.Charts.Sequential.Moss.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color08.Default | #b4e4cd | #b2e1c9 | - | ||
Colors.Charts.Sequential.Moss.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Moss.Color09.Default | #d4ece0 | #ccf0dd | - | ||
Colors.Charts.Sequential.Turquoise.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color01.Default | #004733 | #007058 | - | ||
Colors.Charts.Sequential.Turquoise.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color02.Default | #00523d | #107e65 | - | ||
Colors.Charts.Sequential.Turquoise.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color03.Default | #006650 | #279176 | - | ||
Colors.Charts.Sequential.Turquoise.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color04.Default | #047c64 | #3ba087 | - | ||
Colors.Charts.Sequential.Turquoise.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color05.Default | #1d957b | #53b29a | - | ||
Colors.Charts.Sequential.Turquoise.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color06.Default | #38ad92 | #6fc3ad | - | ||
Colors.Charts.Sequential.Turquoise.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color07.Default | #52c7aa | #89d1bf | - | ||
Colors.Charts.Sequential.Turquoise.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color08.Default | #78dec1 | #a8e1d2 | - | ||
Colors.Charts.Sequential.Turquoise.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Turquoise.Color09.Default | #c0ece0 | #c7efe7 | - | ||
Colors.Charts.Sequential.Pink.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color01.Default | #6b1441 | #b72a73 | - | ||
Colors.Charts.Sequential.Pink.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color02.Default | #872256 | #c43b80 | - | ||
Colors.Charts.Sequential.Pink.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color03.Default | #a83470 | #d35091 | - | ||
Colors.Charts.Sequential.Pink.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color04.Default | #c73d84 | #df62a1 | - | ||
Colors.Charts.Sequential.Pink.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color05.Default | #d85a9f | #e977b4 | - | ||
Colors.Charts.Sequential.Pink.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color06.Default | #e675b5 | #f18ec6 | - | ||
Colors.Charts.Sequential.Pink.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color07.Default | #f291cb | #f8a0d8 | - | ||
Colors.Charts.Sequential.Pink.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color08.Default | #fcb5e2 | #fcb6ec | - | ||
Colors.Charts.Sequential.Pink.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pink.Color09.Default | #fed7f0 | #ffc7ff | - | ||
Colors.Charts.Sequential.Yellow.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color01.Default | #573b00 | #805b00 | - | ||
Colors.Charts.Sequential.Yellow.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color02.Default | #614200 | #956d09 | - | ||
Colors.Charts.Sequential.Yellow.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color03.Default | #755000 | #a47a19 | - | ||
Colors.Charts.Sequential.Yellow.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color04.Default | #8f6200 | #b68c2b | - | ||
Colors.Charts.Sequential.Yellow.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color05.Default | #a9780f | #c79e3d | - | ||
Colors.Charts.Sequential.Yellow.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color06.Default | #c79323 | #d5ae53 | - | ||
Colors.Charts.Sequential.Yellow.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color07.Default | #dfb14e | #e5c16c | - | ||
Colors.Charts.Sequential.Yellow.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color08.Default | #f1cd7e | #f4d490 | - | ||
Colors.Charts.Sequential.Yellow.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Yellow.Color09.Default | #f8e1af | #ffedc2 | - | ||
Colors.Charts.Sequential.Petrol.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color01.Default | #00304d | #246789 | - | ||
Colors.Charts.Sequential.Petrol.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color02.Default | #114964 | #337599 | - | ||
Colors.Charts.Sequential.Petrol.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color03.Default | #21607d | #4285a9 | - | ||
Colors.Charts.Sequential.Petrol.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color04.Default | #307697 | #5194b8 | - | ||
Colors.Charts.Sequential.Petrol.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color05.Default | #438fb1 | #60a3c7 | - | ||
Colors.Charts.Sequential.Petrol.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color06.Default | #5ba7cd | #71b2d6 | - | ||
Colors.Charts.Sequential.Petrol.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color07.Default | #81c8ef | #86c3e4 | - | ||
Colors.Charts.Sequential.Petrol.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color08.Default | #aaddf9 | #98d2f1 | - | ||
Colors.Charts.Sequential.Petrol.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Petrol.Color09.Default | #cbe7f6 | #b0e2fc | - | ||
Colors.Charts.Sequential.Purple.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color01.Default | #32246a | #6a51bd | - | ||
Colors.Charts.Sequential.Purple.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color02.Default | #453380 | #7d63c5 | - | ||
Colors.Charts.Sequential.Purple.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color03.Default | #5e489d | #8d74cd | - | ||
Colors.Charts.Sequential.Purple.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color04.Default | #755abf | #9f85d5 | - | ||
Colors.Charts.Sequential.Purple.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color05.Default | #8b6ecf | #ae97dd | - | ||
Colors.Charts.Sequential.Purple.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color06.Default | #a184dc | #bea9e5 | - | ||
Colors.Charts.Sequential.Purple.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color07.Default | #bb9eeb | #cebbed | - | ||
Colors.Charts.Sequential.Purple.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color08.Default | #d5b9f8 | #dfd1f5 | - | ||
Colors.Charts.Sequential.Purple.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Purple.Color09.Default | #e9d7fe | #efe2fd | - | ||
Colors.Charts.Sequential.Pear.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color01.Default | #084200 | #3c7114 | - | ||
Colors.Charts.Sequential.Pear.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color02.Default | #1c520a | #508028 | - | ||
Colors.Charts.Sequential.Pear.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color03.Default | #306615 | #62903c | - | ||
Colors.Charts.Sequential.Pear.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color04.Default | #457a1f | #75a14f | - | ||
Colors.Charts.Sequential.Pear.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color05.Default | #649438 | #87b063 | - | ||
Colors.Charts.Sequential.Pear.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color06.Default | #83b455 | #99c077 | - | ||
Colors.Charts.Sequential.Pear.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color07.Default | #9fcb76 | #add08b | - | ||
Colors.Charts.Sequential.Pear.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color08.Default | #b5de8c | #bfe09f | - | ||
Colors.Charts.Sequential.Pear.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Pear.Color09.Default | #d3e9be | #e1f6cb | - | ||
Colors.Charts.Sequential.Brown.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color01.Default | #5c1d00 | #913703 | - | ||
Colors.Charts.Sequential.Brown.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color02.Default | #6f2e11 | #a24b20 | - | ||
Colors.Charts.Sequential.Brown.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color03.Default | #8f4624 | #b16139 | - | ||
Colors.Charts.Sequential.Brown.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color04.Default | #a95d37 | #c17753 | - | ||
Colors.Charts.Sequential.Brown.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color05.Default | #bc724e | #cc8a6b | - | ||
Colors.Charts.Sequential.Brown.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color06.Default | #c98769 | #d9a287 | - | ||
Colors.Charts.Sequential.Brown.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color07.Default | #dfa486 | #e3b7a0 | - | ||
Colors.Charts.Sequential.Brown.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color08.Default | #f2bfa6 | #eecebe | - | ||
Colors.Charts.Sequential.Brown.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Brown.Color09.Default | #fddece | #f8e2d8 | - | ||
Colors.Charts.Sequential.Red.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color01.Default | #610000 | #c21930 | - | ||
Colors.Charts.Sequential.Red.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color02.Default | #8a0012 | #cd3c44 | - | ||
Colors.Charts.Sequential.Red.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color03.Default | #ae132d | #d65151 | - | ||
Colors.Charts.Sequential.Red.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color04.Default | #cd3741 | #df6c68 | - | ||
Colors.Charts.Sequential.Red.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color05.Default | #eb565b | #e7817e | - | ||
Colors.Charts.Sequential.Red.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color06.Default | #ff7a7a | #ee9590 | - | ||
Colors.Charts.Sequential.Red.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color07.Default | #ffa6a3 | #f5ada8 | - | ||
Colors.Charts.Sequential.Red.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color08.Default | #ffb8b3 | #fbbfbb | - | ||
Colors.Charts.Sequential.Red.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Red.Color09.Default | #ffd9d6 | #ffd5d1 | - | ||
Colors.Charts.Sequential.Magenta.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color01.Default | #59006b | #a414bd | - | ||
Colors.Charts.Sequential.Magenta.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color02.Default | #761b88 | #b138c7 | - | ||
Colors.Charts.Sequential.Magenta.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color03.Default | #9033a3 | #bd50ce | - | ||
Colors.Charts.Sequential.Magenta.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color04.Default | #af4bbe | #c766d6 | - | ||
Colors.Charts.Sequential.Magenta.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color05.Default | #ba6bc2 | #d27dde | - | ||
Colors.Charts.Sequential.Magenta.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color06.Default | #e183e7 | #dd90e4 | - | ||
Colors.Charts.Sequential.Magenta.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color07.Default | #fca0fd | #e7a2eb | - | ||
Colors.Charts.Sequential.Magenta.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color08.Default | #fdb4fd | #f0b9f3 | - | ||
Colors.Charts.Sequential.Magenta.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Magenta.Color09.Default | #faccfa | #faccfa | - | ||
Colors.Charts.Sequential.Orange.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color01.Default | #662c00 | #b13902 | - | ||
Colors.Charts.Sequential.Orange.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color02.Default | #87420d | #c04b11 | - | ||
Colors.Charts.Sequential.Orange.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color03.Default | #ab5412 | #ce5e22 | - | ||
Colors.Charts.Sequential.Orange.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color04.Default | #c36218 | #db7133 | - | ||
Colors.Charts.Sequential.Orange.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color05.Default | #d56b1a | #e78446 | - | ||
Colors.Charts.Sequential.Orange.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color06.Default | #e57e2e | #f2975a | - | ||
Colors.Charts.Sequential.Orange.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color07.Default | #eb9a5c | #faa770 | - | ||
Colors.Charts.Sequential.Orange.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color08.Default | #efb080 | #ffbe8f | - | ||
Colors.Charts.Sequential.Orange.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Sequential.Orange.Color09.Default | #f4caa9 | #fed3b4 | - | ||
Colors.Charts.Diverging.OrangeBlue.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color01.Default | #662c00 | #b13902 | - | ||
Colors.Charts.Diverging.OrangeBlue.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color02.Default | #ab5412 | #dc671e | - | ||
Colors.Charts.Diverging.OrangeBlue.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color03.Default | #d56b1a | #fa9852 | - | ||
Colors.Charts.Diverging.OrangeBlue.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color04.Default | #eb9a5c | #fdb47c | - | ||
Colors.Charts.Diverging.OrangeBlue.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color05.Default | #f4caa9 | #facfae | - | ||
Colors.Charts.Diverging.OrangeBlue.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color06.Default | #f5f5f5 | #f5f5f5 | - | ||
Colors.Charts.Diverging.OrangeBlue.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color07.Default | #d6deff | #d6dfff | - | ||
Colors.Charts.Diverging.OrangeBlue.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color08.Default | #a8b7ff | #b4bcfe | - | ||
Colors.Charts.Diverging.OrangeBlue.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color09.Default | #627cfe | #8d99f7 | - | ||
Colors.Charts.Diverging.OrangeBlue.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color10.Default | #134fc9 | #6178ea | - | ||
Colors.Charts.Diverging.OrangeBlue.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangeBlue.Color11.Default | #001b85 | #2e5bd6 | - | ||
Colors.Charts.Diverging.RedBlue.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color01.Default | #610000 | #c21930 | - | ||
Colors.Charts.Diverging.RedBlue.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color02.Default | #ae132d | #d65151 | - | ||
Colors.Charts.Diverging.RedBlue.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color03.Default | #eb565b | #e7817e | - | ||
Colors.Charts.Diverging.RedBlue.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color04.Default | #ffa6a3 | #f5ada8 | - | ||
Colors.Charts.Diverging.RedBlue.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color05.Default | #ffd9d6 | #ffd5d1 | - | ||
Colors.Charts.Diverging.RedBlue.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color06.Default | #f5f5f5 | #f5f5f5 | - | ||
Colors.Charts.Diverging.RedBlue.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color07.Default | #d6deff | #d6dfff | - | ||
Colors.Charts.Diverging.RedBlue.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color08.Default | #a8b7ff | #b4bcfe | - | ||
Colors.Charts.Diverging.RedBlue.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color09.Default | #627cfe | #8d99f7 | - | ||
Colors.Charts.Diverging.RedBlue.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color10.Default | #134fc9 | #6178ea | - | ||
Colors.Charts.Diverging.RedBlue.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedBlue.Color11.Default | #001b85 | #2e5bd6 | - | ||
Colors.Charts.Diverging.RedPurple.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color01.Default | #610000 | #c21930 | - | ||
Colors.Charts.Diverging.RedPurple.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color02.Default | #ae132d | #d65151 | - | ||
Colors.Charts.Diverging.RedPurple.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color03.Default | #eb565b | #e7817e | - | ||
Colors.Charts.Diverging.RedPurple.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color04.Default | #ffa6a3 | #f5ada8 | - | ||
Colors.Charts.Diverging.RedPurple.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color05.Default | #ffd9d6 | #ffd5d1 | - | ||
Colors.Charts.Diverging.RedPurple.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color06.Default | #f5f5f5 | #f5f5f5 | - | ||
Colors.Charts.Diverging.RedPurple.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color07.Default | #e9d7fe | #efe2fd | - | ||
Colors.Charts.Diverging.RedPurple.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color08.Default | #bb9eeb | #cebbed | - | ||
Colors.Charts.Diverging.RedPurple.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color09.Default | #8b6ecf | #ae97dd | - | ||
Colors.Charts.Diverging.RedPurple.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color10.Default | #5e489d | #8d74cd | - | ||
Colors.Charts.Diverging.RedPurple.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedPurple.Color11.Default | #32246a | #6a51bd | - | ||
Colors.Charts.Diverging.BlueMoss.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color01.Default | #001b85 | #2e5bd6 | - | ||
Colors.Charts.Diverging.BlueMoss.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color02.Default | #134fc9 | #6178ea | - | ||
Colors.Charts.Diverging.BlueMoss.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color03.Default | #627cfe | #8d99f7 | - | ||
Colors.Charts.Diverging.BlueMoss.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color04.Default | #a8b7ff | #b4bcfe | - | ||
Colors.Charts.Diverging.BlueMoss.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color05.Default | #d6deff | #d6dfff | - | ||
Colors.Charts.Diverging.BlueMoss.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color06.Default | #f5f5f5 | #f5f5f5 | - | ||
Colors.Charts.Diverging.BlueMoss.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color07.Default | #d4ece0 | #ccf0dd | - | ||
Colors.Charts.Diverging.BlueMoss.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color08.Default | #93dcb8 | #9ad0b4 | - | ||
Colors.Charts.Diverging.BlueMoss.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color09.Default | #509575 | #6db08f | - | ||
Colors.Charts.Diverging.BlueMoss.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color10.Default | #2a7453 | #48936f | - | ||
Colors.Charts.Diverging.BlueMoss.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.BlueMoss.Color11.Default | #084427 | #287150 | - | ||
Colors.Charts.Diverging.PurpleYellow.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color01.Default | #32246a | #6a51bd | - | ||
Colors.Charts.Diverging.PurpleYellow.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color02.Default | #5e489d | #8d74cd | - | ||
Colors.Charts.Diverging.PurpleYellow.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color03.Default | #8b6ecf | #ae97dd | - | ||
Colors.Charts.Diverging.PurpleYellow.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color04.Default | #bb9eeb | #cebbed | - | ||
Colors.Charts.Diverging.PurpleYellow.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color05.Default | #e9d7fe | #efe2fd | - | ||
Colors.Charts.Diverging.PurpleYellow.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color06.Default | #f5f5f5 | #f5f5f5 | - | ||
Colors.Charts.Diverging.PurpleYellow.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color07.Default | #f8e1af | #ffedc2 | - | ||
Colors.Charts.Diverging.PurpleYellow.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color08.Default | #dfb14e | #e5c16c | - | ||
Colors.Charts.Diverging.PurpleYellow.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color09.Default | #a9780f | #c79e3d | - | ||
Colors.Charts.Diverging.PurpleYellow.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color10.Default | #755000 | #805b00 | - | ||
Colors.Charts.Diverging.PurpleYellow.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PurpleYellow.Color11.Default | #573b00 | #a47a19 | - | ||
Colors.Charts.Diverging.RedGreen.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color01.Default | #610000 | #c21930 | - | ||
Colors.Charts.Diverging.RedGreen.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color02.Default | #ae132d | #d65151 | - | ||
Colors.Charts.Diverging.RedGreen.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color03.Default | #eb565b | #e7817e | - | ||
Colors.Charts.Diverging.RedGreen.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color04.Default | #ffa6a3 | #f5ada8 | - | ||
Colors.Charts.Diverging.RedGreen.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color05.Default | #ffd9d6 | #ffd5d1 | - | ||
Colors.Charts.Diverging.RedGreen.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color06.Default | #f5f5f5 | #f5f5f5 | - | ||
Colors.Charts.Diverging.RedGreen.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color07.Default | #d4ece0 | #ccf0dd | - | ||
Colors.Charts.Diverging.RedGreen.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color08.Default | #93dcb8 | #9ad0b4 | - | ||
Colors.Charts.Diverging.RedGreen.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color09.Default | #509575 | #6db08f | - | ||
Colors.Charts.Diverging.RedGreen.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color10.Default | #2a7453 | #48936f | - | ||
Colors.Charts.Diverging.RedGreen.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.RedGreen.Color11.Default | #084427 | #287150 | - | ||
Colors.Charts.Diverging.OrangePetrol.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color01.Default | #662c00 | #b13902 | - | ||
Colors.Charts.Diverging.OrangePetrol.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color02.Default | #ab5412 | #dc671e | - | ||
Colors.Charts.Diverging.OrangePetrol.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color03.Default | #d56b1a | #fa9852 | - | ||
Colors.Charts.Diverging.OrangePetrol.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color04.Default | #eb9a5c | #fdb47c | - | ||
Colors.Charts.Diverging.OrangePetrol.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color05.Default | #f4caa9 | #facfae | - | ||
Colors.Charts.Diverging.OrangePetrol.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color06.Default | #f5f5f5 | #f5f5f5 | - | ||
Colors.Charts.Diverging.OrangePetrol.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color07.Default | #cbe7f6 | #b0e2fc | - | ||
Colors.Charts.Diverging.OrangePetrol.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color08.Default | #81c8ef | #86c3e4 | - | ||
Colors.Charts.Diverging.OrangePetrol.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color09.Default | #438fb1 | #60a3c7 | - | ||
Colors.Charts.Diverging.OrangePetrol.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color10.Default | #21607d | #4285a9 | - | ||
Colors.Charts.Diverging.OrangePetrol.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.OrangePetrol.Color11.Default | #00304d | #246789 | - | ||
Colors.Charts.Diverging.PinkGreen.Color01
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color01.Default | #6b1441 | #b72a73 | - | ||
Colors.Charts.Diverging.PinkGreen.Color02
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color02.Default | #a83470 | #d35091 | - | ||
Colors.Charts.Diverging.PinkGreen.Color03
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color03.Default | #d85a9f | #e977b4 | - | ||
Colors.Charts.Diverging.PinkGreen.Color04
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color04.Default | #f291cb | #f8a0d8 | - | ||
Colors.Charts.Diverging.PinkGreen.Color05
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color05.Default | #fed7f0 | #ffc7ff | - | ||
Colors.Charts.Diverging.PinkGreen.Color06
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color06.Default | #f5f5f5 | #f5f5f5 | - | ||
Colors.Charts.Diverging.PinkGreen.Color07
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color07.Default | #d4ece0 | #ccf0dd | - | ||
Colors.Charts.Diverging.PinkGreen.Color08
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color08.Default | #93dcb8 | #9ad0b4 | - | ||
Colors.Charts.Diverging.PinkGreen.Color09
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color09.Default | #509575 | #6db08f | - | ||
Colors.Charts.Diverging.PinkGreen.Color10
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color10.Default | #2a7453 | #48936f | - | ||
Colors.Charts.Diverging.PinkGreen.Color11
| Sample | Token Name | Value | Description | ||
|---|---|---|---|---|---|
| Light | Dark | Light | Dark | ||
| Colors.Charts.Diverging.PinkGreen.Color11.Default | #084427 | #287150 | - | ||
Still have questions?
Find answers in the Dynatrace Community