🔍 Articles in This Section

Please use the following list to see additional internal articles regarding Gem Extension:

• (Internal) Design at Gem
• (Internal) Gem Design Principles
• (Internal) Gem Brand Guide and Resources (📍you are here)
• (Internal) Gem Product Personas
• (Internal) Color

You can download a PDF of this guide in the brand Dropbox folder.

Our brand reflects who we are and how we want our users to feel when they have an experience with us.

When used properly: brand elements like color, language, accents, and typography can help customers (both existing and potential) feel like they’re part of a consistent experience that fits with what Gem is and stands for.

Why does branding matter?

“Branding is the first impression your company will have on a prospect. A strong brand is able to express the importance of their drive, products, mission, policies or services to their customer.”

1. How to use this guide

This guide is a resource for employees to use when working on anything that represents Gem: marketing, swag, social media posts, you name it.

At the end of each section you’ll find a link to download resources.

The best way to use this guide is to read through it in-order. We know not everyone has time to do that though, so in the event you have a specific need you can quickly jump to the relevant section using Dropbox Paper’s built-in table of contents in the left side of your screen. Like so:

2. Values and personality

Why this matters: Our brand values reflect the best of what Gem represents as a business. Our brand personality describes the tone and behavior we use for external communications-an embodiment of our brand values.

When we present ourselves with shared values and personality, we strengthen what it means to be part of this growing company.

Gem’s Brand Values

As a brand, we are modern, efficient, and reliable. We are not lazy, extravagant, or nostalgic. In other words: we value being the smart and obvious solution and not holding ourselves to “the****way things have always been done.”

We work hard to create an absolutely necessary service for talent teams that automates the mundane and makes the complex feel effortless.

We’re constant in our responsiveness to customer needs and requests , and a steady source of reliable solutions for our partners.

Gem’s Brand Personality

• Gem is a champion for recruiters.
• We work hard, with a smile.
• We seek to be always helpful, always valuable, and always innovating.
• We are proud to empower the best organizations.

3. Logos and wordmark

Why this matters: Our brand logo is designed to be clear, modern, and recognizable.

The primary diamond mark is the “Gemlogo.” The Gem logo is the primary brand symbol and accompanies the wordmark.

The logo can be used by itself for applications such as social media avatars, website favicons, and native app icons.

The word Gem is referred to as the “wordmark”. This is standalone text which should never be recreated manually.

The combined Gem logo and wordmark elements are called the “logotype.”

Appropriate logo usage

• Whenever possible the Gem logo should be displayed in the primary brand color, Gem Blue.
• The logo can be placed on both white and black backgrounds, or multi-colored backgrounds.
• Do not stretch, rotate, or change the color or font of the logo.
• Do not emboss or add shadows to the logo.
• Do not change the font, or customize the wordmark, or attempt to recreate it.
• Do not tile or repeat the logo.
• Do not overlay text or imagery over the logo.
• Do not contain the logo in another shape.

Download logo files

→ Use the link below to access the latest logo files

https://www.dropbox.com/work/Gem%20Team%20Folder/Brand/Logos

4. Color

Why this matters: Color distinguishes our brand and helps us create consistent experiences across marketing and product experiences.

Gem’s Brand Color Palette brand uses vibrant colors like Purple, Pink, and Teal, for its visual identity.

The Gem Extended Color Palette represents a spectrum of brand-appropriate colors available for broad use. These colors can be used for product UI, illustrations, editorial content, and other applications.

Color gradients

In addition to our defined color palettes we have a pre-defined set of approved gradients. Dynamic jewel-tone gradients are created by blending brand colors with their nearest siblings.

These gradients should be used sparingly, and typically only in accent elements.

Appropriate color usage

• Colors not found in the Brand or Extended color palettes should not be used.
• Only use Brand Palette colors for branding elements.
• Do not combine or otherwise modify colors within each palette.

Access color codes and guidelines

→ Use the link below to find our latest color styles and guidelines

paper.dropbox.com/doc/Color–A8K4oy~eftFHU9DVDw62Zc1eAg-34l0t9XRN1GLevbv6FqH2

5.Typography

Why this matters: Typography is our system of fonts. Each has been carefully selected to convey the appropriate message or sentiment as a representation of Gem for both customers and non-customers alike.

In most cases you will not need to leverage typography or fonts. In the event you do, please contact someone on the design team or Tanner Christensen.

Graphik is the primary typeface for Gem brand communications. Three typeface weights and their related italics are available for use in Gem brand communications.

Careful attention should be paid to leading, kerning, and tracking when using the Graphik typeface.

Inter compliments the primary brand typeface and should be used for the Gem product UI.

Type guides(howto use the fonts)

To help our team use the best type styles for any occasion, we have defined specific typography guides for use here (both brand and product):

→ paper.dropbox.com/doc/Typography–A8MGqstgmb070vbQCMNMiQu9Ag-pkT95uBYBCUJDRilwBCV

Appropriate typography usage

• IMPORTANT: Licenses are required to use our brand typeface! If you do not have the appropriate license (or not sure if we do) please contact Tanner Christensen.
• Italics and in-paragraph bolding should only be used sparingly for emphasis.

Download font files

→ Use the link below to access the licensed brand fonts

https://www.dropbox.com/work/Gem%20Team%20Folder/Brand/Fonts

6. Elements

Why this matters: As a brand we have specific styles and methods we use to present ourselves. When we use consistent elements across our brand representations, it creates a stronger, cohesive message of who we are and what we’re about.

At Gem, our primary brand element is the cloud. Clouds are ambiguous, flow-like shapes that represent the futuristic, colorful future Gem is bringing to the world of recruiting.

Clouds should primarily be used only as occasional accents in marketing material or in-product messaging.

Appropriate cloud usage

• Only ever use one cloud per page or screen
• Clouds should only ever appear in one of the four corners of a page or screen
• Do not change the colors of the cloud
• Do not repeat usage of the same cloud image across multiple pages or screens of a single experience or piece of marketing collateral

If you are a product designer or communications designer and want to build cloud shapes of your own, please refer to the overview tutorial video here: https://www.dropbox.com/s/61ivbkmi9x9blku/Tutorial%20Designing%20Gem%20Clouds.mov?dl=0

Elements are still WIP but will include:

• Use of imagery and stock photos
• Templates for presentations, social media posts, etc.

Download elements

→ Use the link below to access elements you can use freely

https://www.dropbox.com/work/Gem%20Team%20Folder/Brand/Elements

7. Requests

Need something? Can’t find the assets or information you need here?

→ Contact the design team via Slack or by email!

• Our brand reflects who we are and how we want our users to feel when they have an experience with us.
• 1. How to use this guide
• 2. Values and personality
• Gem’s Brand Values
• Gem’s Brand Personality
• 3. Logos and wordmark
• Appropriate logo usage
• Download logo files
• 4. Color
• Color gradients
• Appropriate color usage
• Access color codes and guidelines
• 5.Typography
• Type guides(howto use the fonts)
• Appropriate typography usage
• Download font files
• 6. Elements
• Appropriate cloud usage
• Download elements
• 7. Requests