Data Visualization Style Guide

This guide covers typography, layout, and color palettes to ensure consistency across all GEM charts, maps, and graphics — whether produced in Flourish, R, or other tools.

Below you can see an updated GEM-style chart, with annotations outlining the key characteristics of the main components that make up a plot. The specifications here are for the HTML styles developed for Flourish, where they stay consistent across different screen sizes.

Typography

Fonts

• Plus Jakarta Sans — used for chart header and footer text (titles, subtitles, source lines, notes).
• Barlow Semi Condensed — used for all chart body text (axis labels, axis titles, legend text, data labels, annotations, small multiples headers).

Text color

All text elements use a single color now: #3A4A50 (dark teal-grey). When using colored text in charts, ensure enough contrast — follow WCAG guidelines and use the Colour Contrast Checker.

Text sizes and hierarchy

We maintain consistent ratios between text elements regardless of platform. The table below shows each element's ratio (relative to axis text as the base) and an example at a 16px base size.

The line heights above apply to Flourish. R uses slightly different values because static images scale differently than dynamic HTML — see the appendix below for platform-specific details. The appendix also includes full Flourish and R specs.

Color

A complete color guide lives in the GEM Color Guide Observable notebook. Below is a summary of the key palettes for quick reference.

Brand colors

Core categorical palette

Five color-blind friendly colors for categorical visualizations:

An extended core is available if needed, which adds four more colors:

Full Color Guide

The color guide covers many topics, including:

• Pop color guidance
• Positive / negative / neutral colors
• Sequential scales for various asset types
• Diverging scales

Map style

This section covers static maps produced for reports, briefings, social media, and other GEM content, as well as basic interactive maps built in tools like Flourish. The basemap colors below are aligned with the 2026 tracker basemap so static maps and the live tracker maps read as one family.

Maps should follow the template above for 'what makes a GEM plot' and use the same fonts, font sizes and text hierarchy, colors, and spacing as the chart style.

Basemap colors

Elements such as border thickness/stroke however will depend on the platform or tool you are using to draw your map, the above value is a general guide - always make sure it looks right to you and adjust accordingly if needed.

Appendix

Flourish theme settings

Flourish element specs

R specs

R line heights

Where R line heights differ from Flourish:

R layout details