fbpx

Brand style guide

Welcome to Mammoth Creative's brand center

This is a complete guide to our company, values, design and digital assets. It helps us distinguish every element and experience we craft for you.

Table of Contents

Defining the brand

In which we outline the building blocks of Mammoth Creative Group’s brand, including
what we stand for, what sets us apart, why we choose the words we choose, and how we’ve chosen to present ourselves.

Who we are

Mammoth Creative Group is a creative services team based in Louisville, KY specializing in website development, social media management, video production and photography. We creatively strategize, design and execute on creating content that connects.

Please use “Mammoth” only as a noun when used as “Mammoth Creative” or “Mammoth Creative Group.” Sparingly use “Mammoth” as an adjective when followed by a description of our services. “Mammoth” should not be used as a verb, plural, or possessive.

Our values

We show up to work each day excited to get to work for our clients. For us, the work isn’t just about getting paid. It’s about sharing stories that need to be heard, pushing ourselves to be better creatives than we were yesterday and playing a small role in creating a better Kentucky.

Take pride in your work.

Pursue excellence.

Keep learning.

Be bold.

Give generously.

Persona

We are passionate, creative, purposeful, respectful, and helpful. We are intuitive, hard-working, detail-oriented, and collaborative.

Our culture turned inward creates our work; our culture turned outward creates our brand.

Our brand is an extension of our character, as a statement of what kind of people we are. If nothing else, our outward-facing brand should represent the best of what we bring to work as colleagues at this company. Intuitive, humble, hard-working and collaborative.

Personality

We are deliberately human. We aim to be an ideal colleague: one that works on the basis of respect and admiration for working people.

We tend to all matters—no matter how small—out of devotion to our clients and our trusted place in the world.

We communicate in a way that is smart, humble, honest, hard-working, and collaborative. We don’t dominate the conversation and never waste the client’s time; we aim to know the answer to clients’ questions, and if we don’t, we’re honest but offer to figure it out for them.

We demonstrate our commitment to being customer-centric by placing our clients at the center of every communication—not ourselves.

Design elements

In which we outline best practices for the use of Mammoth Creative Group’s brand assets and offer useful examples.

Logo

The ‘Mammoth Creative Group’ logo is the primary logo and should be used in most instances. Our logo is composed of ‘Mammoth’ set in Roboto Bold and the second line in Roboto Normal. Avoid using it in tiny sizes, as it can become illegible. Always use the logo files provided. Do not recreate.

Mammoth Creative Group logo in navy charcoal.
Primary
Alternative
White
Black

Icon

The primary icon (Mammoth Head) is the official symbol of our brand. The symbol should be legible at all sizes and always appear as a solid color unless sparingly used as a living icon for holiday promotions or other special occasions.

NOTE: There is an alternative icon that adds strokes to the mammoth’s tusks. It should only be used if permission is given from the partners. 

Primary
Alternative
White
Black

Clear space

Clear space is the open area surrounding a logo. Keeping this area free of other visual elements ensures the Mammoth Creative Group logo and icon are easily read and immediately recognizable across all usages.

For the logo, the width of the ‘M’ in ‘Mammoth’ is used to establish the dimensions of the minimum amount of clear space that should always be present around the logo. The icon’s width, scaled down to 25% of the icon’s size, is used to establish a minimum amount of clear space that should always be present around the icon.

Usage

The logos should be used only on solid backgrounds from the primary color palette. The preferred order of usage is Columbia blue, navy charcoal, white, and black. Versions in Opal and Skobeloff should be used sparingly.

Avoid using logos on photographs unless the logo sits on a low-contrast area of the image that doesn’t compete with the logo.

Misuse

  • Do not crop.
  • Do not rotate.
  • Do not change the proportions.
  • Do not change the size or position of any elements.
  • Do not use different colors.
  • Do not recreate using different typefaces.
  • Do not use drop shadows or any other effects.
  • Do not change the transparency.

Color palette

Use these color proportions in any layout or collateral design. Headings and copy may use navy charcoal, white or black. Fire opal, feldgrau and opal are the primary accent colors to support the brand’s navy charcoal. Sunray and fire opal can be used as secondary accent colors as needed.

Primary colors

Lead with navy charcoal and Columbia blue for big brand moments, and lean on sunray for warmth. We incorporate a neutral gray in our primary colors to help our client’s brands shine bright when presented next to ours.

Navy Charcoal
HEX: #2F3F56​
RGB: 47, 63, 86​
HSL: 215.4, 29.3%, 26.1%​
CMYK: 45, 27, 0, 66
Columbia Blue
HEX: #EAEEF4
RGB: 234, 238, 244
HSL: 216, 31.3%, 93.7%
CYMK: 4, 2, 0, 4
Sunray
HEX: #E6AA52​
RGB: 230, 170, 82​
HSL: 35.7, 74.7%, 61.2%​
CMYK: 0, 26, 64, 10​
White
HEX: #FFFFFF​
RGB: 255, 255, 255​
HSL: 0, 0%, 100%​
CMYK: 0, 0, 0, 0​
Neutral Gray
HEX: #E5E5E5
RGB: 229, 229, 229
HSL: 0, 0%, 89.8%
CMYK: 0, 0, 0, 10
Black
HEX: #000000
RGB: 0, 0, 0
HSL: 0, 0%, 0%
CMYK: 0, 0, 0,100

Secondary colors

This secondary palette of vibrant, sophisticated colors gives our core palette more dimension. Be kind to all eyes. Do not use these colors for text; pair them only with white or black text, as outlined below.

Fire Opal
HEX: #EE5D5A
RGB: 238, 93, 90
HSL: 1.2, 81.3%, 64.3%
CMYK: 0, 61, 62, 7
Opal
HEX: #AEC9C3
RGB: 174, 201, 195
HSL: 166.7, 20%, 73.5%
CMYK: 13, 0, 3, 21
Feldgrau
HEX: #40615d
RGB: 64, 97, 93
HSL: 173, 20%, 32%
CMYK: 34, 0, 4, 62

Color Scales

To allow for more flexibility and creativity in designs, we’ve defined a full range of tints and shades for each color in our primary and secondary color palettes. This allows us to ensure there’s an option for every need.

50
#F5F7FA
100
#EAEEF4
200
#D1DAE6
300
#A8BAD1
400
#F5F7FA
500
#58789F
600
#445F85
700
#384C6C
800
#2F3F56
900
#2D394D
950
#1E2633
50
#fdf9ef
100
#faf1da
200
#f5e0b3
300
#eec983
400
#e6aa52
500
#e0922f
600
#d17925
700
#ae5d20
800
#8b4b21
900
#703f1e
950
#3c1f0e
50
#F2F2F2
100
#E5E5E5
200
#CCCCCC
300
#B3B3B3
400
#999999
500
#808080
600
#666666
700
#4d4d4d4
800
#333333
900
#1a1a1a
950
#0D0D0D
50
#fef2f2
100
#fee3e2
200
#fdcccb
300
#faa9a7
400
#f67673
500
#ee5d5a
600
#d92d29
700
#b6221f
800
#971f1d
900
#7d211f
950
#440c0b
50
#f5f8f7
100
#dee9e7
200
#aec9c3
300
#93b5ae
400
#6d948e
500
#e0922f
600
#40615d
700
#364f4c
800
#2e413e
900
#293837
950
#141f1e

Typography

Typography and font choice carry our brand’s tone into the world. Roboto is the workhorse of our brand platform, plus serif and condensed variations of Roboto that may be used.

Headings

Headlines are set in Roboto Serif. When using Roboto Serif Bold to create headings on embedded or printed collateral, always typeset it with optical kerning, set the tracking to 10, and use sentence case. Do not set headlines in all-caps or all-lowercase. Headings may be set in navy charcoal.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Paragraphs

Typeset all text and paragraph text in Roboto Regular. When using Roboto Regular to set text on embedded or printed collateral, always typeset it with optical kerning and set the tracking to 0. Do not set in all-caps, title case or all-lowercase. Roboto has bold and italics options that you can use as desired.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Emphasis

Typeset emphasized text in Roboto Condensed 500. When using emphasis text to set text on embedded or printed collateral, always typeset it with optical kerning and set the tracking to 10. Do not set it in all caps, title caps or all lowercase. An exception to this rule is the buttons on the website.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

System fallbacks

When our brand fonts are not supported, default to these fonts:

  • Presentations: Use Roboto Bold for headlines in Google Docs and Google Slides.
  • If Roboto is unavailable in other applications, use Helvetica Neue and then Arial.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Font scaling

Our type scale is built on three different equations depending on screen or print sizes. The formula was created to provide hierarchy for all types of experiences.

To establish a typography scale, start with the base font size (paragraph text). Then, scale it up by consistently multiplying the font size by a fixed ratio “r.” This approach keeps all of the font sizes in harmony.

  • Desktop: r=1.25 (Major Third)
  • Tablet: r=1.20 (Minor Third)
  • Mobile: r=1.125 (Major Second)

H1

Lorem ipsum dolor

Roboto Serif Bold
65/51/32 px

H2

Lorem ipsum dolor

Roboto Serif Bold
52/42/29 px

H3

Lorem ipsum dolor

Roboto Serif Bold
42/35/26 px

H4

Lorem ipsum dolor

Roboto Serif Bold
33/29/23 px

H5

Lorem ipsum dolor

Roboto Serif Bold
27/24/20 px

H6

Lorem ipsum dolor

Roboto Serif Bold
21/20/18 px

Content

Lorem ipsum dolor sit amet.

Roboto Normal
17/17/16 px

Emphasis

Lorem ipsum dolor sit amet.

Roboto Condensed 500
17/17/16 px

Writing

Our words carry our brand into the world. Doing it well should mean it goes unnoticed because it makes sense and is consistent.

Voice and Tone

The key to sounding like Mammoth Creative is to speak directly to the client, in a voice that they can hear and with words that they can understand. We are humans speaking to humans.

We distinguish ourselves from peers by the way we use design and language to make communication feel easier and more enjoyable. By being deliberate and thoughtful with our words, we encourage people to feel a deeper connection with us and our clients.

While we intend to have a more conversational, human tone in the main; that doesn’t mean that we’re overly informal. Our tone will vary depending on the audience, the context, and the information we need to relay.

Our voice isn’t just an intrinsic part of our service, it’s an external representation of the people behind it. And because of that, we aren’t necessarily making hard rules about what to say or what not to say. But some of them are a little firm.

What we are:

  • Passionate
  • Confident
  • Friendly & Conversational
  • Intelligent
  • Helpful
  • Clear, concise and human

What we're not:

  • Pretentious
  • Boastful
  • Exploitive
  • Condescending
  • Overbearing
  • Distant

Copy principles

We are characterful.

However, we never let character overwhelm content. What we have to say is infinitely more important than being admired for the way in which we say it. If people can’t see the substance through the style, we’ve gone wrong.

We value perspicuity.

We are clear, concise, omit unnecessary words. We make sure that whatever we say has purpose—but aren’t be robotic. We’re not afraid of using contractions because we contain multitudes.

We don’t use cliches and cheap words.

We avoid industry jargon, unnecessary tech-speak and cliches at all costs. We only describe people as Ninjas or Rockstars if that’s their real job. We don’t demean people through our vocabulary of technical terms.

We are considerate and intentional.

We recognise and appreciate the power of language, and use it with eloquence and elegance (while never getting carried away with ourselves).

We are professional and inclusive.

It should go without saying, but it is still worth saying: never use exclusionary terms, cultural appropriation, ableist language, misgendering or anything that could be interpreted as a slur. If we’re ever on the fence about whether something could be taken as offensive, inflammatory or exclusionary, find another word or way of saying it.

We are authentic. We like the people we’re talking to. We’re proud of our work and our client’s work. That itself sets us apart.

Stylization

We use AP style, but we’re willing to creatively bend the rules if it enhances the audience’s experience.

Attributions

A person’s job title is secondary to their name, therefore it should be lowercased minus a few exceptions. Capitalize job titles in quotes and display copy, but not in regular copy.

Kerning & tracking

Roboto and its variations is designed to not be spaced too tightly or loosely. Use optical kerning when possible. We suggest 0–10 tracking when possible.

This is comfortable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

I think we need some space.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Now we're a little too comfortable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Alignment

Whenever possible, left-align copy, even when it’s in a container element. This creates strong vertical alignment with the text, adding legibility, organization and clarity for a user.

This text is aligned left.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

This text is center-aligned.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This text is aligned right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This text is justified.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sentence case

Write content in sentence case. Title case can be used in proper titles and product or service names. Avoid using all uppercase or “all caps” in your typography, especially for paragraphs or text. One exception to this rule is for buttons and emphasis text.

This is easy to read.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is More Difficult to Read.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

THIS IS VERY DIFFICULT TO READ.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Line spacing

Choosing the appropriate leading or line spacing is crucial to reading quality and efficiency. It should never be too open or too tight, which can make reading difficult and unpleasant for the reader.

This is easy to read.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is difficult to read.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is annoying to read.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Em dash

The em dash creates a strong break in the structure of a sentence. Hyphens and en dashes are not appropriate alternatives for em dashes.

Mammoth Creative—a creative services team in Louisville, KY—creates content that connects with people.

Mammoth Creative-a creative services team in Louisville, KY-creates content that connects with people.

Hyphen and en dash

Some examples of correct use of hyphens and en dashes are shown here. An en dash is used for time or number ranges (2022–2023), and the hyphen is for compound terms (well-being).

light-hearted
9:00–5:00
January 1–31
2022–present

light–hearted
9:00-5:00
January 1-31
2022-present

Belt and suspenders

The term “belt and suspenders” refers to using multiple styles to emphasize specific words over others in a selection. To keep messaging clean and efficient, keep styles to a minimum unless necessary.

This is an example without multiple belts and suspenders.

This is an example with multiple belts and suspenders.

If you have any questions

For any brand inquiries contact the following individuals at Mammoth Creative.

Headshot of Dixon Fletcher, Partner at Mammoth Creative Group.

Dixon Fletcher

Get contact information ▸

Headshot of Chad Kantlehner, Partner at Mammoth Creative Group.

Chad Kantlehner

Get contact information ▸

Play Video
Skip to content