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
Secondary Colors
Additional
Typography
Special Text
Heading Special 1
Heading Special 2
Rich Text
Heading H1 - Aa Bb Cc Dd
Heading H2 - Aa Bb Cc Dd
Heading H3 - Aa Bb Cc Dd
Heading H4 - Aa Bb Cc Dd
Heading H5 - Aa Bb Cc Dd
Heading H6 - Aa Bb Cc Dd
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.
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.
Bold - Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur aliquet adipiscing purus vitae, egestas neque diam scelerisque. Nisl interdum.
Buttons
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
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.
Encouraging educational equality
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.
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 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.
Course Styling - For Mentors
Module templates, assets and design tools so you're amazing content can look amazing too.
Document Templates
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.
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>