Skip to main content
⌘K
Last modified: 4/Oct/2024

Colors

In any cases use these and only these colors. If you have a design containing an exception, please contact the design team, or us, the Stratus team.

Note that the number at the end of the Alpha colours is the opacity. For example, ironAlpha08 is 8% opacity.

color.bg.action.negative.accent
color.bg.action.negative.active
color.bg.action.negative.activeSubtle
color.bg.action.negative.activeSubtlest
color.bg.action.negative.activeSubtlestConstant
color.bg.action.negative.default
color.bg.action.negative.defaultSubtle
color.bg.action.negative.defaultSubtlest
color.bg.action.negative.defaultSubtlestConstant
color.bg.action.negative.disabled
color.bg.action.negative.hovered
color.bg.action.negative.hoveredSubtle
color.bg.action.negative.hoveredSubtlest
color.bg.action.negative.hoveredSubtlestConstant
color.bg.action.neutral.accent
color.bg.action.neutral.active
color.bg.action.neutral.activeSubtle
color.bg.action.neutral.activeSubtlest
color.bg.action.neutral.activeSubtlestConstant
color.bg.action.neutral.default
color.bg.action.neutral.defaultSubtle
color.bg.action.neutral.defaultSubtlest
color.bg.action.neutral.defaultSubtlestConstant
color.bg.action.neutral.disabled
color.bg.action.neutral.hovered
color.bg.action.neutral.hoveredSubtle
color.bg.action.neutral.hoveredSubtlest
color.bg.action.neutral.hoveredSubtlestConstant
color.bg.action.positive.accent
color.bg.action.positive.active
color.bg.action.positive.activeSubtle
color.bg.action.positive.activeSubtlest
color.bg.action.positive.activeSubtlestConstant
color.bg.action.positive.default
color.bg.action.positive.defaultSubtle
color.bg.action.positive.defaultSubtlest
color.bg.action.positive.defaultSubtlestConstant
color.bg.action.positive.disabled
color.bg.action.positive.hovered
color.bg.action.positive.hoveredSubtle
color.bg.action.positive.hoveredSubtlest
color.bg.action.positive.hoveredSubtlestConstant
color.bg.action.primary.accent
color.bg.action.primary.active
color.bg.action.primary.activeSubtle
color.bg.action.primary.activeSubtlest
color.bg.action.primary.activeSubtlestConstant
color.bg.action.primary.default
color.bg.action.primary.defaultSubtle
color.bg.action.primary.defaultSubtlest
color.bg.action.primary.defaultSubtlestConstant
color.bg.action.primary.disabled
color.bg.action.primary.hovered
color.bg.action.primary.hoveredSubtle
color.bg.action.primary.hoveredSubtlest
color.bg.action.primary.hoveredSubtlestConstant
color.bg.action.secondary.accent
color.bg.action.secondary.active
color.bg.action.secondary.activeSubtle
color.bg.action.secondary.activeSubtlest
color.bg.action.secondary.activeSubtlestConstant
color.bg.action.secondary.default
color.bg.action.secondary.defaultSubtle
color.bg.action.secondary.defaultSubtlest
color.bg.action.secondary.defaultSubtlestConstant
color.bg.action.secondary.disabled
color.bg.action.secondary.hovered
color.bg.action.secondary.hoveredSubtle
color.bg.action.secondary.hoveredSubtlest
color.bg.action.secondary.hoveredSubtlestConstant
color.bg.action.warning.accent
color.bg.action.warning.active
color.bg.action.warning.activeSubtle
color.bg.action.warning.activeSubtlest
color.bg.action.warning.activeSubtlestConstant
color.bg.action.warning.default
color.bg.action.warning.defaultSubtle
color.bg.action.warning.defaultSubtlest
color.bg.action.warning.defaultSubtlestConstant
color.bg.action.warning.disabled
color.bg.action.warning.hovered
color.bg.action.warning.hoveredSubtle
color.bg.action.warning.hoveredSubtlest
color.bg.action.warning.hoveredSubtlestConstant
color.bg.input.default
color.bg.input.disabled
color.bg.input.hovered
color.bg.static.active
color.bg.static.activeInverseConstant
color.bg.static.backdrop
color.bg.static.default
color.bg.static.defaultInverseConstant
color.bg.static.hovered
color.bg.static.hoveredInverseConstant
color.bg.static.negative.active
color.bg.static.negative.activeInverse
color.bg.static.negative.activeSubtle
color.bg.static.negative.activeSubtlest
color.bg.static.negative.default
color.bg.static.negative.defaultInverse
color.bg.static.negative.defaultSubtle
color.bg.static.negative.defaultSubtlest
color.bg.static.negative.disabled
color.bg.static.negative.hovered
color.bg.static.negative.hoveredInverse
color.bg.static.negative.hoveredSubtle
color.bg.static.negative.hoveredSubtlest
color.bg.static.neutral.active
color.bg.static.neutral.activeInverse
color.bg.static.neutral.activeSubtle
color.bg.static.neutral.activeSubtlest
color.bg.static.neutral.default
color.bg.static.neutral.defaultInverse
color.bg.static.neutral.defaultSubtle
color.bg.static.neutral.defaultSubtlest
color.bg.static.neutral.disabled
color.bg.static.neutral.hovered
color.bg.static.neutral.hoveredInverse
color.bg.static.neutral.hoveredSubtle
color.bg.static.neutral.hoveredSubtlest
color.bg.static.positive.active
color.bg.static.positive.activeInverse
color.bg.static.positive.activeSubtle
color.bg.static.positive.activeSubtlest
color.bg.static.positive.default
color.bg.static.positive.defaultInverse
color.bg.static.positive.defaultSubtle
color.bg.static.positive.defaultSubtlest
color.bg.static.positive.disabled
color.bg.static.positive.hovered
color.bg.static.positive.hoveredInverse
color.bg.static.positive.hoveredSubtle
color.bg.static.positive.hoveredSubtlest
color.bg.static.primary.active
color.bg.static.primary.activeInverse
color.bg.static.primary.activeSubtle
color.bg.static.primary.activeSubtlest
color.bg.static.primary.default
color.bg.static.primary.defaultInverse
color.bg.static.primary.defaultSubtle
color.bg.static.primary.defaultSubtlest
color.bg.static.primary.disabled
color.bg.static.primary.hovered
color.bg.static.primary.hoveredInverse
color.bg.static.primary.hoveredSubtle
color.bg.static.primary.hoveredSubtlest
color.bg.static.secondary.active
color.bg.static.secondary.activeInverse
color.bg.static.secondary.activeSubtle
color.bg.static.secondary.activeSubtlest
color.bg.static.secondary.default
color.bg.static.secondary.defaultInverse
color.bg.static.secondary.defaultSubtle
color.bg.static.secondary.defaultSubtlest
color.bg.static.secondary.disabled
color.bg.static.secondary.hovered
color.bg.static.secondary.hoveredInverse
color.bg.static.secondary.hoveredSubtle
color.bg.static.secondary.hoveredSubtlest
color.bg.static.warning.active
color.bg.static.warning.activeInverse
color.bg.static.warning.activeSubtle
color.bg.static.warning.activeSubtlest
color.bg.static.warning.default
color.bg.static.warning.defaultInverse
color.bg.static.warning.defaultSubtle
color.bg.static.warning.defaultSubtlest
color.bg.static.warning.disabled
color.bg.static.warning.hovered
color.bg.static.warning.hoveredInverse
color.bg.static.warning.hoveredSubtle
color.bg.static.warning.hoveredSubtlest
color.border.negative.active
color.border.negative.activeSubtle
color.border.negative.activeSubtlest
color.border.negative.default
color.border.negative.defaultSubtle
color.border.negative.defaultSubtlest
color.border.negative.focused
color.border.negative.hovered
color.border.negative.hoveredSubtle
color.border.negative.hoveredSubtlest
color.border.neutral.active
color.border.neutral.activeSubtle
color.border.neutral.activeSubtlest
color.border.neutral.default
color.border.neutral.defaultSubtle
color.border.neutral.defaultSubtlest
color.border.neutral.focused
color.border.neutral.hovered
color.border.neutral.hoveredSubtle
color.border.neutral.hoveredSubtlest
color.border.positive.active
color.border.positive.activeSubtle
color.border.positive.activeSubtlest
color.border.positive.default
color.border.positive.defaultSubtle
color.border.positive.defaultSubtlest
color.border.positive.focused
color.border.positive.hovered
color.border.positive.hoveredSubtle
color.border.positive.hoveredSubtlest
color.border.primary.active
color.border.primary.activeSubtle
color.border.primary.activeSubtlest
color.border.primary.default
color.border.primary.defaultSubtle
color.border.primary.defaultSubtlest
color.border.primary.focused
color.border.primary.hovered
color.border.primary.hoveredSubtle
color.border.primary.hoveredSubtlest
color.border.secondary.active
color.border.secondary.activeSubtle
color.border.secondary.activeSubtlest
color.border.secondary.default
color.border.secondary.defaultSubtle
color.border.secondary.defaultSubtlest
color.border.secondary.focused
color.border.secondary.hovered
color.border.secondary.hoveredSubtle
color.border.secondary.hoveredSubtlest
color.border.warning.active
color.border.warning.activeSubtle
color.border.warning.activeSubtlest
color.border.warning.default
color.border.warning.defaultSubtle
color.border.warning.defaultSubtlest
color.border.warning.focused
color.border.warning.hovered
color.border.warning.hoveredSubtle
color.border.warning.hoveredSubtlest
color.dataviz.categorical.primary.100
color.dataviz.categorical.primary.200
color.dataviz.categorical.primary.300
color.dataviz.categorical.primary.400
color.dataviz.categorical.primary.500
color.dataviz.categorical.primary.100alpha0
color.dataviz.categorical.primary.100alpha20
color.dataviz.categorical.primary.200alpha0
color.dataviz.categorical.primary.200alpha20
color.dataviz.categorical.primary.300alpha0
color.dataviz.categorical.primary.300alpha20
color.dataviz.categorical.quaternary.100
color.dataviz.categorical.quaternary.200
color.dataviz.categorical.quaternary.300
color.dataviz.categorical.quaternary.400
color.dataviz.categorical.quaternary.500
color.dataviz.categorical.quaternary.100alpha0
color.dataviz.categorical.quaternary.100alpha20
color.dataviz.categorical.quaternary.200alpha0
color.dataviz.categorical.quaternary.200alpha20
color.dataviz.categorical.quaternary.300alpha0
color.dataviz.categorical.quaternary.300alpha20
color.dataviz.categorical.quinary.100
color.dataviz.categorical.quinary.200
color.dataviz.categorical.quinary.300
color.dataviz.categorical.quinary.400
color.dataviz.categorical.quinary.500
color.dataviz.categorical.quinary.100alpha0
color.dataviz.categorical.quinary.100alpha20
color.dataviz.categorical.quinary.200alpha0
color.dataviz.categorical.quinary.200alpha20
color.dataviz.categorical.quinary.300alpha0
color.dataviz.categorical.quinary.300alpha20
color.dataviz.categorical.secondary.100
color.dataviz.categorical.secondary.200
color.dataviz.categorical.secondary.300
color.dataviz.categorical.secondary.400
color.dataviz.categorical.secondary.500
color.dataviz.categorical.secondary.100alpha0
color.dataviz.categorical.secondary.100alpha20
color.dataviz.categorical.secondary.200alpha0
color.dataviz.categorical.secondary.200alpha20
color.dataviz.categorical.secondary.300alpha0
color.dataviz.categorical.secondary.300alpha20
color.dataviz.categorical.senary.100
color.dataviz.categorical.senary.200
color.dataviz.categorical.senary.300
color.dataviz.categorical.senary.400
color.dataviz.categorical.senary.500
color.dataviz.categorical.senary.100alpha0
color.dataviz.categorical.senary.100alpha20
color.dataviz.categorical.senary.200alpha0
color.dataviz.categorical.senary.200alpha20
color.dataviz.categorical.senary.300alpha0
color.dataviz.categorical.senary.300alpha20
color.dataviz.categorical.septenary.100
color.dataviz.categorical.septenary.200
color.dataviz.categorical.septenary.300
color.dataviz.categorical.septenary.400
color.dataviz.categorical.septenary.500
color.dataviz.categorical.septenary.100alpha0
color.dataviz.categorical.septenary.100alpha20
color.dataviz.categorical.septenary.200alpha0
color.dataviz.categorical.septenary.200alpha20
color.dataviz.categorical.septenary.300alpha0
color.dataviz.categorical.septenary.300alpha20
color.dataviz.categorical.tertiary.100
color.dataviz.categorical.tertiary.200
color.dataviz.categorical.tertiary.300
color.dataviz.categorical.tertiary.400
color.dataviz.categorical.tertiary.500
color.dataviz.categorical.tertiary.100alpha0
color.dataviz.categorical.tertiary.100alpha20
color.dataviz.categorical.tertiary.200alpha0
color.dataviz.categorical.tertiary.200alpha20
color.dataviz.categorical.tertiary.300alpha0
color.dataviz.categorical.tertiary.300alpha20
color.icon.negative.default
color.icon.negative.defaultInverse
color.icon.negative.defaultInverseConstant
color.icon.negative.disabled
color.icon.negative.disabledInverse
color.icon.negative.onAction
color.icon.negative.onActionConstant
color.icon.negative.onActionInverse
color.icon.negative.placeholder
color.icon.negative.placeholderInverse
color.icon.negative.subtle
color.icon.negative.subtleInverse
color.icon.negative.subtleInverseConstant
color.icon.negative.subtlest
color.icon.negative.subtlestInverse
color.icon.neutral.default
color.icon.neutral.defaultInverse
color.icon.neutral.defaultInverseConstant
color.icon.neutral.disabled
color.icon.neutral.disabledInverse
color.icon.neutral.onAction
color.icon.neutral.onActionConstant
color.icon.neutral.onActionInverse
color.icon.neutral.placeholder
color.icon.neutral.placeholderInverse
color.icon.neutral.subtle
color.icon.neutral.subtleInverse
color.icon.neutral.subtleInverseConstant
color.icon.neutral.subtlest
color.icon.neutral.subtlestInverse
color.icon.positive.default
color.icon.positive.defaultInverse
color.icon.positive.defaultInverseConstant
color.icon.positive.disabled
color.icon.positive.disabledInverse
color.icon.positive.onAction
color.icon.positive.onActionConstant
color.icon.positive.onActionInverse
color.icon.positive.placeholder
color.icon.positive.placeholderInverse
color.icon.positive.subtle
color.icon.positive.subtleInverse
color.icon.positive.subtleInverseConstant
color.icon.positive.subtlest
color.icon.positive.subtlestInverse
color.icon.primary.default
color.icon.primary.defaultInverse
color.icon.primary.defaultInverseConstant
color.icon.primary.disabled
color.icon.primary.disabledInverse
color.icon.primary.onAction
color.icon.primary.onActionConstant
color.icon.primary.onActionInverse
color.icon.primary.placeholder
color.icon.primary.placeholderInverse
color.icon.primary.subtle
color.icon.primary.subtleInverse
color.icon.primary.subtleInverseConstant
color.icon.primary.subtlest
color.icon.primary.subtlestInverse
color.icon.secondary.default
color.icon.secondary.defaultInverse
color.icon.secondary.defaultInverseConstant
color.icon.secondary.disabled
color.icon.secondary.disabledInverse
color.icon.secondary.onAction
color.icon.secondary.onActionConstant
color.icon.secondary.onActionInverse
color.icon.secondary.placeholder
color.icon.secondary.placeholderInverse
color.icon.secondary.subtle
color.icon.secondary.subtleInverse
color.icon.secondary.subtleInverseConstant
color.icon.secondary.subtlest
color.icon.secondary.subtlestInverse
color.icon.warning.default
color.icon.warning.defaultInverse
color.icon.warning.defaultInverseConstant
color.icon.warning.disabled
color.icon.warning.disabledInverse
color.icon.warning.onAction
color.icon.warning.onActionConstant
color.icon.warning.onActionInverse
color.icon.warning.placeholder
color.icon.warning.placeholderInverse
color.icon.warning.subtle
color.icon.warning.subtleInverse
color.icon.warning.subtleInverseConstant
color.icon.warning.subtlest
color.icon.warning.subtlestInverse
color.link.accent.default
color.link.accent.disabled
color.link.accent.hovered
color.link.accent.pressed
color.link.neutral.default
color.link.neutral.disabled
color.link.neutral.hovered
color.link.neutral.pressed
color.text.negative.default
color.text.negative.defaultInverse
color.text.negative.defaultInverseConstant
color.text.negative.disabled
color.text.negative.disabledInverse
color.text.negative.onAction
color.text.negative.onActionInverse
color.text.negative.placeholder
color.text.negative.placeholderInverse
color.text.negative.subtle
color.text.negative.subtleInverse
color.text.negative.subtleInverseConstant
color.text.negative.subtlest
color.text.negative.subtlestInverse
color.text.neutral.default
color.text.neutral.defaultInverse
color.text.neutral.defaultInverseConstant
color.text.neutral.disabled
color.text.neutral.disabledInverse
color.text.neutral.onAction
color.text.neutral.onActionInverse
color.text.neutral.placeholder
color.text.neutral.placeholderInverse
color.text.neutral.subtle
color.text.neutral.subtleInverse
color.text.neutral.subtleInverseConstant
color.text.neutral.subtlest
color.text.neutral.subtlestInverse
color.text.positive.default
color.text.positive.defaultInverse
color.text.positive.defaultInverseConstant
color.text.positive.disabled
color.text.positive.disabledInverse
color.text.positive.onAction
color.text.positive.onActionInverse
color.text.positive.placeholder
color.text.positive.placeholderInverse
color.text.positive.subtle
color.text.positive.subtleInverse
color.text.positive.subtleInverseConstant
color.text.positive.subtlest
color.text.positive.subtlestInverse
color.text.primary.default
color.text.primary.defaultInverse
color.text.primary.defaultInverseConstant
color.text.primary.disabled
color.text.primary.disabledInverse
color.text.primary.onAction
color.text.primary.onActionInverse
color.text.primary.placeholder
color.text.primary.placeholderInverse
color.text.primary.subtle
color.text.primary.subtleInverse
color.text.primary.subtleInverseConstant
color.text.primary.subtlest
color.text.primary.subtlestInverse
color.text.secondary.default
color.text.secondary.defaultInverse
color.text.secondary.defaultInverseConstant
color.text.secondary.disabled
color.text.secondary.disabledInverse
color.text.secondary.onAction
color.text.secondary.onActionInverse
color.text.secondary.placeholder
color.text.secondary.placeholderInverse
color.text.secondary.subtle
color.text.secondary.subtleInverse
color.text.secondary.subtleInverseConstant
color.text.secondary.subtlest
color.text.secondary.subtlestInverse
color.text.warning.default
color.text.warning.defaultInverse
color.text.warning.defaultInverseConstant
color.text.warning.disabled
color.text.warning.disabledInverse
color.text.warning.onAction
color.text.warning.onActionInverse
color.text.warning.placeholder
color.text.warning.placeholderInverse
color.text.warning.subtle
color.text.warning.subtleInverse
color.text.warning.subtleInverseConstant
color.text.warning.subtlest
color.text.warning.subtlestInverse
color.white
⚠ deprecated
color.offWhite
⚠ deprecated
color.dove
⚠ deprecated
color.lightGrey
⚠ deprecated
color.mediumGrey
⚠ deprecated
color.slateGrey
⚠ deprecated
color.iron
⚠ deprecated
color.ironAlpha08
⚠ deprecated
color.ironAlpha12
⚠ deprecated
color.ironAlpha16
⚠ deprecated
color.anthracite
⚠ deprecated
color.purple
⚠ deprecated
color.purpleAlpha
⚠ deprecated
color.deepPurple
⚠ deprecated
color.midnightBlue
⚠ deprecated
color.blue
⚠ deprecated
color.lightBlue
⚠ deprecated
color.paleBlue
⚠ deprecated
color.lightTurquoise
⚠ deprecated
color.turquoise
⚠ deprecated
color.slateGreen
⚠ deprecated
color.green
⚠ deprecated
color.paleGreen
⚠ deprecated
color.paleRed
⚠ deprecated
color.lightRed
⚠ deprecated
color.red
⚠ deprecated
color.redAlpha
⚠ deprecated
color.crimson
⚠ deprecated
color.magenta
⚠ deprecated
color.palePink
⚠ deprecated
color.palePurple
⚠ deprecated
color.paleYellow
⚠ deprecated
color.yellow
⚠ deprecated
color.orange
⚠ deprecated
color.ocher
⚠ deprecated