Colors and theming

Consistent use of color across the platform creates familiar and engaging experiences. Leveraging a uniform color palette helps to convey meaning and prioritize information and actions.

Theming

Calcite's default theme provides a color palette with values for light and dark modes. These CSS variables can be adjusted to fit your application's needs for branding, messaging, and design. To modify the theme, update CSS variables in both light and dark modes.

Primary colors

Sparse use of color in an interface makes the prioritization of content and actions more apparent. A single actionable color and background color, along with a limited set of text and foreground shades, provides a clear and consistent backdrop for rich map imagery, focused interactions, or complex workflows.

Light modeDark mode
  • Copy
    --calcite-color-brand#007AC2
  • Copy
    --calcite-color-background#F8F8F8
    Text
  • Copy
    --calcite-color-text-1#151515
  • Copy
    --calcite-color-text-2#4A4A4A
  • Copy
    --calcite-color-text-3#6A6A6A
    Foreground
  • Copy
    --calcite-color-foreground-1#FFFFFF
  • Copy
    --calcite-color-foreground-2#F3F3F3
  • Copy
    --calcite-color-foreground-3#EAEAEA
  • Copy
    --calcite-color-brand#009AF2
  • Copy
    --calcite-color-background#353535
    Text
  • Copy
    --calcite-color-text-1#FFFFFF
  • Copy
    --calcite-color-text-2#BFBFBF
  • Copy
    --calcite-color-text-3#9F9F9F
    Foreground
  • Copy
    --calcite-color-foreground-1#2B2B2B
  • Copy
    --calcite-color-foreground-2#202020
  • Copy
    --calcite-color-foreground-3#151515

State colors

Using a limited set of colors in our designs makes the use of color more meaningful. A consistent palette of state colors provides consistency across applications. When used sparingly, these state colors can help quickly communicate priority and importance to a user, creating a unified and engaging experience across applications.

Light modeDark mode
  • Copy
    --calcite-color-status-info#00619B
  • Copy
    --calcite-color-status-success#35AC46
  • Copy
    --calcite-color-status-warning#EDD317
  • Copy
    --calcite-color-status-danger#D83020
  • Copy
    --calcite-color-status-info#00A0FF
  • Copy
    --calcite-color-status-success#36DA43
  • Copy
    --calcite-color-status-warning#FFC900
  • Copy
    --calcite-color-status-danger#FE583E

Usage guidelines

StateUsage
InformationNon critical information which requires minimal user attention.
SuccessTo be used when an important action has been completed successfully and requires user notification.
WarningTo be used when something needs the user's attention, but is not critical or destructive.
DangerA connection error, destructive action, action failure, etc.

Modes

Calcite Design System provides light and dark modes for your application. The light mode is the default mode, and is available to use without any additional configuration if it's the only mode you wish to use. If you would like to change the mode, use the corresponding CSS classes.

    Light
  • Copy
    --calcite-color-brand#007AC2
  • Copy
    --calcite-color-brand-hover#00619B
  • Copy
    --calcite-color-brand-press#004874
  • Copy
    --calcite-color-background#F8F8F8
  • Copy
    --calcite-color-foreground-1#FFFFFF
  • Copy
    --calcite-color-foreground-2#F3F3F3
  • Copy
    --calcite-color-foreground-3#EAEAEA
  • Copy
    --calcite-color-text-1#151515
  • Copy
    --calcite-color-text-2#4A4A4A
  • Copy
    --calcite-color-text-3#6A6A6A
  • Copy
    --calcite-color-text-inverse#FFFFFF
  • Copy
    --calcite-color-text-link#00619B
  • Copy
    --calcite-color-border-1#CACACA
  • Copy
    --calcite-color-border-2#D4D4D4
  • Copy
    --calcite-color-border-3#DFDFDF
  • Copy
    --calcite-color-border-input#949494
  • Copy
    --calcite-color-status-info#00619B
  • Copy
    --calcite-color-status-success#35AC46
  • Copy
    --calcite-color-status-warning#EDD317
  • Copy
    --calcite-color-status-danger#D83020
  • Copy
    --calcite-color-status-danger-hover#A82B1E
  • Copy
    --calcite-color-status-danger-press#7C1D13
    Dark
  • Copy
    --calcite-color-brand#009AF2
  • Copy
    --calcite-color-brand-hover#007AC2
  • Copy
    --calcite-color-brand-press#00619B
  • Copy
    --calcite-color-background#353535
  • Copy
    --calcite-color-foreground-1#2B2B2B
  • Copy
    --calcite-color-foreground-2#202020
  • Copy
    --calcite-color-foreground-3#151515
  • Copy
    --calcite-color-text-1#FFFFFF
  • Copy
    --calcite-color-text-2#BFBFBF
  • Copy
    --calcite-color-text-3#9F9F9F
  • Copy
    --calcite-color-text-inverse#151515
  • Copy
    --calcite-color-text-link#00A0FF
  • Copy
    --calcite-color-border-1#555555
  • Copy
    --calcite-color-border-2#4A4A4A
  • Copy
    --calcite-color-border-3#404040
  • Copy
    --calcite-color-border-input#757575
  • Copy
    --calcite-color-status-info#00A0FF
  • Copy
    --calcite-color-status-success#36DA43
  • Copy
    --calcite-color-status-warning#FFC900
  • Copy
    --calcite-color-status-danger#FE583E
  • Copy
    --calcite-color-status-danger-hover#FF0015
  • Copy
    --calcite-color-status-danger-press#D90012

Best practices

Use colors sparingly

Limited use of color can help make interfaces more understandable and intuitive. Avoid overusing the brand color.

Correct Color Actions
Do use the brand color for prioritized actions.
Incorrect Color Actions
Avoid overusing the brand color.
Correct Color Clean UI
Do use the brand color for emphasized actions.
Incorrect Color Clean UI
Avoid using the brand color as a background.
Correct Color Clean UI
Do use state colors to quickly convey meaning.
Incorrect Color Clean UI
Avoid using state colors haphazardly or as backgrounds.

More Esri colors

This is a subset of our expanded Esri color palette, specifically for use in interactive design applications. The calcite-colors repository is where we host Esri's official color documentation that can be seen and is leveraged by esri.com and our various products.

Calcite colors GitHub

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