Style Guide

  • Colors
    Primary Color
    #1a83c3
    Secondary Color
    #e45c54
    Secondary Color
    #1ea372
    Silo Color
    Study
    #4A7B91
    Silo Color
    Volunteer
    #70B293
    Silo Color
    Teach
    #B7D99C
    Silo Color
    TEFL
    #B7D99C
    Silo Color
    Intern
    #EDD075
    Silo Color
    Gap Year
    #EB9E6C
    Silo Color
    High School
    #AF5454
    Silo 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:

    Helpful Photo Apps and Tips for Your Study Abroad Trip

    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://versautetransen.info/node/12345"
    
  • Our Logo