Skip to content

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 blends cutting-edge web development with a deep commitment to our community in the San Francisco Bay Area. We create responsive, accessible websites that elevate your brand and engage your audience. Our story goes beyond design; we strive to be leaders in fostering equality and cultural vibrancy through our work. Partner with us and let’s build an empowering web presence for your business.

Our Mission


Razorfrog creates joyful and innovative design solutions for a diverse ecosystem of San Francisco Bay Area small and medium-sized businesses, entrepreneurs and industry professionals. Since 2008 our multidisciplinary team of veteran design and development experts has harnessed the power of WordPress to craft beautiful, inclusive and memorable web experiences that foster community and cultivate trust. We aspire to build sustainable, long-term relationships with our clients by providing world class customer service and timely support.

Our Vision


Razorfrog is inspired to build a more accessible, supportive and compassionate world. We combine vital ideas with resilient technology to cultivate strategic, symbiotic relationships built on integrity and accountability. Our mindful creatives are committed to assisting them with their web accessibility conformance goals and remediation efforts. We’re continually improving upon our services to meet the needs of our rapidly evolving world.

Our Values


Razorfrog embraces kindness, inclusivity, diversity, empathy, authenticity, professionalism, integrity and respect. Our award-winning team values leadership, strives for equality, and takes personal responsibility and accountability for our actions. We seek to use our collective gifts to be of service to our communities and envision a more tolerant, prosperous and culturally vibrant world.

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.

Celeste

RGB

156 / 250 / 241

HEX

9CFAF1

CMYK

37 / 0 / 3 / 1

Very light turquoise used for row backgrounds and color gradients.

Bright Turquoise

RGB

12 / 241 / 220

HEX

0CF1DC

CMYK

95 / 0 / 8 / 5

Vibrant turquoise used for select row backgrounds and color gradients.

Turquoise

RGB

8 / 160 / 146

HEX

08A092

CMYK

95 / 0 / 8 / 37

Primary turquoise used for Razorfrog's logo assets, headers and UI elements.

Medium Turquoise

RGB

5 / 95 / 87

HEX

055F57

CMYK

94 / 0 / 8 / 62

Bolder turquoise used for headers, gradients and UI elements.

Dark Turquoise

RGB

4 / 47 / 43

HEX

042F2B

CMYK

91 / 0 / 8 / 81

Darkest turquoise used as a contrasting background color, headers and UI elements.

Deep Sky Blue

RGB

0 / 155 / 253

HEX

009BFD

CMYK

100 / 38 / 0 / 0

Used for water surface color gradients.

Cerulean Blue

RGB

1 / 83 / 223

HEX

0153DF

CMYK

99 / 62 / 0 / 12

Used for select headers and water surface color gradients.

Navy Blue

RGB

3 / 4 / 94

HEX

03045E

CMYK

96 / 95 / 0 / 63

Used for select headers and water surface color gradients.

Earth Gold

RGB

214 / 161 / 81

HEX

D6A151

CMYK

0 / 24 / 62 / 16

Accent color inspired by fuschia water lilies' natural stamens coloration.

Rose Pink

RGB

255 / 0 / 128

HEX

FF0080

CMYK

0 / 100 / 49 / 0

Accent color inspired by fuschia water lilies' natural petals coloration.

Electric Violet

RGB

153 / 0 / 255

HEX

9900FF

CMYK

40 / 100 / 0 / 0

Accent color inspired by fuschia water lilies' natural petals gradation.

Rich Black

RGB

2 / 7 / 12

HEX

02070C

CMYK

83 / 41 / 0 / 95

Used for body copy, select headers and wherever ultra high color contrast ratios are desired.

Charcoal

RGB

71 / 71 / 71

HEX

474747

CMYK

0 / 0 / 0 / 72

Used for navigation links and select body copy and backgrounds where contrast is desired.

Mid Gray

RGB

189 / 189 / 189

HEX

BDBDBD

CMYK

0 / 0 / 0 /25

Used for some background rows where lower contrast is desired.

Light Gray

RGB

248 / 248 / 248

HEX

F8F8F8

CMYK

0 / 0 / 0 / 2

Used for some background rows where the lowest contrast is desired.

White

RGB

255 / 255 / 255

HEX

FFFFFF

CMYK

0 / 0 / 0 / 0

Used for backgrounds page titles, button text, and body copy on darker backgrounds.

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: Object Sans


Object Sans is a contemporary type family that puts together the best qualities of Swiss neo-grotesks and geometric fonts. It’s a multifunctional workhorse designed to work best in any printed and on-screen contexts, including logo design, brand identities, websites, packaging, posters and headlines. The regular weight is carefully tuned for small sized body text.

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:
Object Sans 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 to be used within our printed branding materials such as business cards, letterhead, and greeting cards.

View Object Sans at Pangram Pangram.

UI Elements

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.

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:


Our voice is inspired, approachable, inclusive, inviting, positive, considerate, compassionate, grounding, evolving, mindful, joyful, resilient, and fun. It aims to foster a tolerant, diverse, and empathetic community. We are creating designs in response to a social environment that requires better ideas, informed solutions, and intentional presence.

Words we don't like:


Inaccessible, poor quality, stale, tasteless, inflexible, unnecessary, boring, outdated, unoptimized, thoughtless, bad design, overly complicated.

Toggle light/dark mode

Back To Top