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