We want to look and feel like the command line interfaces and code editors that professional developers use for work.

We couple this "command line chic" aesthetic with large fonts, high-contrast layouts, and explicit buttons and links.

Here are some examples:

Primary Logo

The preferred version of the freeCodeCamp logo and should appear on the majority of branded materials.



Used when production restrictions do not allow the use of the full logo.


Logo Colors

The freeCodeCamp logo is designed for use primarily on dark backgrounds. For instances in which the full color logo is not practical, the following color combinations are approved alternatives.

Alternative Logo


Alternative Glyph



freeCodeCamp uses the following types with various font weights in large sizes (minimum 18px) to ensure readability and typographical hierarchy:

We use Hack-ZeroSlash as a primary monospace font.

Download Hack-ZeroSlash

We use Lato as a primary proportional font in longer sections of text.

Download Lato

We use SaxMono as the font in our logo.

Download SaxMono

Layout Colors

To achieve a flexible dark and light theme, freeCodeCamp's layouts consist of four color pairs with various contrast levels.

The contrast difference between two colors in a pair represent their visual hierarchy.

For instance, the pair with the highest contrast difference is reserved for primary background and content.

This system allows flawless theme changes by switching the colors in each pair and preserving their contrast and visual hierarchy.

Color pairs

gray 00


gray 90


gray 05


gray 85


gray 10


gray 80


gray 15


gray 75


Accent Colors

freeCodeCamp accent colors consist of two sets of four colors. The primary colors are used on a dark background and the secondary colors are used on a light background.

Primary Colors







Light Green


Secondary Colors

Dark Purple


Dark Yellow


Dark Blue


Dark Green


Spacing Considerations

To maintain the integrity of the freeCodeCamp logo, it is important that you provide adequate space around the logo.

To ensure enough spacing, give 50px or greater padding to each side.

Logo Misuse

The consistent application of color plays an extremely important role in the freeCodeCamp identity system.

The examples below illustrate a few inappropriate applications of the logo.

Do not rotate or distort logo
Do not reassign colors
Do not rearrange logo elements
Do not scale elements separately
Do not enclose in shapes
Do not add elements to logo


Feel free to reach out to us at with any questions about this freeCodeCamp style guide.