BACKPRODUCT DESIGN 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

Scaling Data Visualization Across the Design System

Design SystemsData VisualizationAccessibilityEnterprise Scale

Created a shared data visualization standard that helped product teams choose, design, and implement accessible charts consistently across the JLL ecosystem.

Role

Product Design Lead

Product Name

JLL Solstice Design System

Collaborated with

Design System, Product Design, and Engineering teams

Timeline

November 2021 to August 2022

Deliverables

Data visualization strategy, color standards, chart patterns, anatomy specifications, accessibility guidance, and documentation

Problem Statement

  • Product teams were designing charts independently, creating inconsistent color usage, interaction patterns, and accessibility across the product ecosystem.
  • Designers and engineers lacked shared guidance for choosing the right chart, handling complex data states, and translating design decisions into implementation.

Context

  • The goal was to move beyond a chart library and establish a practical decision framework that teams could apply across different products and operational use cases.
  • The system needed to support light and dark themes, complex enterprise data, accessibility requirements, and future chart types without introducing one-off solutions.

Responsibilities & Contributions

  • Defined the visualization framework: Organized chart selection around user intent, including change over time, ranking, comparison, and composition.
  • Established color standards: Created categorical, sequential, divergent, RAG, and highlight systems with guidance for meaning, hierarchy, contrast, and accessibility.
  • Standardized chart anatomy: Defined reusable rules for typography, axes, legends, labels, tooltips, spacing, and responsive behavior across rectangular and circular charts.
  • Turned guidance into an interactive resource: Built an explorable standard that helped designers and engineers move from chart selection to implementation without interpreting static documentation.
  • Created a scalable adoption model: Structured the standards so teams could extend the system while preserving shared principles and visual consistency.

Impact

31 product teams

Adopted the shared data visualization standard across the JLL ecosystem.

11 chart patterns

Standardized common visualization use cases across change, ranking, comparison, and composition.

5 color systems

Defined consistent semantic and analytical color usage for light and dark themes.

2 anatomy frameworks

Established shared specifications for rectangular and circular charts.

Key Insights

  • A data visualization system needs to standardize decisions, not just appearance. Teams gained more value from knowing when and why to use a pattern than from receiving finished chart templates.
  • Accessibility worked best as a system constraint. Building contrast, redundancy, and theme behavior into the standards made inclusive outcomes easier to repeat.

Critical Constraints

  • Enterprise datasets included dense series, missing values, long labels, and operational thresholds that simple chart examples did not represent.
  • The standards needed enough specificity to create consistency while allowing product teams to adapt patterns to different data and workflow contexts.
View Full Case Study
Previous
Next