Razorfrog Style Guide

Branding Assets

Overview

Razorfrog’s brand is the collection of perceptions people have about our company. It is the big picture impression that is left on our customers and those who interact with us.

Razorfrog’s branding exists to differentiate our company from others in the marketplace, as well as connect with a target audience. It creates trust and recognition by communicating in a consistent way across all teams and channels.

This style guide is the visual translation of Razorfrog's mission, vision and values. It is the framework that specifies how to communicate the Razorfrog brand. The design assets presented within are the tangible visual elements that determine how our brand is perceived by, and how it interacts with, the world.

Brand Story

Razorfrog Web Design has provided leading website design solutions for small businesses in the San Francisco Bay Area since 2008. We create responsive WordPress sites that connect small businesses with their customers everywhere.

Our Mission

Razorfrog Web Design provides custom web design and development services to San Francisco Bay Area small businesses, brands, and professionals.

Our Vision

We are WordPress experts committed to designing responsive websites that engage our client's customers, stimulate their traffic, and cultivate their brands.

Our Values

Sustainable technology, clean design, exceptional service.

Back to top

Logo Identity

Razorfrog’s logo is the cornerstone of our brand identity. It clearly communicates who we are, our values, is visually appealing, and makes a lasting impression on Razorfrog’s audience.

The Razorfrog logotype design and its variations are property of Razorfrog Web Design, LLC. All rights afforded under U.S. copyright law are retained by the owner.

Correct and incorrect versions of our company name include:

Correct:

  • Razorfrog
  • Razorfrog Web Design

Incorrect:

  • RazorFrog
  • Razor Frog
  • Razor Frog Web Design

Permission Required. Written permission is required by any individual, persons, or company desiring to use our identity graphics in conjunction with a commercial product, business name or unaffiliated service.

Distribution. Do not redistribute without our expressed consent as files are subject to change without notice.

Right of Refusal. The owner retains the right to revoke permission and use of graphic assets for any reason.

Logo kit. Download approved versions of our logo assets.

Download Logo Kit

Approved Logo Variations

Primary Logo Variations

Secondary Logo Variations

Approved Brandmarks and Wordmarks

Primary Brandmark / Wordmark Variations

Secondary Brandmark / Wordmark Variations

Usage Specifications

How to use our logo assets:

Provide an adequate amount of space around the logo to prevent overcrowding. Horizontal logos are used for website headers and business cards. Brandmarks used as design elements where necessary.

How not to use our logo assets:

Do not use our logo designs in unapproved colors. Our frog brandmark should never purposely be tilted or oriented differently than what's shown here.

Back to top

Color Palette

Razorfrog’s official palette is comprised of a variety of swatches, each functioning as an essential component to our brand’s web presence and print design materials.

Turquoise

RGB 8 / 160 / 146

HEX 08a092

CMYK 80 / 14 / 50 / 1

Pantone 3272 C

Primary turquoise used for logo identity design assets.

Medium Turquoise 1

RGB 6 / 117 / 107

HEX 06756b

CMYK 88 / 34 / 60 / 15

Pantone 3295 C

Secondary turquoise used for UI design elements, large headlines, element hover effects and select backgrounds.

Medium Turquoise 2

RGB 5 / 86 / 78

HEX 05564e

CMYK 90 / 44 / 66 / 35

Pantone 3292 C

Used for text links and certain background columns and color patterns.

Dark Turquoise

RGB 4 / 63 / 57

HEX 043f39

CMYK 90 / 51 / 68 / 52

Pantone 3308 C

Used for certain background columns and color patterns.

Darkest Turquoise

RGB 4 / 47 / 43

HEX 042f2b

CMYK 91 / 0 / 8 / 81

Pantone 546 C

Used as a darker background color for certain background columns and color patterns.

Charcoal

RGB 71 / 71 / 71

HEX 474747

CMYK 66 / 59 / 58 / 41

Used for site body copy and high contrast header text in parallax rows with background images.

Mid Gray

RGB 189 / 189 / 189

HEX bdbdbd

CMYK 26 / 21 / 21 / 0

Used for navigation links, social icons, and footer text.

Light Gray

RGB 248 / 248 / 248

HEX f8f8f8

CMYK 2 / 1 / 1 / 0

Used in standard pages' call to action rows as a slightly contrasting background color.

White

RGB 255 / 255 / 255

HEX ffffff

CMYK 0 / 0 / 0 / 0

Used for navigation link hovers, page titles, subtitles, select labels, solid buttons, and body copy rows.

Back to top

Typography

Typography -- the visual art of creating written words -- is an essential building block of Razorfrog’s brand identity. Razorfrog utilizes the following defined typefaces for all content displayed on our website at https://razorfrog.com.

Primary Typeface: Montserrat

Montserrat is a highly legible and modern sans-serif font that pairs well with the beautiful, urban landscape of San Francisco, comprised of renowned architecture set against the Bay. It's the perfect font for a city that continues to reinvent itself with a forward-thinking attitude.

H1 heading

H2 heading

H3 heading

H4 heading

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ? . , : ; ‘ “ ^ < >
@ # $ % & * ( ) [ ] { } / \ | _ + = - ~ `

How quickly daft jumping zebras vex.

The quick brown fox jumps over the lazy dog.

This is a paragraph that uses every single letter in the alphabet. Now, that doesn’t mean this can be a paragraph with no story, but it does mean that every single letter is used. You can make it as generic or fanciful as you’d like. You can talk about anything from quilts to jets to xylophones. Oh yeah, and you can use whatever language you want, from Afrikaans to Zulu.

Directions for use:
Montserrat is used as Razorfrog's primary typeface for all purposes: headers, body copy, footers and more. Various font weights help to provide contrast for headers and links. It is also used within our printed branding materials such as business cards, letterhead, and greeting cards.

View Montserrat at Google Fonts.

Back to top

Imagery

Razorfrog’s on-brand images help to convey our best practices, aspirations and moods. The following images have been selected to communicate Razorfrog’s values associated with our brand.

Back to top

Voice

Razorfrog’s brand voice strongly impacts how our audience feels about our products and services. The following words and phrases depict our best practices, personality and what does and does not demonstrate the voice of our Razorfrog brand.

Words we like:

Customized, services, solutions, small business, modern, dynamic, engagement, conversions, stimulate, cultivate, sustainable, beautiful, functional, powerful, strategic, clean, simplicity, automated, web design, e-commerce, logo design, brand identity, copywriting, photography

Words we don't like:

Old, stale, tasteless, boring, outdated, unoptimized, thoughtless, bad design, complicated

Back to top