Always favour readability

Our first and foremost responsibility is to the reader. Ease of reading is more important than any other factor.

Use a light background, with dark text

The default page background color should be a pale, almost white shade (#FCFBF9). An alternative, darker background color (#F7F3EE) may be used for user interface panels, or when otherwise appropriate.

The default text color should be a dark grey (#605A52). Any other colors should be considered additive, on top of this basic color palette.

Use purple for syntax elements

The main syntax elements, such as if, else, function, const, and for, should be colored purple (#83577D).

Example:

if hungry:
    for food in snacks:
        eat(food)
else:
    dance()
    sleep()

Use blue for variables

Where possible, variables should be colored blue (#556995). This should also apply to function parameters.

Example:

const name = getName()

Use italics for computation

Names of computational units, such as classes, methods, and functions, should be styled with italics, rather than a particular color.

In rare cases, italics can be combined with a color.

Example:

class Person {
  constructor(name) {
    const upperCase = name.toUpperCase()
    ...
  }
}
const person = new Person(“Alice”)

Use teal for numbers and language constants

Number literals, and language constants such as true, false, and null should be highlighted in Teal (#477A7B)

Example:

server.start({
  port: 8091,
  secureMode: true
})

Use green for string literals

String literals (enclosed in single or double quotes) should be highlighted in Green (#747B4D).

Example:

print(“Hello World”)

Use orange for special (or dangerous) syntax elements

Orange (#886A44) should be used sparingly, to highlight unusual syntax elements, such as pre-processor directives, or language constructs the programmer should be on the lookout for.

Example:

#include “environment.h”
if (!awake) {
  stayAsleep()
}

Use red to highlight errors

Red (#8F5652) should (almost) never be used to highlight regular code. Instead, it should only be used to highlight errors, or catastrophically dangerous language constructs.

Use grey for comments

Comments should be highlighted in Grey (#9E9A95)

Example:

# this is a comment
doSomething()

Use teal, orange, and red sparingly

On any given page of code, the most common colors should be:

• Background (#FCFBF9)
• Foreground (#605A52)
• Purple (#83577D)
• Blue (#556995)

… in that order. Teal (#477A7B) and Orange (#886A44) should be less common, and Red (#8F5652) should not be present.

When possible, define rules for particular programming languages

Text editors vary in their ability to highlight text, and programming language “modes” vary in the way they highlight code in a given language. As such, we cannot expect perfect consistency across different editors and languages.

The golden rule is this: Make code written in a given language, in a given editor look good. Where possible, define extra rules for particular programming languages.

Where necessary, bend the rules of this design document to fit the particular editor and language combination.