gentux-style-guide
Version:
<http://gentuxdesign.com>
779 lines (676 loc) • 21.5 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Brand Guidelines</title>
<meta name="description" content="">
<link rel="stylesheet" href="/css/all.css">
<!-- <link rel="stylesheet" href="/css/all-menguin.css"> -->
</head>
<nav class="navbar navbar-default navbar-main navbar-with-columns">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-inverted" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="visible-xs navbar-brand" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
</a>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-inverted">
<div class="row">
<div class="col-sm-3 col-lg-2">
<a class="hidden-xs navbar-brand navbar-brand-gt" href="/">
<img class="navbar-brand-logo-gt" src="/images/styleguide-required/gt-logo.svg" alt="Generation Tux Logo">
<img class="navbar-brand-logo-full" src="/images/styleguide-required/generationtux-logo.svg" alt="Generation Tux Logo">
</a>
</div><!-- /col -->
<div class="col-sm-9 col-md-7 col-lg-8">
<ul class="nav navbar-nav">
<li class="h5 active">
<a href="/brand-guidelines/">Guide</a>
</li>
<li class="h5 ">
<a href="/brand-assets/">Assets</a>
</li>
<li class="dropdown">
<a
class="dropdown-toggle h5"
data-toggle="dropdown"
href="#!"
>
Developers <em class="caret"></em>
</a>
<ul class="dropdown-menu" role="menu">
<li class="h5 ">
<a href="/dev-intro/">Intro</a>
</li>
<li class="h5 ">
<a href="/atoms/">Atoms</a>
</li>
<li class="h5 uppercase ">
<a href="/modules/">Modules</a>
</li>
</ul>
</li>
</ul>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<body>
<div class="bordered-bottom bordered-light
pt-5 pt-md-5
pb-4 pb-md-5
mb-5 mb-md-5
">
<div class="container">
<div class="row">
<div class="
col-sm-7 col-sm-offset-1
col-lg-6 col-lg-offset-1
">
<h1 class="h1-lg domd mb-3">Brand Guidelines</h1>
<p>
A introduction to the Generation Tux design language.
</p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div>
<div class="container py-5">
<div class="row">
<div class="col-sm-12 bg-gray-lighter-right-11 py-5">
<h2 class="domd">The Brand</h2>
</div>
</div>
<div class="row">
<div class="bg-gray-lighter col-sm-11 col-sm-offset-1 pb-5">
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<div class="row">
<div class="col-sm-3">
<h3 class="h4 mb-2">Position</h3>
</div>
<div class="col-sm-9 readable-line">
<p>
The Gentux brand can be distilled into two words: Experience & Quality. We are the industry experts that know what we're doing. From the high quality of our suits and tuxes to the peace of mind our customer service provides, we've got you covered and you're going to look great.
</p>
</div>
</div><!-- /row -->
<hr class="mb-4">
<div class="row">
<div class="col-sm-3">
<h3 class="h4 mb-2">Values</h3>
</div>
<div class="col-sm-9 readable-line">
<p>
This is about re-discovery. We are taking tux rental back to the roots of formal wear, bringing craft and quality into the modern world. We know because we’ve done it.
</p>
</div>
</div><!-- /row -->
<hr class="mb-4">
<div class="row">
<div class="col-sm-3">
<h3 class="h4 mb-2">Personality</h3>
</div>
<div class="col-sm-9 readable-line">
<h4>The Sage Artisan</h4>
<p>
Back to the craft of it all. Experienced, strategic, honest, reliable, modern, technical, expert, confident, intelligent, classic, witty.
</p>
</div>
</div><!-- /row -->
<hr class="mb-4">
<div class="row">
<div class="col-sm-3">
<h3 class="h4 mb-2">Visuals</h3>
</div>
<div class="col-sm-9 readable-line">
<p>
Product-focused storytelling, in the midst of something greater. Classic settings: New York City, Chicago, New Orleans, etc.
</p>
</div>
</div><!-- /row -->
</div>
</div>
</div>
</div>
</div>
<div class="container py-5">
<div class="row">
<div class="col-sm-12 bg-gray-lighter-right-11 py-5">
<h2 class="domd">Logotype</h2>
</div>
</div>
<div class="row">
<div class="bg-gray-lighter col-sm-11 col-sm-offset-1 pb-5">
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<div class="row align-vertical">
<div class="col-sm-3">
<h3 class="h4 mb-2">Primary<br>Logotype</h3>
</div>
<div class="col-sm-9">
<img src="/images/brand-assets/brand-assets-svg/black-wordmark-gentux.svg" width="116">
</div>
</div><!-- /row -->
<div class="row my-5">
<div class="col-sm-3">
<h3 class="h4 mb-2">Use</h3>
</div>
<div class="col-sm-9">
<p>
This Logotype is the primary element of the brand and should be used when space and size allows. The logotype is a necessity if it is the only brand element that appears on a Generation Tux piece.
</p>
<p>
The mark may be used in tints and shades of black and white, but attempt to stay away from neutral gray.
</p>
</div>
</div><!-- /row -->
<hr>
<div class="row my-5">
<div class="col-sm-3">
</div>
<div class="col-sm-9">
<p>
Logo assets can be downloaded on the <a href="/brand-assets/">Brand Assets Page</a>.
</p>
</div>
</div><!-- /row -->
</div>
</div>
</div>
</div>
</div>
<div class="container py-5">
<div class="row">
<div class="col-sm-12 bg-gray-lighter-right-11 py-5">
<h2 class="domd">Secondary<br>Marks</h2>
</div>
</div>
<div class="row">
<div class="bg-gray-lighter col-sm-11 col-sm-offset-1 pb-5">
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<div class="row mb-5 align-vertical">
<div class="col-sm-3">
<h3 class="h4 mb-2">Circle<br>Monogram</h3>
</div>
<div class="col-sm-9">
<img src="/images/styleguide-required/gt-logo.svg" width="68">
</div>
</div><!-- /row -->
<div class="row my-5">
<div class="col-sm-3">
<h3 class="h4 mb-2">Use</h3>
</div>
<div class="col-sm-9">
<p>
The circle monogram is primarily for use cases with limited space. But, it can also be used as the primary mark if the logotype is also used in the layout somewhere.
</p>
</div>
</div><!-- /row -->
<hr>
<div class="row my-5 align-vertical">
<div class="col-sm-3">
<h3 class="h4 mb-2">Secondary<br>Logotype</h3>
</div>
<div class="col-sm-9">
<img src="/images/styleguide-required/generationtux-logo.svg" width="240" height="68">
</div>
</div><!-- /row -->
<div class="row my-5 align-vertical">
<div class="col-sm-3">
<h3 class="h4 mb-2">GZ<br>Tag</h3>
</div>
<div class="col-sm-9">
<img src="/images/brand-assets/brand-assets-svg/black-george-tag.svg" height="140">
</div>
</div><!-- /row -->
<div class="row my-5">
<div class="col-sm-3">
<h3 class="h4 mb-2">Use</h3>
</div>
<div class="col-sm-9">
<p>
The secondary logotype and gz tag are for letterhead and other formal uses only.
</p>
</div>
</div><!-- /row -->
<hr>
<div class="row my-5">
<div class="col-sm-3">
</div>
<div class="col-sm-9">
<p>
Logo assets can be downloaded on the <a href="/brand-assets/">Brand Assets Page</a>.
</p>
</div>
</div><!-- /row -->
</div>
</div>
</div>
</div>
</div>
<div class="container py-5">
<div class="row">
<div class="col-sm-12 bg-gray-lighter-right-11 py-5">
<h2 class="domd">Colors</h2>
</div>
</div>
<div class="row">
<div class="bg-gray-lighter col-sm-11 col-sm-offset-1 pb-5">
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<div class="row">
<div class="col-sm-6 copy-to-clipboard">
<h3 class="mb-3">Primary</h3>
<div class="bg-brand-gold color-swatch"></div>
<h4 class="h5 mt-2">Light Gold</h4>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">E6CE9A</div>
</div>
<div class="col-sm-6">
<h3 class="mb-3">Secondary</h3>
<div class="row">
<div class="col-sm-6 copy-to-clipboard">
<div class="bg-brand-gold-dark color-swatch"></div>
<h4 class="h5 mt-2">Dark Gold</h4>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">b0893a</div>
</div>
<div class="col-sm-6 copy-to-clipboard">
<div class="bg-brand-black color-swatch"></div>
<h4 class="h5 mt-2">Brand Black</h4>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">000000</div>
</div>
</div>
</div>
</div><!-- /row -->
<hr class="mt-5 mb-5">
<div class="row">
<div class="col-sm-12">
<h3 class="mb-2"> Grayscale Colors</h3>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-brand-gray-darker color-swatch"></div>
<h4 class="h5 mt-2">Brand Gray Darker</h4>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">404042</div>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-brand-gray-dark color-swatch"></div>
<h4 class="h5 mt-2">Brand Gray Dark</h4>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">888888</div>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-brand-gray color-swatch"></div>
<h4 class="h5 mt-2">Brand Gray</h4>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">cccccc</div>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-brand-gray-light color-swatch"></div>
<h4 class="h5 mt-2">Brand Gray Light</h4>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">e6e6e6</div>
</div>
<div class="col-sm-2 copy-to-clipboard mb-4">
<div class="bg-brand-gray-lighter color-swatch bordered bordered-gray"></div>
<h4 class="h5 mt-2">Brand Gray Lighter</h4>
<div class="clipboard-content clipboard-init small" title="click to copy to clipboard">f8f8f8</div>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Use</h3>
</div>
<div class="col-sm-9">
<p class="readable-line">
The light gold is the primary gold color and should be used in large color blocks like backgrounds or button colors. The dark gold is meant for thin or lighter weight marks like text and logos and can be set on white or dark backgrounds.
</p>
</div>
</div><!-- /row -->
</div>
</div>
</div>
</div>
</div>
<div class="container py-5">
<div class="row">
<div class="col-sm-12 bg-gray-lighter-right-11 py-5">
<h2 class="domd">Typography</h2>
</div>
</div>
<div class="row">
<div class="bg-gray-lighter col-sm-11 col-sm-offset-1 pb-5">
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<div class="row align-vertical mb-4">
<div class="col-sm-3">
<h3 class="h4">Main<br>Headlines</h3>
</div>
<div class="col-sm-9">
<p class="h1 h1-lg domd">Domain Display</p>
</div>
</div><!-- /row -->
<div class="row align-vertical mb-4">
<div class="col-sm-3">
<h3 class="h4">Sub<br>Headlines</h3>
</div>
<div class="col-sm-9">
<p class="h2">Roboto Condensed Bold</p>
</div>
</div><!-- /row -->
<div class="row align-vertical mb-4">
<div class="col-sm-3">
<h3 class="h4">Body<br>Copy</h3>
</div>
<div class="col-sm-9">
<p class="">Roboto Regular</p>
</div>
</div><!-- /row -->
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Quotes</h3>
</div>
<div class="col-sm-9">
<blockquote>
<q class="h3 domd readable-line mb-3">Here in the 21st century, the modern man need never compromise.</q>
<cite class="small text-right">George Zimmer</cite>
</blockquote>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Typesetting</h3>
</div>
<div class="col-sm-9">
<h4 class="mb-3">Typography Scale</h4>
<p class="readable-line">
The Gentux typography system is built on a 1.25 / major 3rd modular scale based on a 16px body copy size.
</p>
<p>
In cases where larger or smaller type sizes are needed, you can reference the full scale at: <a href="http://www.modularscale.com/?16&px&1.25&web&text">http://www.modularscale.com/?16&px&1.25&web&text</a>. While we recommend sticking to the base options, any size picked from this scale will fit the brand standards.
</p>
<p>
Domain Display has been scaled by a factor of 1.2 so it's lighter visual weight balances with Robot Condensed Bold at each heading level.
</p>
<h4 class="mb-3">Letterspacing</h4>
<p>
All uppercase and small body copy typesetting should have some letterspacing. Our base amount is .03em with extra space added at smaller sizes.
</p>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Specs</h3>
</div>
<div class="col-sm-9">
<h4 class="mb-3">Domaine Display</h4>
<table class="table table-hover mb-4">
<thead>
<tr>
<th>Scale</th>
<th>Typeface</th>
<th>Size</th>
<th>Letterspacing</th>
<th>Line Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1</td>
<td>Domaine Display Regular</td>
<td>46.875px</td>
<td>0</td>
<td>1.2</td>
</tr>
<tr>
<td>h2</td>
<td>Domaine Display Regular</td>
<td>30px</td>
<td>0</td>
<td>1.2</td>
</tr>
<tr>
<td>Blockquote</td>
<td>Domaine Display Regular</td>
<td>24px</td>
<td>0</td>
<td>1.2</td>
</tr>
</tbody>
</table>
<h4 class="mb-3">Roboto</h4>
<table class="table table-hover">
<thead>
<tr>
<th>Scale</th>
<th>Typeface</th>
<th>Size</th>
<th>Letterspacing</th>
<th>Line Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1</td>
<td>Roboto Condensed Bold</td>
<td>39.0625px</td>
<td>1.17px / .03em</td>
<td>1.2</td>
</tr>
<tr>
<td>h2</td>
<td>Roboto Condensed Bold</td>
<td>25px</td>
<td>0.75px / .03em</td>
<td>1.2</td>
</tr>
<tr>
<td>h3</td>
<td>Roboto Condensed Bold</td>
<td>20px</td>
<td>0.6px / .03em</td>
<td>1.3</td>
</tr>
<tr>
<td>h4</td>
<td>Roboto Condensed Bold</td>
<td>16px</td>
<td>0.64px / .04em</td>
<td>1.3</td>
</tr>
<tr>
<td>h5</td>
<td>Roboto Condensed Bold</td>
<td>12.8px</td>
<td>0.77px / .06em</td>
<td>1.35</td>
</tr>
<tr>
<td>h6</td>
<td>Roboto Condensed Bold</td>
<td>10.24px</td>
<td>0.82px / .08em</td>
<td>1.35</td>
</tr>
<tr>
<td>p</td>
<td>Roboto Regular</td>
<td>16px</td>
<td>0</td>
<td>1.5</td>
</tr>
<tr>
<td>p - small</td>
<td>Roboto Regular</td>
<td>12.8px</td>
<td>0.128px / .01em</td>
<td>1.7</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Usage</h3>
</div>
<div class="col-sm-9">
</div>
</div><!-- /row -->
<div class="row mb-5">
<div class="col-sm-3">
<h3 class="h4">Hero<br> Headlines<br> with Sub-Head</h3>
</div>
<div class="col-sm-9">
<div class="mb-3">
<div class="h4">Sub Heading</div>
<div class="h1 domd">Main Headline</div>
</div>
<p>
Hero headlines use an h4 set in Roboto Condensed Bold as a sub-head or lead-in heading. The main headline is set as an h1 in Domaine.
</p>
<p>
The sub-head is usually informative while the large headline is more brand voice focused and stylistic e.g. for the customer service webpage, Sub-head: "Customer Service", Main-head: "Are you ready to feel the love?".
</p>
</div>
</div><!-- /row -->
<div class="row mb-5">
<div class="col-sm-3">
<h3 class="h4">Hero<br> Headlines<br> no Sub-Head</h3>
</div>
<div class="col-sm-9">
<div class="mb-3">
<div class="h1 domd">Main Headline</div>
</div>
<p>
If no sub-head or lead-in line is available, hero headlines use Domaine only.
</p>
</div>
</div><!-- /row -->
<div class="row mb-5">
<div class="col-sm-3">
<h3 class="h4">Non-Hero<br> Heading</h3>
</div>
<div class="col-sm-9">
<div class="mb-3">
<div class="h2 domd">Headline Level 2</div>
</div>
<div class="mb-3">
<div class="h2">Headline Level 2</div>
</div>
<p>
Non-hero main headlines (h2s) can be optionally set in Domaine or Roboto Condensed.
</p>
</div>
</div><!-- /row -->
<div class="row mb-5">
<div class="col-sm-3">
<h3 class="h4">Sub-Headings</h3>
</div>
<div class="col-sm-9">
<div class="h3 mb-3">Heading Level 3</div>
<div class="h4 mb-3">Heading Level 4</div>
<div class="h5 mb-3">Heading Level 5</div>
<div class="h6 mb-3">Heading Level 6</div>
<p>
All sub-headings (h3-h6) are set in Roboto Condensed Bold.
</p>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row my-5">
<div class="col-sm-3">
</div>
<div class="col-sm-9">
<p>
Full example breakdown and further technical information can be found in the typography section of the developer docs: <a href="/atoms/#Typography">Web Typography</a>
</p>
</div>
</div><!-- /row -->
</div>
</div>
</div>
</div>
</div>
<div class="container py-5">
<div class="row">
<div class="col-sm-12 bg-gray-lighter-right-11 py-5">
<h2 class="domd">Usage<br>Examples</h2>
</div>
</div>
<div class="row">
<div class="bg-gray-lighter col-sm-11 col-sm-offset-1 pb-5">
<div class="row">
<div class="col-xs-offset-1 col-xs-10">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="/images/brand-assets/usage-examples/homepage.jpg">
<img class="img-responsive" src="/images/brand-assets/usage-examples/visualizer.jpg">
<img class="img-responsive" src="/images/brand-assets/usage-examples/business-cards.jpg">
<img class="img-responsive" src="/images/brand-assets/usage-examples/box.jpg">
<img class="img-responsive" src="/images/brand-assets/usage-examples/social.jpg">
<img class="img-responsive" src="/images/brand-assets/usage-examples/banner-ads-all.png">
<h5 class="mt-5 mb-6">More Coming Soon</h5>
</div>
</div><!-- /row -->
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-12">
<h2 class="context--copy domd">Next Steps</h2>
</div><!-- /col -->
</div><!-- /row -->
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<a href="/brand-assets/" class="
panel-link
link-style-clear d-block
p-4
mb-4
">
<h3 class="h4">View the Assets</h3>
<p>Logos, graphic elements, images, etc.</p>
<div class="text-right"><span class="glyphicon glyphicon-arrow-right"></span></div>
</a>
</div>
</div>
</div><!-- /container -->
</body>
<div class="
container
mt-6
pt-3
pb-6
bordered-top bordered-lighter
">
<div class="row">
<div class="col-sm-12">
<p class="small">Created by the design team at <a href="https://generationtux.com">Generation Tux.</a> Visit us on <a href="https://dribbble.com/gtux">Dribbble</a>.</p>
</div>
</div>
</div>
<script src="/js/app.js"></script>
</html>