About the Styleguide
These are some very basic style and branding guidelines to help give OpenTechSchool a strong and consistent visual appearance. 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 product, 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
Fonts
The logo is set in HvD Pluto, and we use HvD Pluto Sans for body copy in printed materials.
Links and buttons
This is a hyperlink lorem ipsum dolor.
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!
