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.
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.
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 are 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 nor oriented differently from what is shown here.
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.
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.
