CODEWITH
US
Branding Guidelines
When creating resources and communications for CodeWith, please adhere to these guidelines.
Fonts
CodeWith’s display typeface, to be used for titles, headings, and generally large text, is Boogaloo, which is available to view and download at Google fonts: Boogaloo
CodeWith’s body typeface, to be used for the main textual content of web pages and documents, is Roboto, which is available to view and download at Google fonts: Roboto
Colours
#1f5237
#00793c
#009545
#00b050
#a52a2a
#000000
#f8f8f8
CodeWith’s colour palette can also be found on Coolors: CodeWith's Colour Palette
Please ensure that text-background pairings have sufficient colour contrast for everyone to read. See information from the WCAG on colour contrast here and a useful contrast checking tool here.
Logo
Variations of CodeWith's logo are provided below in SVG and PNG format, along with guidelines for their usage.
Full CodeWith Logo
CodeWith Logo (SVG)
CodeWith Logo (PNG)
Full CodeWith Logo
Use in graphics with light backgrounds. Ensure that the logo is large enough for the tagline to be legible. If it is not, omit the tagline.
Full CodeWith Logo (White)
CodeWith Logo (White) (SVG)
CodeWith Logo (White) (PNG)
Full CodeWith Logo (White)
Use in graphics with dark backgrounds. Ensure that the logo is large enough for the tagline to be legible. If it is not, omit the tagline.
CodeWith Keyboard Icon
CodeWith Keyboard Icon (SVG)
CodeWith Keyboard Icon (PNG)
CodeWith Keyboard Icon
Use with light backgrounds. If accompanying with text, follow the font guidelines.
CodeWith Keyboard Icon (White)
CodeWith Keyboard Icon (White) (SVG)
CodeWith Keyboard Icon (White) (PNG)
CodeWith Keyboard Icon (White)
Use with dark backgrounds. If accompanying with text, follow the font guidelines.