About the Style Guide

These are the branding guidelines for OpenTechSchool, written to ensure a strong and consistent visual appearance in our chapters around the world. We aim to extend and improve the style guide over time, making it a useful tool and resource center for all OTS members working on our websites, print products, presentations, etc.
Your suggestions are very welcome – let us know what else you need and what we should cover here.

Name and logo

OpenTechSchool is spelled as one word, in CamelCase. If used in connection with workshop titles, events, etc., just add OpenTechSchool, without anything like proudly presents or presented by.

The logo comes in two versions: in one line or in two. Ideally the logo is used in OTS blue, or in black for b/w printing. Another option is to invert the colors. Please always allow some whitespace around the logo to make it stand out from other elements.

Colors

  • #085987 #085987 OTS blue: Use for logo
  • #1F8AB6 #1F8AB6 OTS blue link: Use for links
  • #2FB0D5 #2FB0D5 OTS blue hover: Use for blue hover states
  • #222222 #222222 OTS text: Use for default text color
  • #E04C3E #E04C3E OTS red: Use for highlighted links, buttons, other highlights
  • #FD4B22 #FD4B22 OTS red hover: Use for red hover states

Typography

We are currently busy improving and updating our fontstack, using only open fonts. Stay tuned, or join the discussion! Proposed fonts:

The logo is set in HvD Pluto.

Links and buttons

This is a hyperlink lorem ipsum dolor.

Click me Click me

Page layout

All websites under the OTS umbrella should use the same basic layout, which consists of: A blue header and footer, and a white main content area.

The up-to-date templates can be found here: OTS on Github

More templates for workshop pages and other elements will be provided soon. Please let us know what you need!

Downloads

  • OpenTechSchool Logo compact .eps
  • OpenTechSchool Logo long .eps
  • Keynote Template .key
  • Avatar (Twitter etc.) .png
Report a problem