Style Guide

  • Colors
    Primary Color
    Secondary Color
    Secondary Color
    Silo Color
    Silo Color
    Silo Color
    Silo Color
    Silo Color
    Silo Color
    Gap Year
    Silo Color
    High School
    Silo Color
    Language School
  • 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:

    Helpful Photo Apps and Tips for Your Study Abroad Trip

    Main Subject


    Proxima Nova bold

    Sofia Pro

  • HTML Guidelines
    <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)
    <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)
    <blockquote><p>TEXT</p></blockquote> | (creates a blockquote)
    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.
    class="standalone-image" | (use for full-width images)
    class="image-left" | (sets image to the left)
    class="image-right" | (sets image to the right)
    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)
    For external links:
    <a href="">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="" 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 ""
  • Our Logo