8/9/23, 9:42 PM freeCodeCamp - Style Guide

https://design-style-guide.freecodecamp.org 1/6
8/9/23, 9:42 PM freeCodeCamp - Style Guide

Vision
Vision
Logo
We want freeCodeCamp.org to look and feel like the command line interfaces and
Logo Colors code editors that professional developers use for work.
Typography
We couple this "command line chic" aesthetic with large fonts, high-contrast
Layout Colors layouts, and explicit buttons and links.
Accent Colors
Here are some examples:
Spacing
Logo Misuse

https://design-style-guide.freecodecamp.org 2/6
8/9/23, 9:42 PM freeCodeCamp - Style Guide

Logo
Our logo appears in two variations.

Primary Logo Glyph

The preferred version of the freeCodeCamp logo and Used when production
should appear on the majority of branded materials. restrictions do not allow
the use of the full logo.
PNG | JPEG | SVG
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.

https://design-style-guide.freecodecamp.org 3/6
8/9/23, 9:42 PM freeCodeCamp - Style Guide

Alternative Logo Alternative Glyph

PNG | JPEG | SVG 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

https://design-style-guide.freecodecamp.org 4/6
8/9/23, 9:42 PM freeCodeCamp - Style Guide

gray 00 gray 05 gray 10 gray 15

#ffffff #f5f6f7 #dfdfe2 #d0d0d5

gray 90 gray 85 gray 80 gray 75

#0a0a23 #1b1b32 #2a2a40 #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 Yellow Blue Light Green

#dbb8ff #f1be32 #99c9ff #acd157

Secondary Colors

Dark Purple Dark Yellow Dark Blue Dark Green

#5a01a7 #4d3800 #002ead #00471b

https://design-style-guide.freecodecamp.org 5/6
8/9/23, 9:42 PM freeCodeCamp - Style Guide

Spacing Considerations
To maintain the integrity of the freeCodeCamp logo, it To ensure enough spacing,
is important that you provide adequate space around give 50px or greater
the logo. 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 Do not reassign colors Do not rearrange logo

distort logo elements

Do not scale elements Do not enclose in Do not add elements to

seperately shapes logo

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

https://design-style-guide.freecodecamp.org 6/6