Penorama Brand Guidelines

Page 1

BRAND GUIDELINES



TABLE OF CONTENTS COPORATE LOGO

COLOR SYSTEM

Primary Logo & Logo Symbol

05

Primary Colors

10

Clear Space & Minimum Sizes

06

Secondary Colors

11

Logo Variations

07

Incorrect Usage

08

TYPOGRAPHY

APPLICATION

Primary Fonts & Secondary Fonts

13

Business Card

16

Typography & Hierarchy

14

Mobile App & Icon Style

17

Website

19

Multi-device

20


CORPORATE LOGO Primary Logo Logo Symbol Clear Space Minimum Sizes Logo Variations Incorrect Usage

01


PRIMARY LOGO Here is our primary full logo. Our logo is the most visible element of Penorama's identity, a universal signature across all medium and platforms for Penorama.

LOGO SYMBOL If it is impossible to use our primary full logo, this logo symbol can be used as a secondary option for representing our brand.

05


CLEAR SPACE When using the both the full logo or the logo symbol, allowing it to "breathe" gives it maximum impact. Wherever possible, allow even more space around the logo than required. The clear space is proportional and is based on the height of certain elements. The construction of clear space is identified on the right.

½x

½x x

½x

½x

½x

½x x

½x

MINIMUM SIZES

Rules As for both the full logo and logo symbol, clear space required around is based on the height of the paper plane element. Leave at least half the height of the paper plane as breathing space as indicated.

½x

Full Logo

Logo Symbok

The minimum width of the full logo on screen and in print are 130px & 34mm respectively, while the minimum width of the logo symbol on screen and in print are 24px & 10mm respectively. These minimum sizes must be adoptet strictly across all applications at all times. 34 mm 130 px

06

10 mm 24 px


LOGO VARIATIONS Our logo has a few dierent variations to fulfil needs regarding dierent situations or under certain restrictions. The correct usage is identified below.

Colored version 1 (General version)

Colored version 2

Grayscale version

This is the general colored version of our logo. It should always be used whenever possible.

Colored version 2 can be used under certain restrictions. For example, on duotone printing materials.

This version should be used ONLY under the restrictions of printing in grayscale.

Overlay on image version

White version

Entire logo should always be solid white colored on darkened hero image.

This version should be used ONLY on vibrant gradient or solid dark colored background.

07


INCORRECT USAGE To maintain the integrity of the logo, and to promote the consistency of the brand, it is important to use the logo as described in our guidelines. The example shown here illustrate possible misuses of our logo, which should be avoided.

08

DON'T rotate the logo

DON'T stretch the logo

DON'T use dierent colors

DON'T rearrange elements

DON'T add drop shadow

DON'T use it over a busy image


COLOR SYSTEM Primary Colors Secondary Colors

02


PRIMARY COLORS Our core color is blue, what gives Penorama personality. We're professional, simple and friendly. When considering our brand's color system as a whole, usage of colors should always follow the hierarchy identified on this page whenever possible. Primary color blue #01 should be used as a dominate color while the other 2 primary colors should be considered complementary to #01.

Primary Color Blue #01 CMYK Pantone RGB Web

: : : :

C078 M028 Y002 K000 7460U R028 G143 B202 #1C8FCA

When using the colors in print, it is important to always seek to use solid Pantone inks. This way, all of our materials will be consistent, and our colors look vibrant. Primary Color Blue #02

Primary Color Blue #03

CMYK Pantone RGB Web

CMYK Pantone RGB Web

Gradient

10

: : : :

C072 M 004 Y011 K000 638U R017 G179 B213 #11B3D5

: : : :

C099 M078 Y006 K000 287M R010 G070 B144 #0A4690


SECONDARY COLORS Our color palette is monochromatic, and in certain instances it can appear too centralized. Therefore we have created 6 additional shades of grey that can be used to support the primary color palette. These secondary colors serve a main purpose of complementing the primary colors only. Secondary colors should always be used with a smaller proportion comparing to primary ones.

CMYK Pantone RGB Web

: : : :

C000 M000 Y000 K010 Cool Gray 2U R230 G231 B232 #808285

CMYK Pantone RGB Web

: : : :

C000 M000 Y000 K020 428U R209 G211 B212 #D1D3D4

CMYK Pantone RGB Web

: : : :

C000 M000 Y000 K030 Cool Gray 5U R188 G190 B192 #BCBEC0

CMYK Pantone RGB Web

: : : :

C000 M000 Y000 K040 877U R167 G169 B172 #A7A9AC

CMYK Pantone RGB Web

: : : :

C000 M000 Y000 K050 Cool Gray 9U R147 G149 B152 #939598

CMYK Pantone RGB Web

: : : :

C000 M000 Y000 K060 424U R128 G130 B133 #808285

11


TYPOGRAPHY Primary Fonts Secondary Fonts Typography & Hierarchy

03


PRIMARY FONTS Our primary typeface is Varela Rounded, used for main title and headings. Fonts Specifications Font Name Style / Family

: :

Varela Rounded Regular

Download Website: https://fonts.google.com/specimen/Varela+Round

SECONDARY FONTS Our secondary typefaces are Roboto Slab & Source Sans Pro, used for sub-headings and body text.

Fonts Specifications Font Name Style / Family

: :

Roboto Slab Thin, Light, Regular, Bold

Varela Rounded Regular

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ~ ! @ # $ % ^ & * ( ) - _ = +

Roboto Slab

Source Sans Pro

Light

Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890~!@#$%^&*()-_=+

1234567890~!@#$%^&*()-_=+

Regular

Semi-Bold

Download Website: https://fonts.google.com/specimen/Roboto+Slab

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Fonts Specifications

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890~!@#$%^&*()-_=+

1234567890~!@#$%^&*()-_=+

Bold

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890~!@#$%^&*()-_=+

1234567890~!@#$%^&*()-_=+

Font Name Style / Family

: :

Source Sans Pro Extra Light, Extra Light Italic, Light, Light Italic, Regular, Regular Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic Black, Black Italic

Download Website: https://fonts.google.com/specimen/Source+Sans+Pro

13


PENORAMA

It simply works... on any paper!

Heading 1 : Roboto Slab, Regular 36 px on screen / 16 pt in print

Paragraph title

Heading 2 : Source Sans Pro, Bold 24 px on screen / 12 pt in print

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et molestie velit. Nam pharetra, nisl sed rhoncus finibus, felis elit vulputate felis, aliquam mattis nisi purus eu quam. Nulla sollicitudin lectus vel nisl euismod eleifend. Donec egestas leo id maximus elementum. Praesent ultricies augue id pretium posuere. Phasellus porta dictum massa non eicitur. Vestibulum quis pretium velit. Maecenas lacinia iaculis velit, quis volutpat ante accumsan et. Curabitur pulvinar elit neque.

Body copy/text : Source Sans Pro, Regular 16 px on screen / 10 pt in print

Paragraph title Ut ornare dignissim ante sagittis hendrerit. Nullam posuere vulputate gravida. Pellentesque fringilla fermentum accumsan. Pellentesque at porttitor est, eget rutrum purus. Duis porttitor quam nisl, tempus laoreet mi consequat at. Maecenas a nulla odio. Etiam sit amet placerat mauris, ac imperdiet erat. Suspendisse rhoncus accumsan eros, vitae aliquam sapien ullamcorper mollis.

Paragraph title Donec in lacus blandit, tristique justo et, vehicula est. Aliquam ac mauris sapien. Duis semper ut mauris vel condimentum. Suspendisse dictum ex nec nunc facilisis sagittis sit amet at urna. Nulla leo libero, mollis sit amet odio ut, blandit venenatis tortor. Cras non urna erat. Suspendisse congue velit at ipsum venenatis dignissim sit amet sed nulla. Proin at ipsum auctor, tincidunt purus mollis, consectetur ex. Suspendisse porta in enim sit amet gravida.

14

Main title : Varela Rounded, Regular 48 px on screen / 36 pt in print

TYPOGRAPHY & HIERARCHY Typography is an important aspect of our brand identity. Our typographic style contributes to our distinctive aesthetic. Typographic hierarchy is a subtle but essential form of visual hierarchy in all types of design project. Typographic hierarchy presents lettering so that the most import words are displayed with the most impact so users can scan text for key information. The typography usage examples demonstrated on this page should be followed to ensure all of our communications appear consistent.


APPLICATION Business Card Mobile App Icon Style Website

04


BUSINESS CARD Here is a demonstration of possible bunisness card design following our branding rules.

Michael Smith Director

M | (415) 333-0333 E | michael@penoram.com W | www.penorama.com

16

14321 Saddle Wood Dr North Little Rock AR, 72117


MOBILE APP Here is a demonstration of possible mobile interface design following our branding rules.

ICON STYLE Here is a demonstration of possible icon design following our branding rules.

App icon

In-app icon s

17


AT&T

3:57 PM

86%

AT&T

3:57 PM

it simply works on any paper

LOG IN

CREATE ACCOUNT it simply works on any paper

Loading page

AT&T

Landing page

3:57 PM

86%

Files

random curves.jpg

random notes.pdf

colorful index.pdf

random drawing.png

File management page

18

86%


WEBSITE Here is a demonstration of possible website interface design following our branding rules.

HOME

ABOUT

PRESS

CONTACT

LOG IN

The first stand alone smart pen

It simply works on any paper Learn more

Stay Connected

Easy Access

Convenient

Lorum Ipsum is the most common dummy text in the design industry since the 1950’s and has been used by designers all around the globe

Lorum Ipsum is the most common dummy text in the design industry since the 1950’s and has been used by designers all around the globe

Lorum Ipsum is the most common dummy text in the design industry since the 1950’s and has been used by designers all around the globe

19


MULTI-DEVICE

20




Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.