We use a subset of all colors to create a smaller color palette for generating color schemes, that includes Bootstrap’s default color schemes and Atlassian design’s Discovery color scheme.

Discovery theme

New Feature

Theme color used for communicates something new, such as onboarding or new feature information.

CSS	Swatch
`.bg-discovery`
`.bg-discovery-subtle`
`.border-discovery`
`.border-discovery-subtle`
`.text-discovery`	Aa

Primary theme

Main theme color, used for primary actions or focus styles, and component and form active states.

CSS	Swatch
`.bg-primary`
`.bg-primary-subtle`
`.border-primary`
`.border-primary-subtle`
`.text-primary`	Aa

Success theme

Used for positive or successful actions and information.

CSS	Swatch
`.bg-success`
`.bg-success-subtle`
`.border-success`
`.border-success-subtle`
`.text-success`	Aa

Danger theme

Used for errors and dangerous actions.

CSS	Swatch
`.bg-danger`
`.bg-danger-subtle`
`.border-danger`
`.border-danger-subtle`
`.text-danger`	Aa

Warning theme

Used for non-destructive warning messages.

CSS	Swatch
`.bg-warning`
`.bg-warning-subtle`
`.border-warning`
`.border-warning-subtle`
`.text-warning`	Aa

Info theme

Used for neutral and informative content.

CSS	Swatch
`.bg-info`
`.bg-info-subtle`
`.border-info`
`.border-info-subtle`
`.text-info`	Aa

Light theme

Additional theme option for less contrasting colors.

CSS	Swatch
`.bg-light`
`.bg-light-subtle`
`.border-light`
`.border-light-subtle`
`.text-light`	Aa

Dark theme

Additional theme option for higher contrasting colors.

CSS	Swatch
`.bg-dark`
`.bg-dark-subtle`
`.border-dark`
`.border-dark-subtle`
`.text-dark`	Aa

Edit this page on Github

Last updated on April 6, 2024

Theme Colors