CLP graphics guide

Guidelines for creating clear and consistent images, with an emphasis on accessibile colour choices.

Note: this document is a work in progress.
(Expect it to change.)

Guiding principles

  1. Make images that are so simple, you could draw them on a blackboard
  2. Start with black and white
  3. Vary your line thickness, so that you don’t need colour to tell which parts are most important
  4. Whenever you can, put text in captions, not in images
  5. Focus on one idea per image

Colour

Main colours

For lines: use black, pink, then blue.

For filled areas: use blue at 75% opacity, blue at 50% opacity, or grey.

 #000000  #DDDDDD
 #FF88CC  #FFC3E5 (≈ 50%)
 #0088CC  #BFD8EF (≈ 50%)

Additional colours

If the main colours are insufficient, use orange (  #EE7733) and, if necessary, green (  #009988).

Note: using these colours will diminish the clarity and accessibility of your image.

Colours for multiple filled shapes

When there are several adjacent areas to colour (like on a map), use colours from either of these gradients:

 #6B1242  #12426B
 #B3427E  #427EB3
 #DF7FB2  #7FB2DF
 #F5BCDB  #BCDBF5
 #FDECF5  #ECF5FD

(These gradients were created with gradstop.js; see “How to avoid equidistant HSV colors” by Gregor Aisch for relevant colour theory.)

Function plots

  • Use black for the first plot
  • Use pink for the second
  • Use blue for the third

Highlighted sections of plots

  • Use 3 pt pink for the highlighted part
  • Use 2 pt black for the rest

Tangents

  • Use 0.75 pt pink for tangents
  • If you are showing a the process of approximation, use light pink for additional tangents

Note: all function and tangent lines should continue right to the edge of the graph.

Shading

  • Use grey for primary shading
  • Use blue at 50% opacity for additional shading

Structure

Line weights

Function plots 2 pt
Highlighted sections of plots 3 pt
Shapes 0.75 pt
Tangents 0.5 pt
Angle arcs & right-angle squares 0.5 pt
Brackets and arrows 0.25 pt

Axes

  • Use a 0.5pt black line for the axes
  • Place axis labels in-line with the axis (not beside them)

Tick marks

To do.

Guide lines

  • Use a 0.5pt black dotted line (2 pt spacing)
  • Note: guides indicating unbounded lines should continue to the edge of the graph.

Annotations

  • Use 10pt TeX Gyre Pagella for equations
  • Use lower case, except for proper nouns
  • Note: give the equation for the primary function in the figure caption—don't include it in the image.

Indicating points

  • Use a 4pt circle to indicate a point
  • Use black for points on black lines or not on lines
  • For points on coloured lines, match the colour of the line
  • To exclude a point from a line, use a white circle with a 1pt stroke
  • For a point on a highlighted (3 pt) plot, use a 5 pt circle
  • Note: aim to indicate only points that require captions and points that must be excluded from the plotted function.

Call-out arrows

  • Use a small and simple arrowhead
  • Use sharp corners
  • Leave a gap between the tip of the arrow and the target point
  • Align the butt of the arrow with the middle of the annotation
  • Note: use arrows only when it is not possible to place an annotation near enough to a point.

Measurement arrows

Use lines with arrows to show curved measurements, and other measurements for which brackets are not appropriate

Measurement brackets

  • Use a straight line with two 3 pt long arms connected to it at right angles
  • Leave a small gap between the arms of adjacent brackets

Illustrations

Pictorial illustrations

  • use simple silhouettes
Note: the Noun Project can be a good source for Creative Commons licensed illustrations.

To do

See Also

Basics

These are both great introductions to the topic of colour accessibility for technical documents:

These are also good:

Contrast

Gradients

Other colour palettes

Tools