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)