nTitle Branding Book by Anna Walo

Branding Book

nTitle

— Branding manual

Table of contents Font styles

Colours palette: primary

Colours palette: secondary

Desktop app grid

Content boxes

Buttons styling

Forms styling

Lines & Dividers

Logo: The pulse

Logo: full-colour variants

Logo: achromatic variants

Logo: safety space

Logo: dos and don’ts

Dotted wave background

Dotted wave background: logo usage 17

nTitle

— Branding manual

Font styles Body copy: »» »» »» »» »»

Open Sans Light 8 px , default line spacing NTL Light grey / White no hyphenation for emphasis: NTL Blue or bold (only for white text)

Title »» dedicated for large headlines, page titles, exceptionally important textelements »» Open Sans Light »» >20 px, default line spacing »» NTL Blue »» minimum space after: 1-2X*

Header »» »» »» »»

Open Sans Light, 10 px, Upddercase NTL Blue space after: 1X*

Subhead »» Open Sans Semi-Bold »» White / NTL Light grey »» space after: 1X*

Text buttons »» Dedicated for text buttons e.g. „read more” »» Open Sans Semi-Bold »» NTL Blue »» left-aligned

Captions, disclaimers »» Open Sans Regular »» 6-7 px »» NTL Moondust

Minor hierarchy text »» Open Sans Regular »» 6-7 px »» NTL Moondust

Example:

Title Header Mus eum hil ipsam este rem hil et aute esequist, conserum entus asi dolo maximpo ressusam faccuptio idus iliti conseri onsequi at facipienis quas reperitatet labores arumqui Subhead sadgvvhtwvhvesebthsrvts hvhbh svcshgvbhsvhahOcculluptatur aut et aliat.Ur, sum emphasis1 tiunt.Mus eum hil ipsam este rem hil et read more

Paragraph spacings »» 2X*

* X always equals the height of uppercase letter of corresponding size. +/- 15% difference is allowed.

nTitle

— Branding manual

Colours palette: primary WEB

CMYK

0/163/241 # 00a3f1

100/0/0/0

9/9/12 # 09090c

86/76/60/91

25/25/33 # 191921

85/76/55/77

55/55/70 # 373746

77/69/47/50

137/137/149 # 898995

48/38/30/10

255/255/255 # ffffff

0/0/0/0

NTL Blue This colour is dedicated for Titles, Main Headers, emphasis, highlited information, primary buttons, secondary buttons borders, part of hover effects. Do not overuse it, as it’s very active.

NTL Black This colour is dedicated for main background

NTL Midnight This is the 1st level background dedicated for content boxes. Never use it for fonts.

NTL Line Grey This is the colour dedicated for dividers, lines, borders, and 2ndlevel content boxes and small objects.

NTL Moondust This is the colour dedicated for secondary-meaning font-styles, captions.

White This is the font dedicated for standard body copy.

nTitle

â&#x20AC;&#x201D; Branding manual

Colours palette: secondary WEB

CMYK

102/102/102 # 777777

0/0/0/60

204/204/204 # cccccc

0/0/0/30

230/0/48 # e60030

0/100/77/0

2/31/79 # 021f4f

100/90/40/40

6/100/170 # 0664aa

90/57/4/0

6/100/170 # 0664aa

90/57/4/0

NTL Logo Grey This is the colour used for logo typography in variants on white background.

NTL Logo Light Grey This is the colour used for logo typography in variants on dark background.

NTL Forbidden Red This is the colour dedicated for displaying error massages only.

NTL Dusk This is the additional colour used in charts, graphs and diagrams.

NTL Dawn This is the additional colour used in charts, graphs and diagrams.

NTL Sun This is the additional colour used in charts & diagrams for dominant object.

nTitle

— Branding manual

Desktop app grid

»» General grid consists on 1 user-board column and 4 equal content columns

nTitle

— Branding manual

Content boxes Sizes: 270 px

Boxes styling:

300 px

»» singular content box dimention is: 270x300 px »» double-width content box dimention is 565x300 px »» horizontal and vertical spaces between boxes equals 25 px

»» rectengular shape with 2 px rounded corners »» NTL dark background

Hovers

25 px

»» Four blue corners

»» recommended inside margins for singulair and double content boxes equal 22 px »» for big content boxes spreading on 4 columns margins should double-sized

300 px

Inside margins:

565

nTitle

— Branding manual

Buttons styling Primary buttons: »» »» »» »» »»

rectengualar with height: at least 35 px Rounded corners: 2 px NTL Blue filling Slight drop shadow hover:

Secondary buttons: »» »» »» »» »» »»

rectengualar with height: at least 35 px Rounded corners: 2 px Transparent filling Stroke: NTL Blue 2 px Slight drop shadow hover:

Button CTA: »» »» »» »» »»

Open Sans Regular, 14 px NTL Light Grey Uppercase Center-aligned White icon right-aligned

Example:

Primary button:

SELL Primary button hover:

SELL Secondary button:

SELL Secondary button hover:

SELL

nTitle

— Branding manual

Forms styling Inactive: »» Height: 60-65 px »» Rounded corners: 2 px, »» 1px stroke NTL Line grey

Inactive:

Hover: »» Height: 60-65 px »» Rounded corners: 2 px, »» 1px stroke NTL Blue

Hover:

Active: »» »» »» »»

Height: 65 px Rounded corners: 2 px, 1px stroke NTL Blue 2px outside glow: • NTL Blue • 2 px • 40% opacity

Active:

Typing

Other fields:

option 1

option 2

nTitle

— Branding manual

Lines & Dividers Line 1: »» Default style for dividers and strokes »» 1 px, NTL Line grey »» Rounded endings for print

Line 2: »» Allowed only for fillable fields stroke »» 1 px, NTL Blue »» Rounded endings for print

Line 1

Line 2

Line 3: »» Allowed only in exceptional cases, for dividing major sections of layout, or stroking important elements that are not repetetive. Shouldn’t be overused. »» 2 px, NTL Blue »» Rounded endings for print

Line 2

nTitle

â&#x20AC;&#x201D; Branding manual

Logo: The pulse

General symbolic nTitle

pulse is the most important graphic element of brand comunication. Here should go short text about, what it symbolises. Hiciis eum que seditiam, iduscipit venderia quaeri as dolupta doluptam quatusci quodi ulpa nemquam volor molupie ndipsam quodi odis doloratiur?

Gradient components # 0d1f32

# 1c3455

# 0077ba

# 3199e2

# 67f1ff

# 3199e2

# 0077ba

# 1c3455

# 0d1f32

10%

25%

35%

50%

65%

75%

90%

100%

nTitle

— Branding manual

Logo: full-colour variants Variant on dark background: »» use this variant wherever possible, as it’s primary one »» text colour: NTL Logo Light Grey »» background colour: NTL Black

Variant on bright background: »» can be used only in special cases, where using black version is impossible »» text colour: NTL Logo Grey »» background colour: NTL White, #ffffff

Placing logo on NTL Wave Theme: »» logo should always be put above the dotted wave »» always put logo on the darkest tone of the bluish gradient background »» the dotted wave should always be on the bottom of the project and — wherever possible — vanish from the top to bottom »» wherever possible, use default backgrounds from corresponding template; avoid dramatic changes of their size or proportions, as only minimal ingeration in the template is allowed »» it is allowed to slightly move swatches inside the gradient bar, unless one doesn’t modify the colours or change their order

nTitle

— Branding manual

Logo: achromatic variants

white on black version

black on white version

nTitle

— Branding manual

Logo: safety space

Safety space: »» minimum safety space equals 1X* »» recommended safety space is larger — 1,5-2X, depending on document size

Logo scaling: »» the smallest allowed logo width for print is: 30 mm (excluding safety space) »» the smallest allowed logo width for web is: 100px (excluding safety space)

X X

X X Minimum safety space is equal of „pulse” height. Shall never be smaller.

* X equals the height of a „Pulse” symbol.

nTitle

— Branding manual

Logo: dos and don’ts Do: »» use Smallcaps case for n T itle name wherever possible »» preserve minimum safety space sorroundung the logo specified on page 14 minimum safe space

minimum safe space

not enough contrast

forbidden pattern

stretched unproportionally

modified composition

Don’t: »» use logo on backgrounds that clearly disturb its readibility, such as patterns, gradients, images and colours that don’t provide enough contrast »» stretch, crop, modify, change composition or colours of the logo in any way

nTitle

— Branding manual

Dotted wave background „Dotted wave” is an additional graphic element that can be used for bringing more variety into design in some print materials or web assets.

General rules: »» for design purposes use the wave only from official templates together with its corresponding background »» the dotted wave should always be placed on the bottom of the project and — wherever possible — vanish from the top to bottom »» do not stretch, crop, modify, change the composition, rotate, or modify colours of the dotted wave in any way »» The wave cannot be used on backgrounds different than the ones from templates »» it should be used with moderation

nTitle

— Branding manual

Dotted wave background: logo usage Placing logo on NTL Wave Theme: »» logo should always be put above the dotted wave »» always put logo on the darkest area of the bluish gradient background »» the dotted wave should always be placed on the bottom of the project and — wherever possible — vanish from the top to bottom »» wherever possible, use default backgrounds from corresponding template; avoid dramatic changes of their size or proportions as only minimal ingeration in the template is allowed »» it is allowed to slightly move swatches inside the gradient bar, unless one doesn’t modify the swatch components or change their order inside the gradient bar »» it is allowed to slightly crop templates in order to adjust them to project size — unless the wave is still placed centrally and vanishes from top to bottom Please note, that especially bluish gradient background is a complex vector file with multiple layers and should be modified only in minimum way.