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

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

RGB8 / 160 / 146

HEX08a092

CMYK80 / 14 / 50 / 1

Pantone3272 C

Primary turquoise used for logo identity design assets.

Medium Turquoise 1

RGB6 / 117 / 107

HEX06756b

CMYK88 / 34 / 60 / 15

Pantone3295 C

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

Medium Turquoise 2

RGB5 / 86 / 78

HEX05564e

CMYK90 / 44 / 66 / 35

Pantone3292 C

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

Dark Turquoise

RGBDark Turquoise

HEX043f39

CMYK90 / 51 / 68 / 52

Pantone3308 C

Used for certain background columns and color patterns.

Darkest Turquoise

RGB4 / 47 / 43

HEX042f2b

CMYK91 / 0 / 8 / 81

Pantone546 C

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

Charcoal

RGB71 / 71 / 71

HEX474747

CMYK66 / 59 / 58 / 41

Pantone546 C

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

Mid Gray

RGB189 / 189 / 189

HEXbdbdbd

CMYK26 / 21 / 21 / 0

Pantone546 C

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

Light Gray

RGB248 / 248 / 248

HEXf8f8f8

CMYK2 / 1 / 1 / 0

Pantone546 C

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

White

RGB255 / 255 / 255

HEXffffff

CMYK0 / 0 / 0 / 0

Pantone546 C

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.

sf embarcadero aerial gradient blurred warm v2sf lombard street top down viewrazorfrog geometric turquoiseabstract bokeh lights
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