Branding

Global elements making up the WanderLove brand

Logo

The logo comes in three variations with colors for dark and light backgrounds.

To download, right-click and select 'Save image as...'

Full logo

Travel with Heart

Established

Colors

Text

Accents & buttons

Links

Typography

Georgia is used as the font throughout the site.

Headings

Heading 1

Heading 1, Georgia, 62px

Heading 2

Heading 2, Georgia, 50px

Heading 3

Heading 3, Georgia, 40px

Heading 4

Heading 4, Georgia, 32px

Heading 5

Heading 5, Georgia, 26px

Heading 6

Heading 6, Georgia, 22px

Body text

WanderLove was founded upon the desire and conviction to give extravagant love by serving selflessly, even on vacation. We are committed to transform the way people spend their time on vacation by inspiring travelers to be adventurous AND compassionate.

We seek to deepen the connection between the places we visit and the people who call them home by matching travelers with volunteer opportunities at their destination. By investing in the places we visit, we can make an impact that lingers for a lifetime.

Body text, Georgia, 20px

Your contribution will help us in our mission to transform the way people spend their time on vacation, deepening the connection between the places visited and the people who call them home.

Small text, Georgia, 16px

Photography

Images on the main pages of the site should focus on the experience of the place rather than the volunteer experience to attract travelers. All photos should have a slightly desaturated look. When this is user-generated content, we apply special filters to achieve the effect.

Example photos

Filter applied

Free photo resources

A bank of photos fitting for the brand has been pre-loaded into the library. For other photo needs, these sites offer free stock photos:

• Pexels
• StockSnap
• Pixabay
• More sites

Iconography

Icons are used as accents to content and provide a slightly rustic feel to the site. A variety of icons have been uploaded to the media library.

Animals

Bear

Bison

Cat

Crab

Deer

Dog

Dolphin

Fish

Fox

Frog

Horse

Kangaroo

Moose

Pig

Rabbit

Rooster

Toucan

Turtle

Whale

Plants & Nature

Berries

Earth

Flower

Flower

Pointy leaf

Rounded leaf

Moon

Mountain

Mountains

North star

Paw print

Pinecone

Snowflake

Star

Trees

Objects

Anchor

Arrow

Arrows

Asterisk

Camera

Campfire

Canoe

Compass

Email

Flag

Guitar

Heart

Key

Lantern

Location

Medical bag

Signpost

Telescope

Tent

Backgrounds

We have a variety of backgrounds available to use as section divders. These look best at the bottom of the page and can be layered in interesting ways.

Recommended combinations

Elements

Base design patterns that appear throughout the site

Buttons

Buttons should always be displayed on a line by themselves and should not be mixed into text.

Primary buttons

This style should be used for the primary call-to-action on the page. Usually there will only be one of these in any page.

Normal buttons

This style should be used for secondary call-to-actions. You can use these as many times as needed in a page.

Forms

Text inputs

Selection inputs

Error messages

Grid

We use the Foundation Library as our grid system due to its ease of use and flexibility across different screen sizes. It's composed of 12 columns that can be adjusted in a mobile-first way. Full details can be found in their documentation but a small example of how this applies:

Quotes

“We're ready to start the next chapter in our life and want to maximize the value of our time.”

— The Yorks, 2016

Tables

Standard table

Input table

Dividers

Components

Design patterns that combine elements

Hero image

With call-to-action

If the hero image has a call-to-action button in it, it should be displayed a little larger to make a greater impact.

Headline only

Most pages will use this shorter hero image to have impact without taking up too much real estate.

Modals

We use the Foundation library's Reveal functionality for modals.

Click me for a modal

Cards

Cards provide a convenient way to display and link to other content on the site. Currently, we use it for related blog posts. They can be arranged easily to show 2 or 3 cards at a time.

2-up

3-up