2.2 Visual style
This section discusses the choices made for the visual style of the diagrams and website, namely the typography in § 2.2.1 and the colour palette in § 2.2.2.
2.2.1 Typography
One challenge to overcome is that many conventional choices for sans typefaces seem dull when used in a diagram, as they are usually optimised for body text. For this reason, the diagrams in this work use Space Grotesk, a wonderfully funky open-source typeface that continually surprises when read. It becomes a bit overbearing when used in body text, but it works remarkably well for short spurts of text, such as names in diagrams.
Thus, the body text uses a more grounded, serif typeface, Source Serif Pro. It pairs well (see fig. 1), is readable (even on screen), provides ample contrast, and includes beautiful italics.
Lastly, for code snippets and URLs, Space Mono and Source Code Pro – two monospace counterparts to the typefaces mentioned above – were considered but proved too wide for use in regular body text, especially for URLs. Instead, this work uses Iosevka, a generated and parametrisable typeface, due to its very narrow structure. Specifically, it uses its 9th stylistic set, designed to mimic Source Code Pro idiosyncrasies, which works well with Source Serif Pro.
2.2.2 Colour palette
The colour palette stems from the practical needs of the diagrams. It is built upon a simple contrasting black and white base and adds two tones for increasing and decreasing the level of focus – an orange–yellow hue for highlights adds an inviting warmth to the diagrams, and a light, unobtrusive grey for background objects finishes the visual hierarchy.
The palette also includes a light red for conveying failures or errors, and finally, a dark, cold green adds a sense of comprehensiveness to the palette and is useful as a secondary colour for foreground elements.
The palette roughly follows the popular 60–30–10 rule [28], providing a balanced and airy feel (see fig. 2). It offers a dark mode with slight modifications, such as decreased contrast for body text.
All colour combinations used for text have at least a 7:1 contrast ratio, achieving an enhanced WCAG rating (AAA) [29]. The palette performs well for different types of colour blindness, except for blue-yellow colour blindness, which is compensated for by consistent shape–colour pairings and supporting text (see § 2.4).