Style Guide

Logo and Typeface


tjCSL uses the flat TJ icon logo.

Alternatively, the wordmark logo can also be used.

The logo can be used together with the unabbreviated "Computer Systems Lab", as shown, but should not be used with the wordmark logo.

When using on a white background, the logo or text should be #484848.

The logo can also be used on the blue #0048AB background.


The typeface is Open Sans.

Body Text

Avoid using light weights because they are less readable. For most applications, the regular weight should be enough.

Use adequate line spacing to improve readability.

Using Bold Weights

For eyecatching material, use the extra-bold weight. This weight should not be used in applications, but can be used in promotional materials such as pamphlets and posters to draw attention. Text in this weight should be:

  • short

  • to the point

  • eyecatching

Do: - overlay on images - keep the message short - use color to increase contrast

Don't: - use for body text - have illegible line spacing


The main CSL color is #0048AB.

Text should be #484848.

Naming Conventions


The computer systems lab should be referred to as "the tjCSL".


  • Add "the" when using "tjCSL" to refer to the location or organization (ex: "We visited the tjCSL").


  • Capitalize "The" (ex: "We visited The tjCSL").


  • Lowercase the "tj". This provides a hierarchy between the "TJHSST" entity and the "CSL" entity.

  • This also provides consistent with other TJ programs, such as "tjSTAR" and "tjTODAY"


  • Insert spaces "tj CSL"

Projects can be namespaced (for instance, on IRC):

tjcsl-ion, tjcsl-director

This is an instance in which "tjcsl" can be all lowercase. Generally, one should maintain the proper capitalization.


The student intranet is our flagship product.

Examples of how to use the name:

  • Ion

    • "We use Ion to sign up for eighth periods."

    • "Ion runs on servers in the machine room."

  • Projects associated with Ion

    • "IonTap"

    • "IonGlance"

Examples of misuse of the name:

  • Ion

    • "ION"

    • "Intranet"

  • Projects associated with Ion

    • "Ion Tap"

    • "IONGlance"

    • "ionGlance"

Note that there should be no spaces in the names of related projects (e.g. "IonTap" is correct, "Ion Tap" is not)

Last updated