Color palette, fonts, and branding assets for Kwork Innovations

Kwork Innovations www.kwork.me
Mosaic Blue
HEX/HTML #006991
CMYK 100 0 0 50
RGB 0 105 145
Pantone Pantone 2384
Pantone Interior 18-4528
Dark Gray
Black Opacity 66%
HEX/HTML #575757
CMYK 0 0 0 80
RGB 87 87 87
Frost Gray
Black Opacity 43%
HEX/HTML #929292
CMYK 0 0 0 55
RGB 146 146 146
Other Silver
Additional colors
Flame Red
HEX/HTML #F44336
CMYK 0 84 76 0
RGB 244 67 57
Warning
Reserve this color for warnings and icons
Poison Green
HEX/HTML #4CAF50
CMYK 70 0 86 0
RGB 76 175 80
Saffron Yellow
HEX/HTML #FF9800
CMYK 0 48 93 0
RGB 255 152 0
Pantone Pantone 116
Accents
These color can be used for extra accents
Cyan Blue (Process Cyan; Dodger Blue)
Pantone Process Cyan
HEX/HTML # 099FE3
CMYK 100 0 0 0
RGB 0 174 239
Textile colors
Fruit of Loom Azure Blue
Tee Jays Azure
Samaino Sky Blue
Use use RGB code 0, 159, 227;
or select Light Blue in Microsoft
Office
Do use cyan-white as the main theme
Do use white or cyan background
Consider cyan blue background
Do use
CMYK as main color code & for print
RGB for Microsoft Office
HTML code for web
Pantone for print on non-paper material
Do prefer tint and shade in favor of saturation and
brightness. Use CMYK to add black (share) or reduce
color to add white
Use RGB color code
for Microsoft Office, or
alternatively Light Blue
preset color
Color names are based on Pantone textile naming scheme

Harabara Calibri (Bold)
Roboto Calibri
Roboto Calibri
Roboto Calibri
Roboto Calibri
Do prefer white with cyan blue background in headings. Alternatively use Cyan Blue, Mosaic
Blue, or Dark Gray titles
Consider using black with transparency instead of gray color - if software allows
transparency in styles - to allow for various background
Frost gray 43% transparent
black
Frost gray 43% transparent
black
Dark gray 66% transparent
black
Dark gray 66% transparent
black
Do not use local adjustments, except for special purposes. Do not use inline style in CSS and
do not use the font, bold etc. button in Microsoft Office. Instead use Styles
<div style=”color:black;”>
Character and paragraph styles in InDesign
Styles in Word
Master slides in PowerPoint
Do define colors and fonts using styles and style classes.
CSS classes
<div class=”product-category featured”>

LOGO
Innovaatiot
The preferred version of the logo is white on cyan blue background. Alternative logos are
below for use on white.
Logo symbol
Black text logo
Mosaic blue logo
Use of this version is not recommended
on new designs.
Use of this version is not recommended
on new designs.
A quick way to add outlines to the logo is to add a white drop shadow with 100% spread and 0 distance

LOGO
Examples of different facial expressions
Upote logo - Outlined
The preferred version of the logo is white on cyan blue background. Alternative logos are
below for use on white.

SLOGANS
StopBoringWebsites - Outlined
STOP
StopBoringWebsites - White
STOP
STOP
StopBoringWebsites - Horizontal

HEADLINE LAYOUTS
Painted lines / block in cyan blue
Stop boring websitesStop boring websites
Start serving online
Dont let your clients see a
boring website
Say no to boring websites
Serve on your website
Let Kwork helps!
Serve on your website
Painted lines / block in mosaic blue
Painted lines / block in mosaic blue Painted lines / block in cyan blue
Multiline white on cyan
"Starting new digital
services has
never been this easy."
Multiline ribbon
The Age of the
Business Card
Websites is ending
Ribbon
Websites that serve
event
Time
to upgrade your
sales online
Painted lines / block in cyan blue
Your competition
is online.
Are you?
Regular multiline text

ONLINE TRANSACTIONS ARE A
GAMECHANGER.
START SERVING ON YOUR
WEBSITE
Swiss type text block
77% of us use Internet
EVERYDAY
Do you serve online yet?
Kwork Innovations helps.
Swiss type text block white on cyan
Jumbo block
New sales opportunities
Stop boring websites
Start serving online
Hero image with painted lines
Hero image with painted lines

APPAREL
STOP
Print size A4
Textile colors
Fruit of Loom Azure Blue
Tee Jays Azure
Samaino Sky Blue

FABRICS
upote.com
STOP
by kwork
www.upote.com
The new way
to be a website
Size: 800 x 2100 mm. Prefer rolluop width 60cm, if available with same size mexhanism, for easy transportation
ROLLUPS
Fabrics can be used as tablecloth, hanged on
the wall or windows. Fabric design for CMYK
print on white canvas. Make another version for
printing on coloured fabric.
Size 1000 x 2500 mm with 50 mm bleed for
cutting.
STOP

EVENT VISUALS
No standard booth design has yet been defined as many of the events allow for differing spaces and locations. A set of elements for improvised setup is provided, as well as
examples from some earlier events. More high-resolution photos from events can be downloaded Flickr page at https://www.flickr.com/photos/132581878@N06/
Please upload your event photos to the Flickr account after color correction and other aspects
Clothing
Preferred setup is to maximize the blue cyan with white. Clothes play an important role. Preferred clothing
is company shirts or white or cyan / light blue formal shirts Other clothing may reflect the events style.
Scarfs and ties may be used to add additional blue cyan accents.
Recommended minimal setup
1x fabric for tablecloth or hanging on the wall + hanging equipment
1x Stop Boring Websites rollup
1-2x additional rollups for a solid blue background
1x tablet or laptop for showing demos
1x 28” PB287Q screen with HDMI cable (verify it fits with laptop)
1x plastic brochure stand
laptop charger + power extension cord (+mobile / table charfer)
adequate number of business cards
one type of brochure or a printed paper
backup 3G / 4G
Additional visibility can be created by bringing multiple PB287Q’s, setting them up in vertical mode and
cloning screen on all of them using HDMI cloner.
upote.com
STOP
by kwork
STOP
STOP
STOP
Add on your site
Ready to fight the evils
of boring web sites?
Join upote.com!
Copy&paste our one-liner to upgrade your web site.
Engaging web sites belong to everyone. Say "no" to
boring web sites! Digital services increase customer
satisfaction, sales and retention. We have seamless
integration with all web sites, fast setup and predictable
costs. Great opportunities for web design agencies, too!
info@upote.com +358 29 007 4070 www.upote.com
social media
events
online orders
reservations recruitment
content
engage
users
3rd-party toolsetc.
Heikki Törrönen
Kwork Innovaatiot Oy
044 323 7001
heikki@kwork.me
heikki.torronen
www.kwork.fi

BUSINESS CARDS
Antti “Andy” Törrönen
Kwork Innovations Ltd.
+358 44 323 7002
antti@kwork.me
antti.torronen
QQ 1438062732
Heikki Törrönen
Kwork Innovaatiot Oy
044 323 7001
heikki@kwork.me
heikki.torronen
www.kwork.fi
Kwork Innovaatiot Oy 029 007 4070
info@kwork.me
www.kwork.fi
#stopBoring
Business card dimensions 90 x 50 mm.. Currently, there is no templates for business card size 85 x 55 mm
STOP

BROCHURES & LETTERHEADS
STOP
STOP
Add on your site
Join upote.com!
social media
events
online orders
content
engage
users
3rd-party toolsetc.
STOP
STOP
Add on your site
Join upote.com!
social media
events
online orders
content
engage
users
3rd-party toolsetc.

WEBSITES AND LANDING PAGES

BANNERS
728 x 90 px
300 x 250px
Ideas for attention value
Eyes (focus stare on product/headline)
Movement hints (gestures, motion blur)
Macots
Big faces
Borders
Padding & margins
Whitespace (empty areas)
Stong headline
Types of contrast (light/dark, big/small etc)
Design principles
Clear headline: one element should
stand out
- Contrast
- Align elements in one corner
- Proximity: put items together; or gather
all whitespace together
- Repetition (e.g. repeat same color; same
shape; same font etc.)
Banner A/B testing ideas
Professional vs unprofessional
Photo vs Illustration
Different colors
Saturation/Contrast/brightness
Borders
Sharp vs blurry
Static vs animated
Ugly vs beatufilu
Static vs interactive
Professional vs authentic image
Different layouts
Different call-to-actions
Image vs text-only
Familiar UI elements vs custom
Positive vs negative
Different typography
Discounts
Trust logos
IAB Internet Advertising Bureau banner
dimensions. Use script in general/scripts to
resize to these dimensions
Some social media dimensions
FB Fan page cover 828x315 (2.63)
FB Profile pic 160x160 (1.0)
FB Shared Link 1200x628 (1.91)
FB Ad size 1200x628 (1.91)
1200x444 (2.70)
FB event ad 1920x1080 (1.78)
FB Carousel ad 1080x1080 (1.0)
Twitter header 1500x500 (3.0)
Twitter website ad 800x320 (2.5)
Twitter lead ad 800x200 (4.0)
Instagram photo 1080x1080 (1.0)
Facebook photo 2048x (1.78)
Twitter photo 1024x512 (2.0)
Elements of a banner
- General style
- Background
- Big, bad, bold promise (dont hesitate to put
the most important thing on must bigger font)
- Attention gathering element (photo?)
- Logo & name of company
- effects
for sales promotions, remember to include:
- Restrictions for the offer (valid until as long
as product last, a date etc.)
- Price
- does price includes VAT
Name Width Height Aspect
Rectangles and Pop-Ups
Medium Rectangle 300 250 1.2
Square Pop-Up 250 250 1
Vertical Rectangle 240 400 0.6
Large Rectangle 336 280 1.2
Rectangle 180 150 1.2
3:1 Rectangle 300 100 3
Pop-Under 720 300 2.4
Banners and Buttons
Full banner 468 60 7.8
Half banner 234 60 3.9
Micro bar 88 31 2.84
Button 1 120 90 1.33
Button 2 120 60 2
Vertical banner 120 240 0.5
Square button 125 125 1
Leaderboard 728 90 8.09
Skyscrapers
Wide skyscraper 160 600 3.75
Skyscraper 120 600 5
Half page ad 300 600 2

USE OF LOGO
Do clearly separate logo from other elements: Use shadow, border, background etc.
Logo must be clearly
visible, and background or
close-by elements should
not distract. Especially
avoid inadvertently
tattooing mascots.
Do not counter colors on white logos. Use outlines or shadows. Some software allow quick
outlining with a shadow with 0px distance and 100% spread and blue cyan color.
Do play with the logo. You may take inspiration from the way Google is playing
with their logo. Partially blending the logo to a background is acceptable.
Changes in facial
expressions bring minor
visual intrest while
keeping same overall
visual style
Symbol logo as PacmanKwork is watching over your
web presence even during
Christmas night
Fits Christmas
decoration?
Hyvaa joulua
ja menestyksekasta
uutta vuotta
Symbol logo likes easter eggs
with Kwork colors
Happy
Easter !

Title Title
A 24pt font needs 6pt on top and bottom, and 12 pt on left
and right. Depending on software this is called spacing or
padding (or margin - which may also mean space outside the
element, while padding means space inside the elements)
Do leave a safe area 1/4 of the height on all sides for logos and headlines
Do not put the logo in a corner without a safe area
A logo needs a “safe area”. Same applies
text. Generally accepted minimum safe
area is 1/4 of height on all sides. Often
left and right may need 1/2 of height.
}
}
1/2 h
h
1/4 h
}
Do keep logo-size visible and in a reasonable size when targetting same target group multiple
times (awareness building). When driving traffic, banner ads are not required to include a logo. If
the logo would be too small to be readable, do not include a logo or choose another logo type (e.g.
logo symbol)

Do use white as/like a color
USE OF COLOR
TextTextText
Do play with cyan and white. Try switching the traditional roles.
Do prefer cyan blue footer and/or header on all designs
Consider blue boxes with white text in covers, headers, and headlines
Materials Materials
Avoid gradients. Try to have a clear border and contrast between blue cyan and white
If gradients should be used, prefer transition to transparent; a shade or tint
of the color; same hue with different saturation or brightness; white or black.
Gradients between colors can be used in special cases.
Text

Avoid unnecessary borders&backgrounds. Prefer a clear contrast from cyan blue to white
Example text Example text
Example text Example text
Udiorepe lectem. Os quatem
autassin rehenescimin earchil
id ulpa velSe omnihictate cum
et rese volor sinvere rspero in
rectin nonse niam nit, iur sum
es sitaturita comnia voluptata
quam quat quid magnam v
Udiorepe lectem. Os quatem
autassin rehenescimin earchil
id ulpa velSe omnihictate cum
et rese volor sinvere rspero in
rectin nonse niam nit, iur sum
es sitaturita comnia voluptata
quam quat quid magnam v
Example text
Udiorepe lectem. Os quatem au-
tassin rehenescimin earchil id
ulpa velSe omnihictate cum et
rese volor sinvere rspero in rectin
nonse niam nit, iur sum es
Do prefer white text with outlines or cyan background
Do use cyan-white as the main theme
Do consider cyan background
Do use white or cyan background

Color palette, fonts, and branding assets for Kwork Innovations

Recomendados

Recomendados

Más contenido relacionado

Similar a Color palette, fonts, and branding assets for Kwork Innovations

Similar a Color palette, fonts, and branding assets for Kwork Innovations (20)

Más de Kwork Innovaatiot

Más de Kwork Innovaatiot (8)

Último

Último (20)

Color palette, fonts, and branding assets for Kwork Innovations