NUEL Design Guidelines

Logomark

The logomark is the full logo without the text. It should be used separately in four cases:

—The background is so busy that the the logotype is no longer legible.

—NUEL branding features prominently elsewhere on the product and the logo is only needed as a “seal of approval.”

—The NUEL is partnered with another organization and both are only using a logomark.

—The NUEL needs to differentiate a product from its first-party offerings or appears as a smaller sponsor.

In general, the logomark should not be used if the words “The NUEL” or “The National University Esports League” do not appear elsewhere. There are also two versions for light and dark backgrounds.

The logotext would be illegible in either version.

Hypothetically working with the University of Cambridge.

Logotext

The logotext is the full text without the logo. It should be used when graphics would be inappropriate or when no logomarks should appear on a product. The logotext uses Roboto Black, downloadable for free and an open source licence on Google Fonts.

Do not recreate the logotext. Instead, use the provided, sized documents for word processors and documents.

Hypothetically working with a cloud PaaS company that does not use a logomark.

Alternatives

“Black and white” alternatives are for grayscale products. Do not use them for other purposes (eg. stylistic) and do not grayscale the full color logos to achieve this effect. There are both full logo and logomark versions.

NUEL's colors are core. Grayscale only when necessary.

Reverse Logo

The reverse logo is exclusively for icon-sized use or as branding piece when the traditional logo also exists elsewhere. Do not use it as a replacement for the NUEL logo or as sole NUEL branding. Do not use it over red or blue backgrounds or with the logotype.

The reverse logo is used here as a desktop background at a NUEL event.

The reverse logo can be used as a favicon or at sizes when the logo border starts blending.

Colors

The NUEL’s colors render graphics and events distinctly NUEL. The brand has used blue and red as its main colors since the beginning. All colors have specific uses and should only be used in that context. Hover states should only be used in conjuction with their primary color.

The logo is comprised of three colors: NUEL blue (#009ac6), navy (#00607d), and red (#c40d0e) alongside black (#000) and white (#fff). On the website and in social media, the NUEL uses dark and light backgrounds with white or black text. Blue is primarily for CTA and links, while red is used sparingly to draw attention certain elements (such as deadlines).

Each region of the United Kingdom has its own color for use in regional tournaments and events. Regional colors should only be used when different regions are playing against or with each other, rather than events within a single region. Colors should be used for titles, graphics, and player names only. The Midlands use brick red, the North and Scotland mountain blue, the Southwest and Wales sea green, and London and surroundings sunset orange.

Copy text should be pure black or white—only subtext or disabled elements should be grey. Grey (#555) and navy should also be used for all dividers and underlines on a product.

In graphics or images, NUEL red and blue can be used to represent teams, opposing sides, or different options.

NUEL Blue

#009AC6
0, 154, 198
HOVER: #20A7CD

NUEL Red

#C40D0E
196, 13, 14
HOVER: #B32A2A

NUEL Navy

#00607D
0, 96, 125
HOVER: #20748D

NUEL Grey

#555555
85, 85, 85
HOVER: #000000

Midlands

#B15B55
167, 56, 47
HOVER: #B15B55

North & Scotland

#5287EC
82, 135, 236
HOVER: #77A6FF

South & West

#1AA6A8
26, 166, 168
HOVER: #33C2C4

London & West

#D46131
213, 97, 49
HOVER: #E17D53

Fonts

The logotext and product text all use Roboto. Roboto Black is reserved for the logotext. Bold through Light weights should be used hierarchically from titles to caption text. All titles underneath H1, regardless of context, should use Roboto. H1-titles can differ and help users better identify the specific game or product they are engaging with.

There are currently no set font sizes for non-website use. Make sure all text is usable and legible: there should be sufficient spacing, contrast, and uniformity across a product.

Below are the title-level exceptions to the Roboto rule:

ALLSTARS: Bebas Nueue

Summer Tournament: Proxima Nova

National Championship: Exo

Overwatch: Big Noodle Tilting

Other Games: Chathura

Typefaces are available for free on Google Fonts.

Copy

The NUEL stands for the National University Esports League. The full name should be used in written communciations or when not addressing players/users. In general, the organization is known as the NUEL and should be referenced as such and pronounced as “the nuwel.”

In products, the “NUEL” should always be capitalized while “the” should be lowercase except at the start of sentences (capital T) and in all-caps contexts. “The” should always be used in front of “NUEL” unless the NUEL is being used as an adjective, ie. NUEL colors, NUEL approach.

All titles except ALLSTARS and NUEL LIVE should be title case, ie. National Championship and Spring Tournament. Social media handles, websites URLs, and any situations where spaces are not appropriate should use “theNUEL”.

NUEL Assets