Vision

We want freeCodeCamp.org 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.

PNG | JPEG | SVG

Glyph

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

PNG | JPEG | SVG

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

PNG | JPEG | SVG

Alternative Glyph

PNG | JPEG | SVG

Typography

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


We use Roboto Mono as a primary monospace font.

Download Roboto Mono

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

We use Menlo for our browser-based code editor.

Download Menlo

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 preseving their contrast and visual hierarchy.

Color pairs

gray 00

#ffffff

gray 90

#0a0a23

gray 05

#f5f6f7

gray 85

#1b1b32

gray 10

#dfdfe2

gray 80

#2a2a40

gray 15

#d0d0d5

gray 75

#3b3b4f

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

Purple

#dbb8ff

Yellow

#f1be32

Blue

#99c9ff

Light Green

#acd157

Secondary Colors

Dark Purple

#5a01a7

Dark Yellow

#4d3800

Dark Blue

#002ead

Dark Green

#00471b

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 seperately
Do not enclose in shapes
Do not add elements to logo

Questions

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