GREENCARS

GREENCARS

guideLINES
Download PDF
GreenCars icon for right arrow
Scroll Down for Web guide
GreenCars horizontal white
guideLINES

Overview

In this section, we'll cover GreenCars' brand heart, brand structure, and look & feel.

Brand Heart

The core of the GreenCars brand.

PURPOSE

  • Why we exist...

    We exist to provide tools and resources to simplify electric car learning and shopping. From tax credits to finding EV charging stations, we provide it all in one place.

VISION

  • The future we're trying to create...

    We’re creating a future where sustainability habits and efforts become a part of the automotive culture. Therefore, we’re here to educate the public on the world of electric/hybrid vehicles, in hopes that they’ll make the best decision for themselves and the planet.

MISsION

  • What we're here to do...

    We’re here to accelerate the EV revolution by facilitating the adoption of electric cars and hybrids through passionate advocacy, tailored education, and a simple car buying experience.

VALUES

  • How we will conduct ourselves...

    Educational.
    Enthusiastic.
    Encouraging.

Brand Structure

Use keywords for SEO description, blog posts, etc.

Green
NATURAL
EFFICIENT
EDUCATIONAL
FUTURE OF CAR BUYING
FORWARD MOTION
CLEAN
clear
SUSTAINABLE

Look & Feel

The look and feel for GreenCars’ website and any supporting media is as follows:

  • Clean

    To represent a cleaner environment, the baseline for all creative should be clean design. This means reducing the amount of clutter in an ad and LOTS of white space! The vehicle should be the focal point with photography and accent colors as supportive elements.

  • Green

    As the name suggests, we love green! Using our green helps convey the natural nature of sustainability. Whether it’s a photo-overlay or splash of color, the GreenCars Green should be featured somewhere in the design.

  • innovative

    Sustainability is the future—of cars, the environment, and as a lifestyle. The overall look in our designs should be consistent with other sustainability media in the market, with futuristic elements suggestive of innovation and forward-thinking.

Visual Identity

In this section, we'll go over logos, typography, colors, CTA's, photography, and more!

Typography

GreenCars has one font family—Foco, a sans-serif font used in headlines, titles, and body copy. It comes in varying weights, which should be implemented to encourage visual hierarchy.

  • Font Family

Aa

  • FOCO BOLD
    abcdefghijklmnopqrstuvwxyz
    123456789

Aa

  • FOCO REGULAR
    abcdefghijklmnopqrstuvwxyz
    123456789

Aa

  • FOCO LIGHT
    abcdefghijklmnopqrstuvwxyz
    123456789

  • Hierarchy

XL Heading

  • The biggest headline

  • Highlight the most important text on a page.

XL Heading

  • The biggest headline

  • Highlight the most important text on a page.

Main Heading

  • H1

  • Main title on a page. Must be used one H1 per page to comply with best CEO practice.

Secondary Heading

  • H2

  • Use it for section titles. Might be used together with weight 'Bold' to highlight the heading.

Third Heading

  • H3

  • Use it for sub section titles. Might be used together with weight 'Bold' to highlight the heading.

Small Heading

  • H4

  • Use it for to highlight small section.

Headline
  • Sub division label

  • Use it for sub categories

This is the regular paragraph

  • Regular text

Medium paragraph

  • Use it to highlight main idea.

Large paragraph

  • Use it to highlight main idea. Don't overuse this size. Maximum 3 sentences.

Secondary Heading

  • Class .text-green makes any text green

CTA

Call to action

  • Primary Button Green

  • Use primary button as a main CTA for the section. Green is the 'Learn' colour. Use it on pages which belongs to learn part of GreenCars.

  • Primary Button Orange

  • Use primary button as a main CTA for the section. Orange is the 'Shop' colour. Use it on pages which belongs to shop part of GreenCars.

  • Secondary Button

  • Use secondary button in a combination with primary

  • Revert Button

  • Use it as a subtle CTA signifier

  • Link Button

  • Main title on a page. Must be used one H1 per page to comply with best CEO practice.

  • Center positioned buttons

  • Include any button inside of .cta-centered class. It's good for the footer of the section.

Colors

  • The Greens

Primary Green
  • RGB

  • 109/169/67

  • CMYK

  • 63/12/100/1

  • HEX

  • 6DA943

Secondary Green
  • RGB

  • 3/120/61

  • CMYK

  • 89/28/100/17

  • HEX

  • 03783D

Green Gradient
  • Left HEX

  • primary green

  • Right HEX

  • secondary green

  • The Warm Tones

Yellow Accent
  • RGB

  • 236/208/41

  • CMYK

  • 09/13/95/0

  • HEX

  • edd026

Orange Accent
  • RGB

  • 237/157/33

  • CMYK

  • 05/43/100/0

  • HEX

  • ed9c09

Orange Gradient
  • Left Color

  • Yellow accent

  • Right Color

  • orange accent

  • Neutrals

#eee

#ccc

Icons

All the icons are in SVG format.

GreenCars icon for HybridGreenCars download icon
GreenCars icon for Fuel Efficient GreenCars download icon
GreenCars icon for ElectricGreenCars download icon
GreenCars icon for Plugin hybridGreenCars download icon
GreenCars icon for clockGreenCars download icon
GreenCars icon for saveGreenCars download icon
GreenCars icon for spannerGreenCars download icon
GreenCars icon for $ symbol GreenCars download icon
GreenCars icon for taxGreenCars download icon
GreenCars icon for percentage GreenCars download icon
GreenCars icon for electric carGreenCars download icon
GreenCars icon for charging stationGreenCars download icon
GreenCars icon for renewable energy GreenCars download icon
GreenCars location-pin icon with yellow background and white borderGreenCars download icon
GreenCars location-pin icon with green background and white borderGreenCars download icon
GreenCars location-pin icon with grey background and white borderGreenCars download icon
GreenCars icon for car comparision GreenCars download icon
GreenCars icon for listGreenCars download icon
GreenCars icon for favorite car GreenCars download icon
GreenCars icon for parked carsGreenCars download icon
GreenCars icon for closeGreenCars download icon
GreenCars icon for left arrowGreenCars download icon
GreenCars icon for right arrowGreenCars download icon
GreenCars icon for external linkGreenCars download icon
GreenCars white Search iconGreenCars white download icon
GreenCars white icon for spannerGreenCars white download icon
GreenCars white icon for $ symbolGreenCars white download icon
GreenCars white icon for clockGreenCars white download icon
GreenCars white icon for saveGreenCars white download icon
GreenCars white icon for percentageGreenCars white download icon
GreenCars white logoGreenCars white download icon
GreenCars white icon for electric carGreenCars white download icon
GreenCars white icon for embrace green initiative GreenCars white download icon
GreenCars white icon for $ trailer vanGreenCars white download icon
GreenCars white filter iconGreenCars white download icon
GreenCars white icon for phoneGreenCars white download icon
GreenCars white icon for mailGreenCars white download icon
GreenCars white icon for address pinGreenCars white download icon
GreenCars white icon for closeGreenCars white download icon
GreenCars white icon for starGreenCars white download icon

Typography

  • Font Family: Foco

  • Font weight: light

    abcdefghijklnopqrstuvwxyz
    abcdefghijklnopqrstuvwxyz
    0123456789

  • Font weight: normal

    abcdefghijklnopqrstuvwxyz
    abcdefghijklnopqrstuvwxyz
    0123456789

  • Font weight: bold

    abcdefghijklnopqrstuvwxyz
    abcdefghijklnopqrstuvwxyz
    0123456789

  • Clean

    Reduce the amount of clutter in an ad. The vehicle should be the focal point with photography and accent colors as supportive elements.

  • Green

    Whether it’s a photo-overlay or splash of color, the Green Cars green should be featured somewhere in the ad.

  • Innovative

    The overall look should be consistent with other sustainability media in the market, with futuristic elements suggestive of innovation and forward-thinking.