Our Styleguide

From general colors, to brand guidelines and even branded documents and media kit assets.

How To Use Our Style Guide

To your left, you'll find our beautiful navigation pane. We've divided our style guide into 4 sections: Theme Styles, Web & Design, Courses and last but most certainly not least, partners.

We've created these guidelines to help you use our brand assets, including our logo (for partners and promos) without having to negotiate legal agreements for each use. Do not use our design assets in a confusing way, including suggesting sponsorship or endorsement by The Generation. If you are unsure, please contact us at info@thegeneration.net.

Quick-Reference Kit:

Below, is a quick-reference guide for The Generation's brand. Below, you'll find more comprehensive details, and a collection of branding assets.

Colors

Primary Colors

Salmon
#fc8583
Midnight
#2f2e41
Paragraphs
#69697B

Secondary Colors

Secondary 1
#fff5f5
Secondary 2
#ff6f6c

Additional

Icons
#fc8583
Borders
#fff5f5

Typography

Special Text

Heading Special 1

Display 1 - 45px/1.4- | made coachella

Heading Special 2

Display 2 - 74px/1.115em | general usage

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 45px/1.133em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 35px/1.200em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 25px/1.360em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 23px/1.522em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/1.222em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 16px/1.250em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Default - 14px/1.4-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Large - 2opx/1.4-

Bold - Lorem ipsum dolor sit amet

Bold Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur aliquet adipiscing purus vitae, egestas neque diam scelerisque. Nisl interdum.
Block Quote

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Outline - Small
Default
Button Outline - Default
Large
Button Outline - Large
Small
Button Round - Thin
Default
Button Round - Default
Small
Button Round - Wide

Shadows & Rounding

Round & apply a shadow to any image, CTA wrapper in social media posts or Div Cards on the website. The image below depicts Shadow application by design application. Canva users will be unable to apply shadows.

Rounding: 24pt

Shadow:
Angle = 135° / X and Y values set to equal
Distance = 5 / X and Y values set to 5
Blur = 3 times the distance. In this case, 15px
Color: For a Salmon or white shape, use the same color for the shadow and set the opacity to 15%. For a Midnight colored shape, use Midnight and set its opacity to 45%.

Media Kit

Logos, slogans, design assets galore. Use this guide for design do's and dont's and easy access. You can use the download link to download all assets or scroll to our logo section to download individual logos.

Slogans & Descriptions

1 line description

The Generation is a digital student to student mentorship platform connecting underserved students to world-class resources, immersive learning opportunities and courses for the careers of the future.

Mission statement / slogan

Encouraging educational equality

Legal status

The Generation is a fiscally sponsored non-profit 501(c)3 by the Youth Leadership Incubator dba Hack+.

Logos

Use the white logo on dark or colorful backgrounds. Do not distort the logo if you need it to be smaller, instead, use the icon-stand alone form.

The Generation | White Logo FullThe Generation | White Logo Icon

Our gradient and more aesthetic logos are perfect for any white, or light colored background. The purple logo is specifically for corporate, mentorship or partnership legal documents.

The Generation Gradient Logo Full SalmonThe Generation Salmon Gradient LogoThe Generation Purple Full Gradient LogoThe Generation Purple Gradient Logo

The black logo is an alternative to the Gradient logo. Do not distort the logo if you need it to be smaller, instead, use the icon-stand alone form.

The Generation Black Full LogoThe Generation | black logo | an educational student to student mentorship program

Course Styling - For Mentors

Module templates, assets and design tools so you're amazing content can look amazing too.

Document Templates

Course content map

If you're signed into your company account (you@thegeneration.net) use the following steps:
1. Head to Google Docs
2. Create new > From Template
3. Template gallery > Company wide
4. Select "Course Content Map"

But if that's too tiresome, here's the Course Content Map document link.
• Upper right hand corner "File" > Make A Copy > Rename It & share info@thegeneration.net on the file.

The process

As you probably know by now, we turn your Content Map into our lovely, on-brand Course Platform. We call each section of your Content Map, "Learning Modules".

Module Styling Overview

Text Customization Options


<ct-highlight-salmon>Salmon Highlight<ct-highlight-salmon>
<ct-highlight-midnight>Midnight Highlight<ct-highlight-midnight>
<ct-salmon>Salmon Text<ct-salmon>
<ct-midnight>Midnight Text<ct-midnight>
<ct-pop>Popping Text<ct-pop>
<ct-underline>Underlined Text<ct-underline>
<task> Task Here <task>

Resource Type Options

<r-article>Article<r-article>
<r-file>File Download<r-file>
<r-zip>Zip File<r-zip>
<r-app>Application/Tool<r-app>
<r-podcast>Podcast<r-podcast>
<r-simulation>Simulation<r-simulation>

<r-simulation>
<r-podcast>
<r-app>
<r-zip>
<r-file>
<r-file>