Chart Colors

Chart color guidance to communicate data clearly.

Overview

Data visualization is crucial for clear communication, but inconsistent color usage can hinder comprehension and create visual noise. Chart Color Tokens provide a unified, robust, and accessible system for coloring data visualizations across all Dialpad products.

These tokens are designed to:

  • Ensure Visual Consistency: Guarantee a cohesive look and feel for data insights.
  • Enhance Accessibility: Provide high-contrast, color-blind friendly palettes out-of-the-box.
  • Streamline Workflow: Offer a single source of truth for both designers and developers, reducing guesswork and speeding up development.
  • Improve Maintainability: Simplify global color updates and future-proof our data experiences.

Types

Chart Colors are available for one of four types: Single Color, Semantic, Categorical, and Sequential.

Single Color

Use for data visualizations that only require comparing one or two data points, or a single data point against a series of adjacent neutral data. Use chart.color.accent as the default. To bring a data point to focus, use chart.color.accent for the focused data point and chart.color.neutral for the rest.

When to Use:

  • Basic data points.
  • Indicating selected chart series or segments.
  • Dimming or disabling inactive chart elements.
Preview
Token Name

var(--dt-color-chart-accent)

var(--dt-color-chart-accent-hover)

var(--dt-color-chart-accent-selected)

var(--dt-color-chart-neutral)

var(--dt-color-chart-neutral-hover)

var(--dt-color-chart-neutral-selected)

Semantic

Apply colors that associate meaning to the data points, such as status, severity, or sentiment.

When to Use:

  • Performance Dashboards: Showing status (on-track, at-risk, complete).
  • Alerts/Notifications: Highlighting critical data points.
  • Sentiment Analysis: Representing positive, neutral, or negative sentiment.
  • Brand Alignment: Emphasizing data related directly to Dialpad's core identity.
Preview
Token Name

var(--dt-color-chart-critical)

var(--dt-color-chart-critical-hover)

var(--dt-color-chart-critical-selected)

var(--dt-color-chart-info)

var(--dt-color-chart-info-hover)

var(--dt-color-chart-info-selected)

var(--dt-color-chart-positive)

var(--dt-color-chart-positive-hover)

var(--dt-color-chart-positive-selected)

var(--dt-color-chart-warning)

var(--dt-color-chart-warning-hover)

var(--dt-color-chart-warning-selected)

Categorical

Apply unique colors to distinguish two or more unrelated data where color carries no meaning. Use in the predetermined numerical order, e.g. 01, 02, etc. This ensures applied data can be visually distinguished from its adjacent data.

When to Use:

  • Multi-series bar charts, pie charts, or line charts comparing different groups.
  • Visualizing discrete variables (e.g., customer segments, operating systems).
Preview
Token Name

var(--dt-color-chart-categorical-01)

var(--dt-color-chart-categorical-01-hover)

var(--dt-color-chart-categorical-01-selected)

var(--dt-color-chart-categorical-02)

var(--dt-color-chart-categorical-02-hover)

var(--dt-color-chart-categorical-02-selected)

var(--dt-color-chart-categorical-03)

var(--dt-color-chart-categorical-03-hover)

var(--dt-color-chart-categorical-03-selected)

var(--dt-color-chart-categorical-04)

var(--dt-color-chart-categorical-04-hover)

var(--dt-color-chart-categorical-04-selected)

var(--dt-color-chart-categorical-05)

var(--dt-color-chart-categorical-05-hover)

var(--dt-color-chart-categorical-05-selected)

var(--dt-color-chart-categorical-06)

var(--dt-color-chart-categorical-06-hover)

var(--dt-color-chart-categorical-06-selected)

var(--dt-color-chart-categorical-07)

var(--dt-color-chart-categorical-07-hover)

var(--dt-color-chart-categorical-07-selected)

var(--dt-color-chart-categorical-08)

var(--dt-color-chart-categorical-08-hover)

var(--dt-color-chart-categorical-08-selected)

var(--dt-color-chart-categorical-09)

var(--dt-color-chart-categorical-09-hover)

var(--dt-color-chart-categorical-09-selected)

var(--dt-color-chart-categorical-10)

var(--dt-color-chart-categorical-10-hover)

var(--dt-color-chart-categorical-10-selected)

var(--dt-color-chart-categorical-11)

var(--dt-color-chart-categorical-11-hover)

var(--dt-color-chart-categorical-11-selected)

var(--dt-color-chart-categorical-12)

var(--dt-color-chart-categorical-12-hover)

var(--dt-color-chart-categorical-12-selected)

var(--dt-color-chart-categorical-13)

var(--dt-color-chart-categorical-13-hover)

var(--dt-color-chart-categorical-13-selected)

var(--dt-color-chart-categorical-14)

var(--dt-color-chart-categorical-14-hover)

var(--dt-color-chart-categorical-14-selected)

var(--dt-color-chart-categorical-15)

var(--dt-color-chart-categorical-15-hover)

var(--dt-color-chart-categorical-15-selected)

var(--dt-color-chart-categorical-16)

var(--dt-color-chart-categorical-16-hover)

var(--dt-color-chart-categorical-16-selected)

var(--dt-color-chart-categorical-17)

var(--dt-color-chart-categorical-17-hover)

var(--dt-color-chart-categorical-17-selected)

var(--dt-color-chart-categorical-18)

var(--dt-color-chart-categorical-18-hover)

var(--dt-color-chart-categorical-18-selected)

var(--dt-color-chart-categorical-19)

var(--dt-color-chart-categorical-19-hover)

var(--dt-color-chart-categorical-19-selected)

var(--dt-color-chart-categorical-20)

var(--dt-color-chart-categorical-20-hover)

var(--dt-color-chart-categorical-20-selected)

var(--dt-color-chart-categorical-21)

var(--dt-color-chart-categorical-21-hover)

var(--dt-color-chart-categorical-21-selected)

var(--dt-color-chart-categorical-22)

var(--dt-color-chart-categorical-22-hover)

var(--dt-color-chart-categorical-22-selected)

var(--dt-color-chart-categorical-23)

var(--dt-color-chart-categorical-23-hover)

var(--dt-color-chart-categorical-23-selected)

var(--dt-color-chart-categorical-24)

var(--dt-color-chart-categorical-24-hover)

var(--dt-color-chart-categorical-24-selected)

var(--dt-color-chart-categorical-25)

var(--dt-color-chart-categorical-25-hover)

var(--dt-color-chart-categorical-25-selected)

var(--dt-color-chart-categorical-26)

var(--dt-color-chart-categorical-26-hover)

var(--dt-color-chart-categorical-26-selected)

var(--dt-color-chart-categorical-27)

var(--dt-color-chart-categorical-27-hover)

var(--dt-color-chart-categorical-27-selected)

var(--dt-color-chart-categorical-28)

var(--dt-color-chart-categorical-28-hover)

var(--dt-color-chart-categorical-28-selected)

var(--dt-color-chart-categorical-29)

var(--dt-color-chart-categorical-29-hover)

var(--dt-color-chart-categorical-29-selected)

var(--dt-color-chart-categorical-30)

var(--dt-color-chart-categorical-30-hover)

var(--dt-color-chart-categorical-30-selected)

Sequential

To represent data using progressive shades or tints of a single color, emphasizing their relative depth within a single data series.

When to Use:

  • Single-series charts where visual depth or intensity within one category is key.
  • Heatmaps or density visualizations for a single metric.
  • Situations requiring a strong visual connection to the Dialpad brand.

Sequential Range

Using sequential range tokens enable the ability to dynamically create varying number of color steps for a single data series with start and end tokens.

Preview
Token Name

var(--dt-color-chart-sequential-range-00-start)

var(--dt-color-chart-sequential-range-00-end)

var(--dt-color-chart-sequential-range-01-start)

var(--dt-color-chart-sequential-range-01-end)

var(--dt-color-chart-sequential-range-02-start)

var(--dt-color-chart-sequential-range-02-end)

var(--dt-color-chart-sequential-range-03-start)

var(--dt-color-chart-sequential-range-03-end)

var(--dt-color-chart-sequential-range-04-start)

var(--dt-color-chart-sequential-range-04-end)

var(--dt-color-chart-sequential-range-05-start)

var(--dt-color-chart-sequential-range-05-end)

var(--dt-color-chart-sequential-range-06-start)

var(--dt-color-chart-sequential-range-06-end)

var(--dt-color-chart-sequential-range-07-start)

var(--dt-color-chart-sequential-range-07-end)

var(--dt-color-chart-sequential-range-08-start)

var(--dt-color-chart-sequential-range-08-end)

var(--dt-color-chart-sequential-range-09-start)

var(--dt-color-chart-sequential-range-09-end)

var(--dt-color-chart-sequential-range-10-start)

var(--dt-color-chart-sequential-range-10-end)

Sequential Default

The default range are a fixed number of 10 available colors for a single data series. If you need to create fewer or more colors, use the sequential range tokens.

Preview
Token Name

var(--dt-color-chart-sequential-01)

var(--dt-color-chart-sequential-01-hover)

var(--dt-color-chart-sequential-01-selected)

var(--dt-color-chart-sequential-02)

var(--dt-color-chart-sequential-02-hover)

var(--dt-color-chart-sequential-02-selected)

var(--dt-color-chart-sequential-03)

var(--dt-color-chart-sequential-03-hover)

var(--dt-color-chart-sequential-03-selected)

var(--dt-color-chart-sequential-04)

var(--dt-color-chart-sequential-04-hover)

var(--dt-color-chart-sequential-04-selected)

var(--dt-color-chart-sequential-05)

var(--dt-color-chart-sequential-05-hover)

var(--dt-color-chart-sequential-05-selected)

var(--dt-color-chart-sequential-06)

var(--dt-color-chart-sequential-06-hover)

var(--dt-color-chart-sequential-06-selected)

var(--dt-color-chart-sequential-07)

var(--dt-color-chart-sequential-07-hover)

var(--dt-color-chart-sequential-07-selected)

var(--dt-color-chart-sequential-08)

var(--dt-color-chart-sequential-08-hover)

var(--dt-color-chart-sequential-08-selected)

var(--dt-color-chart-sequential-09)

var(--dt-color-chart-sequential-09-hover)

var(--dt-color-chart-sequential-09-selected)

var(--dt-color-chart-sequential-10)

var(--dt-color-chart-sequential-10-hover)

var(--dt-color-chart-sequential-10-selected)

Usage

Developers

Apply to chart elements (bars, lines, fills) via CSS Variables (e.g. var(--dp-color-chart-color-accent)) or corresponding CSS Utilities, e.g. d-bgc-chart-neutral, d-bc-chart-warning, etc.

Designers

  • Applying Colors: Apply color directly to chart elements (bars, lines, fills) via Figma Styles linked to tokens. Unlike other Dialtone colors, Chart Colors are not scoped to foreground, surface, border, etc.
  • Understanding Hover/Selected: Remember that hover and selected states for specific chart series (single color, semantic, categorical, and sequential) have predetermined contrasting colors, ensuring consistent interaction feedback.
  • Prototyping: Use these tokens in your Figma prototypes to demonstrate interactive states and theme switching.

Do and Don'ts

Use chart colors only for data

Do

Use chart colors for the data itself, not for other purposes.

Don’t

Do not use chart colors for non-data purposes, e.g. supporting text labels, grid lines, etc. Use Dialtone's semantic colors for those purposes, e.g. "foreground primary", "border subtle", "background secondary", etc.

Apply Categorical colors in numeric order

Do

Use categorical and sequential colors in their predetermined order, e.g. 01, 02, 03, etc.

Don’t

Avoid using categorical and sequential colors out of order, e.g. 10, 03, 05, etc.

Limit chart colors

Do

Where possible, limit the number of colors in a single graph to no more than 6.

Don’t

Using more than 6 color may make the chart difficult to parse. Exhaust design possibilities before going beyond.

Use multiple colors only with purpose

Do

Use more than one color only when it serves the data's communication.

Don’t

Using more than one color without purpose may make the chart difficult to parse and could confuse the user on the data's communication.

Use space to separate data

Do

Use space to separate data and make it easier to understand to the user.

Don’t

Avoid mixing the tokens next to each other as much as possible, so keep a space to separate data and more digestible for the user.

Accessibility Guidelines

Ensuring accessible data visualizations is a core tenet of Dialtone. When using these tokens:

  • Contrast Ratios: All token color combinations are designed to meet WCAG AA contrast standards (minimum 3:1 for graphics/UI components).
  • Color-Blindness Compatibility: Palettes have been vetted for common forms of color blindness (e.g., using tools like Viz Palette).
  • Redundancy is Key: Never rely solely on color to convey critical information. Always provide supplementary visual cues such as:
    • Labels/Text: Directly annotating data points with values.
    • Icons/Patterns: Using distinct icons or patterns for categories.
    • Shapes/Stroke Styles: Varying shapes, line styles (dashed, dotted), or stroke widths.
  • Theming Impact: Token values are specifically defined for both light and dark modes to ensure optimal contrast and readability in any theme.

Known Issues & Troubleshooting

While this system aims for robustness, be aware of potential challenges during implementation and adoption:

  • Charting Library Overrides: Some charting libraries might aggressively override inline styles or custom properties, requiring careful mapping or deeper customization.
  • Complex Color Logic: For very custom data-driven color calculations beyond simple references (e.g., dynamic gradients based on data range), you might still need to implement logic in code that consumes these Chart Color design tokens.
  • Transitioning Existing Charts: Migrating older charts not using design tokens will require dedicated refactoring effort.

Chart Colors documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope