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

RGB156 / 250 / 241

HEX9CFAF1

CMYK37 / 0 / 3 / 1

Very light turquoise used for row backgrounds and color gradients.

Bright Turquoise

RGB12 / 241 / 220

HEX0CF1DC

CMYK95 / 0 / 8 / 5

Vibrant turquoise used for select row backgrounds and color gradients.

Turquoise

RGB8 / 160 / 146

HEX08A092

CMYK95 / 0 / 8 / 37

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

Medium Turquoise

RGB5 / 95 / 87

HEX055F57

CMYK94 / 0 / 8 / 62

Bolder turquoise used for headers, gradients and UI elements.

Dark Turquoise

RGB4 / 47 / 43

HEX042F2B

CMYK91 / 0 / 8 / 81

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

Deep Sky Blue

RGB0 / 155 / 253

HEX009BFD

CMYK100 / 38 / 0 / 0

Used for water surface color gradients.

Cerulean Blue

RGB1 / 83 / 223

HEX0153DF

CMYK99 / 62 / 0 / 12

Used for select headers and water surface color gradients.

Navy Blue

RGB3 / 4 / 94

HEX03045E

CMYK96 / 95 / 0 / 63

Used for select headers and water surface color gradients.

Earth Gold

RGB214 / 161 / 81

HEXD6A151

CMYK0 / 24 / 62 / 16

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

Rose Pink

RGB255 / 0 / 128

HEXFF0080

CMYK0 / 100 / 49 / 0

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

Electric Violet

RGB153 / 0 / 255

HEX9900FF

CMYK40 / 100 / 0 / 0

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

Rich Black

RGB2 / 7 / 12

HEX02070C

CMYK83 / 41 / 0 / 95

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

Charcoal

RGB71 / 71 / 71

HEX474747

CMYK0 / 0 / 0 / 72

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

Mid Gray

RGB189 / 189 / 189

HEXBDBDBD

CMYK0 / 0 / 0 /25

Used for some background rows where lower contrast is desired.

Light Gray

RGB248 / 248 / 248

HEXF8F8F8

CMYK0 / 0 / 0 / 2

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

White

RGB255 / 255 / 255

HEXFFFFFF

CMYK0 / 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