zero
octave

zero octave

Table of contents


  1. Welcome
  2. Logo
  3. Colours
  4. Typography
  5. Stamps

What is zoyster?

It’s a style guide that plans to hit puberty sooner or later, but for now it’s fairly bare.

It’s in the same vein as my project space-case, where it mainly serves as practice, a way to exercise and develop skill sets. So zoyster will slowly blossom with various styles and methodologies that I wish to use when I create anything that represents my personal work, which usually goes under the moniker zero octave.

As for the name? I just like saying it.

The oyster logo. I know it doesn’t really look like an oyster, it’s just the first thing that came to mind when throwing it together and it kind of stuck. I don’t know man, I just work here.

logo
logo

Colours

Brand

Colours mainly used in association with personal/zero octave stuff.

EERIE BLACK #0A131F
GUNMETAL #27313B
OCEAN GREEN #40BA92
PICTON BLUE #50C1E9
WHITE SMOKE #F5F7FA

Basic

These colours I use for many projects, it’s a nice set of options for various needs.

SEA SERPENT #4dc6f2
MAXIMUM BLUE #41a7cc
Malachite Green #40ef80
UFO Green #37ca6e
Payne's Grey #64677a
Outer Space #454754
Sunburnt Cyclops #ff3f49
Jasper #e53942
White #fcfcff
Anti-Flash White #f0f0f2

Typography

Two different font’s are used. Righteous is used for the logo font and anything else that may be of importance, like a header or something and Gibson is used for everything else.

Righteous

css classes
.logo-font .site-title

Using the class .logo-font changes the font to Righteous.

The Human Torch was denied a bank loan!
<span class="logo-font h3">The Human Torch was denied a bank loan!</span>

The class .site-title changes the font to Righteous and makes it uppercase.

zero octave
<span class="site-title h1" style="color: #40BA92">zero octave</span>

Gibson

Set as default font on body class so no additional classes are needed

Aa
300px

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&(){}[]

Aa
400px

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&(){}[]

Aa
600px

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&(){}[]

Stamps

css classes
.stamp-small .stamp .stamp-dark .stamp-green

Stamps can be used on things like headlines, tags, logos, or whatever your heart desires. To use them, you need a combo of two classes. The size class, which is either .stamp which creates a nice box based on the text inside the stamp or .stamp-small which drops the size down to 80% of the body text size, then the background colour class, which is either .stamp-dark for a basic dark background or .stamp-green for the zo colour ocean green. Below are some examples:

zero octave
<span class="site-title stamp stamp-green h2">zero octave</span>
HP Lovecraft signs a record deal
<span class="h3 stamp stamp-dark">HP Lovecraft signs a record deal</span>
Green Tags
#example #hot2trot #party-flava #branding #diyer
Grey Tags
#example #hibiscus #fluffincurls #so-dark #so-quick
<span class="h3">Green Tags</span><br>
<span class="stamp-small stamp-green">#example</span>
<span class="stamp-small stamp-green">#hot2trot</span>
<span class="stamp-small stamp-green">#party-flava</span>
<span class="stamp-small stamp-green">#branding</span>
<span class="stamp-small stamp-green">#diyer</span>

<span class="h3">Grey Tags</span><br>
<span class="stamp-small stamp-dark">#example</span>
<span class="stamp-small stamp-dark">#hibiscus</span>
<span class="stamp-small stamp-dark">#fluffincurls</span>
<span class="stamp-small stamp-dark">#so-dark</span>
<span class="stamp-small stamp-dark">#so-quick</span>