Brand Guidelines

A introduction to the Generation Tux design language.

The Brand

Position

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.


Values

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.


Personality

The Sage Artisan

Back to the craft of it all. Experienced, strategic, honest, reliable, modern, technical, expert, confident, intelligent, classic, witty.


Visuals

Product-focused storytelling, in the midst of something greater. Classic settings: New York City, Chicago, New Orleans, etc.

Logotype

Primary
Logotype

Use

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.

The mark may be used in tints and shades of black and white, but attempt to stay away from neutral gray.


Logo assets can be downloaded on the Brand Assets Page.

Secondary
Marks

Circle
Monogram

Use

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.


Secondary
Logotype

GZ
Tag

Use

The secondary logotype and gz tag are for letterhead and other formal uses only.


Logo assets can be downloaded on the Brand Assets Page.

Colors

Primary

Light Gold

E6CE9A

Secondary

Dark Gold

b0893a

Brand Black

000000

Grayscale Colors

Brand Gray Darker

404042

Brand Gray Dark

888888

Brand Gray

cccccc

Brand Gray Light

e6e6e6

Brand Gray Lighter

f8f8f8

Use

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.

Typography

Main
Headlines

Domain Display

Sub
Headlines

Roboto Condensed Bold

Body
Copy

Roboto Regular

Quotes

Here in the 21st century, the modern man need never compromise. George Zimmer

Typesetting

Typography Scale

The Gentux typography system is built on a 1.25 / major 3rd modular scale based on a 16px body copy size.

In cases where larger or smaller type sizes are needed, you can reference the full scale at: http://www.modularscale.com/?16&px&1.25&web&text. While we recommend sticking to the base options, any size picked from this scale will fit the brand standards.

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.

Letterspacing

All uppercase and small body copy typesetting should have some letterspacing. Our base amount is .03em with extra space added at smaller sizes.


Specs

Domaine Display

Scale Typeface Size Letterspacing Line Height
h1 Domaine Display Regular 46.875px 0 1.2
h2 Domaine Display Regular 30px 0 1.2
Blockquote Domaine Display Regular 24px 0 1.2

Roboto

Scale Typeface Size Letterspacing Line Height
h1 Roboto Condensed Bold 39.0625px 1.17px / .03em 1.2
h2 Roboto Condensed Bold 25px 0.75px / .03em 1.2
h3 Roboto Condensed Bold 20px 0.6px / .03em 1.3
h4 Roboto Condensed Bold 16px 0.64px / .04em 1.3
h5 Roboto Condensed Bold 12.8px 0.77px / .06em 1.35
h6 Roboto Condensed Bold 10.24px 0.82px / .08em 1.35
p Roboto Regular 16px 0 1.5
p - small Roboto Regular 12.8px 0.128px / .01em 1.7

Usage

Hero
Headlines
with Sub-Head

Sub Heading
Main Headline

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.

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?".

Hero
Headlines
no Sub-Head

Main Headline

If no sub-head or lead-in line is available, hero headlines use Domaine only.

Non-Hero
Heading

Headline Level 2
Headline Level 2

Non-hero main headlines (h2s) can be optionally set in Domaine or Roboto Condensed.

Sub-Headings

Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6

All sub-headings (h3-h6) are set in Roboto Condensed Bold.


Full example breakdown and further technical information can be found in the typography section of the developer docs: Web Typography

Usage
Examples

More Coming Soon

Next Steps

Created by the design team at Generation Tux. Visit us on Dribbble.