Design Principles

Visual Identity and Colour Scheme

Authors

Affiliation

Cristina Münch

University of Basel

Nico Görlich

University of Basel

Moritz Mähr

University of Basel

Moritz Twente

University of Basel

Published

April 17, 2023

Modified

October 7, 2025

About This Document

The content of this page is a translated assemblage of selected content on Stadt.Geschichte.Basel’s RDM corporate identity, colour palettes and overall design philosophy. Only the colour palette for print products – since it is used in sgb-figures – is covered here. Refer to the RDM Documentation for full coverage of Stadt.Geschichte.Basel’s design and corporate identity guidelines (in German).

Colour Concept

For the visual identity of print products such as the figures in this repository, consideration had to be given to the design and printing specifications of the publisher and book designers (even more so than in the context of online products). As an integral part of these considerations, a color concept was developed for this purpose with the following requirements in mind.

Colours must be usable online and in print for graphics and maps. They must therefore exist in both the RGB and CMYK color spaces.
They should also be distinguishable in illustrations (e.g., in scales) for people with visual impairments and must therefore meet minimum contrast requirements in combinations (inclusive design).
Furthermore, no copyright-protected special colors (Pantone or similar) may be used. Due to the different requirements for print and web content, two different color palettes have to be defined.
In addition, a visual unity should be recognizable – on the one hand in relation to the distinctive color of the respective band, and on the other hand across bands. Color semantics also plays an important role in this regard. For example, bodies of water are represented in blue, with the respective shade of blue varying depending on whether areas (seas) or lines (rivers) are represented. Traditional colors are also used for religious communities (e.g., shades of green for Islam). On the other hand, color combinations that reproduce gender-specific clichés (e.g., blue/red combinations for male/female dichotomies) were avoided.

Apart from requirements strictly regarding colours, technical constraints were also part of the development process because of their influence on the overall appearance on the visualizations:

The dimensions of all illustrations are based on the layout concept and the space available, as arranged by the book designers. This limits the use of specific colours.
The content and historical arguments to be conveyed are defined by the authors and depend heavily on the basic data provided. The space available in the book defines the technically possible or necessary resolution of the data depicted.

From an accessibility perspective, the WCAG standards are central to the design of online products. In addition, the design principles of Will Soward’s Neurodiversity Design System were taken into account, but were given lower priority than other requirements in cases of doubt.

Colour Palette (Print)

For the ten volumes of Stadt.Geschichte.Basel, the research data management team edited and created over 100 graphics, mainly maps and the figures in this repository. In terms of color design, in addition to the requirements already mentioned, there was also the challenge of finding a consistent design language that would be recognizable across all volumes. However, this proved to be a difficult undertaking due to the large number of image types (maps, bar charts, network visualizations, etc.), discipline-specific conventions for the use of scientific visualizations, and technical differences in the accuracy and completeness of basic data (cf. Twente and Mähr 2025).

The original approach of selecting a color palette from existing examples of good practice for accessible color design could therefore not be implemented directly. Furthermore, after processing the first data sets, it quickly became apparent that they varied greatly from each other in terms of structure to use a universally applicable basis (e.g., requirements for visualizing discrete data versus continuous data).

A color palette was selected as the basis for the design of the scientific illustrations for the print products of Stadt.Geschichte.Basel – in two variants, with 23 and 14 colors respectively, plus a gray value. Paul Tol’s Discrete Rainbow Color Scheme 19 is “reasonably clear” for color-blind people (Tol 2022), provided that the color values are not interpolated. For graphic design in R, the palette is also available in the khroma package (Frerebeau 2025).

The starting point for the design of a color palette for digital applications is violet, which serves as the background color for the book covers of all volumes of Stadt.Geschichte.Basel.

Discrete Rainbow Colour Scheme 19 (with 23+1 Colours)

Table 1: Print colour palette with 23 colours and gray (adapted from Tol 2022)

Colour	No.	CMYK	HEX	RGB
Off White	1	8 6 0 2	#e8ecfb	232 236 251
Violet	2	4 10 0 11	#d9cce3	217 204 227
	4	0 15 0 20	#caaccb	202 172 203
	5	0 24 3 27	#ba8db4	186 141 180
	7	0 35 7 33	#aa6f9e	170 111 158
	8	0 48 11 40	#994f88	153 79 136
	9	0 66 16 47	#882e72	136 46 114
Blue	10	86 43 0 31	#1965b0	25 101 176
	11	65 35 0 25	#437dbf	67 125 191
	13	53 28 0 19	#6195cf	97 149 207
	14	45 21 0 13	#7bafde	123 175 222
Green	15	56 0 43 30	#4eb265	78 178 101
	16	28 0 33 21	#90c987	144 201 135
	17	10 0 24 12	#cae0ab	202 224 171
Yellow	18	0 3 65 3	#f7f056	247 240 86
Orange	19	0 18 72 3	#f7cb45	247 203 69
	21	0 32 78 4	#f4a736	244 167 54
	23	0 46 84 7	#ee8026	238 128 38
Red	25	0 63 90 10	#e65518	230 85 24
	26	0 98 95 14	#dc050c	220 5 12
	27	0 86 92 35	#a5170e	165 23 14
	28	0 78 88 55	#72190e	114 25 14
	29	0 68 85 74	#42150a	66 21 10
Gray	30	0 0 0 53	#777777	119 119 119

Copy-Paste Colour Configuration (CSV Including 23+1 Colours)

ID,CMYK,HEX,RGB
1,"8 6 0 2",#e8ecfb,"232 236 251"
2,"4 10 0 11",#d9cce3,"217 204 227"
4,"0 15 0 20",#caaccb,"202 172 203"
5,"0 24 3 27",#ba8db4,"186 141 180"
7,"0 35 7 33",#aa6f9e,"170 111 158"
8,"0 48 11 40",#994f88,"153 79 136"
9,"0 66 16 47",#882e72,"136 46 114"
10,"86 43 0 31",#1965b0,"25 101 176"
11,"65 35 0 25",#437dbf,"67 125 191"
13,"53 28 0 19",#6195cf,"97 149 207"
14,"45 21 0 13",#7bafde,"123 175 222"
15,"56 0 43 30",#4eb265,"78 178 101"
16,"28 0 33 21",#90c987,"144 201 135"
17,"10 0 24 12",#cae0ab,"202 224 171"
18,"0 3 65 3",#f7f056,"247 240 86"
19,"0 18 72 3",#f7cb45,"247 203 69"
21,"0 32 78 4",#f4a736,"244 167 54"
23,"0 46 84 7",#ee8026,"238 128 38"
25,"0 63 90 10",#e65518,"230 85 24"
26,"0 98 95 14",#dc050c,"220 5 12"
27,"0 86 92 35",#a5170e,"165 23 14"
28,"0 78 88 55",#72190e,"114 25 14"
29,"0 68 85 74",#42150a,"66 21 10"
30,"0 0 0 53",#777777,"119 119 119"

Discrete Rainbow Colour Scheme 19 (with 14+1 Colours)

Table 2: Print colour palette with 14 colours und gray (adapted from Tol 2022)

Colour	No.	CMYK	HEX	RGB
Violet	3	3 13 0 16	#d1bbd7	209 198 215
	6	0 32 6 32	#ae76a3	174 118 163
	9	0 66 16 47	#882e72	136 46 114
Blue	10	86 43 0 31	#1965b0	25 101 176
	12	59 31 0 22	#5289c7	82 137 199
	14	45 21 0 13	#7bafde	123 175 222
Green	15	56 0 43 30	#4eb265	78 178 101
	16	28 0 33 21	#90c987	144 201 135
	17	10 0 24 12	#cae0ab	202 224 171
Yellow	18	0 3 65 3	#f7f056	247 240 86
Orange	20	0 22 74 4	#f6c141	246 193 65
	22	0 39 81 5	#f1932d	241 147 45
Red	24	0 59 88 9	#e8601c	232 96 28
	26	0 98 95 14	#dc050c	220 5 12
Gray	30	0 0 0 53	#777777	119 119 119

Copy-Paste Colour Configuration (CSV Including 14+1 Colours)

ID,CMYK,HEX,RGB
3,"3 13 0 16",#d1bbd7,"209 198 215"
6,"0 32 6 32",#ae76a3,"174 118 163"
9,"0 66 16 47",#882e72,"136 46 114"
10,"86 43 0 31",#1965b0,"25 101 176"
12,"59 31 0 22",#5289c7,"82 137 199"
14,"45 21 0 13",#7bafde,"123 175 222"
15,"56 0 43 30",#4eb265,"78 178 101"
16,"28 0 33 21",#90c987,"144 201 135"
17,"10 0 24 12",#cae0ab,"202 224 171"
18,"0 3 65 3",#f7f056,"247 240 86"
20,"0 22 74 4",#f6c141,"246 193 65"
22,"0 39 81 5",#f1932d,"241 147 45"
24,"0 59 88 9",#e8601c,"232 96 28"
26,"0 98 95 14",#dc050c,"220 5 12"
30,"0 0 0 53",#777777,"119 119 119"

Usage

This color scheme is suitable for use in print products in both variants and meets the requirements for a color palette that is recognizable to colorblind people. For illustrations in which certain color tones are undesirable, e.g., due to aesthetic requirements or content associations, individual color values can be omitted. In these cases, Tol (2022) recommends using specific subsets (Figure 1) of the color palette. In this way, a printable color palette with up to 23 color values suitable for color blind people can be generated.

Figure 1: Variants of the color palette depending on the number of color levels required (adapted from Tol 2022)

References

Frerebeau, Nicolas. 2025. “Paul Tol’s Colour Schemes.” Khroma. https://packages.tesselle.org/khroma/articles/tol.html.

Tol, Paul. 2022. “Sequential Colour Schemes.” SRON. https://sronpersonalpages.nl/~pault/#sec:sequential.

Twente, Moritz, and Moritz Mähr. 2025. “Navigating Disconcertment in Map-Making: How to Turn Conflict and Collaboration into Accessible Geodata.” Digital Humanities 2025, Universidade NOVA de Lisboa. https://doi.org/10.5281/zenodo.16042822.