Color

The design system uses color to highlight information and guide the user, rather than for pure decoration.

Color palette

Our color palette is minimalist, with a clear primary color for important call to actions (blue), neutral backgrounds, and clear content areas.

Neutral surfaces colors

These colors can be applied to the background and borders of components or sections. Use neutral surface colors to add depth and clarify the hierarchy between elements.

  • $neutral-0 (white) #ffffff

  • $neutral-2 #f8f8f8

  • $neutral-4 #f4f4f4

  • $neutral-6 #f2f2f2

  • $neutral-8 #ebebeb

  • $neutral-10 #dedede

  • $neutral-20 #c8c8c8

  • $neutral-30 #a6a6a6

  • $neutral-60 #666666

  • $neutral-70 #3c3c3c

  • $neutral-80 #333333

  • $neutral-alpha-2 2% black

  • $neutral-alpha-4 4% black

  • $neutral-alpha-6 6% black

  • $neutral-alpha-8 8% black

  • $neutral-alpha-10 10% black

  • $neutral-alpha-20 20% black

  • $neutral-alpha-30 30% black

  • $neutral-alpha-60 60% black

  • $neutral-alpha-70 70% black

  • $neutral-alpha-80 80% black

UI colors

Our palette’s primary color is blue — $communication-primary. It can be used for primary elements and UI accent. Other UI colors can be applied to active selection (tints) and other UI details.

  • $communication-tint-40 #eff6fc

  • $communication-tint-30 #deecf9

  • $communication-tint-20 #c7e0f4

  • $communication-tint-10 #2b88d8

  • $communication-primary #0078d4

  • $communication-shade-10 #106ebe

  • $communication-shade-20 #005a9e

  • $communication-shade-30 #004578

Text

  • $primary-text 90% black

  • $secondary-text 55% black

  • $disabled-text 38% black

  • $communication-primary #0078d4

  • $primary-text-invert 100% white

  • $secondary-text-invert 65% white

  • $disabled-text-invert 32% white

  • Do: Use only colors from the text color palette for text.
  • Do: Use disabled text color only for disabled elements.
  • Don’t: Use disabled text color for subtle text blocks.

Dark and light themes

The design system defines light and dark themes. Themes affect background, text, icons and controls.

Light theme

Light theme

Dark theme

Dark theme

Common components translate colors between themes by default, but you should still consider the dark theme, especially when designing custom experiences.

How to use color

When using color follow these guiding principles:

  • Meaning: Use color sparingly to highlight important elements.

  • Interactivity: Use color to indicate an interactive element.

  • Accessible: Don´t rely on color alone to convey information — provide text or other graphical cues.

  • Culture: Consider how color can be interpreted in different ways by different cultures.

  • Do: Use color to draw user’s attention to an area.

  • Don’t: Overuse color, making the product confusing and hard to skim.

Interactive states

Buttons and other interactive elements use a consistent palette for each interactive state.

Standard button interactive states
  • (1) Rest state: $neutral-alpha-6
  • (2) Hover state: $neutral-alpha-10
  • (3) Pressed state: $neutral-alpha-20

Subtler interactions may use a transparent background in neutral state. In this case, make sure the element can be recognized as interactive by using a distinct style such as font weight, icon application, etc.

Subtle button interactive states
  • (1) Rest state: transparent
  • (2) Hover state: $neutral-alpha-6
  • (3) Pressed state: $neutral-alpha-20

Accessibility

Text and background should have at least 4.5:1 contrast ratio.

Use only text colors from the palette, making sure there is enough contrast between text and background.

Using color palettes in Figma

All new and existing files within the Developer Services team in Figma have access to the color palette.

Color styles in Figma's interface

When you select an object, open the style icon next to the Fill header in the inspector panel to see and choose from the system color palette.

Resources