GC Brains Brand

This repository contains all resources and usage details about GC Brains brand. For the original brandkit you can download brandkit.fig or brandkit.pdf.

Brand name

Brand name is GC Brains and our domain name is gcbrains.com. Below you can see correct and wrong usages within some certain contexts.

In Plain text

✅ Correct	⛔ Wrong
GC Brains	G C Brains, G&C Brains, GCBrains

Usernames, URLs, Paths and File Names

✅ Correct	⛔ Wrong
gcbrains	gc-brains, gc_brains

Coding

Type	✅ Correct	⛔ Wrong
camelCase	gcbrains	gcBrains
PascalCase	Gcbrains	GcBrains
kebab-case	gcbrains	gc-brains
snake_case	gcbrains	gc_brains
UPPER_CASE	GCBRAINS	GC_BRAINS

ℹ️ We are aware of the fact that there is an inconsistency here. GC Brains should've been gcBrains when it is camelCase, right? This is intentional because first of all our domain name is gcbrains.com. And it is pretty simple to keep all other usages to follow gcbrains. So other than plain text, stick to this simpler representation.

Logo Construction

Logo consists of two parts, mark (oVo) and word GC Brains which are aligned either vertically or horizontally. Alternatively mark can be used stand alone.

There are three layouts: horizontal, vertical, mark.

There are four colors: primary, secondary, black and white.

As a result there are 12 combinations as shown below;

color \ layout	mark	horizontal	vertical
primary
secondary
black
white

Logo usage in plain text

When logo is needed in a place where image cannot be included, you may use (oVo) or (oVo) GC Brains.

How to Choose

Among 12 above alternatives it looks hard to choose which one to use. Let's make it easy.

First of all, every alternative is valid and can be used. There is no restriction. However, if you use a logo this means you want it to be noticed and look nice. Below is a list of suggestions to achieve this;

• Prefer primary & secondary logos over black & white wherever possible
• Use primary & black for light backgrounds, secondary & white for dark backgrounds
  • Except that when you use mark, primary might fit dark backgrounds as well.
• Layout preference is horizontal, then vertical. If none fits well, use mark.

Below are some examples;

Finding a logo

assets/logo folder includes all of the existing exported files. All of these exported files are valid and can be used where they fit. Use .svg files where possible, if not, use .png files with a suitable size.

SVG files

.svg files are in assets/logo/svg folder. Below is the naming convention for svg files;

logo-primary-horizontal.svg

logo-[color]-[layout].svg

PNG files

.png files are in assets/logo/png folder. There are three folders indicating different sizes named small-32px, medium-128px and large-512px.

ℹ️ Size represents the size of mark in a logo, not the image size.

Below is the naming convention for png files;

logo-secondary-vertical-96w.png
logo-black-horizontal-32h.png

logo-[color]-[layout]-[width or height].png

Exporting a new logo

If existing exported files does not suit your need, you can use brandkit.fig file to export a new one.

⚠️ mark files cannot be smaller than 32px. If your space requires a mark that is less than 32px, just don't use a logo at all. You may still use text mark (oVo).

Watermarks

Use watermarks to protect and copyright photos and videos online. Watermarks are exported to assets/logo/svg/watermark in 15%, 22.5% and 30% opacities using only black/white colors in all layouts.

e.g. logo-black-horizontal-0.15.svg is black horizontal logo in 15% opacity.

⚠️ Don't use watermarks directly in html, because they are meant to be used on existing photos or videos. There are also no .png exports available, because of the same reason.

Exceptions

There are some exceptions to make logo look clean and not distorted. Each exception has its own specific usage, so use these exports only where they are exported for.

Files are in assets/logo/exceptions. Exception names are placed as layout part in file names.

e.g. logo-primary-thumbnail.svg is thumbnail exception in primary color.

Profile Pictures

Don't use regular logomark, use thumbnail logomarks in profile pictures and let them crop it for you.

Google Workspace

Google workspace shows 78x32, so this logo has 32x32 mark within 78x32 transparent background.

Badges

There are no apparent use cases for badges, but they are prepared anyway. primary and secondary badges are more suitable for brand related badges, whereas black and white badges can be used as status badges etc.

Type	Badge
primary mark
primary horizontal
secondary mark
secondary horizontal
black mark
white mark

ℹ️ black mark and white mark badges may have any color on left and right side.

Colors

Primary brand color is #F9465B and we use black #000000 and white #FFFFFF to create contrast. Below you can find suggested color usage weights;

Color	Distribution %
#F9465B	40%
#000000	30%
#FFFFFF	30%

Color shades are shown as below;

Opacity	Primary	Grayscale
0%	#FFFFFF	#FFFFFF
10%	#FFEDEF	#E6E6E6
20%	#FEDADE	#CCCCCC
30%	#FEC8CE	#B3B3B3
40%	#FDB5BD	#999999
50%	#FBA2AC	#7F7F7F
60%	#FB909D	#666666
70%	#FB7E8D	#4D4D4D
80%	#FA6B7C	#333333
90%	#FA596C	#1A1A1A
100%	#FA465B	#000000

Special Thanks 🙏

This branding is created by Behappy team. Thanks a lot for your hard work and for your patience 🤗.