>

Style Guide

This is a resource for designers and developers, to be used as a reference for future eLocal branded projects. Click on the links above to jump to the relevant section.

Primary Colors

For major elements such as boxes, buttons, and titles

Dark Gray

$dark-gray | #414852

Dark Blue

$dark-blue | #213642

Orange

$orange | #B73E18

Light Blue

$light-blue | #44728E

Secondary Colors

For text, dividing lines, boxes and other secondary elements

White Gray

$white-gray | #ECECED

Light Gray

$light-gray | #C6C8CA

Medium Gray

$medium-gray | #8D9197

Text Gray

$text-gray | #2F3338

Tertiary Colors

For minor usages such as check marks and warning labels

Green

#6EA340

Yellow

#CCD600

Primary Fonts

For the majority of text used on any page

  • Rokkitt Bold

    for primary elements like titles and large numbers

    $header-class

  • Rokkitt Bold Italic

    for secondary elements like subtitles and label headers

    $header-class

  • Rokkitt Medium

    for secondary elements like subtitles and label headers

    $header-class

  • Rokkitt Medium Italic

    for emphasis within these secondary elements

    $header-class

  • Museo Sans

    for most text like labels and shorter paragraphs

    $dress-class

  • Museo Sans Italic

    for emphasis within most text

    $dress-class

  • Museo Sans Bold

    for emphasis on labels, links, and other minor elements

    $dress-bold

  • Open Sans

    for when paragraphs or copy points are very long

    $working-class

Secondary Fonts

For specific circumstances when primary fonts need augmentation

  • Gotham Bold Uppercase

    for when a more utilitarian title style is needed

    $alt-header

  • Gotham Black

    for the eLocal logo and occasionally for labels and titles

    $alt-header

clock

hourglass

radar

layers

easel

calendar

increase-chart

layouts

bar-graph

pointer

desktop

laptop

smart-phone

tablet

printer

camera

compass

cog

lock

unlock

menu

gavel

scales

shield

wrench

car

apple

megaphone

lips

stethoscope

target

target-arrow

cross

strike-through

arrow-up

check

money

no-money

geo-location

puzzle

house

spyglass

businessman

person

couple

conversation

speech-bubble

speech-bubble-long

left-quotation

right-quotation

bag

lightening

paper

stamp

clipboard

paperclip

pencil

envelope

telephone

rotary-telephone

website

google-plus

facebook

twitter

twitter-bird

pinterest

stumbleupon

linkedin

rss

coupon

website-circle

google-plus-circle

facebook-circle

twitter-circle

twitter-bird-circle

pinterest-circle

stumbleupon-circle

linkedin-circle

rss-circle

trophy

one

two

three

four

five

six

seven

eight

nine

number-one

Primary Map

for pages that need a dark background

Secondary Map

for pages that need a light background

Primary Button
  • $header-class or $dress-class

    .07em letter-spacing | 20 tracking

  • $orange | inset boxshadow

    3px border radius | 3px round corners

Secondary Button
  • $header-class or $dress-class

    .01em letter-spacing | 20 tracking

  • $light-blue | inset boxshadow

    3px border radius | 3px round corners

Tertiary Button
  • $header-class or $dress-class

    .01em letter-spacing | 20 tracking

  • $dark-blue | inset boxshadow

    3px border radius | 3px round corners

Primary Lines

for divisions on dark or light backgrounds

$light-blue or $light-gray | 3px width

Secondary Lines

for when a dark, thin line is needed

$medium-gray | 1px width

Drop Shadows

for differentiation between sections

$light-gray or $text-gray | 1.5em spread

Primary Form

for light backgrounds

Text Input Label
Radio Button Label

Option 1

Option 2

Checkbox Label

Option 1

Option 2

Menu Label
  • $dark-gray or $dark-blue

    White inputs with 2px border-radius

    1em $dress-class labels, .8em $working-class inputs

  • Light blue drop-down symbol

Secondary Form

for dark backgrounds

Text Input Label
Text Area Label
  • $white, with drop shadow

    White inputs with 2px border-radius and drop shadow

    1em $dress-class labels, .8em $working-class inputs

  • Green go ahead symbol

Primary Lists

for short, important lists

  • Museo Sans, colored box

Secondary Lists

for longer lists

  • Museo Sans, primary underlines

Tertiary Lists

for very long lists

  • List Item #1
  • List Item #2
  • List Item #3
  • List Item #4
  • List Item #5
  • List Item #6
  • List Item #7
  • List Item #8
  • List Item #9
  • List Item #10
  • List Item #11
  • List Item #12
  • List Item #13
  • List Item #14
  • List Item #15
  • List Item #16
  • Open Sans, primary lines

“I've used eLocal for the last four years and they are by far the best lead service I've worked with. Other places have charged me for clicks and views that aren't worth anything, but eLocal gets me actual calls from real customers. I know they're helping my business.”

“I've found it's rare to come across a lead generation service like eLocal that responds quickly and honestly. They let me choose exactly where I want leads so I don't get useless calls from outside my service area and in the rare case I get a bad lead from them, they're always quick to credit my account.”