Code Club Style Guide

Brand Guidelines

How to use the Logomark

Brand 1

General usage

  • Don't alter logo colours or text
  • Don't interrupt or overlay the circle mark with text or images
  • Always place the circle mark on a plain background, either $white or $dark
Brand 2

Size and spacing

  • Allow 10% whitespace around the circle mark
  • Minimum size for web: 60x60 pixels
Brand 3

Circle mark with appendix

  • Minimum circle size: 60x60 pixels
  • Text size at 60x60: 18px
  • Text should scale up with circle
  • Text colour should be the same green as the circle mark
Brand 4

Stacked appendix usage

  • Minimum circle size: 60x60 pixels
  • Text size at 60x60: 12px
  • Text should scale up with circle
Brand 5
  • Text flows to multiple lines if it exceeds the width of the circle by 25%
  • Relative leading: 1.2em

Using the Logo as a Favicon

Each Code Club website must use the green Code Club logomark as its favicon. Additionally, the Code Club logomark must also be used in cases where mobile devices require an icon for bookmarking purposes.

The assets package contains two images for these purposes. To use them, ensure that the following HTML is include in your documents' <head> element.

Example
<link rel="shortcut icon" href="/bower_components/code-club/dist/images/favicons/favicon.ico"><br>
<link rel="apple-touch-icon-precomposed" href="bower_components/code-club/dist/images/favicons/icon.png"><br>
<meta name="msapplication-TileColor" content="#F5F6F9"><br>
<meta name="msapplication-TileImage" content="/bower_components/code-club/dist/images/favicons/icon.png"><br>
<link rel="icon" href="/bower_components/code-club/dist/images/favicons/icon.png" sizes="32x32">