Branding Guide

CYBERsprout
Brand Guide

Welcome

Welcome to CYBERsprout! We are a boutique website design studio located in western Minnesota. The following guide was created to represent who we are through design and personality (sans the Minnesotan accent). Feel free to use the graphics, colors, and fonts that follow for CYBERsprout mentions or marketing material!

Vision & Mission

CYBERsprout aims to eliminate the noise so you can focus on what matters most to you. Whether you are a growing business or a non-profit looking to make an impact, your website should empower you to reach your goals. We are continually striving to create an experience that clients love.

Personality

  1. Creative
  2. Quirky
  3. Relatable

Questions

If you have any questions about usage of our branding, please shoot an email to [email protected].

The CYBERsprout logo is a fusion of digital and nature. The "CYBER" portion of the logo is built with the modern typeface Quicksand. The "sprout" portion is built with Sweat Pea.

When possible, use the full-color banner logo. The white version can be utilized over darker backgrounds where the colored version is difficult to see. The square logo should be used for smaller spaces and social profile photos. Use the icon found in the Icon section below as an accent graphic or for spaces smaller than 50 pixels tall or wide.

Full Color Banner

logo-full-color-banner

White Banner

logo-white-banner

Square Logo

square logo

Icon

icon-leafThe green leaf icon is special for CYBERsprout. It is used in everything from our logo to our favicon. We even use it for custom graphics on items like t-shirts, an example of which is below. It is often utilized to bring a natural element to our mostly digital focus. Feel free to use this icon however you see fit as long as it sticks to our message and branding.

cybersprout-shirt-graphic

Spacing & Sizes

The CYBERsprout logo should be surrounded by some negative space and not encroached upon by other objects. The logo is ideally set on top of an opaque background color that offers a sufficient contrast ratio. The CYBERsprout icon should be used instead of the logo when other objects need to be connected to make a graphic.

Colors

Primary

The primary brand color selected to represent CYBERsprout is Forest Green.

Accent

The color Blue Green should only be used as an accent color when contrast is necessary.

Background

The color Dark Gray should be utilized as a background color for sections, buttons, etc. Black primarily for text.

Forest Green

Hex #007F00
RGB (0, 127, 0)
CMYK (1, 0, 1, 0.502)

Blue Green

Hex #B2D6BF
RGB (178,214,191)
CMYK (0.1682, 0, 0.1075, 0.1608)

Dark Gray

Hex #4d4d4d
RGB (77, 77, 77)
CMYK (1, 0, 1, 0.698)

Black

Hex #0a0a0a
RGB (10, 10, 10)
CMYK (1, 0, 1, 0.502)

Typography

For Titles and Headings

The titles and heading for our branding utilize the Google font, Quicksand.

Quicksand
ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
[email protected]#$%^&*()

For Body Text

The body text utilizes the Google font, Open Sans.

Open Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
[email protected]#$%^&*()

Font Alternatives

For online content, the backup font families should be used in the following order: Helvetica, Arial, sans-serif.

Example of Text Styling

Heading 1

|

Heading 2

|

Heading 3

|

Heading 4



This is the regular body text to display the font being utilized. This is the regular body text to display the font being utilized. This is the regular body text to display the font being utilized. This is the regular body text to display the font being utilized. This is the regular body text to display the font being utilized. This is the regular body text to display the font being utilized.