BACKSELECTED WORKS
JLL Solstice data visualization standards
JLL Solstice data visualization standards

JLL Solstice design system

Data Visualization

Categorical colors

Data visualization / Color

Usage

Categorical colors, also known as qualitative colors, are best used when you want to represent distinct groups or categories of data that have no inherent order or ranking.

  • Distinguishing categories: Use categorical colors to help viewers easily differentiate between different categories or groups in your data. For example, different product lines, regions, or customer segments.
  • Nominal data: Categorical colors are ideal for visualizing nominal data, where the data points are names or labels used to divide something into discrete categories.
  • Charts with multiple series: When creating charts like bar charts, pie charts, or line charts with multiple series, use categorical colors to assign a unique color to each series.

Branded v2

1#A491833:1
2#2360757:1
3#588FA13.6:1
4#7749777:1
5#6DA16D3:1
6#62574F7:1
7#B2777A3.6:1
8#3B623B7:1
9#A677A63.6:1
10#8B979B3:1

Extended v1

Orange

11#F06F253:1

Magenta

12#A707807:1

Crimson

13#ED98AE2.15:1

Watercourse

14#08A9813:1

Lilac

15#7A27CC7:1

Atoll

16#0AC4C42.15:1

Violet

17#CB6FEA3:1

Royal

18#274EC77:1

Amber

19#E3A6002.15:1

Science

20#4F99E43:1

No data

400#D4D4D41.48:1

Data visualization

Color

Key decisions

Standardize chart decisions as well as chart appearance

Choose a chart from the user's question

Teams needed more than finished chart templates. I organized selection around change over time, ranking, comparison, and composition, connecting analytical intent to a reusable visualization pattern.

Make accessibility part of the specification

Color meaning, contrast, redundant cues, and light and dark behavior were built into shared guidance. Anatomy rules covered axes, labels, legends, tooltips, and responsive behavior so teams could implement the same principles consistently.

Representative interaction

The interactive guide connects chart selection to implementation guidance.

  1. 01

    Frame the question

    Determine whether the user needs to compare values, see a trend, rank items, or understand composition.

  2. 02

    Choose the pattern

    Select a chart and color system that communicate that relationship.

  3. 03

    Apply the guidance

    Use shared anatomy and accessibility specifications, accounting for dense series, missing values, and long labels.

31 product teams describes adoption of the standard. The 11 chart patterns, five color systems, and two anatomy frameworks describe its coverage, not measured user-performance improvements.