Style Guide
-
Colors
Primary Color
#1a83c3Secondary Color
#e45c54Secondary Color
#1ea372Silo Color
Study
#4A7B91Silo Color
Volunteer
#70B293Silo Color
Teach
#B7D99CSilo Color
TEFL
#B7D99CSilo Color
Intern
#EDD075Silo Color
Gap Year
#EB9E6CSilo Color
High School
#AF5454Silo Color
Language School
#967995 -
Typography
For web:
Main Heading
Subpage title
Section Header
Sub section heading
Body content/copy
Adelle 48px
Adelle 30px
Adelle 26px
Proxima Nova 23px
Proxima Nova 16px
For article images:
Main Subject
Subheader
Proxima Nova bold
Sofia Pro
-
HTML Guidelines
BASICS <p> | (starts any paragraph) </p> | (ends any paragraph) <hr /> | (makes a line break -- no need to "end" this tag. It's a standalone.) <small> | (small text -- use for photo credits at the end of articles/guides or disclaimers on pages) </small> | (ends small text) <strong> | (bolds text. Do not use <b>.) </strong> | (ends bold text) <em> | (italic text. Do not use <i>.) </em> | (ends italic text) class="text-center" | (centering text) <br /> | (line break - don't use this unless you absolutely have to) HEADERS <h1></h1> | (only one per page; don't use) <h2></h2> | (don't really use this one either) <h3></h3> | (main header for all articles and interviews) <h4></h4> | (sub header for all articles) <h5></h5> | (small header; same size as text; good for list titles) <h6></h6> | (only really used for author credits on guides) BLOCKQUOTES <blockquote><p>TEXT</p></blockquote> | (creates a blockquote) IMAGES To enter an image, you'll upload and hit "insert". Make sure to add alt text (text that describes the photo in context to the page) that before hand. Then, you'll need to add a class to position it. Image HTML: <img src="/sites/default/files/025.jpg" width="350" height="263" alt="text" title="text" /> * whatever you enter into "title" will become the caption. Keep it short. Classes: class="standalone-image" | (use for full-width images) class="image-left" | (sets image to the left) class="image-right" | (sets image to the right) LISTS For a bullet list: <ul class="dots"> | (starts the list) <li>TEXT</li> | (bullet one) <li>TEXT</li> | (bullet two) </ul> | (ends the list) For a numbered list: <ol class="numbers"> | (starts the list) <li>TEXT</li> | (bullet one) <li>TEXT</li> | (bullet two) </ol> | (ends the list) LINKS For external links: <a href="http://www.url.com">anchor text</a> | (creates a hyperlink to another website) If the external link is a photo credit / link we're *required* to add a nofollow: <a href="http://www.url.com" rel="nofollow">anchor text</a> For links to Go Overseas pages: <a href="internal:node/12345">anchor text</a> | (creates a hyperlink to pages within our site) --> find the unique node ID by hovering over "edit" on a page (while logged in) and looking at the url. It'll be something like "http://www.gooverseas.com/node/12345"
-
Our Logo