Skip to content

Latest commit

 

History

History
250 lines (181 loc) · 29.3 KB

README.md

File metadata and controls

250 lines (181 loc) · 29.3 KB
Raw

GC Brains Brand

publish-badge

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 lpm lph lpv
secondary lsm lsh lsv
black lbm lbh lbv
white lwm lwh lwv

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.

lpt lst

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 lpm-badge
primary horizontal lph-badge
secondary mark lsm-badge
secondary horizontal lsh-badge
black mark lbm-badge
white mark lwm-badge

ℹ️ 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 🤗.